.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center items horizontally */
    gap: 10px; /* Add spacing between items */
    max-width: 100%; /* Prevent it from exceeding the window size */
    width: 100%; /* Take full width of the window */
    box-sizing: border-box; /* Include padding and border in width calculations */
    margin: 0 auto; /* Center the container if narrower than the screen */
    overflow: hidden; /* Prevent horizontal scroll if items overflow */
    padding: 10px; /* Optional: add padding to avoid touching the edges */
}

.fleximg {
    flex: 1 1 calc(25% - 10px); /* 4 items per row */
    max-width: calc(25% - 10px);
    box-sizing: border-box;
}

.fleximg img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .fleximg {
        flex: 1 1 calc(50% - 10px); /* 2 items per row */
        max-width: calc(50% - 10px);
    }
}

/* Media query for very small screens */
@media (max-width: 480px) {
    .fleximg {
        flex: 1 1 calc(100% - 10px); /* 1 item per row */
        max-width: calc(100% - 10px);
    }
}

.steplist
{
	height: 350px; 
	overflow: auto;
}
.stepblok
{
	background-color: #DBBBA8;
	padding: 1px;
	border-color: #788089;
	border-width: 1px;
	border-style: solid;
	display: block;
	margin: 1px 1px 2px 1px;
}

.grey
{
	color: #cccccc;
}
/* ---------- addlinebox ------- */
.addlinebox
{
	background-color: #DDDDDD;
	color: #000;
	padding: 3px;
	border-color: #999;
	border-width: 1pt;
	border-style: solid;
	margin: 0 0 3px 0;
	overflow: default;
	visibility: visible;
	display: block;
}

/* ---------- regbox ------- */
.regbox
{
	background-color: #FF9;
	color: #000;
	padding: 3px;
	border-color: #B7B7B7;
	border-width: 1pt;
	border-style: solid;
	margin: 3px 0 3px 0;
}
/* ---------- projectbox ------- */
.projectbox
{
	background-color: #EBEB99;
	color: #000;
	padding: 3px;
	border-color: #B7B7B7;
	border-width: 1pt;
	border-style: solid;
	margin: 0 0 3px 0;
}

/* ---------- jobbox ------- */
.jobbox
{
	background-color: #DDE6D8;
	color: #000;
	padding: 3px;
	border-color: #B7B7B7;
	border-width: 1pt;
	border-style: solid;
	margin: 0 0 3px 0;
}

/* ---------- offerbox ------- */
.offerbox
{
	background-color: #E1DDE4;
	color: #000;
	padding: 3px;
	border-color: #B7B7B7;
	border-width: 1pt;
	border-style: solid;
	margin: 0 0 3px 0;
}

/* ---------- orderbox ------- */
.orderbox
{
	background-color: #CF9;
	color: #000;
	padding: 3px;
	border-color: #B7B7B7;
	border-width: 1pt;
	border-style: solid;
	margin: 0 0 3px 0;
}

/* ---------- searchresult ---- */
.searchterm
{
	background-color: #FF9;
	text-align: inherit;
	text-transform: inherit;
	white-space: inherit;
	font-style: inherit;
	font-variant: inherit;
	font-weight: inherit;
	text-decoration: underline;
}
/* ---------- searchbox ------- */
#searchbox
{
	display: none;
	visibility: hidden;
	background-color: #CCF;
	color: #000;
	border: #B7B7B7 1pt solid;
	margin: 0 15px 10px 15px;
	padding: 10px;
}

/* ---------- filter ------- */
.filteredrow { background-color: #FC6; }
#filterbox
{
	/*display: none;*/
	background-color: #FC6;
	color: #000;
	border: #B7B7B7 1pt solid;
	margin: 0 15px 10px 15px;
	padding: 10px;	
}

/* ---- sortering met scripaculous ---- */

ul.statuslist
{
	list-style-image: none;
	list-style-type: none;
	margin-top: 5px;
	margin: 0px;
	padding: 0px;
	display: block;
	border-color: #666;
	border-width: 0px;
	border-style: solid;
}

ul.statuslist li {
padding:4px;
margin:5px;
}

li.sortitem {
background-color: #FFD1BE;
border:1px solid #FF4C00;
cursor: move;
}

/* ----- */

.partname
{
	background-color: #FFE7BD;
	font-weight: bold;
	width: 100%;
}

.inputfield
{
	font-family: verdana, arial;
	font-size: 10pt;
}

.selectedrow { background-color: #E0E0CC; }

.evenrow
{
	background-color: #FFF6BE;
}

.evencolum
{
	background-color: #FFF6BE;
}

/* --CURRENT Project------------- */

.currentproject
{
	padding: 5px;
	margin: 0 0 3px 0;
	background: #FFF url(images/pattern.gif);
	text-align: left;
	border-color: #BFBFBF;
	border-width: 1px;
	border-style: solid;
}

/* --CALENDAR------------- */

.bluelink
{
	color: #333399;
	font-style: normal;
	font-weight: bold;
	text-decoration: underline;
}

.calendarday
{
	padding: 3px;
	margin: 0 0 3px 0;
	background: #cccccc;
	font-weight: bold;
	text-align: right;
}

.calendardaytoday
{
	padding: 3px;
	margin: 0 0 3px 0;
	font-weight: bold;
	text-align: right;
	background-color: #A4DD85;
}

.calendarbody
{
	padding: 3px 3px 3px 3px;
	margin: 0 0 3px 0;
	font-weight: bold;
	text-align: right;
	background-color: #C4C4A5;
	/* height: 40px; */
	font-family: verdana, arial, sans-serif;
	font-size: 9px;
	text-transform: inherit;
}

.newcalendaritem
{
	position: relative;
	visibility: visible;
	display: block;
	padding: 3px;
	margin: 0px;
	background-color: #C4C4A5;
}

.noplanningorderfree
{
	padding: 3px;
	margin: 0 0 3px 0;
	background: #A6CC99;
}
	
.noplanningorderpay
{
	padding: 3px;
	margin: 0 0 3px 0;
	background: #CCCC99;
}
	
.fulldaydone
{
	padding: 3px;
	/* margin: 0 0 3px 0; */
	background: #FFF url(images/patterngray.gif);
	color: #999999;
	font-style: italic;
	text-transform: inherit;
}

.fulldaydone a
{
	color: #999999;
	text-transform: inherit;
}
	
.fulldaypay
{
	padding: 3px;
	/* margin: 0 0 3px 0; */
	background: #FFF url(images/patternblue.gif);
	text-transform: inherit;
}
	
.fulldayfree
{
	padding: 3px;
	/* margin: 0 0 3px 0; */
	background: #FFF url(images/patterngreen.gif);
	text-transform: inherit;
}

.planning_planningdescription
{
	border-color: #D8D8D8;
	border-width: 1px;
	border-style: dotted;
	padding: 2px;
}
	
.planning_status
{
	padding: 0px;
}
	
.planning_description
{
	font-weight: bold;
	background-color: #99F;
}
.planning_description a
{
	color: black;
}
	
/* ----------------------- */

.submenu2
 { 
 	color: #2B3327; font-weight: bold;
 		font-size: 10px;

 	}

.submenu
 { 
 	color: #dedcad; font-weight: bold;
 		font-size: 10px;

 	}

.menu
{
	font-size: 10px;
	color: #000000;
	font-weight: bold;
}

.fotoborder
{
	color: #cccccc;
}

.news
{
	color: #ffffff;
}


td, body
 { color: #000000; font-style: normal; font-weight: normal; font-size: 10px; font-family: verdana }

.wit
{
	color: white;
	font-family: verdana;
	font-size: 8pt;
	font-style: normal;
	font-weight: normal;
}

.witlink
{
	color: white;
	font-family: verdana;
	font-size: 8pt;
	font-style: normal;
	font-weight: bold;
}

.tekst
{
	color: #000000;
	font-size: 10px;
	font-weight: normal;
}
.fotomap
{
	color: #096;
	font-size: 10px;
	font-weight: normal;
	font-style: italic;
}

.atekst
{
	color: #030;
	font-size: 10px;
	font-weight: normal;
	text-decoration: underline;
}