html, body {
	height: 100%;
	margin: 0; /* Remove default margin */
	font-family: Onest;
	background-color: #0e0e0c;
	color: #FFF;
	overflow-x: hidden;
}

html:has(body.bodystuck), body.bodystuck {
	overflow: hidden;
	margin-top: 0em;
}


.cover-photo-container {
	background-color: #0e0e0c;
	height: 100vh; /* Sets height to 100% of the viewport height */
	width: 100vw; /* Sets width to 100% of the viewport width */

	/* Optional: Styles for content over the image */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white; /* Text color */
	/*text-align: center;*/
	padding: 20px;
	box-sizing: border-box; /* Include padding in width/height calculations */
}

/*
@media (min-width: 768px) {
	:root { --bg-image: url(/assets/images/cover-photo-website.png); }
	.cover-photo-container {
		background-image: url(/assets/images/cover-photo-website.png);
		background-position: top left;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
}
*/


@media (max-width: 576px) {
	.form-container {
		min-width: 94vw;
	}
}

.page-title, .home-header {
	font-family: "Pridi";
	font-weight: 400;

}

.page-title{
	font-size: 2em;
	color: #f8bb23;
}

.home-header {
	font-size: 2.5em;
}

.container {
	width: 50%; /* The square will be 50% of its parent's width */
	margin: auto; /* Center the container for demo */
}

.square {
	aspect-ratio: 1 / 1; /* This ensures the height always matches the width */
	width: 100%;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

.resume-sq.active {
	background-color: #f8bb23!important;
}

.resume-sq.active .square-content i {
	color: #0C0C0E!important;
}

.slab {
	font-family: "Pridi";
}

.skill-title {
	font-family: "Pridi";
	color: #f8bb23;
	font-weight: 400;
	font-size: 1.1em;
}

.smaller {
	font-size: 0.8em;
}

.smallest {
	font-size: 0.7em;
}

.large {
	font-size: 3.375em!important;
}

.largest {
	font-size: 3.5em!important;
}

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

tr.inactive a, tr.inactive td {
	color: #555;
}

.ui-autocomplete {
	z-index: 1060; /* Or any number higher than Bootstrap modal (1050) or navbar */
}

.btn.btn-md {
	--bs-btn-padding-y: .25rem; 
	--bs-btn-padding-x: .5rem; 
	--bs-btn-font-size: .75rem;
}

.custom-popover-width {
	overflow: hidden;
	--bs-popover-max-width: 350px;
	width: 100%;
}
.custom-popover-width .popover-body {
	padding: 0; /* Removes padding to make the list-group-flush truly edge-to-edge */
}

.tg-listgroup a.list-group-item.active, .tg-listgroup a.list-group-item:hover  {
	--bs-list-group-active-bg: #FFF;
	--bs-list-group-border-color: rgba(0, 0, 0, 0.125);
	--bs-list-group-active-color: #212529;
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
	border-left: 5px solid #f2c638;
}

.tg-listgroup a.list-group-item {
	border-left: 5px solid #FFF;

}

form.darkmode {
	input.form-control {
		padding: 0.5em auto!important;
	}
	input.form-control, textarea.form-control, select.form-control, select.form-select {
		background-color: rgba(29,29,29,0.75);
		border: 1px solid rgb(29,29,29);
		color: #AAA;
	}
	label{
		color: #FFF!important;
		padding-bottom: 1em;
	}

}

.admindatatable, .table {
	font-size: 0.9em!important;

	a, td {
		color: #FFF;
	}
	thead th {
		color: var(--bs-yellow);
	}
	label {
		/* Example: Change background color */
		color: #FFF;
	}
}

.dt-search label, 
.dt-search input[type="search"], 
.dt-length label, 
.dt-length select, 
.dt-info,
.dt-layout-start .dt-info, 
div.dt-container .dt-paging .dt-paging-button.current, 
div.dt-container .dt-paging .dt-paging-button.current:hover {
	color: #FFF!important;
}

.table {
	font-size: 1.25em;
}
.dt-length label {
	padding-left: 1em;
}
.dt-search label {
	padding-right: 1em;
}

.dt-search input[type="search"], .dt-length select {
	background-color: rgba(29,29,29,0.75);
	border: 1px solid rgb(29,29,29);
}

.breadcrumb a.breadcrumb-item {
	font-size: 1.25em;
}

.breadcrumb a.breadcrumb-item:not(.active) {
	color: #FFF;
}

.breadcrumb a.breadcrumb-item.active {
	color: var(--bs-yellow);
	font-weight: bold;
}

.custom-height-btn {
	height: 3.6rem;
	padding-top: 0rem;
	padding-bottom: 0rem;
}

.icon-warning {
	color: var(--bs-yellow);
	fill: var(--bs-yellow);
}
.icon-white {
	color: #FFF;
	fill: #FFF;
}
.no-sort::after {
	display: none !important;
}