/*
app/css/cpockets/
molecule.css
*/
.macrosorter{

	width: 100px;
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;

}

.headermomentumsetup{

	width: 190px;
	max-width: 190px;

}

.momentum_style{

	width: 80px;
	max-width: 80px;
	text-overflow: ellipsis;

}

.momentum_v_scrollablecontent{
	width: 1600px;
	overflow: auto;
}

.fixed_column_activity_name{
	margin-bottom: 1px;
}


#scrollable-wrapper {
    height: 640px;
    overflow-y: scroll; /* Vertical scrolling for the main div */
    border: 1px solid #ccc; /* Just for visualization */
}

#inner-flex-container {
    display: flex; /* Enable Flexbox layout */
    width: 100%; /* Ensure it takes up the full width of the wrapper */
    min-height: 100%; /* Important for vertical scrolling content */
}

#fixed_activity_names {
    width: 180px; /* Fixed width as required */
    flex-shrink: 0; /* Prevents this column from shrinking if needed */
}

#scrolling_momentum_column {
    /* flex-grow: 1; is the key. It makes this element take up all remaining space. */
    flex-grow: 1; 
    
    /* overflow-x: scroll; is the key for horizontal scrolling */
    overflow-x: scroll; 
    
    /* overflow-y: hidden; (Optional) to ensure no rogue vertical scrollbar */
    overflow-y: hidden;
    
    /* Set min-width to 0 to prevent the content from pushing the flex item wider than the container */
    min-width: 0; 
}

/* This div inside the scrolling-column should be wider than the column itself */
#content-that-forces-scroll {
    /* Set a width that is guaranteed to be wider than the remaining space, e.g., a large fixed width */
    width: 2000px; 
    /* Alternatively, you can use min-width: max-content; but this is less supported in older browsers */
}