:root {

	/* define bootstrap breakpoints */
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;

	/* border radius definitions */
	--btn-border-radius: 25px;
	--card-border-radius: 15px;
	--border-radius: 7px;

	/* define primary/default theme colors */
	--color-primary-500: #075FB6;
	--color-primary-400: #228DF7;
	--color-primary-300: #9CD0F8;
	--color-primary-200: #D7ECFC;
	--color-primary-100: #F2F9FE;

	/* define branding colors */
	--color-tangerine-400: #B24E02;
	--color-tangerine-300: #fd974a; /* CT tangerine brand color */
	--color-tangerine-200: #fdae72;
	--color-tangerine-100: #fdecde;

	--color-black: #262831;
	--color-gray-500: #2F3137;
	--color-gray-400: #36393E;
	--color-gray-300: #5D626B;
	--color-gray-200: #777D89;
	--color-gray-100: #A3A7AF;
	--color-disabled: #CACDD1;
	--color-almost-white: #F5F5F5;
	--color-pure-white: #ffffff;

	/* define alert colors */
	--color-danger-600: #721c24; /* bootstrap dark red */
	--color-danger-500: #cb2431;
	--color-danger-400: #F05B67;
	--color-danger-300: #FFA3AB;
	--color-danger-200: #ffdce0;
	--color-danger-100: #ffeef0;
	--color-warning-500: var(--color-tangerine-200);
	--color-success-500: #2fa165;
	--color-success-300: #cdffd8;
	--color-success-100: #e6ffed;

	--tour-arrow: 15px; /* arrow size */
	--tour-arrow-pad: 15px; /* tour arrow distance from nearest corner */

}

/***************************************************/
/* DEFINE THEME STYLES */
/***************************************************/

body {
	--primary-background: var(--color-primary-100);
	--toolbar-background: var(--color-primary-100);
	--pagenav-background: var(--color-primary-200);
	--border-color: rgba(0,0,0,0.15);
	--text-dark: var(--color-black);
	--text-color: #444;
	--text-muted: var(--color-gray-200);
	--text-light: var(--color-gray-100);
	--text-white: var(--color-almost-white);
	--text-primary: var(--color-primary-500);
	--input-background: var(--color-pure-white);
	--btn-default-bg: transparent;
	--btn-default-color: var(--color-primary-500);
	--btn-primary: var(--color-primary-500);
	--hover-bg-color: var(--color-primary-100);
	--list-group-background: var(--color-pure-white);
	--list-group-text: var(--color-gray-200);
	--card-background: var(--color-pure-white);
	--dialog-footer: var(--primary-background);
}

body.violet-theme {
	--color-primary-500: #5e3680;
	--color-primary-400: #a25ddc;
	--color-primary-300: #b07ddc;
	--color-primary-200: #ccb8dc;
	--color-primary-100: #EAE6EC;
}

body.teal-theme {
	--color-primary-500: #398aa9;
	--color-primary-400: #54cbf8;
	--color-primary-300: #87deff;
	--color-primary-200: #caebf8;
	--color-primary-100: #E7F9FF;
}

body.olive-theme {
	--color-primary-500: #444c33;
	--color-primary-400: #939568;
	--color-primary-300: #b6b88b;
	--color-primary-200: #dce1d4;
	--color-primary-100: #F6FAF1;
}

body.navy-theme {
	--color-primary-500: #043B72;
	--color-primary-400: #075FB6;
	--color-primary-300: #228DF7;
	--color-primary-200: #D7ECFC;
	--color-primary-100: #F2F9FE;
}

body.charcoal-theme {
	--color-primary-500: #24272B;
	--color-primary-400: #535A64;
	--color-primary-300: #717B88;
	--color-primary-200: #B0B6BD;
	--color-primary-100: #E3E5E7;
}

body.white-bg {
	--primary-background: var(--color-pure-white);
	--toolbar-background: var(--color-pure-white);
	--card-background: var(--color-almost-white);
	--list-group-background: var(--color-pure-white);
}

body.light-bg {
	--primary-background: var(--color-almost-white);
	--toolbar-background: var(--color-pure-white);
}

body.theme-bg {
	--primary-background: var(--color-primary-100);
	--toolbar-background: var(--color-pure-white);
	--card-background: var(--color-pure-white);
	--list-group-background: var(--color-pure-white);
	--hover-bg-color: var(--color-almost-white);
}

body.dark-bg {
	--primary-background: var(--color-gray-500);
	--toolbar-background: var(--color-gray-400);
	--pagenav-background: var(--color-primary-200);
	--input-background: var(--color-gray-400);
	--btn-primary: var(--color-primary-500);
	--border-color: var(--color-gray-300);
	--text-color: var(--color-gray-100);
	--text-muted: var(--color-gray-200);
	/* --text-primary: var(--color-primary-200); causes issues with smscreen nav */
	--hover-bg-color: var(--color-gray-300);
	--list-group-background: var(--color-gray-400);
	--list-group-text: var(--color-gray-100);
	--card-background: var(--color-gray-400);
	--dialog-footer: var(--primary-background);
	--btn-default-color: var(--color-gray-200);
	--color-disabled: var(--color-gray-300);
}


/***************************************************/
/* DEFINE BRANDING-SPECIFIC STYLES */
/***************************************************/

.btn-tangerine, .btn-warning {
	border: var(--color-tangerine-300)!important;
	background-color: var(--color-tangerine-300)!important;
}
.btn-tangerine:hover {
	border: var(--color-tangerine-200);
	background-color: var(--color-tangerine-200);
}
.text-tangerine {
	color: var(--color-tangerine-200);
}
.text-dark-tangerine {
	color: var(--color-tangerine-400);
}

/***************************************************/
/* GENERAL / GLOBAL STYLES */
/***************************************************/

/* set html to 101% to avoid display issues */
html { height:101%; }

/* import application font files */
/* @import url('https://fonts.googleapis.com/css?family=Lato|Roboto&display=swap'); */
/* @font-face {
	font-family: Lato;
	src: url(../../fonts/Lato/Lato-Regular.ttf);
	font-weight: normal;
	font-style: normal;
} */

/* @font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
	src: url(/fonts/InterVariable.ttf);
} */

/* set default font and styles for all body content */
body {
	overflow: hidden;
	font-family: "Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
	box-sizing: border-box;
	cursor: default;
	min-width: 320px;
	color: var(--text-muted);
	/* letter-spacing: -0.5px; */
}

/* set the body background for the application, not for reports */
body:not(.report-body) {
	background-color: var(--primary-background);
}

/* the main panel is full screen width on smaller screens */
#mainpanel {
	position:absolute;
	width: 100vw;
}

#wrapper {
	background-color: var(--primary-background);
}

/* all font awesome icons should use pointer cursor */
i[class*="fa-"] {
	cursor: pointer;
}

/* this prevents text from being selected in a bselect widget (especially on dblclick) */
.bselect, .nouserselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* this overrides .nouserselect and allows user to select text within this class */
.selectable {
	-webkit-touch-callout:text;
	-webkit-user-select:text;
	-khtml-user-select:text;
	-moz-user-select:text;
	-ms-user-select:text;
	user-select:text;
	cursor:text;
}

/* this is used to display a "modal" that prevent interaction with the page until an operation is complete */
.startup-overlay {
	position:fixed !important;
	margin:0;
	padding: 70px 0 0 0;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:99999999;
	outline:0;
	background: var(--color-gray-400);
	opacity: 0.8;
	overflow:hidden;
	visibility:visible !important;
	font-size:1.6rem;
	color: var(--color-gray-200);
}

/* used to override/limit the default page width (smaller) */
.limit-width {
	max-width: 700px !important;
}

/* archived and strikeout classes are used by combobox widget */
.archived {
	background-color: #ccc;
}
.strikeout {
	text-decoration: line-through !important;
}

/* allow vertical but not horizontal scrolling on a div */
.scrollable {
	overflow-y: auto;
	overflow-x: hidden !important;
}

/* hide content using the hidden class, equivalent to .d-none */
.hidden {
	display: none;
}

/* center the dropdown consistently at different widths */
#trial-dropdown {
	left: 50%!important;
	top: 50%!important;
	transform: translate(-50%, -50%)!important;
}

/***************************************************/
/* OVERRIDE/SUPPLEMENT BOOTSTRAP OR PLUGIN STYLES */
/***************************************************/

.spinner-border {
	border-color: white;
	border-right-color: transparent;
}

#modal-overlay .progress-bar {
	background-color: var(--color-primary-500);
}

/* apply a darker color text on light background themes and a lighter text on darker background themes */
.auto-text-color {
	color: var(--text-color);
}
.auto-text-color:hover {
	color: var(--color-gray-200);
}
.list-group-item a.auto-text-color {
	color: var(--text-dark);
}
body.dark-bg .auto-text-color {
	color: var(--text-light);
}
body.dark-bg .list-group-item a.auto-text-color {
	color: var(--text-white);
}

/* javascript will automatically set the max-height for .fit-screen-height elements */
.fit-screen-height {
	height:auto;
}

.disabled {
	pointer-events: none;
}

.form-control {
	border: 1px solid var(--border-color)!important;     /* ced4da matches select2 border */
	border-radius: var(--border-radius);
	background-color: var(--input-background)!important;
	color:var(--text-color);
}
.form-control:hover, .form-control:focus, input[type="search"]:focus {
	border: 1px solid var(--border-color) !important;
	outline:none!important; /* flatpickr requires important here */
	box-shadow: none!important;
}

.form-control:disabled, .form-control.disabled {
	background-color: var(--input-background)!important;
	color: var(--text-muted);
}

/* this removes the blue fuzzy border around focused bs elements */
.form-control:focus {
	color: var(--text-color);
	background-color: var(--color-pure-white);
}

/* overrides the default checkbox color of the browser */
input[type=checkbox], input[type=radio] {
	accent-color: var(--color-primary-500);
}

input.form-control, textarea, select {
	background-color: var(--input-background);
}

textarea.form-control {
	border-radius: var(--border-radius);
	border-color: var(--border-color);
}

/* override default column gutter bootstrap */
div[class^="col-"] {
	padding-right: 5px;
	padding-left: 5px;
}

/* override bootstrap container and row */
.container {
	max-width: 1240px;
}
.row {
	margin-right: -5px;
	margin-left: -5px;
}

/* apply our style to header classes */
/* connect card titles use h5, so don't apply this style there */
body:not(.member-connect) h4,
body:not(.member-connect) .h4,
body:not(.member-connect) h5,
body:not(.member-connect) .h5:not(.card-title) {
	font-weight: 200;
	letter-spacing: 1px;
	margin-bottom:10px;
	color: var(--text-muted);
}

.lead {
	color:var(--text-color);
}

.danger-hover:hover {
	background-color: var(--color-danger-500)!important;
	color: var(--color-pure-white)!important;
}

.border-dashed {
	border: 3px dashed var(--color-gray-500)!important;
}

/***************************************************/
/* BUTTONS */
/***************************************************/

.btn {
	border-radius:var(--btn-border-radius);
	cursor: pointer;
	font-size:0.9rem;
}

.btn-normal-size {
	font-size:0.9rem;
}

.btn:focus {
	box-shadow: none !important;
}

/* "blue" buttons */
.btn-primary {
	background-color: var(--btn-primary);
	border: 1px solid var(--btn-default-color);
	color:white !important;
}
.btn-primary:hover {
	background-color: var(--color-primary-400);
	border-color: var(--color-primary-400);
}
.btn-primary:focus {
	background-color: var(--color-primary-400);
	border: 1px solid var(--color-primary-400);
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary.dropdown-toggle {
	background-color: var(--color-primary-500) !important;
	border-color: var(--btn-default-color) !important;
}

/* default buttons */
.btn-default, .btn-danger {
	background-color: var(--btn-default-bg);
	outline: none;
	color: var(--btn-default-color)!important;
	border: 1px solid var(--btn-default-color);
}

.btn-default.focus, .btn-default:focus {
	border: 1px solid rgba(0,0,0,0.3) !important;
}
.btn-default:hover {
	color: var(--color-almost-white)!important;
	background-color: var(--color-primary-400);
	border-color: var(--border-color)!important;
}
.btn-default.selected {
	background-color: var(--color-primary-400);
	border: 1px solid var(--color-primary-400);
	color: var(--color-almost-white) !important;
}
#help-dropdown .btn-default:hover {
	background-color: var(--btn-primary);
}

/* custom outline buttons */
.btn-outline {
	background-color: transparent;
	border: thin solid white;
	color:white;
}

.btn-outline:hover {
	background-color: rgba(255,255,255,0.2);
	color: var(--color-pure-white)!important;
}

body:not(.member-connect) #transpose-btn {
	border-top-left-radius: var(--btn-border-radius) !important;
	border-bottom-left-radius: var(--btn-border-radius) !important;
}

/***************************************************/
/* BUTTON GROUPS */
/***************************************************/

.btn-group {
	width:100%;
	margin-bottom: 7px;
}

body:not(.member-connect) .btn-group .btn {
	/* outline: 2px dotted red; */
	/* padding: 7px;
	margin-bottom:5px; */
	background-color: var(--btn-default-bg);
	color: var(--btn-default-color);
	border: 1px solid var(--btn-default-color);
}

body:not(.member-connect) .btn-group .btn.active {
	background-color: var(--color-primary-500) !important;
	border: 1px solid var(--btn-default-color)!important;
}
.btn-group .btn.disabled, .btn.disabled, .btn:disabled, .btn:disabled:hover {
	background-color: var(--color-disabled)!important;
	color: var(--color-gray-400)!important;
	border-color: var(--color-gray-200)!important;
	cursor:default!important;
}
.btn-group .btn.disabled:hover, .btn.disabled i[class*="fa-"]:hover {
	cursor:default!important;
}
.btn-group .btn:hover {
	background-color: var(--color-primary-400)!important;
	color: var(--color-pure-white)!important;
}
.btn-group-sm .btn {
	height:30px;
	font-size: 0.8rem;
	padding-top: 5px;
}
.btn-group-sm>.btn, .btn-sm {
	border-radius:var(--btn-border-radius);
}
.btn-group .btn.active {
	color:var(--color-pure-white)!important;
}

.btn-danger:hover, .btn-group .btn.btn-danger:hover {
	background-color: var(--color-danger-500)!important;
	border-color: var(--color-danger-500)!important;
	color: var(--color-pure-white)!important;
}

/* remove bootstrap highlight around selected button */
.btn-group-toggle .btn.focus {
	box-shadow: none;
}

/* used by report selection screens */
/* a list-group-item contains a button group */
body:not(.member-connect) .list-group-item.active .btn-group .btn.active {
	border: 1px solid var(--color-almost-white)!important;
	background-color: var(--color-almost-white)!important;
	color: var(--color-gray-400)!important;
	cursor: default;
}
body:not(.member-connect) .list-group-item.active .btn-group .btn {
	border: 1px solid var(--color-almost-white)!important;
	background-color: var(--color-primary-500)!important;
	color: var(--color-almost-white)!important;
}
body:not(.member-connect) .list-group-item.active .btn-group .btn.active:before {
	content: "\f058";
	font-family: "Font Awesome 5 Pro";
}

/* the btn-group hides the last two buttons on smaller screens, so apply border radius to this button */
#connect-preview button[data-type="mobile"] {
	border-top-right-radius: var(--btn-border-radius) !important;
	border-bottom-right-radius: var(--btn-border-radius) !important;
}


/***************************************************/
/* BACKGROUNDS */
/***************************************************/

.bg-primary {
	background-color: var(--color-primary-400) !important;
}
.bg-dark-primary {
	background-color: var(--color-primary-500) !important;
}
.bg-info {
	background-color: var(--color-primary-300) !important;
	border:0;
	color: var(--color-pure-white)!important;;
}
.bg-light-info {
	background-color:var(--color-primary-200);
}
.bg-black {
	background-color: var(--color-black);
}
.bg-white {
	background-color: var(--color-pure-white);
}


/***************************************************/
/* LIST GROUPS */
/***************************************************/

.list-group {
	margin-bottom:7px;
}

.list-group-item {
	cursor: pointer;
	background-color: var(--list-group-background);
	border-color: var(--border-color);
	color: var(--list-group-text);
}

/* change list-group-item background on hover, except when viewing/editing a profile */
.list-group-item:hover:not(.people-field, .no-hover) {
	background-color: var(--hover-bg-color);
	color: var(--list-group-text)!important;
}

.list-group-item.no-hover:hover {
	/* background-color: var(--list-group-background)!important; */
	cursor: default;
}

a.no-hover, .card.no-hover {
	cursor: default;
	background-color: initial!important;
}

/* hidden by default, this can be used with .show-delete-icon-on-hover:hover to show */
.delete-icon {
	cursor:pointer;
	visibility:hidden;
}
.show-delete-icon-on-hover:hover .delete-icon,
.list-group-item:hover .delete-icon,
.list-group-item.active .delete-icon {
	visibility: visible;
}
.list-group-item.active .fa,
.list-group-item.active .far,
.list-group-item.active .fas,
.list-group-item.active .fal  {
	color: var(--text-white)!important;
}

/* override the bootstrap border radius for the top and bottom list-group-item */
.list-group-item:first-child {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}
.list-group-item:last-child {
	border-bottom-right-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

.no-border-radius, .no-border-radius .list-group-item {
	border-radius: 0;
}

/* reports list-group-item */
.report-list-item {
	padding: 2rem 2rem;
}
.report-list-item[data-export="false"] .btn-export {
	display:none;
}

.bselect .list-group-item {
	color: var(--list-group-text);
	text-decoration: none;
}

/* custom sortable list */
.sortable.list-group, .bselect.list-group {
	height:auto;
	overflow-x:hidden;
	overflow-y:auto;
}

/* custom sortable list selected item */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.bg-light.active,
.list-group-item.bg-light.active:hover {
	background-color: var(--color-primary-500) !important;
	border-color: var(--border-color)!important;
	color: white !important;
}

.list-group-item+.list-group-item.active {
	margin-top:0;
	border-top-width: 0px;
}

.people-details-list-group .list-group-item:first-of-type {
	padding-top:25px;
}
.people-details-list-group .list-group-item:last-of-type {
	padding-bottom:35px;
}


/* list group headers */
.list-group-item.list-group-header {
	border-bottom-left-radius: 0!important;
	border-bottom-right-radius: 0!important;
	font-weight: bold;
}
.list-group-item.list-group-header.collapsed {
	border-radius: var(--border-radius)!important;
}
div.collapse .list-group-item:not(.rounded-top):first-of-type {
	border-top-left-radius: 0!important;
	border-top-right-radius: 0!important;
}
.rounded-top-0 {
	border-top-left-radius: 0!important;
	border-top-right-radius: 0!important;
}

.list-group-item-danger {
	background-color: var(--color-danger-200);
	color: var(--color-danger-600)!important;
}
.list-group-item-warning {
	background-color: var(--color-tangerine-200);
	color: var(--color-tangerine-400)!important;
}

.list-group-item .list-group-item-option {
	display: none;
}
.list-group-item.active .list-group-item-option {
	display: inline-block;
}


/***************************************************/
/* SORTABLE */
/***************************************************/

/* sub-categories and tags and processes are displayed as a separate list-group inside the parent list-group-item */
.sortable .list-group-item .list-group .list-group-item {
	background-color: var(--color-primary-100);
}
.sortable .list-group-item:not(.no-hover):hover,
.sortable .list-group-item .list-group .list-group-item:hover {
	background-color: var(--hover-bg-color);
}
.sortable .list-group-item.active:hover {
	background-color: var(--color-primary-400);
}
/* for tags and categories which have list-groups inside of list-group-items for sub-entries */
.sortable .list-group-item .list-group .list-group-item:not(.active):hover {
	background-color: var(--color-almost-white)!important;
	color: var(--list-group-text);
}
.sortable .list-group-item .list-group .list-group-item.active,
.sortable .list-group-item .list-group .list-group-item.active:hover {
	background-color: var(--color-primary-400);
}
.sortable .list-group-item.active .list-group .list-group-item {
	color:var(--text-dark);
}
.sortable .list-group-item.active .text-muted {
	color:white !important;
}
.sortable .list-group-item.active .list-group .list-group-item .text-muted {
	color: var(--text-muted)!important;   /* text-muted color */
}
/* show a drop placeholder when dragging a list item up or down */
.blue-background-class {
	background-color: var(--color-primary-100);
	border: 2px dashed var(--color-primary-300);
}
.sortable-dashed {
	border: 2px dashed var(--color-primary-300);
}
/* list-group sort handles */
.fa-sort, .fa-th, .fa-grip-vertical {
	cursor: grab !important;
	padding-left:5px;
}
.fa-grip-vertical {
	cursor: grab !important;
}


/***************************************************/
/* TEXT COLOR */
/***************************************************/

.text-primary {
	color: var(--text-primary) !important;
}
.text-info {
	color: var(--color-primary-500);
}
.white, .text-white {
	color: var(--color-pure-white)!important;
}
.text-dark {
	color: var(--color-black)!important;
}
.black, .text-black {
	color:var(--color-black);
}
/* mostly used on connect cards */
.bg-primary .text-muted,
.bg-secondary .text-muted,
.bg-dark .text-muted,
.bg-success .text-muted,
.bg-danger .text-muted
.bg-warning .text-muted
.bg-info .text-muted {
	color:#ddd !important;
}

.text-danger {
	color: var(--color-danger-500)!important;
}
.text-danger-hover {
	color: var(--color-gray-100);
}
.text-danger-hover:hover, .list-group-item.active .text-danger-hover:hover {
	color: var(--color-danger-400)!important;
}
.border-danger {
	border-color: var(--color-danger-500)!important;
}
.btn-danger-hover:hover {
	background-color: var(--color-danger-500)!important;
	color: white!important;
	border: thin solid var(--color-danger-500)!important;
}


/***************************************************/
/* ALERTS */
/***************************************************/

/* override bootstrap alert styles */
.alert {
	border-radius: var(--border-radius);
	/* make room for custom icon on alert */
	padding-left:50px !important; 
}
.alert-info {
	/* background-color: var(--color-primary-100); */
	background-color: transparent;
	border: 1px solid var(--color-primary-500);
	color: var(--color-primary-500) !important;
}
.alert-success {
	border: 1px solid var(--color-success-500);
}
.alert-warning {
	border: 1px solid var(--color-danger-500);
	background-color: var(--color-danger-200);
	color: var(--color-danger-500);
}
.alert-danger {
	border: 1px solid var(--color-danger-600)!important;
	background-color: var(--color-danger-100);
}

/* add icon to bootstrap alerts */
.alert-danger:before {
	content: "\f071";
	left:20px;
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	left:20px;
	position:absolute;
	top:10;
}
.alert-warning:before {
	content: "\f06a";
	left:20px;
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	left:20px;
	position:absolute;
	top:10;
}
.alert-info:before {
	content: "\f05a";
	left:20px;
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	left:20px;
	position:absolute;
	top:10;
}
.alert-success:before {
	content: "\f058";
	left:20px;
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	left:20px;
	position:absolute;
	top:10;
}

/* tour tips; each page has a div that can be displayed to give basic instructions */
/* hiding the background style 2024-04-12 */
/*
.alert-tip {
	background-image: url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.08)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path d="M176 0C73.05 0-.12 83.54 0 176.24c.06 44.28 16.5 84.67 43.56 115.54C69.21 321.03 93.85 368.68 96 384l.06 75.18c0 3.15.94 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84L256 384c2.26-15.72 26.99-63.19 52.44-92.22C335.55 260.85 352 220.37 352 176 352 78.8 273.2 0 176 0zm47.94 454.31L206.85 480h-61.71l-17.09-25.69-.01-6.31h95.9v6.31zm.04-38.31h-95.97l-.07-32h96.08l-.04 32zm60.4-145.32c-13.99 15.96-36.33 48.1-50.58 81.31H118.21c-14.26-33.22-36.59-65.35-50.58-81.31C44.5 244.3 32.13 210.85 32.05 176 31.87 99.01 92.43 32 176 32c79.4 0 144 64.6 144 144 0 34.85-12.65 68.48-35.62 94.68zM176 64c-61.75 0-112 50.25-112 112 0 8.84 7.16 16 16 16s16-7.16 16-16c0-44.11 35.88-80 80-80 8.84 0 16-7.16 16-16s-7.16-16-16-16z"/></svg>')!important;
	background-position: -20px 0%;
	background-size:contain;
	background-repeat:no-repeat;
}
*/

#tour-tip {
	position: absolute;
	width: 340px;
	z-index: 5;
	/* background-color: var(--color-primary-300)!important; */
	overflow: visible;
}

#tour-tip.start {
	right: 20px;
	bottom: 50px;
}

#tour-tip .card-img-top img {
	position: relative;
	top: 0;
	left: 0;
	width: 100%!important;
}

#tour-tip::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	z-index: 1;
}

/* side: TOP (card below target) */
#tour-tip[class^="top-"]::after,
#tour-tip[class*=" top-"]::after {
	top: 0;
	transform: translateY(-100%);
	border-left: calc(var(--tour-arrow) - 1px) solid transparent;
	border-right: calc(var(--tour-arrow) - 1px) solid transparent;
	border-bottom: var(--tour-arrow) solid var(--color-primary-400);
}

/* side: LEFT (card to right of target) */
#tour-tip[class^="left-"]::after,
#tour-tip[class*=" left-"]::after {
	left: 0;
	transform: translateX(-100%);
	border-top: calc(var(--tour-arrow) - 1px) solid transparent;
	border-bottom: calc(var(--tour-arrow) - 1px) solid transparent;
	border-right: var(--tour-arrow) solid var(--color-primary-400);
}

/* side: RIGHT (card to left of target) */
#tour-tip[class^="right-"]::after,
#tour-tip[class*=" right-"]::after {
	right: 0;
	transform: translateX(100%);
	border-top: calc(var(--tour-arrow) - 1px) solid transparent;
	border-bottom: calc(var(--tour-arrow) - 1px) solid transparent;
	border-left: var(--tour-arrow) solid var(--color-primary-400);
}

/* bottom side */
#tour-tip[class^="bottom-"]::after,
#tour-tip[class*=" bottom-"]::after {
	bottom: 0;
	transform: translateY(100%);
	border-left: calc(var(--tour-arrow) - 1px) solid transparent;
	border-right: calc(var(--tour-arrow) - 1px) solid transparent;
	border-top: var(--tour-arrow) solid var(--color-primary-400);
}

/* alignment offsets */
#tour-tip.top-left::after, #tour-tip.bottom-left::after {
	left: var(--tour-arrow-pad);
}

#tour-tip.top-center::after {
	left: 50%;
	transform: translate(-50%, -100%);
}

#tour-tip.top-right::after, #tour-tip.bottom-right::after {
	right: var(--tour-arrow-pad);
}

#tour-tip.left-top::after, #tour-tip.right-top::after {
	top: var(--tour-arrow-pad);
}

#tour-tip.left-center::after {
	top: 50%;
	transform: translate(-100%, -50%);
}

#tour-tip.left-bottom::after, #tour-tip.right-bottom::after {
	bottom: var(--tour-arrow-pad);
}

#tour-tip.right-center::after {
	top: 50%;
	transform: translate(100%, -50%);
}

#tour-tip.bottom-center::after {
	left: 50%;
	transform: translate(-50%, 100%);
}

.highlight-modal {
	position: absolute;
	background: rgba(0, 0, 0, .45);
	z-index: 4;
}

.highlight-target {
	position: absolute;
	z-index: 4;
}



.alert-danger .btn-danger {
	color: var(--color-danger-600)!important;
	border-color: var(--color-danger-600)!important;
}
.alert-danger .btn-danger:hover {
	color: var(--color-almost-white)!important;
	border-color: var(--color-danger-500)!important;
}


/***************************************************/
/* MODALS */
/***************************************************/

.modal-content {
	background-color: var(--primary-background);
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important
}
.modal-header {
	border-bottom: 1px solid var(--border-color);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}
.modal-footer {
	background-color: var(--dialog-footer);
	border-top: 1px solid var(--border-color);
	border-bottom-right-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}
.modal-footer .btn-danger {
	border: 1px solid var(--color-danger-500);
	background-color: var(--color-danger-500);
	color: var(--color-almost-white)!important;
}
.modal-body {
	padding-top:24px;
	padding-bottom:24px;
}

/* bootstrap modal backdrop */
.modal-backdrop {
	z-index: 1040 !important;
}

/* override background modal color on bootbox modal */
.bootbox.modal {
	background-color: rgba(50,50,50,0.5);
}
.bootbox-body {
	word-wrap: break-word;
}


/***************************************************/
/* custom bootstrap switch */
/***************************************************/

/* override default "on" colors for switch */
.custom-control-input:checked~.custom-control-label::before {
	border-color: var(--border-color);
	background-color: var(--color-primary-500);
}
.custom-switch-success .custom-control-input:checked~.custom-control-label::before {
	color: #fff;
	border-color: #1b6f2e;
	background-color: #228b39;
}
.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
	background-color: #e9ecef;
	border-color: #adb5bd;
}
.custom-control-input.disabled:checked~.custom-control-label::before {
	border-color: #adb5bd;
	background-color: #e9ecef;
}

/***************************************************/
/* DATATABLES */
/***************************************************/

.datatable tr {
	cursor: pointer;
}
tr.selected {
	background-color: var(--color-primary-500) !important;
	color:white;
}
.dataTables_scrollBody {
	min-height: 35vh;
}
/* pagination buttons for datatables */
.paginate_button .page-link {
	color: var(--color-primary-500);
}
.paginate_button.active .page-link {
	background-color: var(--color-primary-500);
	color:white;
}

/* div.dataTables_scrollHead table.datatable {
	border-top-left-radius: var(--border-radius)!important;
	border-top-right-radius: var(--border-radius)!important;
} */

.table-bordered {
	border: none;
}

.table thead th {
	vertical-align: bottom;
	border-bottom: 2px solid var(--border-color);
}
.table-bordered td, .table-bordered th {
	border: 1px solid var(--border-color)!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	color: var(--text-muted)!important;
	border: 1px solid var(--border-color)!important;
	border-radius: var(--btn-border-radius)!important;
	background:none!important;
	background-color: var(--list-group-background)!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: var(--text-muted) !important;
	background:none!important;
	background-color: var(--hover-bg-color)!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	color: var(--color-almost-white)!important;
	background: none!important;
	background-color: var(--color-primary-500)!important;
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
	color: var(--text-muted)!important;
}

.dataTables_info {
	color: var(--text-muted)!important;
}

#register_filter,
#giving_table_filter,
#pledges_table_filter,
#searchtable_length {
	margin-bottom:5px;
}

.dataTables_wrapper .dataTables_length {
	width:50%;
	display:inline;
	padding-top: 7px;
}
.dataTables_wrapper .dataTables_filter {
	width:50%;
	display:inline;
}

.dataTables_wrapper .dataTables_length select {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 5px;
	background-color: var(--input-background)!important;
	padding: 4px;
	color: var(--text-muted);
}

.datatable thead th:first-of-type {
	border-top-left-radius: var(--border-radius);
}
.dataTable thead th:last-of-type {
	border-top-right-radius: var(--border-radius);
}
.dataTables_scrollBody tbody tr:last-of-type td:first-of-type {
	border-bottom-left-radius: var(--border-radius);
}
.dataTables_scrollBody tbody tr:last-of-type td:last-of-type {
	border-bottom-right-radius: var(--border-radius);
}

table.dataTable thead th, table.dataTable thead td {
	border-bottom: 1px solid var(--border-color)!important;
}

.dataTables_wrapper input[type="search"] {
	border: 1px solid var(--border-color)!important;
	border-radius: var(--btn-border-radius)!important;
	background-color: var(--input-background)!important;;
	color:var(--text-color)!important;
	padding: 4px 8px 4px 35px!important;
}

/* for datatables initialized from bwidgets that have sorting enabled */
/* override the default dt sort icon which has a purple hue */
table.dataTable thead .sorting {
	/* remove the dt image */
	background-image: none!important;	
}
.dataTables_scrollHead table.dataTable thead .sorting.sorting_asc:before {
	/* inject fas fa-sort-up */
	content: "\f0de";
	font-family: "Font Awesome 5 Pro";
	float: right;
}
.dataTables_scrollHead table.dataTable thead .sorting.sorting_desc:before {
	/* inject fas fa-sort-down */
	content: "\f0dd";
	font-family: "Font Awesome 5 Pro";
	float: right;
}


/***************************************************/
/* MISC */
/***************************************************/

.border-bottom, .border-top {
	border-color: var(--border-color)!important;
}

/* solid help icon */
.help-circle {
	color: var(--color-primary-500);
}

/* define tooltip styles */
.tt {
	/* tooltip help icon size */
	font-size:0.8rem;
	cursor: pointer;
	color:#777;
}
.tooltip {
	line-height: normal !important;
}
div[data-toggle="tooltip"], span[data-toggle="tooltip"] {
	cursor:pointer;
}
div.tt-underline[data-toggle="tooltip"], span.tt-underline[data-toggle="tooltip"] {
	text-decoration:underline double;
}

.border {
	border: 1px solid var(--border-color)!important;
}

.input-label {
	padding-top:7px;
}

/* this overrides some bootstrap styles */
.label, label {
	color: var(--text-muted);
	text-align:left;
	display:inline-block;
	margin-bottom:0.1rem;
}

/* the sub text that appears below a label with a bswitch; align below label and use small text */
.bswitch-label-note {
	padding-left: 2.25rem;
	font-size:0.9em;
	padding-top: 0;
}


/* custom bootstrap background colors */
/* bootstrap does have a bg-primary class, for example, but the colors are more washed out */
/* background-danger seems to be the only one in use */
.background-default { background-color: white; color: black; }
.background-primary { background-color: #428bca; color:white; }
.background-success { background-color: #5cb85c; color:white; }
.background-info { background-color: #5bc0de; color:white; }
.background-warning { background-color: #f0ad4e; color:white; }
.background-danger { background-color: #d9534f; color:white; }

/* custom color classes */
.red { color:#d9534f; }
.darkred { color:darkred; }
.black { color:black; }
.green { color:#5cb85c; }


/* override bootstrap bg color for "invited" status badge */
.badge-light {
	background-color:#ddd !important;
}

/* apply the card background and styles */
.card {
	border-radius: var(--card-border-radius);
	background-color: var(--card-background);
	border: 1px solid var(--border-color);
}

/* don't apply the above style to cards on the church connect setup page */
#Card_Container .card {
	color: initial;
	background-color: initial;
	border: none;
}

.dashboard-card, .dashboard-card-deck .card {
	border: 1px solid var(--border-color);
	background-color: var(--card-background)!important;
}

.rounded {
	border-radius: var(--border-radius)!important;
}
.rounded-top {
	border-top-right-radius: var(--border-radius)!important;
	border-top-left-radius: var(--border-radius)!important;
}
.rounded-bottom {
	border-bottom-right-radius: var(--border-radius)!important;
	border-bottom-left-radius: var(--border-radius)!important;
}

.rounded-top-right {
	border-top-right-radius: var(--border-radius) !important;
}

.rounded-bottom-right {
	border-bottom-right-radius: var(--border-radius) !important;
}


/***************************************************/
/* UTILITY/SHORTCUT CLASSES */
/***************************************************/

/* outline classes used for design/debugging */
.outline { outline: 1px solid #ddd; }
.outline-red { outline: 1px dashed red; }
.outline-blue { outline: 2px dashed blue; }
.outline-green { outline: 2px dashed green; }

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

/* prevents underline from displaying on some a tags */
.no-underline, .no-underline:hover {
	text-decoration: none !important;
}

/* used when a slightly smaller font size is needed */
.small, .text-small {
	font-size:0.9em;
}

/* even smaller text */
.text-tiny {
	font-size:0.75em;
}

.cursor-default {
	cursor: default;
}

.cursor-default a {
	cursor: pointer;
}

.pointer, .cursor-pointer {
	cursor: pointer!important;
}


/* used in /views/template/body.php */
/* when activated, a message is displayed along the bottom of the user's screen */
.planned-maintenance-alert {
	padding: 4px;
	font-weight: bold;
	text-align: center;
	z-index: 99999;
	font-size: 0.8rem;
	position:fixed;
	bottom:0;
	background-color:red;
	min-height:32px;
	color:white;
	width: 100vw;
}

.text-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1; /* number of lines */
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/***************************************************/
/* NAVIGATION */
/***************************************************/

body.standard-layout {
	padding-bottom: 40px;
	background: white;
}
.navbar-brand-sm {
	display:inline;
}
.navbar-brand-lg {
	display:none;
}


/* logo bar and top bar header for main application */
/* define top header for main application, check-in, and live mode */
#logo-bar {
	min-height:45px;
	width:100%;
	background-color: var(--color-primary-500);
	color:white;
}

#logo-bar .container {
	min-height:53px;
	padding:5px 0px;
	max-width:1300px; /* body container is 1240px; */
}


/* with-topbar-nav is the legacy style toolbar with main nav options on the top */
body.with-topbar-nav #logo-bar .container {
	margin: 0 auto !important; /* with topbar-nav, center the main content on the page */
	/* padding: 7px 0 0 0!important; */
}
body.with-topbar-nav #logo-bar .container, body.with-sidebar-nav #logo-bar .container {
	padding: 5px 0 0 0!important;
}

#page-bc {
	font-size: 1.1rem;
	letter-spacing: -0.1px;
	color: var(--color-primary-500);
}

body:not(.with-topbar-nav) #page-bc {
	max-width: 1160px;
	margin-left: 2.5rem !important;
}

body.with-topbar-nav #page-bc {
	max-width: 1240px;
	margin: 0 auto;
	padding-left:40px;
	padding-top:12px;
}

body.dark-bg #page-bc {
	color: var(--text-muted);
}

#logo-bar .dropdown {
	margin-top:3px;
}

/* styles for Help button and dropdown */
#help-button, #upgrade-button, #trial-button {
	min-width: 34px;
	margin-top:6px;
}
#help-button {
	border-radius: var(--btn-border-radius);
}
.help-dropdown:not(.hidden) {
	padding:2rem;
	min-height: 200px;
	z-index: 9999999;
}
.help-dropdown {
	width:100% !important;
	background-color: var(--color-primary-100);
	color: var(--color-primary-500);
}
.help-dropdown .btn-success {
	border-color: white !important;
}
#help-dropdown .list-group-item:hover {
	background-color: var(--hover-bg-color)!important;
}
#help-button .fal {
	color:white;
}
.help-topic-link {
	text-decoration: none !important;
	color: #777 !important;
}

#trial-dropdown {
	width:100%; /* changed to 75% using media queries for larger screens */
	max-width:850px;
}

.dropdown-item.active, .dropdown-item:active {
	color: var(--color-pure-white);
	text-decoration: none;
	background-color: var(--color-primary-500);
}

.dropdown-item.disabled {
	background-color: var(--color-disabled);
	pointer-events: none!important;
}

/***************************************************/
/* SMALL SCREEN MENU STYLES */
/***************************************************/

#smscreen-nav {
	height: 50px;
	width:100%;
}

body:not(.member-connect) #smscreen-nav {
	background-color: var(--pagenav-background);
	color: var(--color-pure-white);
	border-bottom: 1px solid var(--border-color) !important;
}

#smscreen-nav .smscreen-nav-button {
	display:none;
}

#smscreen-nav .smscreen-nav-button.smscreen-nav-button-active {
	display:inline;
}

#smscreen-menu-toggle {
  position: relative;
  left:-10px;
}

/* small screen menu hamburger */
.hamburger-menu {
	width: 20px;
	height: 3px;
	background-color: var(--color-primary-500);
	margin: 3px 0 3px 0 !important;
	transition: 0.4s;
}
/* connect page version */
.connect-hamburger-menu {
	background-color: var(--text-muted);
}
/* hamburger menu bars and animation */
/* Rotate first bar */
.change .bar1 {transform: rotate(-45deg) translateX(-3px) translateY(6px);}
/* Fade out the second bar */
.change .bar2 {opacity: 0;}
/* Rotate last bar */
.change .bar3 { transform: rotate(45deg) translateX(-2px) translateY(-6px);}

/* apply .dropdown-toggle style to pagenav-link items in the small screen dropdown */
#sm-pagenav-dropdown .pagenav-link {
	display: block;
	width: 100%;
	padding: .75rem 1.5rem;
	border-bottom: 1px solid var(--border-color)!important;
	clear: both;
	font-weight: 400;
	color: var(--text-color);
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	text-decoration: none;
	cursor: pointer;
}
#sm-pagenav-dropdown .pagenav-link:last-of-type {
	border-bottom:none!important;
}
#sm-pagenav-dropdown .pagenav-link:hover {
	background-color: var(--hover-bg-color)!important;
}

#sm-pagenav-dropdown .pagenav-link:first-of-type:hover {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}
#sm-pagenav-dropdown .pagenav-link:last-of-type:hover {
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.dropdown-menu {
	background-color: var(--list-group-background);
	box-shadow: 0 3px 6px rgba(0,0,0,0.1);
	padding:0;
}
.dropdown-menu a {
	color: var(--text-color);
}
.dropdown-menu a:hover {
	background-color: var(--hover-bg-color);
	color: var(--text-color);
}

/***************************************************/
/* RIGHT SIDE MENU */
/* this is used by the application for small screens (sliding menu),
large screens (when left toolbar is enabled) and church connect */
/***************************************************/

/* container for the left menu */
#sidebar-nav {
	width: 100%; /* media query below changes this to 320px on larger screens */
	background-color: var(--primary-background) !important;
	border-right: 1px solid var(--border-color);
	position:absolute;
	overflow-y: hidden !important;
	height: calc(100vh - 95px) !important;
	left:-100%;
	z-index: 999;
	margin-top: 0;
}

/* these are the two offscreen menus in Church Connect */
#connect-sidebar-nav, #connect-links {
	width: 100%; /* media query below changes this to 320px on larger screens */
	background-color: rgba(255, 255, 255, 0.97) !important;
	position: fixed; /* this is needed on ios to prevent horizontal scrolling beyond the screen width */
	overflow-y: auto !important;
	height:100vh;
	right: -100%;
	border-left: 1px solid var(--border-color);
	z-index: 97;
	transition: right 0.25s ease-in-out;
}

#connect-sidebar-nav .list-group-item, #connect-links .list-group-item {
    background-color: inherit !important;
}

#sidebar-nav .list-group {
	overflow-y:auto !important;
	padding-bottom:100px !important;
	height:calc(100vh - 95px) !important;
}

#connect-sidebar-nav .list-group, #connect-links .list-group {
	overflow-y:auto !important;
	height:100%!important;
	width: 100%!important;
}

.sidebar-nav-icon {
	width:40px!important;
}

#sidebar-nav .menu-label, #connect-sidebar-nav .menu-label, #connect-links .menu-label {
	display:inline-block;
	font-size:0.9rem;
}

#sidebar-nav .list-group-item, #connect-sidebar-nav .list-group-item {
	padding: 20px;
	cursor:pointer;
	background-color: var(--toolbar-background)!important;
	color: var(--text-muted);
	border-radius:0;
}

#sidebar-nav .fal, #connect-sidebar-nav .fal {
	font-size: 1rem;
	width:100%;
	text-align:center !important;
	display: inline;
}

#sidebar-nav .list-group-item.active, #connect-sidebar-nav .list-group-item.active {
	background-color: var(--color-primary-500) !important;
	border-top: 1px solid var(--border-color) !important;
	border-bottom: 1px solid var(--border-color) !important;
	border-right: 1px solid var(--border-color) !important;
}

#sidebar-nav .list-group-item.active span, #connect-sidebar-nav .list-group-item.active span {
	color: var(--color-pure-white);
}

/* when hovering over a left sidebar menu item, ensure the text is white */
#sidebar-nav .list-group-item:hover, #connect-sidebar-nav .list-group-item:hover {
	color: var(--text-white)!important;
}

/* main ChurchTrac application side nav menu */
#wrapper.toggled #sidebar-nav {
	left:0;
}

/* Church Connect: the .toggled class indicates that the menu slidr is open / displayed */
#wrapper.toggled #connect-sidebar-nav, #connect-links.toggled  {
	right: 0;
}

/* prevent scrolling on the main panel when the sidebar-nav is open */
#wrapper.toggled #mainpanel {
	overflow-x:hidden!important;
	overflow-y:hidden!important;
}

/* on smaller screens, add hover effect to menu items */
#wrapper.toggled #sidebar-nav a.list-group-item:not(.active):hover, 
#wrapper.toggled #connect-sidebar-nav a.list-group-item:not(.active):hover {
	background-color: var(--color-primary-400) !important;
	color:var(--color-pure-white);
}

/* the block above the side menu that appears to be the continuation of the toolbar */
#sidebar-menu-placeholder {
	height:40px;
	background-color:var(--pagenav-background);
	border-bottom: 1px var(--border-color) solid;
}

/* for side menu, this is needed to fill the subnav gap on menu open/hover */
#sidebar-menu-placeholder {
	display:none!important;
	position:absolute;
	top:53px;
	left:0;
	width:100px;
	z-index:1;
}

body.with-topbar-nav #sidebar-menu-placeholder {
	display: none!important;
}

@media (min-width: 992px) {
	#sidebar-menu-placeholder {
		display: inline !important;
		width: 80px;
		/* outline: thin blue solid; */
	}
}

@media (min-width: 1400px) {
	#sidebar-menu-placeholder {
		display: inline !important;
		width:280px;
		/* outline: thin red solid; */
	}
}

/***************************************************/
/* PAGE NAV MENU */
/***************************************************/

#pagenav {
	height:auto;
}

#pagenav .pagenav-link {
	padding: 4px 20px;
	text-transform: uppercase;
	color: var(--color-primary-500);
	text-decoration: none;
	text-align: left !important;
	border-radius: var(--btn-border-radius);
	cursor: pointer;
}

#pagenav .pagenav-link:not(.dropdown-item) {
	margin: 0 2px;
	font-weight: 400;
}

body:not(.with-topbar-nav) #pagenav .pagenav-link:not(.active):not(.dropdown-item):hover {
	background-color: var(--color-primary-400);
	color: white;
	border-radius: var(--btn-border-radius);
}

#pagenav .pagenav-link.active {
	color: var(--color-primary-500);
	font-weight:500;
}

/***************************************************/
/* DEFINE CONTENT PAGES for XS and SM screens */
/***************************************************/

#page-wrapper {
	width:100%;
	overflow-y: auto;
	overflow-x: hidden !important;
	height: calc(100vh - 85px);
	padding-bottom: 20px;
	/* border-left: 1px solid var(--border-color); */
}

/* apply background color main application only, not Connect; it is set based on user selection */
body:not(.member-connect) #page-wrapper {
	background-color: var(--primary-background);
}

body.member-connect #page-wrapper {
	border-left: none;
}

body.with-topbar-nav #page-wrapper {
	height: calc(100vh - 92px) !important;
}

body.checkin-mode #page-wrapper {
	height: calc(100vh - 50px) !important;
}

#page-container {
	min-height: 350px;
	display: flex;
	align-items: stretch;
	max-width: 1240px;
	margin: 0 auto;
	min-width: 320px;
}

body.member-connect #page-container {
	min-width: unset;
}

#intro-container {
	max-width: 1240px;
	margin: 0 auto;
	min-width: 320px;
}

.application-page {
	display: none;
	padding-top:20px;
}

.application-page.current-page {
	display: inline-block;
}

/* prevent screen interaction when side menu is open */
#menu-overlay {
	position: absolute !important;
	margin: 0;
	padding: 0;
	height:0;
	width:0;
	z-index: 99;
	outline: 0;
}

#wrapper.toggled #menu-overlay {
	background: rgba(0,0,0,0.2);
	height:110%;
	width:110%;
	transition: opacity .25s ease-in;
	margin-left: -15px;
	margin-top: -15px;
}

/***************************************************/
/* MODALS */
/* this also uses media queries (below) */
/***************************************************/

#modal-overlay, #bfallr-overlay {
	position: absolute !important;	/* scroll with page */
	margin: 0;
	padding: 0;
	top:-1000px;
	left:-1000px;
	z-index: 100;
	outline: 0;
	background: rgba(0,0,0,0.5);
	height:1px;
	width: 1px;
}

#modal-overlay.ontop {
	z-index: 9999!important;
}

#modal-overlay.open, #bfallr-overlay.open {
	height:200%; /* 200% here gives allowance for ios modal being cut off because of ios css bug */
	width:100%;
	top:0px;
	left:0px;
}

#modal-overlay.clear {
	height:100%;
	width:100%;
	top:1px;
	left:1px;
	background: rgba(0,0,0,0);
}


/***************************************************/
/* BFALLR DROPDOWN */
/***************************************************/

#bfallr {
	position: absolute;
	top: -1999px;
	left: 0;
	right: 0;
	z-index: 101;
	margin: 0 auto;
	min-height:200px;
	height: auto;
	max-height: 94%;
	width: 97%;
	background-color: var(--primary-background);
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
	transition: top .25s ease-out;
	/* overflow: hidden; */ /* this causes issues when opening a large dialog on top of bfallr */
}
#bfallr:not(.bfallr-fullscreen) {
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}
#bfallr-content-wrapper {
	overflow-y: auto;
	height:auto;
	max-height: calc(100vh - 90px);
	min-height:140px;
}
/* bfallr fullscreen mode removes footer buttons and makes #bfallr-content non-scrollable */
#bfallr.bfallr-fullscreen {
	max-height: 100%;
	height: calc(100% - 72px);
	width: 100%;
}
#bfallr.bfallr-fullscreen #bfallr-content-wrapper {
	height:100%;
	max-height: 100%;
}
#bfallr.open {
	top: 0px !important;
}
.bfallr-button,
.dialog-button {
	margin-left: 5px;
}
#bfallr-footer-wrapper {
	border-top: 1px solid var(--border-color);
	background-color: var(--dialog-footer) !important;
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}
#bfallr-footer {
	position: relative;
	bottom: 0;
	height: 70px;
	width: 100%;
	padding:17px;
}
/* for list-groups inside bfallr, only show the handle on hover */
#bfallr-content .list-group-item .handle {
	visibility: hidden;
}
#bfallr-content .list-group-item:hover .handle {
	visibility: visible;
}


/***************************************************/
/* RIGHT SLIDR WIDGET */
/***************************************************/

#slidr {
	width:100%;
	height:100%; /* was 100vh, but there are issues with iOS */
	position:absolute;
	z-index: 1040;
	background-color: var(--primary-background);
	border-left: 1px solid var(--border-color);
	top:0;
	right:-480px;
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

#slidr-content {
	height: calc(100% - 70px); /* ios15 changed from 100vh to 100% */
	overflow-y: auto;
	overflow-x: hidden;
	margin-bottom: 100px;
	padding-bottom: 120px!important;	/* added iOS 15 */
}

#slidr.open {
	right:0;
	transition: right 0.25s ease-out;
}

#slidr-overlay {
	position: fixed !important;	/*scroll with page */
	margin: 0;
	padding: 0;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index: 103;
	outline: 0;
	background: rgba(0,0,0,0.5);
	border: 1px solid rgba(0,0,0,0.5);
}

@supports (-webkit-overflow-scrolling: touch) {
	/* CSS specific to iOS devices only */
	#slidr-overlay {
		background: rgba(251,251,251,1);	/* remove transparency */
	}
}

#slidr-footer {
	background-color: var(--dialog-footer);
	position: absolute;
	bottom: 0;
	height: 70px;
	width: 100%;
	padding:15px;
	border-top: 1px solid var(--border-color);
	border-bottom-left-radius: var(--border-radius);
}

#slidr-content .hide-in-slidr {
	display: none;
}


/***********************************/
/* HOME SCREEN CSS */
/***********************************/

/* home screen dashboard announcements */
.carousel-indicators {
	top:0;
	bottom:auto;
}
.carousel-indicators li {
	background-color:var(--color-tangerine-300);
	width:10px;
	height:10px;
	border:none;
	border-radius:25px;
	position: relative;
	top:10px;
}

.comment, .sms-message {
	border-radius: var(--card-border-radius);
	font-size:0.95em;
	color:white;
	line-height:20px;
	min-width:35%;
	max-width:85%;
}
.subtask input:disabled {
	background: transparent !important;
	text-decoration: line-through !important;
}
#tasknote textarea {
	background: var(--color-primary-100);
	padding:5px 5px 2px 5px;
	height:30px;
	min-height:30px;
	max-width:100%;
	min-width:100%;
	width:100%;
	overflow-y: hidden;
	border:none;
}
/* #taskdetails {
	min-height: 350px;
} */

.task-list-item.active input, .task-list-item.active .far {
	color:white;
}

.task-checkbox {
	font-size: 1.4rem;
	color: var(--text-color);
	margin-top:3px;
}

/* used for displaying tasks on home screen */
.priority-critical .fal {
	color:red !important;
}
.selected .priority-critical .fal {
	color:#ed484b !important;
}
.priority-high .fal {
	color:orange;
}
.selected .priority-high .fal {
	color:#fb7546 !important;
}
.priority-medium .fal {
	color: var(--color-primary-300);
}
.selected .priority-medium .fal {
	color: var(--color-primary-300) !important;
}
.priority-low .fal {
	color: white;
}
.selected .priority-low .fal {
	color:#eee !important;
}
.selected .star {
	color:white;
}

.dashboard-card:hover {
	background-color: var(--hover-bg-color);
}

.dashboard-card {
	min-height:150px;
}
.dashboard-card h1, .dashboard-card div.h1 {
	font-size:3rem !important;
	color:var(--text-primary);
}
.dashboard-card .card-title {
	font-size:0.75rem;
}

/* this is used for inputs without borders and with transparent backgrounds */
/* tasks use this class */
.inputbox {
	margin: 0;
	padding: 5px 10px !important;
	background: transparent;
	border: 0 transparent !important;
	outline: none;
	border-radius: var(--border-radius);
	color: var(--text-muted);
}
.inputbox:focus {
	background: var(--color-primary-100);
}



/***********************************/
/* GIVING SCREEN CSS */
/***********************************/

#GivingDateList {
	max-height: 400px;
	overflow-y: auto;
}

/* #giving-entries div:not(.dataTables_length, .dataTables_filter), #giving-entries table {
	width:100%!important;
} */

#giving_table_fallr.table td, #giving_table_fallr.table th {
	padding:0.25rem;
}

.table {
	color: var(--text-dark);
}

.table thead td {
	border-top: none!important;
	border-bottom: none!important;
}

.table thead td:last-of-type {
	border-right: none!important;
}

/***********************************/
/* PEOPLE SCREEN CSS */
/***********************************/

.parent-tag.inactive-tag, .child-tag.inactive-tag {
	color:#ccc;
}
.parent-tag.inactive-tag.active, .child-tag.inactive-tag.active {
	color:#eee;
}

.add-subtag-link, .add-subcategory-link {
	display:none;
}
.parent-tag.active .add-subtag-link, .parent-tag.active .add-subcategory-link {
	display:inline-block;
}

.note-editable {
	/* make summernote editable on safari */
	-webkit-user-select: initial;
	user-select: initial;
	border: 1px solid var(--border-color)!important;
}

/* for native dropdown buttons, summernote has an additional caret that adds unnecessary space, so it gets removed here */
.note-icon-caret:before{
	content:''
}

.note-editor.note-frame {
	border: 0!important;
}

.note-toolbar {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	border: 1px solid var(--border-color)!important;
}
.note-statusbar {
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	border: 1px solid var(--border-color)!important;
}

.photo-upload {
	max-width: 350px!important;
	/* min-height:160px!important; */
}

.photo-upload:hover {
	background-color:var(--color-almost-white);
	cursor: pointer;
}

#indvpic, #familypic {
	text-align: center;
}

#indvpic img, #familypic img {
	border-radius: 10px;
}

#indvpic.view-mode, #familypic.view-mode {
	position:absolute;
	z-index:5;
	right:0px;
	top: 10px;
	padding-top:0;
	padding-left: 25px;
	padding-right: 15px;
	padding-bottom: 35px;
}

#indvpic.edit-mode:not(.member-access),
#familypic.edit-mode:not(.member-access) {
	margin: 20px auto !important;
}
#indvpic.edit-mode.member-access,
#familypic.edit-mode.member-access {
	margin-bottom: 20px!important;
	margin-top:-20px!important;
}

.picture-individual, .picture-family {
	max-height: 165px;
	max-width: 195px;
	border: 0;
	box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.member-access .picturediv {
	padding-top: 15px;
}

.underline {
	text-decoration: underline !important;
}
underline-on-hover:hover {
	text-decoration: underline !important;
	cursor: pointer;
}

.large-text {
	font-size: 1.20rem !important;
}

/* PEOPLE SCREEN LIST OF NAMES */
#list_of_names {
	/* height: calc(100vh - 370px); */
	min-height: 10px;
	overflow-y:auto;
	overflow-x:hidden;
}
.name_row {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* checkbox next to names */
/* fal is used to show an empty checkbox */
/* fas is used for the "checked" state */
.name_row .fal, .name_row .fas {
	font-size: 1.2rem;
}
.name_row .fas {
	color: var(--color-primary-500);
}
.name_row.active .fas {
	color: white;
}


/* mailing label selection */
#mailing-label-container {
	outline:#000 solid thin;
	width:310px;
	padding:15px;
	background-color:#FFFFFF;
	margin:15px 30px;
}
.mailing-label-select {
	cursor: pointer;
	display:inline-block;
	border: 1px solid var(--text-dark);
	height:30px;
	margin-bottom:5px;
	border-radius:5px;
}
.mailing-label-select:hover {
	background-color:#0066CC;
}



/*********************************************/
/* ATTENDANCE */
/*********************************************/

.attendancerow .checked-icon, .list-group-item .checked-icon {
	visibility: hidden;
}
.attendancerow.active .checked-icon, .list-group-item.active .checked-icon, .attendancerow.disabled .checked-icon {
	visibility: visible;
}
.attendancerow.active .delete-icon {
	visibility: hidden;
}
.attendancerow.active:hover .delete-icon {
	visibility: visible;
}

.indv_name_row.disabled.active {
	background-color: var(--color-gray-100)!important;
}


/*********************************************/
/* CHECK-IN */
/*********************************************/

body.checkin-mode .indv_name_row:not(.active):not(.no-tag):hover,
body.checkin-mode .family_name_row:hover {
	background-color:#efefef;
}
body.checkin-mode .indv_name_row.no-tag:hover {
	cursor:default;
}
body.checkin-mode .indv_name_row.active .edit-icon,
body.checkin-mode .indv_name_row.active .icon-info {
	color:white !important;
}
body.checkin-mode .indv_name_row.no-tag div:not(.edit-icon) {
	color:#aaa !important;
}

body.checkin-mode .phone-button {
	height:70px;
	border:1px solid #777;
	font-size: 2.5rem;
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2;
}
body.checkin-mode .phone-button[data-id="10"] {
	font-size:1.3rem;
}

body.checkin-mode #filterbox {
	height: 55px;
	font-size:1.5rem;
	padding: 10px 25px 10px 40px;
}

body.checkin-mode .searchbox label {
	left: 12px;
	top: 12px;
}

body.checkin-mode .searchbox span a {
	top: 10px;
	position: absolute;
	right: 7px;
}

body.checkin-mode #page-wrapper {
	/* having min-height here prevents scrolling on live and check-in modes */
	padding-bottom:50px;
}

body.checkin-mode .phone-button:hover {
	background-color: var(--color-primary-400);
	color:var(--color-almost-white)!important;
}

/* LIVE MODE */
body.checkin-mode .card.attendance-tag.active,
body.checkin-mode .live-mode-card[data-present="1"] {
	background-color: var(--color-primary-400);
	color:white;
}


/*********************************************/
/* ACCOUNTING */
/*********************************************/

.splitrow input {
	border-radius: var(--border-radius) !important;
	max-width:100%;
}

.search-info td {
	padding: 4px !important;
}

#searchtable tr:not(.search-tr) {
	background-color: var(--primary-background)!important;
}

#import-table tr:not(.import-tr) {
	background-color: var(--primary-background)!important;
}

#rules-table tr:not(.rules-tr) {
	background-color: var(--primary-background)!important;
}

.search-info td {
	border:none !important;
}

#register, #searchtable {
	font-size:0.9rem;
}

/* used for inactive categories and accounts */
.list-group-item.inactive {
	color:#999 !important;
}

#reconcile_table {
	padding-top:7px;
}


/*********************************************/
/* spectrum color picker */
/*********************************************/
.sp-replacer {
	width:100%;
	border-radius: var(--border-radius);
	border-color: var(--border-color)!important;
}
.sp-replacer:hover, .sp-replacer.sp-active {
	border-color: var(--border-color)!important;
}
.sp-preview {
	width:calc(100% - 15px)!important;
	border-radius: 5px;
}
.sp-preview-inner {
	border-radius: 5px;
}
.sp-container {
	border-radius: var(--border-radius)!important;
	background-color: var(--toolbar-background)!important;
	border-color: var(--border-color)!important;
}
.sp-picker-container {
	border-left: 1px solid var(--border-color)!important;
}
.sp-input {
	border-radius: var(--border-radius)!important;
	color: var(--text-muted)!important;
}

/*********************************************/
/* WORSHIP */
/*********************************************/

.upload-file-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* song tags */
.tokenfield .token {
	border-radius: var(--border-radius)!important;
}

.song-card .song-title {
	color: var(--text-dark);
}

.song-card .badge {
	width:100% !important;
	padding: 5px 10px;
	margin-bottom:4px;
}

.tokenfield .token {
	height:28px !important;
	color: white !important;
	background-color: var(--color-primary-500) !important;
	padding-left: 7px !important;
	padding-right: 7px !important;
}
.tokenfield a {
	color:white !important;
}

.service-element[data-itemid="0"],
.event-participant[data-person="-1"] {
	outline: #aaa dashed 2px;
	margin: 3px;
	border:none;
}

/* make songs in the worship outline a different color */
/* selected songs will have a darker primary applied */
.service-element[data-type="song"]:not(.active) {
	background-color: var(--color-primary-100);
}
.service-element[data-type="song"]:not(.active):hover {
	background-color: var(--color-primary-200);
}

.service-element-memo {
	line-clamp: 3; /* truncates after 3 lines of text */
	box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

#song-lyrics.expanded {
	position: absolute;
	right: 48px;
	width: 75vw !important;
	max-width: 800px;
	height: 75vh !important;
}

.chordpro-lyrics {
	overflow:auto;
	white-space:pre;
	border:none;
	font-size:1.1em;
	font-family: monospace;
	column-count: 1;
}

@media (min-width: 768px), print {
	.chordpro-lyrics.two-columns {
        column-count: 2; /* allow 2 columns when the class is added */
    }

	.chordpro-lyrics.two-columns span {
        white-space: pre-wrap; /* prevents bleed between columns */
    }
}

/*********************************************/
/* PHONE TABLE VIEW WIDGET */
/* used for displaying messages on the home screen */
/* used by messaging on the people screen */
/* used for previews on the Connect screen */
/*********************************************/

#conversation {
	background-color: var(--color-almost-white);
}
#conversation-container {
	background-color: var(--color-almost-white);
}

#conversation-container, .mobile-view, .tablet-view {
	border: 12px solid #24292F;
	border-radius:50px;
	width:100%;
	max-width:450px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.tablet-view {
	max-width:768px;
}
/* sms conversation container for people */
#slidr-content #conversation-container {
	height:calc(100vh - 120px);
}
/* sms conversation container for home */
#page2 #conversation-container {
	height:calc(100vh - 190px);
}
body.with-topbar-nav #page2 #conversation-container {
	height:calc(100vh - 230px);
}
#home-messages {
	min-height:350px;
	height:calc(100vh - 270px);
}
body.with-topbar-nav #home-messages {
	height:calc(100vh - 300px);
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

	/* widget for viewing messaging */
	#home-messages {
		height:calc(100vh - 300px);
	}
	/* sms conversation container for home */
	#page2 #conversation-container {
		height:calc(100vh - 170px);
	}
	body.with-topbar-nav #page2 #conversation-container {
		height:calc(100vh - 210px);
	}

}


/*********************************************/
/* KEY SIGNATURE WIDGET */
/*********************************************/

@font-face {
	font-family: accidentals;
	src: url(../../fonts/accidentals.ttf);
	font-weight: normal;
	font-style: normal;
}

.flat:before {
	font-family: accidentals;
	content: "b";
	position:relative;
	top:-4px;
	left:1px;
	margin-right:2px;
	font-size: 1.5em;
}
.sharp:before {
	font-family: accidentals;
	content: "#";
	position:relative;
	top:-10px;
	left:1px;
	margin-right:2px;
	font-size: 1.2em;
}

.sharp, .flat {
	line-height: 1;
}

#key-signature-filter-label {
	min-width:90px;
	text-align: left;
	vertical-align: top !important;
}
.key-menu {
	padding-left:10px;
	padding-right:10px;
	min-width: 200px;
	max-width:350px;
	width:350px;
}

.key-menu li:not(.disabled) {
	width:18.5%;
	display:inline-block;
	font-size: 1.3em;
	display: inline-block;
	text-align: center;
	padding:10px;
	cursor: pointer;
}

.key-menu li:not(.disabled):hover {
	background-color: #efefef;
}

.key-signature-header {
	width:100% !important;
	text-align:center;
	border-bottom:thin solid gray;
	margin-bottom:5px;
}


.key-menu {
	background-color: var(--color-pure-white);
}
.key-menu li {
	background-color: white;
	min-height:40px;
	text-align: center;
	padding:5px;
	cursor: pointer;
}
.key-menu li:hover {
	background-color: #eee;
}
.key-menu li {
	text-decoration: none;
	color:black;
}
.key-menu li.active, .token.active {
	background-color: rgba(166,188,214,0.5) !important;
}

.key-menu li.key-signature-header:hover {
	background-color: #fff;
	cursor:default;
}



/***************************************************/
/* CHURCH CONNECT STYLES */
/***************************************************/

/* make adjustment for missing navigation bar when member is not authenticated */
#wrapper.member-no-auth #page-wrapper {
	height: calc(100vh - 36px);
}


/***************************************************/
/* CHURCH CONNECT SETUP (CHURCHTRAC APPLICATION) */
/***************************************************/

/* .welcome-cards class is the wrapper containing .welcome-card which contains the card preview and info label */
.welcome-card {
	cursor: pointer;
	background-color:transparent;
}

/* .card-setup is the info label under the card preview showing card type and visibility */
.card-setup {
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}

/* welcome-cards are clickable to edit */
.welcome-card div {
	cursor: pointer;
}

/* connect card preview */
.card-preview .bg-primary {
	background-color: #1371bb !important;
}

/* connect card preview */
.card-preview .bg-info {
	background-color: #4db1ff !important;
}

/* Card_Container will have the mobile-view and tablet-view classes added to it for different preview displays */
#Card_Container {
	min-height:calc(100vh - 100px);
	overflow-y:hidden;	/* not scrollable */
	padding: 0;
	margin: 0 auto;
}

/* normal border radius for non-mobile non-tablet views */
#Card_Container:not(.mobile-view,.tablet-view) {
	border-radius:10px;
}

/* only display the mobile "notch" in mobile-view */
#Card_Container:not(.mobile-view) #notch {
	display:none;
}

/* only display the tablet ui in tablet-view */
#Card_Container:not(.tablet-view) #tablet-bottom {
	display:none;
}

/* default: on small screens, layout is 1 card wide */
#Card_Container.mobile-view .welcome-cards .welcome-card {
	padding-bottom: 10px!important;
}

#cards-container {
	padding-bottom:50px;
	max-width: 1000px;
	margin: 0 auto;
}

/* on mobile and tablet views, set height and scrolling */
#Card_Container.mobile-view #cards-container {
	height:calc(100vh - 170px);
	overflow-y: auto;
	padding-top: 15px;
}
/* tablet view has a different height and left padding to center */
#Card_Container.tablet-view #cards-container {
	height:calc(100vh - 240px);
	overflow-y: auto;
}

/* mobile and tablet views are scrollable */
.mobile-view, .tablet-view {
	max-height:700px;
	overflow-y:auto;
}

/* connect form/registration field type selector buttons */
/* x-small: 1 column layout */
.flex-one-third {
	flex: 100%;
}
.field-row-200 {
	width: 100%;
}
.field-row-250 {
	flex-basis: 100%;
}


#Card_Container.tablet-view {
	padding-top:40px;
	padding-left:0px!important;
}

.custom-radio-option.disabled .cr-option {
	color:#ccc;
}

.custom-numeric {
	max-height:40px;
}

/* new card grid styling */

.card-option.active {
	background-color: var(--color-primary-500);
	color: white!important;
}

.card-option:not(.active):hover {
	background-color: var(--hover-bg-color)!important;
	color: var(--list-group-text) !important;
}

.new-card-top-left-radius {
	border-top-left-radius: var(--border-radius) !important;
	border-top: 2px solid var(--border-color) !important;
	border-left: 2px solid var(--border-color) !important;
}

.new-card-top-right-radius {
	border-top-right-radius: var(--border-radius) !important;
	border-top: 2px solid var(--border-color) !important;
	border-right: 2px solid var(--border-color) !important;
}

.new-card-bottom-left-radius {
	border-bottom-left-radius: var(--border-radius) !important;
	border-bottom: 2px solid var(--border-color) !important;
	border-left: 2px solid var(--border-color) !important;
}

.new-card-bottom-right-radius {
	border-bottom-right-radius: var(--border-radius) !important;
	border-bottom: 2px solid var(--border-color) !important;
	border-right: 2px solid var(--border-color) !important;
}

.new-card {
	border: 1px solid var(--border-color) !important;
}

.new-card-left-column {
	border-left: 2px solid var(--border-color) !important;
}

.new-card-right-column {
	border-right: 2px solid var(--border-color) !important;
}

/* used for selecting template or igniter images */
.sample-image.selected {
	outline-color: var(--color-primary-500);
	outline-width: 3px;
	outline-style: solid;
}

.popover-header {
	padding: .25rem .5rem;
	background-color: unset;
	border-bottom: unset;
	font-size: 0.85rem;
}

/***************************************************/
/* BEGIN MEDIA QUERIES */
/***************************************************/

/*********************************************/
/* Extra small (breakpoint for 575px or less) */
@media (max-width:575px) {

	/* when the Note Categories btn is hidden, add a right border radius on the delete btn */
	.notes-btn:nth-last-child(2) {
		border-top-right-radius: 25px!important;
		border-bottom-right-radius: 25px!important;
	}

	.ptab:nth-last-child(2) {
		border-top-right-radius: 25px !important;
		border-bottom-right-radius: 25px !important;
	}

	/* remove sort icon on xs screen when you edit a bank account */
	#sort-icon {
		display: none;
	}

	#check-printing-screen {
		flex-wrap: wrap;
	}
	
	#print-check-warning {
		width: 100%!important;
	}

	#worship-resource-btns {
		padding-top: 10px!important;
		padding-bottom: 1.5rem!important;
	}

	/* stack the date range/view statement buttons on xs screen  */
	body.member-connect #giving-range-btns {
		display: inline!important;
	}

	/* remove the padding and add bottom margin to end date button on xs screen */
	#giving-range-btns > #end-date {
		padding: 0!important;
		margin-bottom: 2rem;
	}

	.form-control:not(#filterbox, .bsearch, .login-input, #search-help-categories) {
		border-top-left-radius: 10px!important;
		border-bottom-left-radius: 10px!important;
	}

	#background-btns {
		width: 100%!important;
	}

	#app-footer {
		margin-top: 0!important;
		padding-top: 0!important;
	}

	.add-name-btn-group {
		width: 100%!important;
	}

	.add-name-btns {
		padding: 4px 17px 0 17px!important;
	}

	/* remove the x-margin on the start here resources when
	you expand the accordion so that text doesn't wrap */
	.start-here-resources {
		margin-left: 0!important;
		margin-right: 0!important;
	}

}

/*********************************************/
/* Small (breakpoint for 575px or less) */
@media (max-width:767px) {
	/* on smaller devices, the print checks and import buttons are hidden by default.
	':not(#transaction-btn)' handles the styling when the reconcile button is removed if the permission is unchecked */
	.accounting-btn:nth-last-child(3):not(#transaction-btn) {
		border-top-right-radius: 25px!important;
		border-bottom-right-radius: 25px!important;
	}
}

/*********************************************/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

	/* custom field types, two columns */
	.flex-one-third {
		flex: 48%;
	}

	.navbar-brand-sm {
		display:none;
	}
	.navbar-brand-lg {
		display:inline;
	}

}

/***************************************************/
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.btn-normal-size {
		font-size:1rem;
	}

	/* right slidr dialog has a fixed width at medium and larger */
	#slidr {
		width: 480px;
	}

	.help-dropdown {
		max-width: 600px;
		min-width:350px;
	}

	/* church connect, but also people screen tab content (which doesn't apply here) */
	#tab-content {
		max-width: 700px;
	}

	/* on medium size screens, the left menu is set to a fixed width and opened via toggle */
	#sidebar-nav {
		width:320px;
		left:-320px;
	}

	#connect-sidebar-nav, #connect-links {
		width:320px;
		/* transform: translateX(-500px); */
	}

	/* church connect */
	.welcome-cards {
		max-width: 684px;
	}
	
	.flex-one-third {
		flex: 48%;
	}
	.field-row-200 {
		flex: 0 0 200px;
	}
	.field-row-250 {
		flex-basis: 250px;
	}

	/* for larger screens, the last two view buttons will be visible, so change the btn-group border-radius */
	#connect-preview button[data-type="mobile"] {
		border-top-right-radius: 0!important;
		border-bottom-right-radius: 0!important;
	}

	body:not(.member-connect) #transpose-btn {
		border-top-left-radius: 0!important;
		border-bottom-left-radius: 0!important;
	}

}

/***************************************************/
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

	/* on larger devices, add margin to "push" the main side menu down into the body section */
	/* at this size we switch from the small screen size menu bar to the regular menu bar */
	#sidebar-nav {
		margin-top: 60px !important;
	}

	/* in ct, when the left menu is enabled, it will be displayed all the time (hidden on smaller screens) */
	#sidebar-nav:not(.connect-menu) {
		width: 67px;
		position:static;
		left:0;
		height: calc(100vh - 45px) !important;
		transition:
				background-color 0s,
				width .10s ease .01s;
			/* width starts 10ms later to prevent background-color transition */
	}

	body:not(.with-topbar-nav) #mainpanel {
		/* top:auto causes a blank display issue here when resizing from smaller to lg when p2 is active */
		top: auto;
		position: absolute!important;
		width: calc(100vw - 67px); /* subtract 70px for the sidebar-nav (left menu) defined above */
	}

	/* this fixes the top:auto bug referenced above */
	body.with-sidebar-nav #mainpanel {
		top: 53px;
		left: 67px;
	}

	/* icons on the left menu */
	#sidebar-nav:not(.connect-menu) .fal {
		display:inline-block;
		font-size: 1.2rem;
		color: var(--color-gray-200);
	}

	/* on large screens, we hide the label text until hover */
	#sidebar-nav:not(.connect-menu) .menu-label {
		display:none;
	}

	/* remove the border between items and set a smaller padding (smaller screens use 20px) */
	#sidebar-nav:not(.connect-menu) .list-group-item {
		padding: 13px;
		white-space: nowrap;
		/* apply custom radius to sidebar menu items, removed 2025-10-04 */
		/* border-top-right-radius: var(--btn-border-radius);
		border-bottom-right-radius: var(--btn-border-radius); */
	}

	/* hover color of sidebar main menu */
	#sidebar-nav:not(.connect-menu) .list-group .list-group-item:not(.active):hover {
		background-color: var(--color-primary-400) !important;
	}
	#sidebar-nav:not(.connect-menu) .list-group .list-group-item:hover .fal {
		color: #eee;
	}
	#sidebar-nav .list-group-item.active .fal, #connect-sidebar-nav .list-group-item.active .fal {
		color:#eee;
	}

	/* FLOAT auto-expand the side menu to show text labels on hover */
	#sidebar-nav:not(.connect-menu):hover {
		width: 275px;
		position: absolute;
		background-color: transparent!important;
		transition:
			background-color 0s,
			width .15s ease .01s;
			/* width starts 10ms later to prevent background-color transition */
	}

	#sidebar-nav:not(.connect-menu) .list-group {
		overflow-y: hidden!important;
		padding-bottom:0!important;
		height:auto!important;
	}

	#sidebar-nav:not(.connect-menu):hover .list-group {
		overflow-x:hidden;
		overflow-y:auto;
	}

	#sidebar-nav:not(.connect-menu):hover .menu-label {
		display:inline;
		position:relative;
		left:-10px;
	}
	#sidebar-nav:not(.connect-menu) .list-group-item:hover .menu-label {
		color:white;
	}
	#sidebar-nav:not(.connect-menu):hover + #mainpanel {
		left:67px; /* hold the main content in place while the hover menu is active (or increase to 300 for PUSH) */
	}
	#connect-sidebar-nav.connect-menu .menu-label, #connect-links.connect-menu .menu-label {
		display:inline-block;
		font-size: 1rem !important;
	}
	/* display an overlay over the page to emphasize the menu */
	#sidebar-nav:not(.connect-menu):hover ~ #modal-overlay {
		width:100%;
		height:100%;
		top:0;
		left:0;
		z-index:101!important;
		background-color: rgba(0,0,0,0.24);
		transition: background-color .15s ease;
	}


	/* Display all pages side-by-side on larger screen sizes */
	body:not(.checkin-mode) .application-page {
		display: inline-block;
	}

	/* each screen will contain two "pages" */
	/* on larger monitors the pages will be displayed side-by-side with the width equalling 100% */
	/* smaller devices will display one "page" with automatic back navigation added for the second page */
	.application-page[data-width="0%"] { flex-basis: 0% !important; display:none; }
	.application-page[data-width="10%"] { flex-basis: 10% !important; }
	.application-page[data-width="20%"] { flex-basis: 20% !important; }
	.application-page[data-width="25%"] { flex-basis: 25% !important; }
	.application-page[data-width="30%"] { flex-basis: 30% !important; }
	.application-page[data-width="33%"] { flex-basis: 33% !important; }
	.application-page[data-width="40%"] { flex-basis: 40% !important; }
	.application-page[data-width="45%"] { flex-basis: 45% !important; }
	.application-page[data-width="50%"] { flex-basis: 50% !important; }
	.application-page[data-width="55%"] { flex-basis: 55% !important; }
	.application-page[data-width="60%"] { flex-basis: 60% !important; }
	.application-page[data-width="66%"] { flex-basis: 66% !important; }
	.application-page[data-width="70%"] { flex-basis: 70% !important; }
	.application-page[data-width="75%"] { flex-basis: 75% !important; }
	.application-page[data-width="80%"] { flex-basis: 80% !important; }
	.application-page[data-width="90%"] { flex-basis: 90% !important; }
	.application-page[data-width="100%"] { flex-basis: 100% !important; }

	/* submenu navigation for each page */
	#pagenav {
		height:40px;
		overflow:hidden;
	}

	#pagenav-container {
		background-color: var(--pagenav-background);
	}

	/* Always display the pagenav on md and larger screens */
	#pagenav-container.collapse:not(.show) {
		display:inline;
	}

	#pagenav .pagenav-link {
		text-align: center;
		font-size: 9pt;
	}

	body:not(.with-topbar-nav) #pagenav {
		border-bottom:1px var(--border-color) solid;
	}

	body:not(.with-topbar-nav) #pagenav .container  {
		margin-left:0;
	}

	body:not(.with-topbar-nav) #page-container {
		margin-left: 0;
	}

	body:not(.with-topbar-nav) #pagenav .pagenav-link.active {
		background-color: var(--color-primary-500);
		color: white!important;
		border-radius: var(--btn-border-radius);
	}

	/* these are for the items in the People screen dropdown Setup menu */
	.people-dropdown .dropdown-item {
		border-radius: 0!important;
		border-bottom: 1px solid var(--border-color);
	}
	.people-dropdown .dropdown-item:first-of-type {
		border-top-left-radius: var(--border-radius)!important;
		border-top-right-radius: var(--border-radius)!important;
		border-bottom-left-radius: 0!important;
		border-bottom-right-radius: 0!important;
	}
	.people-dropdown .dropdown-item:last-of-type {
		border-bottom-left-radius: var(--border-radius)!important;
		border-bottom-right-radius: var(--border-radius)!important;
		border-top-left-radius: 0!important;
		border-top-right-radius: 0!important;
		border-bottom: none;
	}

	/***************************************************/
	/* TOP (LEGACY-STYLE) MENU */
	/***************************************************/

	/* positioned relatively inside the logobar */
	#topbar-nav {
		background-color:transparent;
		/* position:relative;
		top:-50px; */
	}
	
	/* body.with-topbar-nav #mainpanel {
		top: 45px;
		width:100vw;
	} */

	body.with-topbar-nav #logo-container {
		flex-grow: 0!important;
	}

	/* body.with-sidebar-nav #logo-container {
		flex-grow: 1!important;
	} */

	body.with-topbar-nav #pagenav-container {
		background-color: var(--color-primary-500);
		/* padding-top:11px; */
		border-bottom: 1px solid var(--primary-background);
	}

	body.with-topbar-nav #topbar-dropdown-btn {
		font-size: 1.1rem;
		background-color: var(--color-primary-500);
	}
	body.with-topbar-nav #topbar-dropdown-btn:hover {
		color: var(--color-primary-200);
	}
	body.with-topbar-nav #topbar-nav-dropdown-menu {
		border-radius: var(--border-radius);
		width:270px;
	}
	body.with-topbar-nav #topbar-nav-dropdown-menu .dropdown-item {
		border-bottom: 1px solid var(--border-color);
		color: var(--text-muted);
	}
	body.with-topbar-nav #topbar-nav-dropdown-menu .dropdown-item.active {
		border: 1px solid var(--color-almost-white);
		color: var(--color-almost-white)!important;
		cursor:default;
	}
	body.with-topbar-nav #topbar-nav-dropdown-menu .dropdown-item.active:hover {
		background-color: var(--color-primary-500);
		color: white;
	}
	body.with-topbar-nav #topbar-nav-dropdown-menu .dropdown-item:first-of-type {
		border-top-left-radius: var(--border-radius);
		border-top-right-radius: var(--border-radius);
	}
	body.with-topbar-nav #topbar-nav-dropdown-menu .dropdown-item:last-of-type {
		border-bottom-left-radius: var(--border-radius);
		border-bottom-right-radius: var(--border-radius);
	}
	body.with-topbar-nav #pagenav {
		height:40px;
		padding-top:9px;
		max-width: 1200px;
		width:100%;
		margin: 0 auto;
	}
	body.with-topbar-nav #pagenav .pagenav-link {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		color: var(--color-pure-white);
		padding: 8px 24px;
	}

	body.with-topbar-nav #pagenav .pagenav-link.dropdown-item {
		height: auto;
	}

	body.with-topbar-nav #pagenav .pagenav-link:not(.active):hover {
		background-color: var(--color-primary-400)!important;
		color: white;
		height: auto;
	}

	body.with-topbar-nav #pagenav .pagenav-link:not(.dropdown-item).active {
		color: var(--color-primary-500);
		background-color: var(--primary-background);
	}

	body.with-topbar-nav #pagenav .pagenav-link.active:hover {
		cursor: default;
	}

	body.with-topbar-nav #pagenav .pagenav-link.dropdown-item.active {
		color:var(--color-pure-white);
	}

	body.with-topbar-nav #pagenav {
		background-color: var(--color-primary-500)!important;
	}

	body.with-topbar-nav #pagenav .pagenav-link {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	body.with-topbar-nav #sidebar-nav, body.with-topbar-nav #connect-sidebar-nav, body.with-topbar-nav #connect-links {
		z-index: 9999 !important;
	}

	/* people screen pagenav Setup dropdown item */
	body.with-topbar-nav #pagenav .pagenav-link.dropdown-item {
		color:var(--text-muted);
	}
	body.with-topbar-nav #pagenav .pagenav-link.dropdown-item:hover {
		color:white;
	}
	body:not(.with-topbar-nav) #pagenav .pagenav-link.dropdown-item:not(.active):hover {
		background-color: var(--color-primary-400);
		color: var(--color-almost-white)!important;
	}

	.dropdown-toggle:focus {
		outline-color: none;
		outline-style: none;
		outline-width: 0;
	}

	#trial-dropdown {
		width:75%;
	}

	/* custom field buttons, 3 columns */
	.flex-one-third {
		flex: 31%;
		max-width:237px;
	}

}

/***************************************************/
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

	#tab-content {
		max-width: 1000px;
	}

	/* church connect */
	.welcome-cards {
		max-width: 986px;
	}

	.flex-one-third {
		flex:31%;
		max-width:237px;
	}

}


/***************************************************/
/* Display Expanded left Sidenav bar on very large screen */
@media (min-width: 1400px) {

	#logo-bar .container {
		/* body container is 1240px; */
		width:100vw;
		max-width:1450px;
	}

	body.with-topbar-nav #logo-bar .container {
		max-width:1250px;
	}

	/* in ct, when the left menu is enabled, it will be displayed all the time (hidden on smaller screens) */
	#sidebar-nav:not(.connect-menu) {
		width: 250px;
		position:static;
		left:0;
		height: calc(100vh - 45px) !important;
		z-index: 1;
	}

	body:not(.with-topbar-nav) #mainpanel {
		top: auto;
		width: calc(100vw - 250px); /* subtract 70px for the sidebar-nav (left menu) defined above */
	}

	body.with-topbar-nav #mainpanel {
		width: 100vw;
		left:0!important;
	}

	/* FLOAT/PUSH auto-expand the side menu to show text labels on hover */
	#sidebar-nav:not(.connect-menu), #sidebar-nav:not(.connect-menu):hover {
		width: 250px;
		/* these two options are needed to float the menu over the mainpanel (otherwise push) */
		position:absolute;
		border-right: none!important;
		box-shadow: none;
	}

	#sidebar-nav:not(.connect-menu) .menu-label {
		display:inline;
		position:relative;
		left:-10px;
	}

	#sidebar-nav:not(.connect-menu) + #mainpanel, #sidebar-nav:not(.connect-menu):hover + #mainpanel {
		left:250px; /* hold the main content in place while the hover menu is active (or increase to 300 for PUSH) */
	}
	#connect-sidebar-nav.connect-menu .menu-label, #connect-links.connect-menu .menu-label {
		display:inline-block;
		font-size: 1rem !important;
	}
	/* display an overlay over the page to emphasize the menu */
	#sidebar-nav:not(.connect-menu):hover ~ #modal-overlay {
		width:0%;height:0%;top:0;left:0;z-index:0!important;
	}


}

/***************************************************/
/* print styles */
@media print {
	.no-print, .no-print * { display:none!important; }
	html { height:99%; }
	.fc-scroller {
		width:auto;
		height:auto;
		overflow:visible;
	}
	#page-wrapper {
		border-left:none;
	}
	.selected-budget-month {
		display: block!important;
	}
	body:not(.member-connect) #page-wrapper:not(.member-connect) {
		background-color: transparent;
	}
	.chordpro-lyrics.two-columns {
		column-fill: balance;
		column-gap: 1em;
	}
	
}

/***********************************/
/* END MEDIA QUERIES */
/***********************************/



/***********************************/
/* SELECT2 WIDGET */
/***********************************/

.select2 {
	width:100%;
}
.select2-selection, .select2-container {
	border-radius: var(--border-radius) !important;
	max-width:100%;
}
.select2-selection {
	background-color: var(--input-background);
	color: var(--text-color);
	border-color: var(--border-color)!important;
	/* border-bottom-left-radius: 0!important;
	border-bottom-right-radius: 0!important; */
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
	border-color: var(--text-color) transparent transparent transparent !important;
}

/* .select2-small class needs to be added to parent div (not the select) */
/* this creates a smaller (shorter) version for tight spaces */
.select2-small .select2-selection--single {
	max-height: 25px !important;

}
.select2-small .select2-selection--single .select2-selection__rendered {
	line-height: 1.55rem !important;
	font-size: 0.8rem;
}

/* in dark mode select2 tags cannot be read; make the background lighter */
/* for example, when select multiple users for notification of a connect card submission */
.select2-selection__choice {
	background: white!important;
}

/* dropdown background */
.select2-dropdown, .select2-container--bootstrap4 .select2-dropdown {
	background-color: var(--card-background)!important;
	border: 1px solid var(--border-color)!important;
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}

/* selected option */
.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] {
	background-color: var(--color-primary-500)!important;
	color: var(--color-almost-white);
}

/* hover/highlighted option */
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
	background-color: var(--color-primary-400)!important;
	color: var(--text-white);
}

.select2-dropdown .select2-dropdown--below,
.select2-container--bootstrap4 .select2-dropdown {
	/* border-radius: var(--border-radius)!important; */
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

/* these two do round the top and bottom results, but it still looks wonky */
/* .select2-results__options:first-child {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
} */
.select2-dropdown--below .select2-results__options:last-child, .select2-dropdown--below .select2-results__options:last-child:hover {
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.combobox-dropdown .select2-results__option:not(.loading-results)[aria-disabled="true"] {
	color: #aaa !important;
	text-decoration: line-through;
}
.combobox-dropdown .select2-results__option:not(.loading-results)[aria-disabled="true"]:after {
	content: " (Archived)";
}
.select2-dropdown .select2-results__option:not(.loading-results)[aria-disabled="true"] {
	color: #aaa !important;
}
/* have to do it this way because of double-scrollbars in select2 when using optgroup */
#select2-filter_category-results .select2-results__option[aria-disabled="true"] {
	text-decoration: none;
}
#select2-filter_category-results .select2-results__option[aria-disabled="true"]:after {
	content: "";
}

/* prevent select2 dropdown from appearing behind slidr or fallr */
.select2-container--open {
	z-index: 1071;
}


.select2-container--open .select2-selection {
	border-bottom-left-radius: 0!important;
	border-bottom-right-radius: 0!important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection {
	border-color: var(--border-color)!important;
	-webkit-box-shadow: none!important;
	box-shadow:none!important;
}

.select2-search--dropdown .select2-search__field {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--input-background);
	color: var(--text-color);
}


/***********************************/
/* TOASTS */
/***********************************/

.toast-bottom-right {
	right: 0px !important;
	bottom: 15px !important;
}
.toast-bottom-center {
	bottom: 30px;
}
.toast-bottom-left {
	bottom: 35px;
}
#toast-container {
	width: 625px;
	max-width: 100%;
}
/* smaller screens */
#toast-container>div {
	width:calc(100vw - 48px)!important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	padding: 20px 20px 20px 50px;
	opacity: 1;
}
.toast {
	width: 625px !important;
	max-width: 100%!important;
	border-radius: var(--border-radius)!important;
}
/* medium and larger screens */
@media (min-width: 768px) {
	#toast-container>div {
		width:100% !important;
		-moz-box-shadow: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		padding: 15px 15px 15px 50px;
	}
}

.toast-success {
	background-color: var(--color-primary-500);
}

.toast-info {
	background-color: var(--color-primary-400) !important;
	padding-top:50px !important;
	padding-bottom:50px !important;
	min-height:200px !important;
}
#toast-container>.toast-info {
	background-image:none!important;
	background-position: -30px 0%;
	background-size:contain;
}
.toast-info .toast-close-button {
	top:-45px;
}


/***********************************/
/* SEARCHBOX WIDGET */
/* this is an input that is used to search a list */
/* it is initialized by the bsearch jquery widget and is used on multiple screens */
/***********************************/

.searchbox {
	position: relative;
	border-radius: var(--btn-border-radius);
}
/* the label is the magnifying glass icon that appears inside the input */
.searchbox label {
	color: #ccc;
	position: absolute;
	left: 10px;
	top: 3px;
}
.searchbox input {
	display: inline-block;
	color: #aaa;
	width: 100%;
	height: 36px;
	padding: 10px 25px 10px 30px;
	margin: 0;
	font-weight: 400;
	border-radius: var(--btn-border-radius);
}
/* span contains the clear icon for the searchbox */
.searchbox span {
	color: rgba(255,255,255,.6);
	position: absolute;
	right: 14px;
	top: 3px;
	cursor: pointer;
}
.searchbox span a {
	color: #ccc;
}


/***********************************/
/* FULL CALENDAR */
/***********************************/

/* this overrides the fullcalender styles */
.fc-event {
	/* border-radius:0 !important; */
	font-size:1em !important;
	cursor:pointer;
}
.fc-day-grid-event {
	padding:2px !important;
}
.fc-view-container {
	background-color:rgba(255, 255, 255, 0.5) !important;
}

.fc-prev-button, .fc-next-button {
	padding-left: 3px !important;
	padding-right: 3px !important;
}

.fc-button {
	margin-left:0 !important;
	margin-top:2px !important;
}

.fc-list-item {
	cursor:pointer;
}

.fc-unthemed .fc-today {
	background: var(--color-primary-100)!important;
}

.fc-toolbar h2 {
	color: var(--color-primary-500);
}


/***************************************************/
/* FLATPICKR */
/***************************************************/

.flatpickr-input-group {
	width:100% !important;
}
.flatpickr-input {
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-color);
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	max-width:200px;
}
div:not(.flatpickr-input-group) .flatpickr-input {
	width:100%;
	max-width:100%;
}
.flatpickr-input:focus {
	outline: none;
	outline-color: none;
	outline-style: auto;
	outline-width: 0px;
}
.flatpickr-input-group .flatpickr-input {
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.flatpickr-input-group .btn {
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	border: 1px solid var(--border-color)!important;
	color: var(--text-color)!important;
}
.flatpickr-input-group .btn:hover {
	background-color: var(--hover-bg-color);
	border: 1px solid var(--border-color);
}
.flatpickr-input.form-control[readonly] {
	background-color: var(--input-background)!important;
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}
.flatpickr-day {
	border-radius: var(--border-radius)!important;
}
.flatpickr-day.selected {
	background: var(--color-primary-500)!important;
	color: var(--color-almost-white)!important;;
	border-color: var(--color-primary-500)!important;
	border-radius: var(--border-radius)!important;
}

.flatpickr-calendar.inline {
	margin:0 auto;
	box-shadow: none !important;
	top: 0px;
}
.flatpickr-calendar.inline.hasTime {
	margin:0;
	background-color: var(--input-background);
}

.flatpickr-calendar.hasTime * {
	color: var(--text-muted);
}
.flatpickr-calendar.hasTime.noCalendar {
	max-width:190px;
}
.flatpickr-calendar.arrowTop::before {
	display:none;
}
.flatpickr-time {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
}
.flatpickr-hour {
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}
.flatpickr-calendar.hasTime.noCalendar.showTimeInput {
	margin:0;
	height:38px !important;
	width:100% !important;
	border: 1px solid #ced4da;
	border-radius: var(--border-radius);
	position: relative;
	top:0;
}

/* this doesn't seem to work */
/* .numInputWrapper .numInput.cur-year {
	color: var(--text-muted)!important;
} */
/* .flatpickr-monthDropdown-months {
	color: var(--text-muted)!important;
} */

.flatpickr-time .numInputWrapper {
	flex-basis: 30%;
	height:36px !important;
}
.flatpickr-time-separator {
	color: var(--text-muted)!important;
}
.flatpickr-am-pm {
	flex-basis: 30%;
	height:36px !important;
	position:relative;
	color: var(--text-muted)!important;
}
/* messaging schedule flatpickr */
#schedule-calendar-div .flatpickr-calendar {
	outline: none;
	background-color: var(--primary-background);
}
#schedule-calendar-div .flatpickr-time {
	width:100%;
	background-color: var(--input-background);
	margin-top:15px;
}

/* remove the dumb flatpickr arrow */
.flatpickr-calendar:before, .flatpickr-calendar:after {
	border: none!important;
}
.flatpickr-calendar.hasTime .flatpickr-time {
	border-top: 1px solid var(--border-color)!important;
}
.flatpickr-calendar.hasTime.inline {
	top: 0px!important;
	height: 38px!important;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
	height: 38px!important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--color-gray-500)!important;
}

#schedule-calendar-div .flatpickr-calendar.hasTime.animate.inline {
	margin: 0 auto;
}


/*********************************************/
/* DROPZONE */
/*********************************************/

.dz-clickable {
	border-radius: var(--border-radius);
	padding-top:10px;
	padding-bottom:10px;
	cursor: pointer;
}

.dz-inner-clickable {
	border: none;
}

#upload-form {
	border-radius: var(--border-radius);
}


/***************************************************/
/* DARK THEME/BACKGROUND OVERRIDES */
/***************************************************/

/* general */

/* with topbar-nav, highlight the selected pagenav item on dark backgrounds */
body.dark-bg.with-topbar-nav #pagenav .pagenav-link:not(.dropdown-item).active {
	color: var(--color-almost-white)!important;
	border-top: 1px solid var(--border-color);
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
}

body.dark-bg .form-control:focus {
	color: var(--text-dark)!important;
	background-color: var(--color-gray-100)!important;
}

body.dark-bg #conversation {
	background-color: var(--color-gray-400);
}
body.dark-bg #conversation-container {
	background-color: var(--color-black);
}

body.dark-bg .help-circle {
	color: var(--text-muted)!important;
}

body.dark-bg .text-primary {
	color:var(--color-primary-400)!important;
}

body.dark-bg .fa-copy {
	color: var(--text-muted)!important;
}

/* alerts */
body.dark-bg .alert-info {
	background-color: var(--color-gray-400)!important;
	color: var(--text-muted)!important;
	border: 1px solid var(--border-color);
}

/* home screen */
body.dark-bg #verse .text-primary {
	color: var(--color-gray-100)!important;
}
body.dark-bg .dashboard-card .h1 {
	color: var(--color-gray-100);
}
body.dark-bg .dashboard-card:hover * {
	color: var(--color-almost-white);
}

body.dark-bg #help-dropdown, body.dark-bg #help-dropdown .help-topic-link * {
	color: var(--color-gray-100)!important;
}
body.dark-bg #help-dropdown .list-group-item:hover {
	background-color: var(--color-primary-500)!important;;
}

/* full calendar */
body.dark-bg .fc-view-container {
	background-color:transparent!important;
}
body.dark-bg .fc-unthemed .fc-today {
	background: var(--color-gray-400)!important;
}
body.dark-bg .fc-toolbar h2 {
	color: var(--color-gray-200);
}

/* flatpickr */
body.dark-bg .flatpickr-calendar {
	background: var(--color-gray-200);
	border: var(--color-gray-400);
}

/* list groups */
body.dark-bg .list-group-item:not(.active):hover .text-muted {
	color: var(--color-gray-100)!important;
}
body.dark-bg .sortable .list-group-item:not(.active) .list-group .list-group-item {
	background-color: var(--color-gray-300);
	border-color: var(--color-gray-200);
}
body.dark-bg .sortable .list-group-item.active .list-group .list-group-item {
	background-color: var(--color-primary-200);
	border-color: var(--color-gray-200);
}
body.dark-bg .sortable .list-group-item .list-group .list-group-item:hover {
	background-color: var(--color-gray-200)!important;
	color: var(--color-almost-white);
}
body.dark-bg .sortable .list-group-item .list-group .list-group-item.active {
	border-color: var(--color-gray-200)!important;
}

/* worship */
/* make songs in the worship outline a different color */
/* selected songs will have a darker primary applied */
body.dark-bg .service-element[data-type="song"]:not(.active) {
	background-color: var(--color-gray-500);
}
body.dark-bg .service-element[data-type="song"]:not(.active):hover {
	background-color: var(--color-gray-300);
}
body.dark-bg .song-card .song-title {
	color: var(--text-light);
}
body.dark-bg .key-menu, body.dark-bg .key-menu li {
	background-color: var(--color-gray-400);
	color: var(--color-gray-100);
}
body.dark-bg .key-menu li.active {
	color: var(--color-almost-white);
}
body.dark-bg .key-menu li:not(.active):hover {
	color: var(--color-gray-200);
}

/* datatables */
body.dark-bg .dataTables_scrollHeadInner {
	background-color: var(--color-gray-500);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}
body.dark-bg table.dataTable tbody tr {
	background-color: var(--color-gray-500);
}
body.dark-bg .table-striped tbody tr:nth-of-type(odd) {
	background-color: var(--color-gray-400);
}
body.dark-bg .dataTables_wrapper .dataTables_length select {
	background: none!important;
	background-color: var(--color-gray-500)!important;
	color: var(--color-gray-100)!important;
	outline: none;
}

/* dropdowns */
body.dark-bg .dropdown-menu {
	border: 1px solid var(--border-color);
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
body.dark-bg .dropdown-item {
	color: var(--color-gray-100)!important;
	border-bottom: 1px solid var(--border-color);
}
body.dark-bg .dropdown-item:last-of-type {
	border-bottom: none;
}
body.dark-bg .close {
	color: var(--text-muted);
	text-shadow: none;
}

/* people */
body.dark-bg .name_row:hover .fas, body.dark-bg .name_row .fas {
	color: var(--text-light)!important;
}

/* make radios more visible when selected in dark mode */
body.dark-bg input[type=checkbox], body.dark-bg input[type=radio] {
	accent-color: var(--color-primary-100);
}

/* buttons */
body.dark-bg .btn-group .btn.disabled, 
body.dark-bg .btn.disabled, 
body.dark-bg .btn:disabled, 
body.dark-bg .btn:disabled:hover {
	background-color: var(--color-disabled)!important;
	color:var(--color-gray-100)!important;
}

/* summernote */
body.dark-bg .note-editable {
	background-color: var(--color-black)!important;
	color: var(--color-almost-white)!important;
}
body.dark-bg .note-statusbar {
	background-color: var(--color-black)!important;
	border-top: 1px solid var(--border-color);
}
body.dark-bg .note-toolbar {
	background-color: var(--color-black)!important;
}
body.dark-bg .note-toolbar button, body.dark-bg .note-toolbar i, body.dark-bg .note-toolbar span {
	background-color: transparent;
	border: none;
	color: var(--color-almost-white);
}
body.dark-bg .note-toolbar button:hover {
	background-color: var(--color-primary-400);
	color: var(--color-almost-white);
	border: none;
}
body.dark-bg .note-dropdown-menu {
	background-color: var(--color-gray-500);
	border: var(--border-color);
	border-radius: var(--border-radius);
}
body.dark-bg .note-dropdown-item {
	color: var(--color-almost-white);
}
body.dark-bg .note-dropdown-item:hover {
	background-color: var(--color-gray-400);
}
body.dark-bg .note-toolbar .note-dropdown-menu.note-check .note-dropdown-item i {
	color: var(--color-almost-white);
}
body.dark-bg .note-editor .note-editable * {
	color: var(--color-almost-white);
}

body.dark-bg .table {
	color: var(--text-light);
}

body.dark-bg .bg-light,
body.dark-bg .list-group-item.bg-light.active,
body.dark-bg .list-group-item.bg-light.active:hover {
	background-color: var(--color-primary-400) !important;
	border-color: var(--border-color)!important;
	color: white !important;
}

body.dark-bg .border-dashed {
	border: 3px dashed var(--color-almost-white)!important;
}

/* song select logo for dark and light backgrounds */
.ss-light-bg-logo, body.dark-bg .ss-dark-bg-logo {
	display: inline-block;
}
.ss-dark-bg-logo, body.dark-bg .ss-light-bg-logo {
	display: none;
}


/***************************************************/
/* overrides needed for list-group-item report-list-item */
/***************************************************/

.list-group-item.active label, .list-group-item.active .text-muted {
	color: var(--color-almost-white)!important;
}
.list-group-item.active .btn-outline {
	border: 1px solid var(--color-almost-white);
	color: var(--color-almost-white);
	background-color: transparent;
}
.list-group-item.active button {
	background-color: var(--color-almost-white);
}
.list-group-item.active button:hover {
	background-color: var(--color-primary-400);
}

.custom-control-input:checked~.custom-control-label::before {
	border-color: var(--color-almost-white);
	background-color: var(--color-primary-400);
}

body.dark-bg .list-group-item:hover:not(.people-field),
body.dark-bg .list-group-item:hover:not(.people-field) label {
	color: var(--text-light);
}

body.dark-bg .list-group-item.active .select2-selection {
	border-color: var(--color-almost-white)!important;
}

body.dark-bg .list-group-item.active .flatpickr-input,
body.dark-bg .list-group-item.active .form-control {
	border: 1px solid var(--color-almost-white)!important;
}

body.dark-bg .list-group-item:not(.active):hover .select2-selection,
body.dark-bg .list-group-item:not(.active):hover .form-control,
body.dark-bg .list-group-item:not(.active):hover .flatpickr-input {
	border: 1px solid var(--text-muted)!important;
}

.connect-template-div.active {
	outline: 3px solid var(--color-primary-500)!important;
}

.masonry-card {
	transition: transform 0.15s ease-in-out;
	/* Smooth transition for zoom */
}

.masonry-card:hover {
	transform: scale(1.01);
	z-index: 4;
	/* Slight zoom on hover */
}

.outline-dashed {
	outline: 3px dashed #777;
}

/* CONNECT CLASSES */

.bg-translucent-light {
	background-color: rgba(233, 236, 239, 0.75);
	/* opacity: 0.75; removed opacity since it was used on a container div that also changed the opacity of the text inside (not just the background opacity)*/
}

.bg-translucent-dark {
	background-color: rgba(52, 58, 64, 0.75);
	/* opacity: 0.75; removed opacity since it was used on a container div that also changed the opacity of the text inside (not just the background opacity)*/
}

/* undo the font color setting above */
/* .hero-container .h4,
.note-editable .h4,
.hero-container .h5,
.note-editable .h5,
.page-card-body .h4,
.page-card-body .h5 {
	color: unset!important;
} */

.hero-container div {
	/* Target the text container */
	position: relative;
	z-index: 2;
	/* Ensure text is on top */
}

/*
.editor-content is added to .note-editable (summernote), .hero-container, .page-card-body, and card section header / footer
*/

/*
.editor-content {
	--base-size: calc(1rem * 1);
}

.editor-content .fontsize-extra-small {
	--base-size: calc(1rem * 0.8);
}

.editor-content .fontsize-small {
	--base-size: calc(1rem * 0.9);
}

.editor-content .fontsize-large {
	--base-size: calc(1rem * 1.25);
}

.editor-content .fontsize-extra-large {
	--base-size: calc(1rem * 1.5);
}

.editor-content div,
.editor-content p {
	font-size: calc(var(--base-size) * 1) !important;
}

.editor-content .h1,
.editor-content h1 {
	font-size: calc(var(--base-size) * 3) !important;
}

.editor-content .h2,
.editor-content h2 {
	font-size: calc(var(--base-size) * 2) !important;
}

.editor-content .h3,
.editor-content h3 {
	font-size: calc(var(--base-size) * 1.75) !important;
}

.editor-content .h4,
.editor-content h4 {
	font-size: calc(var(--base-size) * 1.5) !important;
	color: unset !important;
}

.editor-content .h5,
.editor-content h5,
.editor-content .lead {
	font-size: calc(var(--base-size) * 1.25) !important;
	color: unset !important;
}

.editor-content .h6,
.editor-content h6
{
	font-size: calc(var(--base-size) * 1) !important;
}

.editor-content .small {
	font-size: calc(var(--base-size) * 0.8) !important;
}

.editor-content .display-1 {
	font-size: calc(var(--base-size) * 6.0) !important;
}

.editor-content .display-2 {
	font-size: calc(var(--base-size) * 5.5) !important;
}

.editor-content .display-3 {
	font-size: calc(var(--base-size) * 4.5) !important;
}

.editor-content .display-4 {
	font-size: calc(var(--base-size) * 3.5) !important;
}
*/

/* Medium screens (max-width: 992px) */
@media (max-width: 992px) {
	.hero-container, .note-editable, .page-card-body, .welcome-page {
		--base-size: calc(1rem * 1 * 0.85);
	}

	.editor-content .fontsize-extra-small {
		--base-size: calc(1rem * 0.8 * 0.85);
	}

	.editor-content .fontsize-small {
		--base-size: calc(1rem * 0.9 * 0.85);
	}

	.editor-content .fontsize-large {
		--base-size: calc(1rem * 1.25 * 0.85);
	}

	.editor-content .fontsize-extra-large {
		--base-size: calc(1rem * 1.5 * 0.85);
	}
}

/* Small screens (max-width: 768px) */
@media (max-width: 575px) {

	.editor-content {
		--base-size: calc(1rem * 1 * 0.7);
	}

	.editor-content .fontsize-extra-small {
		--base-size: calc(1rem * 0.8 * 0.7);
	}

	.editor-content .fontsize-small {
		--base-size: calc(1rem * 0.9 * 0.7);
	}

	.editor-content .fontsize-large {
		--base-size: calc(1rem * 1.25 * 0.7);
	}

	.editor-content .fontsize-extra-large {
		--base-size: calc(1rem * 1.5 * 0.7);
	}
}

.note-editable.text-light,
.note-editable.text-light *,
.note-editable .text-light,
.note-editable .text-light * {
	color: #f8f9fa!important;
}
.note-editable.text-muted,
.note-editable.text-muted *,
.note-editable .text-muted,
.note-editable .text-muted * {
	color: #6c757d!important;
}
.note-editable.text-dark,
.note-editable.text-dark *,
.note-editable .text-dark,
.note-editable .text-dark * {
	color: #343a40!important;
}

.font-arial, .note-editable .font-arial {
	font-family: Arial, Helvetica, sans-serif!important;
}
.font-arial_black, .note-editable .font-arial_black  {
	font-family: 'Arial Black', Gadget, sans-serif!important;
}
.font-comic_sans_ms, .note-editable .font-comic_sans_ms  {
	font-family: 'Comic Sans MS', cursive, sans-serif!important;
}
.font-courier_new, .note-editable .font-courier_new  {
	font-family: 'Courier New', Courier, monospace!important;
}
.font-helvetica_neue, .note-editable .font-helvetica_neue {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif!important;
}
.font-helvetica, .note-editable .font-helvetica {
	font-family: Helvetica, Arial, sans-serif!important;
}
.font-impact, .note-editable .font-impact {
	font-family: Impact, Charcoal, sans-serif!important;
}
.font-lato, .note-editable .font-lato {
	font-family: 'Lato', Arial, Helvetica, sans-serif!important;
}
.font-lucida_grande, .note-editable .font-lucida_grande {
	font-family: 'Lucida Grande', Lucida, sans-serif!important;
}
.font-roboto, .note-editable .font-roboto {
	font-family: 'Roboto', Arial, Helvetica, sans-serif!important;
}
.font-tahoma, .note-editable .font-tahoma {
	font-family: Tahoma, Geneva, sans-serif!important;
}
.font-times_new_roman, .note-editable .font-times_new_roman {
	font-family: 'Times New Roman', Times, serif!important;
}
.font-verdana, .note-editable .font-verdana {
	font-family: Verdana, Geneva, sans-serif!important;
}

.align-left {
	text-align: left!important;
}
.align-center {
	text-align: center !important;
}
.align-right {
	text-align: right !important;
}

/* override a weird bootstrap class issue with multiple link cards */
.card-link+.card-link {
	margin-left: unset;
}

/* igniter media image search results */
.image-result-set {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}

.image-result-set img {
	width: auto;
	height: 250px; /* Set a consistent height for images */
	max-width: 230px; /* Ensure max width */
	object-fit: contain; /* Shrink to fit inside container while preserving aspect ratio */
	margin-bottom: 10px;
	border-radius: 8px; /* Optional: Round corners */
	border: 1px solid #ccc; /* Optional: Border for images */
	background-color: #ddd; /* Optional: Background color */
}

/* Media Queries to handle up to 3 columns depending on screen size */
@media (min-width: 576px) {
	.image-result-set img {
		flex: 1 0 calc(33.33% - 16px); /* 3 columns on medium screens */
	}
}
@media (max-width: 575px) {
	.image-result-set img {
		flex: 1 0 calc(50% - 16px); /* 2 columns on smaller screens */
	}
}

/* when editing a Connect section element on a smaller screen, the
large bootbox dialog shrinks by default to 500px wide max; override */
.modal-dialog.modal-lg {
	max-width:95%;
}
@media (min-width:576px) {
	.modal-dialog.modal-lg {
		max-width: 800px;
	}
}

/* set the default values for the cropper.js canvas */
#image-crop {
	height: auto;
	min-height: 50vh;
	max-height: 500px;
	width: 100%;
	max-width: 766px;
}

/* used for igniter media image select dialog */
.image-content {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px;
	max-height:70vh;
	overflow-y: auto;
}

/* this is experimental to show card body on top of background image */
/*
.card .connect-card-content.body-over-image {
	display: grid!important;
	align-items: center;
	& > * {
		grid-area: 1 / 1;
	}
}
.card .connect-card-content.body-over-image .card-img-container {
	width: 100%;
	height: 100%;
}
.card .connect-card-content.body-over-image .card-img-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
*/

@media (min-width: 992px) {
	.w-lg-50 {
		width:50%!important;
	}
	.w-lg-25 {
		width: 25% !important;
	}
	.w-lg-75 {
		width: 75% !important;
	}
	.w-lg-100 {
		width: 100% !important;
	}
}