/* Custom Styles for OurChurch */
body {
	background-color: #f8f9fa;
	font-family: 'Jost', sans-serif;
	font-size: 1rem;
}

a { color:#14a5c6; }
a:hover { color:#118eab; }

ul.horizontal { margin:0; padding:0 }
ul.horizontal li { display: inline; }

.block-link {
	display: block;            /* make the <a> fill its container */
	text-decoration: none;     /* strip the default underline */
	color: inherit;            /* inherit text color */
	cursor: pointer;           /* show pointer on hover */
}
.block-link:hover {
	border:1px solid #14a5c6;
}

/* ****************************************** Sidebar (large screens) */
.sidebar {
	width: 260px;
	max-width: 260px;
	min-width: 260px;
	height: 100vh;
	overflow-y: auto;
	transform: translateX(0);
	transition: transform 0.3s ease-in-out;
	background-color: #f8f9fa;
}

#sidebarToggle i { font-size:28px; font-weight:900; color:#000; padding:5px; postion:relative; top:2px; }

/* ****************************************** Breadcrumbs */
.bc-item { margin-left:10px; }
.bc-item::before { content: " / "; padding-right:5px; }
.breadcrumb-item, .breadcrumb-item a { 
	color:#344767;
}
.breadcrumb-home-icon {
	color:#96a0b1 !important;
}
.breadcrumb-home-icon i {
	font-size:14px;
}
.breadcrumb-active{
	font-weight:bold;
}
.bc-start, .bc-item { height:35px; margin-top:7px; }


/* ****************************************** Offcanvas (small screens) */
.offcanvas {
	transition: transform 0.3s ease-in-out;
	background-color: #f8f9fa;
	width: 260px;
}
.offcanvas-backdrop.show {
	opacity: 0.5;
	transition: opacity 0.3s ease-in-out;
}

/* ****************************************** Navbar */
.navbar {
	background-color: #f8f9fa !important;
}
.navbar-text {
	font-weight:bold;
}
.logged-in {
	color: #67748e;
	text-decoration:none;
}

/* ****************************************** Forms */
.form-label { margin-bottom:0.2rem; margin-top:0.5rem; }




.high-priority-checkbox { padding-top: 20px; padding-bottom: 5px }

/* When collapsed (for large-screen toggle) */
.offcanvas-collapse {
	transform: translateX(-260px);
}
/* Hide default focus outline on toggle button */
#sidebarToggle:focus {
	box-shadow: none;
}
.brand-img { 
	width: 80%;
}

/* ****************************************** Content boxes */
.content-box {
	background-color: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 1rem;
	padding: 20px 25px 20px 25px;
	box-shadow: rgba(0, 0, 0, 0.05) 0rem 1.25rem 1.6875rem 0rem;
	transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.md-col-right-margin { margin-right:12px; }
.md-col-left-margin { margin-left:12px; }
@media (max-width: 767.98px) {
	.md-col-right-margin { margin-right:0 !important; }
	.md-col-left-margin { margin-left:0 !important; }
}


hr.divider {
	flex-shrink: 0;
	border-top: 0px solid rgba(0, 0, 0, 0.12);
	border-right: 0px solid rgba(0, 0, 0, 0.12);
	border-left: 0px solid rgba(0, 0, 0, 0.12);
	background-color: transparent;
	height: 0.0625rem;
	margin: 1rem 0px;
	border-bottom: none;
	opacity: 0.25;
	background-image: linear-gradient(to right, rgba(52, 71, 103, 0), rgba(52, 71, 103, 0.5), rgba(52, 71, 103, 0)) !important;
}
.rounded-square-container {
	width: 40px; /* Adjust as needed */
	height: 40px; /* Adjust as needed */
	border-radius: 10px; /* Adjust the radius for desired roundness */
	background-color: #fff; /* Optional background color */
	display: flex;
	justify-content: center;
	align-items: center;
	float:left; 
	margin-right:10px;
	position: relative;
	top: -4px;
	box-shadow: rgba(20, 20, 20, 0.12) 0rem 0.25rem 0.375rem -0.0625rem, rgba(20, 20, 20, 0.07) 0rem 0.125rem 0.25rem -0.0625rem;
}
.rounded-square-container i {
    font-size: 18px; /* Adjust icon size */
    color: #67748e; /* Adjust icon color */
}

/* ****************************************** Side Nav */
.nav-link {
	color: #67748e;
}
.nav-link:hover {
	color:#344767;
}
.nav-item {
	padding:5px 0;
}
.nav-item-active {
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.05) 0rem 1.25rem 1.6875rem 0rem;
	border-radius:10px;
	color:#344767;
	font-weight:bold;
}
.nav-item-active .rounded-square-container {
	background:#17c1e8 !important;
}
.nav-item-active .rounded-square-container i {
	color:#fff !important;
}
.nav-item span {
	position: relative;
	top: 3px;
}
.navbar { padding:20px; }


.content-length {
	width:auto;
}
.width-auto { width:auto !important; }
.display-inherit { display:inherit !important; }


/* Ensure footer sticks to the bottom */
main {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}

/* Custom navbar brand styling */
.navbar-brand span:first-child {
    color: #ffffff;
}

.navbar-brand span:last-child {
    color: #9ddbff;
}

/* Sub-navigation bar */
.sub-nav {
    padding: 0.25rem 0;
	 background-color: #9ddbff;
}
.sub-nav .nav-link { 
	color: #006fba;
}



/* ****************************************** Avatar Styles */
.avatar-container {
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #9ddbff;
    color: #006fba;
    font-weight: bold;
    font-size: 1.5rem;
}
.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ****************************************** Polls */
.poll-results-container { width:300px; height:30px; background:#eee; }
.poll-results-yes { height:30px; background:#198754; float:left; text-align:center; color:#fff; font-size:12px; font-weight:700; line-height:30px; }
.poll-results-no { height:30px; background:#dc3545; float:left; text-align:center; color:#fff; font-size:12px; font-weight:700; line-height:30px; }
.poll-results-novote { height:30px; float:left; text-align:center; color:#888; font-size:12px; font-weight:700; line-height:30px; }


/* ****************************************** Clickable Table Row */
.clickable-row {
    cursor: pointer;
}
.clickable-row:hover {
    background-color: #f8f9fa;
}

.pt-5px { padding-top:5px !important; }


/* ****************************************** Discussion Module */
.comments-badge i { color:#c2c7d2; font-size:2.5rem; }
.comments-badge span { background:#627091; font-size:1rem; left:90% !important; top:-5px !important; }
.discussion-preview { line-height: 1.25rem; }
.topic-reply { position:relative; top:-30px; }


/* ****************************************** Form Elements */
.form-control, .form-select, .form-check-input { border-color: #9fa2a6; }


/* ****************************************** Bootstrap Validation Override */
.was-validated .form-control:valid, .form-control.is-valid {
    border-color: #dee2e6; /* Default border color */
    background-image: none;
}
.was-validated .form-select:valid, .form-select.is-valid {
    border-color: #dee2e6;
    background-image: none;
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
    color: inherit; /* Default text color */
}
.was-validated .form-check-input:valid, .form-check-input.is-valid {
    border-color: #dee2e6;
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
    box-shadow: none;
}


/* ****************************************** Calendar Styles */
.calendar {
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}
.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: #f8f9fa;
    text-align: center;
    font-weight: bold;
    padding: .5rem 0;
    border-bottom: 1px solid #dee2e6;
}
.calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 120px;
}
.calendar-day {
    border: 1px solid #e9ecef;
    padding: .5rem;
    position: relative;
    overflow-y: auto;
}
.calendar-day.-other-month {
    background-color: #f8f9fa;
    color: #adb5bd;
}
.calendar-day.-today {
    border:3px solid #17c1e8 !important;
}
.bg-allday {
	background: #5697e0 !important;
	border-color: #487ebb !important;
}
.day-number {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: .8rem;
    font-weight: bold;
}
.new-event-link {
    display: none;
    position: absolute;
    top: 0px;
    left: 10px;
    font-size: .8rem;
	 color: #ee0000;
	 text-decoration: none;
	 font-weight:500;
}
.new-event-link span { 
	font-size:1.2rem;
}
.calendar-day:hover .new-event-link {
    display: block;
}
.events { 
	margin-top: 24px; 
}
.event {
    font-size: .8rem;
    padding: .1rem .3rem;
    border-radius: .25rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #cfe2ff;
    border: 1px solid #9ec5fe;
    cursor: pointer;
}
.event:hover {
    background-color: #b3d1ff;
}
.event.event-private {
    background-color: #d1e7dd; /* A light green for private events */
    border-color: #a3cfbb;
}
.event.border-livestream { border: 1px solid #0000aa !important; }


/* ****************************************** Background & Text Colors */
.bg-primary { background-color: #17c1e8 !important; }
.border-primary { border:1px solid #17c1e8 !important; }
.text-primary { color:#17c1e8 !important; }
.text-info { color:#363d68 !important; }

.bg-secondary { background-color: #a0a0a0 !important; }
.text-secondary { color:#a0a0a0 !important; }




.offcanvas {
  --bs-offcanvas-width: 260px; 
}

.note-editor.is-invalid  {
	border-color: #dc3545;
}

/* ****************************************** Buttons */
.btn { border-radius:10px; }
.btn-sm { border-radius:8px; padding: 3px 10px; }

.btn-primary {
	
	font-weight:500;
	--bs-btn-color: #fff;
	--bs-btn-bg: #17c1e8;
	--bs-btn-border-color: #17c1e8;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #15b0d3;
	--bs-btn-hover-border-color: #15b0d3;
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #15b0d3;
	--bs-btn-active-border-color: #15b0d3;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #0d6efd;
	--bs-btn-disabled-border-color: #0d6efd;
}

.btn-outline-primary {
    --bs-btn-color: #14a5c6;
    --bs-btn-border-color: #14a5c6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #17c1e8;
    --bs-btn-hover-border-color: #17c1e8;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #17c1e8;
    --bs-btn-active-border-color: #17c1e8;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #17c1e8;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #17c1e8;
    --bs-gradient: none;
}

.btn-info {
	border-radius:10px;
	font-weight:500;
	--bs-btn-color: #fff;
	--bs-btn-bg: #363d68;
	--bs-btn-border-color: #363d68;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #2c3255;
	--bs-btn-hover-border-color: #2c3255;
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #2c3255;
	--bs-btn-active-border-color: #2c3255;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #0d6efd;
	--bs-btn-disabled-border-color: #0d6efd;
}

.btn-secondary {
	border-radius:10px;
	font-weight:500;
	--bs-btn-color: #fff;
	--bs-btn-bg: #a0a0a0;
	--bs-btn-border-color: #a0a0a0;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #939393;
	--bs-btn-hover-border-color: #939393;
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #939393;
	--bs-btn-active-border-color: #939393;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #0d6efd;
	--bs-btn-disabled-border-color: #0d6efd;
}
.btn-success {
	border-radius:10px;
	font-weight:500;
}

a.btn-create {
	background: #32c192;
	color:#fff;
}
a.btn-create:hover {
	background: #008a5f;
	color:#fff;
}
a.btn-create:active  {
	background: #008a5f;
	color:#fff;
}

.dot-divider { font-size:4px !important; }

.livestream-form-title { font-size:1.5rem; line-height: 1.6rem; margin-top:5px; }
.livestream-form-event { font-weight:700; }
.livestream-form-date { font-size:1.1rem; }

.dateTileContainer { background:#d1f3fa; border-radius: 0 0 10px 10px; }
.dateTile { background:#17c1e8; color:#fff;  border-radius:10px; padding:10px; min-width:85px; }
.tileDayOfWeek { text-transform:uppercase; font-size:0.9rem; font-weight:700; margin:0; }
.tileDay { font-size:3rem; line-height:3rem; margin:0; }

footer { margin-top:50px; }