@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: #AAA;
}

.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: #102f63;
	}
	thead th {
		color: var(--bs-black);
	}
}

.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: #102f63!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-black);
	font-weight: bold;
}

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

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

textarea {
	height: 6em;
}

#dt-subprocess tbody tr td {
	word-wrap: break-word; /* Allows long words to break */
	word-break: break-all;
	max-width: 300px; /* Enforces a maximum width */
}

.bg-success-diagonal {
	/* Customize height and other properties as needed */
	width: 100%;

	/* Create the diagonal stripes using repeating-linear-gradient */
	background-image: repeating-linear-gradient(
		15deg, var(--bs-green), var(--bs-green) 1px, transparent 1px, transparent 3px
	);
}

.bg-success-subtle-diagonal {
	/* Customize height and other properties as needed */
	width: 100%;

	/* Create the diagonal stripes using repeating-linear-gradient */
	background-image: repeating-linear-gradient(
		15deg, #D1E7DD, #D1E7DD 1px, transparent 1px, transparent 3px
	);

}

.bg-warning-diagonal {
	/* Customize height and other properties as needed */
	width: 100%;

	/* Create the diagonal stripes using repeating-linear-gradient */
	background-image: repeating-linear-gradient(
		15deg, var(--bs-yellow), var(--bs-yellow) 1px, transparent 1px, transparent 3px
	);
}

.droppable {
	position: absolute;
}

.dashed-drag {
	font-size: 0.8em;
	border: 1px dashed #759ae0;
	background-color: #d4e1fa;
	cursor: pointer;
}

.dashed-drop, .dashed-drop2, .dashed-drop3 {
	font-size: 0.75em;
	border: 1px dashed #AAA;
	background-color: #EFEDEC;
	cursor: pointer;
}

.dashed-drop {
	min-height: 7.5vw;
}

.dashed-drop3 {
	min-height: 9.5vw;
}

.chosen-results li.active-result {
	z-index: 99999;
}

.chosen-container {
	/* Ensure the container has a position other than 'static' for z-index to work */
	position: relative; 
	z-index: 99999; /* Use a value higher than other elements on your page */
}