/* Removes default gray tab backgrounds and handles text color */
.nav-tabs .nav-link {
	color: #ffffff;
	border: none;
	padding: 12px 20px;
	border-radius: 8px 8px 0 0; /* Smooths top corners */
	transition: all 0.2s ease-in-out;
}

/* ODD TABS (1st, 3rd, etc.) Normally: Magenta (#ee00ff) */
.nav-item:nth-child(odd) .nav-link {
	background-color: #ee00ff;
	color: #ffffff;
}

/* EVEN TABS (2nd, 4th, etc.) Normally: Royal Blue (#14009e) */
.nav-item:nth-child(even) .nav-link {
	background-color: #14009e;
	color: #ffffff;
}

/* Hover State: Boosts brightness slightly for feedback */
.nav-tabs .nav-link:hover {
	color: #ffffff;
	border-color: transparent;
	filter: brightness(1.15); 
}

/* Active Selected Tab State: Boosts brightness to be noticeably more vibrant */
.nav-tabs .nav-link.active {
	color: #ffffff !important;
	border: none !important;
	filter: brightness(1.35); /* Makes the base colour look vibrant and highlighted */
	box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.4); /* Optional: Adds a subtle internal bottom accent lines */
}

.hero-floating-panel {
	position: absolute;
	display: inline-block;
	top: 10%; 
/*	transform: translateY(-100%); */
	right: 0;
	width: 50%;		/* Spans full width of your right-hand column space */
	height: auto;	/* Automatically scales vertically to match your text lengths safely */
	background: transparent;
	border: none;
	padding: 20px 30px; 
	z-index: 5;		/* Places this content layer safely over any background image assets */
	font-weight: 500;
}

/* Forces this child div to break out of the 95% center wrapper and touch screen edges */
.full-width-split-section {
	position: relative;
	width: 100dvw;
    left: 50%;
    right: 50%;
    margin-left: -50dvw;
    margin-right: -50dvw;
    z-index: 10; 
}

/* Uses g-0 on the row to guarantee zero whitespace gaps between the halves */
.full-width-split-section .row.g-0 {
    display: flex;
    flex-wrap: wrap;
}

/* Left Column: Solid White */
.split-col-white { 
	background-color: #ffffff; 
	min-height: 300px; /* Ensures a baseline height even with minimal text */ 
/*
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	left: 0;
*/
}

/* Right Column: Solid Black */
.split-col-black {
    background-color: #000000;
    min-height: 300px;
/*
    display: flex;
    flex-direction: column;
    justify-content: center;
    right: 0;
*/
}

.split-inner-content {
    /* 720px is exactly half of your desired 1440px total grid limit */
    max-width: 700px; 
}

.split-col-white .split-inner-content {
    margin-left: auto;
    margin-right: 0;
}

.split-col-black .split-inner-content {
    margin-left: 0;
    margin-right: auto;
}











/* 1. Global Reset to guarantee no browser bullet points or indent margins appear */
ul.custom-expanding-list {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.list-item-wrapper {
    list-style: none !important;
    list-style-type: none !important;
}

/* 2. Base Configuration for Your Magenta Icons */
.custom-list-icon {
    font-size: 1.5rem;   /* Scaled up slightly to cleanly match your text alignment */
    line-height: 1;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

/* 3. ITEM 1: SKILLS ICON STATE MACHINE (Map/Book Style Transitions) */

/* DEFAULT CLOSED STATE: Show the Tri-Fold Map symbol (\f4a4 is bi-map) */
.list-trigger-header[aria-expanded="false"] .item-subbie::before {
    color: #cc00cc;
    content: "\f4fa"; 
}

/* ACTIVE EXPANDED STATE: Show the Open Book symbol (\f1bc is bi-book) */
.list-trigger-header[aria-expanded="true"] .item-subbie::before {
    color: #cc00cc;
    content: "\f2e6"; 
}

/* 4. ITEM 2: PASSPORT ICON STATE MACHINE (Plus/Minus Style Transitions) */

/* DEFAULT CLOSED STATE: Show the Plus Circle symbol */
.list-trigger-header[aria-expanded="false"] .item-contractor::before {
	color: #0000cc;
    content: "\f4fa"; 
}

/* ACTIVE EXPANDED STATE: Show the Minus Circle symbol */
.list-trigger-header[aria-expanded="true"] .item-contractor::before {
	color: #0000cc;
    content: "\f2e6"; 
}

/* Custom secondary gray layout for description text lines */
.text-muted-custom {
    color: #a0a0a5;
    font-size: 0.95rem;
}


.quick-register {
	display: flex;
	flex-direction: row;
	width: 100%;
	box-sizing: border-box;
}

.quick-register > div {
	flex: 1;
	width: 50%;
	box-sizing: border-box;
	padding: 0px; 
}

/* Forces the table to expand to the full width of your second section */
.quick-register-table {
  width: 100%;
  border-collapse: collapse;
}

/* This row wrapper ensures the content inside flows horizontally */
.quick-register-table tr {
  display: table-row; /* Explicitly forces row layout */
  border-bottom: 1px solid #ccc; 
}

/* These cells will sit side-by-side on the same row */
.quick-register-table td {
  display: table-cell; /* Explicitly forces cell layout */
  padding: 5px 5px;
  vertical-align: middle;
}

/* Gives the label cell a fixed portion of the row */
.quick-register-table td:first-child {
  width: 30%;
  min-width: 80px;
  white-space: nowrap; /* Prevents the label text from wrapping to a second line */
}

/* Gives the input/select cell the remaining space on the row */
.quick-register-table td:last-child {
  width: 70%;
}

/* Standardized styling for both text fields and dropdowns */
.quick-register-table input,
.quick-register-table select {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: inherit;
  color: #ffffff;
  cursor: pointer;
}

/* Optional: Removes the default browser styling for select fields on some systems */
.quick-register-table select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.quick-register-table select option {
	background-color: #212529;
	color: #ffffff;
}




/* Responsive Handling: Stack columns vertically on tablet/mobile views */
@media (max-width: 992px) {

	.hero-floating-panel {
		position: relative;
		top: 0;
		transform: none;
		padding: 40px 20px 0 20px;
	}

    .split-col-white, 
    .split-col-black {
        align-items: stretch !important; /* Forces layout boxes to take up normal horizontal room */
    }

    .split-inner-content {
        max-width: 100%;
        margin: 0 auto !important;
    }
}