/*global*/
.foo{color:#123456}

/* Document repository: search and Go-button row highlight (standardized yellow) */
.search-highlight {
	background-color: #ffffcc !important;
	border: 2px solid #e0e0a0 !important;
}

/* Document activity modal: center all text on mobile */
@media (max-width: 767px) {
	#document_activity_modal .custom-modal-content,
	#document_activity_modal .custom-modal-body,
	#document_activity_modal #activity_modal_subtitle,
	#document_activity_modal table,
	#document_activity_modal thead th,
	#document_activity_modal tbody td {
		text-align: center !important;
	}
}

/* Ensure minicolors color picker is visible */
.colorpicker,
.colorpicker-component {
	overflow: visible !important;
}

/* Ensure minicolors panel displays on top without being clipped */
.minicolors-panel {
	position: absolute !important;
	z-index: 99999 !important;
}

/* Ensure parent containers don't clip the panel */
.card_section .line,
.card_section .row,
.card_section,
.card_section .col-xs-6,
.card_section .col-md-4,
.card_section [class*="col-"] {
	overflow: visible !important;
}

/* Fix for input buttons with button-colorswap-primary class */
INPUT[type='button'].button-colorswap-primary,
INPUT[type='submit'].button-colorswap-primary {
	background-color: var(--agent-bg-color1, #009901) !important;
	color: var(--agent-fg-color1, #ffffff) !important;
	border: 1px solid #000000 !important;
}

INPUT[type='button'].button-colorswap-primary:hover,
INPUT[type='submit'].button-colorswap-primary:hover {
	background-color: var(--agent-bg-color2, #000000) !important;
	color: var(--agent-fg-color2, #ffffff) !important;
	border: 1px solid #000000 !important;
}

/* Fix for anchor buttons with button-colorswap-primary class */
A.button.button-colorswap-primary {
	background-color: var(--agent-bg-color1, #009901) !important;
	color: var(--agent-fg-color1, #ffffff) !important;
	border: 1px solid #000000 !important;
}

A.button.button-colorswap-primary:hover {
	background-color: var(--agent-bg-color2, #000000) !important;
	color: var(--agent-fg-color2, #ffffff) !important;
	border: 1px solid #000000 !important;
}

/* Fix for buttons with button-colorswap-secondary class */
BUTTON.button-colorswap-secondary,
INPUT[type='button'].button-colorswap-secondary,
INPUT[type='submit'].button-colorswap-secondary,
A.button.button-colorswap-secondary {
	background-color: var(--agent-bg-color2, #000000) !important;
	color: var(--agent-fg-color2, #ffffff) !important;
	border: 1px solid #000000 !important;
}

BUTTON.button-colorswap-secondary:hover,
INPUT[type='button'].button-colorswap-secondary:hover,
INPUT[type='submit'].button-colorswap-secondary:hover,
A.button.button-colorswap-secondary:hover {
	background-color: var(--agent-bg-color1, #009901) !important;
	color: var(--agent-fg-color1, #ffffff) !important;
	border: 1px solid #000000 !important;
}

/* Icon link colorswap classes for restore/delete icons */
A.icon-link-colorswap-primary {
	display: inline-block;
	padding: 6px 10px;
	background-color: var(--agent-bg-color1, #009901) !important;
	color: var(--agent-fg-color1, #ffffff) !important;
	border: 1px solid #000000;
	border-radius: 3px;
	transition: all 0.2s ease;
}

A.icon-link-colorswap-primary:hover {
	background-color: var(--agent-bg-color2, #000000) !important;
	color: var(--agent-fg-color2, #ffffff) !important;
	text-decoration: none;
}

A.icon-link-colorswap-secondary {
	display: inline-block;
	padding: 6px 10px;
	background-color: var(--agent-bg-color2, #000000) !important;
	color: var(--agent-fg-color2, #ffffff) !important;
	border: 1px solid #000000;
	border-radius: 3px;
	transition: all 0.2s ease;
	text-decoration: none;
}

A.icon-link-colorswap-secondary:hover {
	background-color: var(--agent-bg-color1, #009901) !important;
	color: var(--agent-fg-color1, #ffffff) !important;
	text-decoration: none;
}

/* Override table listing underline for icon-link buttons */
.agent_dashboard TABLE.listing A.icon-link-colorswap-primary,
.agent_dashboard TABLE.listing A.icon-link-colorswap-primary:hover,
TABLE.listing A.icon-link-colorswap-primary,
TABLE.listing A.icon-link-colorswap-primary:hover,
.agent_dashboard TABLE.listing A.icon-link-colorswap-secondary,
.agent_dashboard TABLE.listing A.icon-link-colorswap-secondary:hover,
TABLE.listing A.icon-link-colorswap-secondary,
TABLE.listing A.icon-link-colorswap-secondary:hover {
	text-decoration: none !important;
}

/* Add spacing above vendors tab system */
.vendors-tab-system {
	margin-top: 35px;
}

/* Fix widget title text color when editing in vendors tab */
.vendors-tab-system .tab-content .widget_title:focus {
	color: #000000 !important;
	background: #ffffff !important;
}

/* Also fix for the table header that contains the widget title */
.vendors-tab-system .tab-content .listing_widgets TH.agent_bg_color1 INPUT.widget_title:focus,
.vendors-tab-system .tab-content .listing_widgets TH INPUT.widget_title:focus {
	color: #000000 !important;
	background: #ffffff !important;
}

/* Fix tooltip overflow issues in mobile vendor cards */
@media (max-width: 767px) {
	/* Allow tooltips to overflow table cells */
	.agent_dashboard_mobile TABLE.listing TD {
		position: relative;
		overflow: visible !important;
	}
	
	.agent_dashboard_mobile TABLE.listing TR.list_item {
		position: relative;
		overflow: visible !important;
	}
	
	.agent_dashboard_mobile TABLE.listing {
		overflow: visible !important;
	}
	
	/* Improved mobile tooltip for rating info icon */
	.rating-tooltip-trigger {
		position: relative;
		z-index: 1;
	}
	
	.rating-tooltip {
		position: fixed !important;
		width: 213px !important;
		max-width: 213px !important;
		white-space: normal !important;
		z-index: 99999 !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		margin-top: 8px !important;
		line-height: 1.4 !important;
		padding: 10px 12px !important;
		box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
	}
	
	/* Arrow positioning for tooltip above icon */
	.rating-tooltip.tooltip-above::after {
		top: auto !important;
		bottom: -6px !important;
		border-bottom-color: transparent !important;
		border-top-color: #333 !important;
	}
}

/* Fix active tab colors to use agent colors */
.vendors-tab-system .nav-tabs > li.active > a,
.vendors-tab-system .nav-tabs > li.active > a:hover,
.vendors-tab-system .nav-tabs > li.active > a:focus {
	background-color: var(--agent-bg-color1, #009901) !important;
	color: var(--agent-fg-color1, #ffffff) !important;
}

/* Hide vendor navigation on desktop - only show on mobile */
.vendor-nav {
	display: none;
}

@media (max-width: 767px) {
	.vendor-nav {
		display: block;
	}
}

/* Move Create Template button up slightly */
.create-template-button {
	position: relative;
	top: -7px !important;
}

/* Add subtle glow to scroll-to-top arrow icon for visibility on dark footer */
BODY.scrolled .scroll_to_top I {
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.6);
}

/* Change copyright footer background to true black */
.copyright {
	background: #000000 !important;
}

/* Hide the system default file input */
.hidden-file-input {
	opacity: 0;
	position: absolute;
	z-index: -1;
	width: 0.1px;
	height: 0.1px;
	overflow: hidden;
}

/* Style labels as buttons for file inputs */
LABEL.button {
	display: inline-block;
	padding: 6px 12px;
	margin-right: 20px;
	cursor: pointer;
	text-decoration: none;
	border-radius: 4px;
}

LABEL.button:hover {
	text-decoration: none;
}

/* Ensure label buttons with colorswap classes get agent colors */
LABEL.button.button-colorswap-primary,
.client_intro .client_intro_image LABEL.button.button-colorswap-primary {
	background-color: var(--agent-bg-color1, #009901) !important;
	color: var(--agent-fg-color1, #FFFFFF) !important;
	border: 1px solid #000000 !important;
}

LABEL.button.button-colorswap-primary:hover,
.client_intro .client_intro_image LABEL.button.button-colorswap-primary:hover {
	background-color: var(--agent-bg-color2, #000000) !important;
	color: var(--agent-fg-color2, #FFFFFF) !important;
	border: 1px solid #000000 !important;
}

/* Center the mobile upload progress text without affecting circular progress styles elsewhere */
.mobile-progress-text {
	text-align: center !important;
}

.coordinator-approval-message {
	font-size: 11px;
	color: #339900;
	font-weight: 600;
	margin-top: 4px;
}

.mobile-approval-message {
	text-align: center;
	font-size: 12px;
	color: #339900;
	font-weight: 600;
	margin-bottom: 12px;
	line-height: 1.4;
}

.agent-mobile-approval-detail {
	text-align: center;
	font-size: 12px;
	color: #333333;
	margin: 6px 0;
	font-weight: 400;
	line-height: 1.4;
}


/*large only*/
@media (min-width: 1200px) {

}

/*medium*/
@media (min-width: 992px) and (max-width: 1199px) {

}

/*small*/
@media (min-width: 768px) and (max-width: 991px) {
BODY.scrolled .scroll_to_top {
    bottom: 38px;
    right: 14px;
    z-index: 2;
}
}

/*xsmall*/
@media (max-width: 767px) {
BODY.scrolled .scroll_to_top {
    bottom: 38px;
    right: 14px;
    z-index: 2;
}
}


/* Dim N/A Contract Terms */
TR.user_contract_date_na>TD {
    opacity: 0.3;
}

/* Footer */
.disclaimer 
    {
        background: #313234;
        border-bottom: 1px solid #d7d7d7;
    }
a.disclink 
    {
    color:#ffffff;
    text-decoration: none;
    }
a.disclink:hover 
    {
    color: #009901;
    }

.disclaimer {
    text-align: center;
    padding: 20px 0px;
    background: #222222;
    margin-top: 0px;
    font-size: 15px;
    color: #CCCCCC;
    }

#footmenu {
	background: #111111;
	min-height: 50px;
	padding-top:15px;
    padding-bottom:15px;
    border-bottom: 1px solid #d7d7d7;
}
#footmenu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#footmenu ul {
	width: 100%;
	text-align: center;
}
#footmenu li {
	display: inline-block;
	position: relative;
}
#footmenu a {
	display: block;
	line-height: 20px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
    text-transform: uppercase;
}
#footmenu li a:hover {
	color: #009901;
}

@media screen and (max-width: 800px){
	#footmenu {position:relative}
	#footmenu ul {height:auto;}
}





/* New Textured Header BG */
DIV.headline {
    background: #121619;
    padding: 50px;
    /* min-height:100%; */
    background:linear-gradient(0deg, rgba(18, 22, 25, 0.8), rgba(18, 22, 25, 0.8)), url(https://app.whatsnext.realestate/images/header-bg.jpg);
    background-size:cover;
    background-position: center center;
    background-repeat: repeat;
    background-size: auto;
}

DIV.headline H1 {
    background: transparent;
}




/* Links & Space between non UC and UC divider */
.timeline_contract_boundary .timeline_contract_boundary_info {color: #009901;}
.timeline_contract_boundary_action A {color: #cc0000;}
.timeline_contract_boundary {
    padding: 150px 0px 5px 50px;
    margin-bottom: 150px;
}




/* Timeline Layout */
/* Agent*/
.agent_tools_buttons {
    text-align: center;
    margin: 0px 0px 10px 0px;
}

/* Print Timeline Styling */
.print_timeline_items table th:nth-child(2),
.print_timeline_items table th:nth-child(3),
.print_timeline_items table th:nth-child(4) {
    text-align: center;
}
.print_timeline_items table td:nth-child(2),
.print_timeline_items table td:nth-child(3),
.print_timeline_items table td:nth-child(4) {
    text-align: center;
}

/* Larger checkboxes for print timeline */
.print_timeline_items input[type="checkbox"] {
    transform: scale(1.5);
    margin: 5px;
}

/* Vertically center checkboxes in table cells */
.print_timeline_items .checkbox_cell {
    vertical-align: middle;
}
.client_intro .client_intro_address INPUT.text {
    font-size: 40PX;
    font-weight: 600;
    margin: 40px;
}
.client_intro INPUT.H2 {text-align: center;}


/* Users */
.client_intro H2 {
    font-size:40px;
    text-align: center;
}
.client_intro_headline {
    text-align: center;
    margin: 50px;
}
.client_intro_content {margin: 50px 0;}

#user_tools_container .agent_tools {
    border-bottom:0px;
} 

.client_dashboard_next_timeline_item {
    padding-bottom: 39px;
    border-bottom: 3px solid black;
}

/* Agent Footer Component */
.agent-footer-component {
    background: #333333;
    padding: 30px 0;
    margin-top: 0;
}

.agent-footer-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.agent-footer-left {
    flex: 0 0 auto;
    color: #FFFFFF;
}

.agent-info-container {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.agent-image {
    flex-shrink: 0;
}

.agent-details {
    flex: 1;
}

.agent-footer-left img {
    margin-bottom: 0;
}

.agent-footer-left a {
    color: #FFFFFF;
    text-decoration: none;
}

.agent-footer-left a:hover {
    text-decoration: underline;
}

.agent-footer-center {
    flex: 1;
    min-width: 0;
}

.agent-footer-right {
    flex: 0 0 auto;
    max-width: 200px;
    text-align: center;
    color: #FFFFFF;
}

.agent-footer-right img {
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.agent-footer-right a {
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    display: block;
}

.agent-footer-right a:hover {
    text-decoration: underline;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .agent-footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .agent-footer-left,
    .agent-footer-right {
        flex: none;
        width: 100%;
        text-align: center;
    }
    
    .agent-footer-center {
        display: none;
    }
    
    .agent-info-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    
    .agent-footer-component {
        padding: 20px 0;
    }
}

/* Coordinator Footer Component */
.coordinator-footer-component {
    background: #333333;
    padding: 30px 0;
    margin-top: 0;
}

.coordinator-footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.coordinator-footer-center {
    flex: 0 0 auto;
    max-width: 400px;
    text-align: center;
    color: #FFFFFF;
}

.coordinator-footer-center img {
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.coordinator-footer-center a {
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    display: block;
}

.coordinator-footer-center a:hover {
    text-decoration: underline;
}

/* Mobile Responsiveness for Coordinator Footer */
/* Desktop: Keep all View options on one line */
@media (min-width: 768px) {
	DIV.dashboard_filters_combined {
		margin: 15px 0px 15px 0 !important;
	}
	
	DIV.dashboard_filters_combined LABEL {
		display: inline-block;
		margin-right: 15px;
		white-space: nowrap;
	}
}

@media (max-width: 767px) {
    .coordinator-footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .coordinator-footer-center {
        flex: none;
        width: 100%;
        text-align: center;
    }
    
    .coordinator-footer-component {
        padding: 20px 0;
    }

    /* Coordinator Dashboard Filters - 2-column layout for View checkboxes on mobile */
    DIV.dashboard_filters LABEL {
        display: inline-block;
        width: 48%;
        margin: 2px 1% !important;
        white-space: nowrap;
    }
    
    /* Coordinator Dashboard Filters - Combined section on mobile uses 2-column for types, 3-column for timing */
    DIV.dashboard_filters_combined LABEL {
        display: inline-block;
        width: 48%;
        margin: 2px 1% !important;
        white-space: nowrap;
    }
    
    /* Last 3 labels (timing options) in combined section use 3-column layout */
    DIV.dashboard_filters_combined LABEL:nth-last-child(-n+3) {
        width: 30%;
        margin: 2px 1.5% !important;
    }
    
    /* Fix coordinator mobile listing cards to fit within container padding */
    .coordinator .agent_dashboard_mobile TABLE.listing {
        width: 100%;
        margin: 0 0 75px 0;
        box-sizing: border-box;
    }
    
    .coordinator .agent_dashboard_mobile {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Add spacing between cards on past.php mobile (agents and coordinators) */
    .agent_dashboard TABLE.listing {
        margin-bottom: 75px;
    }
    
    /* Fix activity log table width on mobile */
    #activitylog_container .agent_dashboard TABLE.listing {
        width: 100%;
        table-layout: fixed;
    }
    
    #activitylog_container .agent_dashboard TABLE.listing TH,
    #activitylog_container .agent_dashboard TABLE.listing TD {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Force desktop dashboard to show and mobile dashboard to hide on desktop screens */
@media (min-width: 992px) {
    .agent_dashboard.hidden-sm.hidden-xs {
        display: block !important;
    }
    
    .agent_dashboard.visible-sm.visible-xs,
    .agent_dashboard_mobile {
        display: none !important;
    }
}

/* Center carousel images */
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    margin: 0 auto;
}

/* Ensure rating tooltip text is white on dark background */
.rating-tooltip,
tr.agent_bg_color1 .rating-tooltip,
.agent_bg_color1 .rating-tooltip {
    color: white !important;
}

/* Hide carousel indicators when there's only one image */
.carousel-indicators li:only-child {
    display: none;
}

/* Hide carousel controls when there's only one image - using :has() selector */
.carousel:has(.carousel-indicators li:only-child) .carousel-control {
    display: none !important;
}

/* Fallback for browsers without :has() support */
.carousel-indicators:has(li:only-child) {
    display: none;
}

/* Template default row highlighting */
.agent_dashboard TABLE.listing TR.template-default-row {
    background-color: #dcefbe !important;
}

.agent_dashboard TABLE.listing TR.template-default-row TD,
.agent_dashboard TABLE.listing TR.template-default-row TH {
    background-color: #dcefbe !important;
}

.template-info-icon {
	color: #999999;
	font-size: 0.9em;
	vertical-align: middle;
	cursor: pointer;
}

.template-info-icon:hover,
.template-info-icon:focus {
	color: #000000;
}

#templates TABLE.listing TD INPUT.text,
#templates TABLE.listing TH INPUT.text,
#templates_mobile TABLE.listing TD INPUT.text,
#templates_mobile TABLE.listing TH INPUT.text {
	width: 90%;
}

.template-name-label {
	display: inline-block;
	width: 90%;
	vertical-align: middle;
}

.client_intro_image .carousel:has(.item:only-child) .carousel-control.left,
.client_intro_image .carousel:has(.item:only-child) .carousel-control.right {
    display: none !important;
}

/* Red placeholder text for Primary Contact fields in Client Info card */
INPUT[placeholder='Primary Contact Full Name']::placeholder,
INPUT[placeholder='Primary Contact Email Address']::placeholder {
    color: #d26666;
}

/* Firefox compatibility */
INPUT[placeholder='Primary Contact Full Name']::-moz-placeholder,
INPUT[placeholder='Primary Contact Email Address']::-moz-placeholder {
    color: #d26666;
    opacity: 1;
}

/* IE/Edge compatibility */
INPUT[placeholder='Primary Contact Full Name']:-ms-input-placeholder,
INPUT[placeholder='Primary Contact Email Address']:-ms-input-placeholder {
    color: #d26666;
}

/* Timeline completed checkbox - green background instead of blue */
.timeline .timeline_item .timeline_item_heading .timeline_item_checkbox INPUT[type="checkbox"]:checked {
    accent-color: #009901;
}

/* Timeline completed item info icon - gray instead of white */
.timeline .timeline_item .timeline_item_heading .timeline_item_complete_details .fa {
    color: #666666 !important;
}

.timeline .timeline_item .timeline_item_heading .timeline_item_complete_details .fa:hover {
    color: #000000 !important;
}

/* Timeline checkbox - desktop absolute positioning to prevent wrapping with long titles */
.timeline .timeline_item .timeline_item_heading .timeline_item_checkbox {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    text-align: center;
}

.timeline .timeline_item .timeline_item_heading .timeline_item_checkbox INPUT {
    margin: 0;
}

/* Timeline question icon for incomplete items - desktop absolute positioning */
/* Default position when no checkbox is present */
.timeline .timeline_item .timeline_item_heading .timeline_item_question {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    text-align: center;
}

/* Position to the left of checkbox when checkbox is present */
.timeline .timeline_item .timeline_item_heading .timeline_item_checkbox ~ .timeline_item_question {
    right: 60px;
}

.timeline .timeline_item .timeline_item_heading .timeline_item_question .fa {
    font-size: 30px;
    width: 30px;
    color: #FFFFFF;
    margin: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.timeline .timeline_item .timeline_item_heading .timeline_item_question .fa:hover {
    opacity: 0.8;
}

/* Timeline complete details icon - desktop absolute positioning */
.timeline .timeline_item .timeline_item_heading .timeline_item_complete_details {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    text-align: center;
}

.timeline .timeline_item .timeline_item_heading .timeline_item_complete_details .fa {
    margin: 0;
}

/* Timeline milestone spacing */
.timeline .timeline_milestone {
    margin: 150px 29px 150px 67px;
}

/* Agent view: position entire edit/add/delete + checkbox group so it stays vertically
   centered when the timeline H3 title wraps to two lines (float would stick to top). */
.timeline .timeline_item .timeline_item_heading .timeline_agent_edit {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 4px;
}

/* Let the checkbox <a> participate in the flex row instead of being absolutely positioned */
.timeline .timeline_item .timeline_item_heading .timeline_agent_edit .timeline_item_checkbox {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    width: auto;
}

/* Reserve space so long titles don’t overlap the icon group (agent view only) */
.timeline .timeline_item .timeline_item_heading:has(.timeline_agent_edit) H3,
.timeline .timeline_item .timeline_item_heading:has(.timeline_agent_edit) INPUT.H3 {
    margin-right: 220px;
}


/* Add breathing room to timeline and intro image on mobile */
@media (max-width: 767px) {
    .timeline {
        padding: 0 10px;
    }
    
    .client_intro_image {
        padding: 0 10px;
    }
    
    .client_intro_content {
        padding: 0 10px;
    }
    
    /* Timeline item heading - title and checkbox side by side */
    .timeline .timeline_item .timeline_item_heading {
        position: relative;
    }
    
    .timeline .timeline_item .timeline_item_heading H3 {
        display: block;
        margin: 0;
        padding-right: 105px;
        max-width: 100%;
    }
    
    .timeline .timeline_item .timeline_item_heading .timeline_item_checkbox {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        text-align: center;
    }
    
    .timeline .timeline_item .timeline_item_heading .timeline_item_checkbox INPUT {
        margin-top: 0;
    }
    
    .timeline .timeline_item .timeline_item_heading .timeline_item_question {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        text-align: center;
    }
    
    .timeline .timeline_item .timeline_item_heading .timeline_item_question .fa {
        margin: 0;
    }
    
    .timeline .timeline_item .timeline_item_heading .timeline_item_complete_details {
        position: absolute;
        right: 58px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        text-align: center;
    }
    
    /* Agent view - timeline_agent_edit container positioned at right */
    .timeline .timeline_item .timeline_agent_edit {
        position: absolute !important;
        right: 10px !important;
        float: none !important;
        display: block !important;
    }
    
    /* Agent edit icons displayed inline */
    .timeline .timeline_item .timeline_agent_edit A:not(.timeline_item_checkbox) {
        display: inline-block !important;
        margin: 0 3px !important;
    }
    
    /* Checkbox positioned absolutely at far right WITHIN agent_edit container */
    .timeline .timeline_item .timeline_agent_edit .timeline_item_checkbox,
    .timeline .timeline_item .timeline_agent_edit A.timeline_item_checkbox {
        position: absolute !important;
        right: 0 !important;
        top: 5 !important;
        float: none !important;
    }
    
    /* Agent_edit container needs right padding for the absolutely positioned checkbox */
    .timeline .timeline_item .timeline_agent_edit:has(.timeline_item_checkbox) {
        padding-right: 38px !important;
    }
    
    /* User view: checkbox is in a <div> wrapper */
    .timeline .timeline_item .timeline_item_heading:has(.timeline_agent_edit) DIV.timeline_item_checkbox {
        position: absolute !important;
        right: 13px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .timeline .timeline_item .timeline_item_heading:has(.timeline_agent_edit) DIV.timeline_item_checkbox INPUT {
        margin-top: 0 !important;
    }
    
    /* H3 and INPUT.H3 with agent edit needs padding on right for all icons */
    /* Apply to all timeline items that have agent_edit (not just AGENT type) */
    .timeline .timeline_item .timeline_item_heading:has(.timeline_agent_edit) H3,
    .timeline .timeline_item .timeline_item_heading:has(.timeline_agent_edit) INPUT.H3 {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        padding-right: 150px !important;
        margin: 0 !important;
    }
    
    /* Remove border from next timeline item on mobile */
    .client_dashboard_next_timeline_item {
        border-bottom: none;
    }
    
    /* Reduce spacing around client intro headline on mobile */
    .client_intro_headline {
        margin: 10px;
        margin-top: 50px;
    }
    
    /* Reorder sidebar content on mobile: Sidebar > Headline > Filter > Timeline */
    .timeline_row {
        display: flex;
        flex-direction: column;
    }
    
    .sidebar_col {
        order: 1;
    }
    
    .timeline_col {
        order: 2;
    }
}

/* ==================================================================
   COORDINATORS DOCUMENT REPOSITORY - NOTES AUTO-SAVE INDICATOR
   ================================================================== */

/* Hide "Note saved" indicator by default */
.notes-auto-save-indicator {
    display: none;
    text-align: center;
    margin-top: 4px;
    font-size: 11px;
    color: var(--agent-bg-color1, #28a745);
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Show indicator with fade-in effect */
.notes-auto-save-indicator.show {
    display: block;
    opacity: 1;
}

/* Fade out indicator */
.notes-auto-save-indicator.fade-out {
    opacity: 0;
}

/* ==================================================================
   COORDINATORS DOCUMENT REPOSITORY - STICKY HEADERS
   ================================================================== */

/* Make h2 section headers sticky for coordinators document repository */
.document_section h2.section-title-header {
    position: sticky;
    top: 0;
    z-index: 1010; /* Higher than table header */
    margin: 0 !important;
    padding: 20px 15px !important;
    background-color: var(--agent-bg-color1, #009901) !important;
    font-size: 30px !important;
}

/* Make table headers sticky below the h2 */
.document_section .document-table-header {
    position: sticky;
    top: 73px;
    z-index: 1009; /* Just below h2 */
    background-color: inherit;
}

.document_section .document-table-header th {
    background-color: inherit;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Document section toolbar layout */
.document-section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}

.document-section-toolbar__client {
    flex: 1;
    color: #666;
    font-size: 16px;
    margin-top:32px;
    text-align: left;
}

.document-section-toolbar__jump {
    flex: 0 0 320px;
    text-align: left;
}

.document-section-toolbar__actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.jump-to-section-label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jump-to-section-select {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

#documents_container > .document_section:first-of-type {
    padding-top: 60px;
}

/* Mobile devices - disable sticky on small screens */
@media (max-width: 767px) {
    .document_section h2.section-title-header {
        position: static !important;
    }
    
    .document_section .document-table-header {
        position: static !important;
    }
    
    .document-section-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .document-section-toolbar__client,
    .document-section-toolbar__actions {
        text-align: center;
        justify-content: center;
    }
    
    .document-section-toolbar__jump {
        flex: 1;
    }
}

/* Mobile cards container styling */
.mobile-cards-container {
    margin: 50px 0px;
}

.mobile-document-card {
    border: 1px solid #ccc;
    border-radius: 5px;
}

.mobile-document-card.approved {
    background-color: #d4edda;
    border-color: #badbcc;
}

.mobile-document-card.approved .card-body {
    background-color: transparent;
}

.mobile-document-card textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
}

.mobile-document-card .file-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    padding: 8px 0;
}

.mobile-document-card .file-actions .btn {
    margin: 0;
}

.mobile-document-card .mobile-section-header h4,
.mobile-document-card .mobile-document-header h4 {
    margin: 0;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
}

.mobile-document-card .mobile-section-header h4 {
    color: var(--agent-fg-color1, #FFFFFF);
}

.mobile-document-card .mobile-document-header h4 {
    color: var(--agent-fg-color2, #FFFFFF);
}

.mobile-document-card .mobile-document-header {
    border-radius: 0 !important;
}

.mobile-cards-container .form-group {
    text-align: center;
}

.mobile-cards-container .form-group label {
    display: block;
    margin: 10px;
}

.mobile-cards-container .file-upload-area {
    display: inline-block;
    text-align: center;
    width: 100%;
    max-width: 320px;
}

.mobile-cards-container .file-upload-area .mobile-choose-file-btn {
    margin-bottom: 6px;
}

.mobile-cards-container .file-helper-text {
    font-size: 11px;
    color: #999;
}

.security-status-badge {
    font-size: 11px;
    margin-top: 6px;
    text-align: center;
}

.form-group {
    margin: 15px !important;
}