/* Colors/font from PWA RSM (station.config.json + index.css / App.css) */
:root {
	--brand-primary: #00A0E3;
	--brand-primary-light: #00A0E3;
	--brand-primary-deep: #00A0E3;
	--brand-primary-dark: #0077b3;
	--text: #fff;
	--bg-news: #f2f2f2;
}

body {
	margin: 5px;
	padding: 0px;
	background: linear-gradient(
		180deg,
		var(--brand-primary-light) 0%,
		var(--brand-primary-deep) 45%,
		var(--brand-primary-dark) 100%
	);
	background-attachment: fixed;
	background-color: var(--brand-primary);
	color: #fff;
	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body, td, p
        {
	color : var(--text);
        font-style: normal;
        font-variant: normal;
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        font-size: 14px;
        font-weight: normal;
				
        }

.title
        {
	color : var(--text);
        font-style: normal;
        font-variant: normal;
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        font-size: 15px;
        font-weight: bold;
        }

.text
        {
	color : var(--text);
        font-style: normal;
        font-variant: normal;
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        font-size: 14px;
        font-weight: normal;
				
        }

.justify 
	{
	color : var(--text);
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        text-align:justify;
        font-size: 14px;
        }

.selectedNav 
	{
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
        text-decoration: none;
        }
 
.normalNav 
	{
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        color : #fff;
        font-weight: normal;
        font-size: 14px;
        text-decoration: none;
        }

.topNav
	{
	width: 100%;
	background: rgba(0, 50, 90, 0.55);
	border-collapse: collapse;
	}
.topNav > tbody > tr > td,
.topNav > tr > td
	{
	background: transparent !important;
	padding: 0;
	}
.topNav table
	{
	margin: 0 auto;
	border-collapse: collapse;
	height: 1px; /* equal-height cells so links stretch with tallest item */
	}
.topNav table td
	{
	background: transparent !important;
	padding: 0;
	height: 100%;
	vertical-align: top;
	}
.topNav table td img
	{
	display: none;
	}
.topNav table td a
	{
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22);
	}
.topNav table td:last-child a
	{
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22), inset -1px 0 0 rgba(255, 255, 255, 0.22);
	}
.topNav a,
.topNav a:link,
.topNav a:visited,
.topNav a.topNavLink,
.topNav a.topNavLink:link,
.topNav a.topNavLink:visited
	{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 100%;
	text-align: center;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 13px;
	font-weight: 600 !important;
	letter-spacing: 0.03em;
	padding: 11px 15px;
	border-bottom: 2px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	}
.topNav a:hover,
.topNav a.topNavLink:hover
	{
	color: #fff !important;
	text-decoration: none !important;
	background-color: rgba(255, 255, 255, 0.12);
	border-bottom-color: rgba(255, 255, 255, 0.45);
	}
.topNav a.topNavActive,
.topNav a.topNavActive:link,
.topNav a.topNavActive:visited,
.topNav a.topNavActive:hover
	{
	font-weight: 600 !important;
	border-bottom-color: #fff;
	}
.selectedNav:link,
.selectedNav:visited,
.selectedNav:hover,
.normalNav:link,
.normalNav:visited,
.normalNav:hover
	{
	color: #fff;
	text-decoration: none;
	}
 
.newsDate 
	{
	color : var(--text);
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        font-size: 12px;
        font-weight: normal;
        }
 
h1, h2, h3, h4
	{  
	color: #fff;
	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
	}
h1
	{  
	font-size: 18px;
	font-weight :  bold;
	}
h2
	{  
	font-size: 18px;
	font-weight :  bold;
	}
h3
	{  
	font-size: 18px;
	font-weight :  bold;
	margin-right : 25px;
	}
		
h4
	{  
	font-size: 14px;
	}
	
h5 
	{
	color: White;
	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-style: normal;
	font-variant: normal;
	padding-top: 10px;
	padding-right: 5px;
	text-align : right;
	}

form, input, select, textarea
	{
	margin-right : 0px;
	font-style: normal;
        font-variant: normal;
	color : #111;
	font-family : 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	}
/* rsm_mailform controls; skip CMS editor fields when forms nest in edit mode */
form:has(input[name="rsm_mailform"]) input:not([name^="doc"]):not([name="id"]):not([name="first_item"]):not([name="back_dest"]),
form:has(input[name="rsm_mailform"]) select:not([name^="doc"]),
form:has(input[name="rsm_mailform"]) textarea:not([name^="doc"])
	{
	width: 100%;
	max-width: max-content;
	box-sizing: border-box;
	}
textarea.cke_source,
textarea.editorArea
	{
	max-width: none;
	}
.cke_chrome
	{
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	}

strong
	{
	font-weight : bold;
	margin-right : 0px;
	font-style: normal;
        font-variant: normal;
	color : var(--text);
	font-family : 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	}

ul 
	{
	color : var(--text);
	font-family : 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	font-weight :  normal;
	}
li 	
	{
	font-family : 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	}

ol 	
	{
	margin-right : 25px;
	color : var(--text);
	font-family : 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	font-weight :  normal;
	margin-left :  0px;
	}

a:link,
a:visited
	{
	color : #beedff;
	font-family : 'Segoe UI', system-ui, -apple-system, sans-serif;
	text-decoration : underline;
	}

a:hover
	{
	color : #fff;
	font-family : 'Segoe UI', system-ui, -apple-system, sans-serif;
	text-decoration : underline;
	}

/*table 
{
   border-width: 0px;   
	 border-collapse: collapse; 
	 text-align: left;
}
td 
{
   border-width: 0px; 
 
}*/


.headerTable
{
  width:100%;
   border-width: 0px;   
	 border-collapse: collapse; 
	 text-align: left;
	 table-layout: fixed;

}
.headerTableContent
{
  width:100%;
  bgcolor:#4fc3f7;
	 	
	text-align: left;
	vertical-align: top;
	overflow: hidden;
/*	remarked by remco@09-09-2009 -- migrated to dynamic banners 
  background-image:url(../img/rsm_head_logo.jpg); */
	padding-left: 0px;
	padding-top: 0px;

}
.headerTableContent .editBtnBar
{
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 32px;
  background: #333;
  box-sizing: border-box;
}
.headerTableContent .editBtnBar > a,
.headerTableContent .editBtnSlot
{
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
}
.headerTableContent .editBtn
{
  display: block;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
}
.headerTableContent .editBtnStatus
{
  color: #fff;
  font-size: 12px;
  line-height: 32px;
  white-space: nowrap;
}
#dynamic_headbanner
{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
#dynamic_headbanner img
{
  width: 1000px;
  max-width: none;
  height: auto;
  display: block;
}
.bodyTable
{
  width: min(1000px, calc(100vw - 10px));
  table-layout: fixed;
	
	border-width: 0px;
	border-style: none;
	border-collapse: separate;
	background: transparent;
	color: #fff;
	
}
.bodyTableContent img:not([src*="pixel.gif"]):not(.newsOverviewThumb):not([src*="default_arrow"]):not([src*="default_nav"])
{
  max-width: 100%;
  height: auto;
}
.bodyTable td[width="100%"]
{
  max-width: 0;
  overflow: hidden;
}
.bodyTable td[width="100%"] table
{
  max-width: 100%;
  table-layout: fixed;
}
/* Editor forms: broken/auto table layout must not get fixed columns */
.bodyTable td[width="100%"] form table
{
  table-layout: auto;
}
.bodyTable td[width="100%"] td
{
  overflow-wrap: anywhere;
}
/* Main layout row (left | spacer | center | spacer | right) */
.rsmMainTable
{
  width: 100%;
  table-layout: fixed;
}
.rsmMainTable > tbody > tr > td[width="170"],
.rsmMainTable > tr > td[width="170"]
{
  width: 170px;
  max-width: 170px;
  min-width: 170px;
}
.rsmMainTable > tbody > tr > td[width="5"],
.rsmMainTable > tr > td[width="5"]
{
  width: 5px;
  max-width: 5px;
  min-width: 5px;
}
.rsmMainTable > tbody > tr > td[width="0"],
.rsmMainTable > tr > td[width="0"]
{
  width: 0;
  max-width: 0;
  min-width: 0;
}
.rsmMainTable > tbody > tr > td[width="170"],
.rsmMainTable > tr > td[width="170"],
.rsmMainTable > tbody > tr > td[width="5"],
.rsmMainTable > tr > td[width="5"],
.rsmMainTable > tbody > tr > td[width="0"],
.rsmMainTable > tr > td[width="0"]
{
  overflow: hidden;
  vertical-align: top;
  transition:
    width 0.25s ease,
    max-width 0.25s ease,
    min-width 0.25s ease,
    opacity 0.25s ease,
    padding 0.25s ease;
}
.rsmMainTable > tbody > tr > td[width="170"] > *,
.rsmMainTable > tr > td[width="170"] > *,
.rsmMainTable > tbody > tr > td[width="5"] > *,
.rsmMainTable > tr > td[width="5"] > *
{
  transition: opacity 0.2s ease;
}
@media (max-width: 1000px)
{
  .topNav table,
  .topNav table tbody,
  .topNav table tr
  {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
  }
  .topNav table td
  {
    display: inline-block;
    height: auto;
    vertical-align: middle;
  }
  .topNav a,
  .topNav a.topNavLink
  {
    height: auto;
    padding: 8px 10px;
    font-size: 12px;
  }
}
@media (max-width: 700px)
{
  .rsmMainTable > tbody > tr > td[width="170"],
  .rsmMainTable > tr > td[width="170"],
  .rsmMainTable > tbody > tr > td[width="5"],
  .rsmMainTable > tr > td[width="5"],
  .rsmMainTable > tbody > tr > td[width="0"],
  .rsmMainTable > tr > td[width="0"]
  {
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
  }
  .rsmMainTable > tbody > tr > td[width="170"] > *,
  .rsmMainTable > tr > td[width="170"] > *,
  .rsmMainTable > tbody > tr > td[width="5"] > *,
  .rsmMainTable > tr > td[width="5"] > *
  {
    opacity: 0;
  }
  .rsmMainTable > tbody > tr > td[width="100%"],
  .rsmMainTable > tr > td[width="100%"]
  {
    width: auto !important;
    max-width: none;
    overflow: hidden;
  }
  .newsDateLong
  {
    display: none;
  }
}
.bodyTableContent
{
	padding-left: 0px;
	padding-top: 0px;
  border-width: 0px;
  background: transparent;
  color: #fff;
  overflow: hidden;
}
.bodyTable td,
.bodyTableContent td
{
  background-color: transparent;
  color: #fff;
}
.bodyTableContent .searchResults,
.bodyTableContent .searchResults td
{
  background-color: transparent !important;
}
.bodyTableContent .searchForm
{
  color: #fff;
}
/* Side modules: only direct rows (not nested news link tables) */
.bodyTable table[width="170"] > tbody > tr:not(:first-child) > td,
.bodyTable table[width="170"] > tr:not(:first-child) > td
{
  background-color: rgba(0, 70, 120, 0.35) !important;
}
.bodyTable table[width="170"] > tbody > tr:first-child > td,
.bodyTable table[width="170"] > tr:first-child > td
{
  background-color: rgba(0, 50, 90, 0.55) !important;
}
.newsOverviewItem
{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 1em 0;
}
.newsOverviewThumbLink
{
  flex: 0 0 auto;
  line-height: 0;
}
.bodyTableContent .newsOverviewThumb
{
  display: block;
  width: 5.625em;
  height: 5.625em;
  object-fit: cover;
  max-width: none;
  border-radius: 16.67%; /* zelfde als favicon-144 (24/144) */
}
.newsOverviewText
{
  flex: 1 1 auto;
  min-width: 0;
}
.newsOverviewText p
{
  margin: 0;
}
.newsLinkTable 
{
   border-width: 0px;   
	 border-collapse: collapse; 
	 text-align: left;
	 margin: 0 0 8px 0;
}
.newsLinkTable td
{
  background-color: transparent !important;
}
.newsLinkTable img,
.bodyTable img[src*="default_arrow"],
.bodyTable img[src*="default_nav"]
{
  filter: brightness(0) invert(1);
  max-width: none;
  width: 10px;
  height: 7px;
}
.infoIcon
{
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* Footer */
.rsmFooter
{
	--footer-text: #beedff;
	background: rgba(0, 50, 90, 0.55);
	width: 100%;
	box-sizing: border-box;
	padding: 16px 12px;
	margin-top: 8px;
}
.rsmFooterInner
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px 24px;
	max-width: 1100px;
	margin: 0 auto;
}
.rsmFooterCol
{
	min-width: 0;
}

/* Column title (accordion header on mobile) */
.rsmFooterToggle
{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.3;
	text-align: left;
	cursor: default;
}

/* Column content — typography on Inner so it beats body/td/p */
.rsmFooterBody
{
	display: grid;
	grid-template-rows: 1fr;
	overflow: hidden;
	margin-top: 8px;
	transition: grid-template-rows 0.25s ease, opacity 0.25s ease, margin 0.25s ease, padding 0.25s ease;
}
.rsmFooterBodyInner
{
	min-height: 0;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.45;
	color: var(--footer-text);
}
.rsmFooterBodyInner *:not(img)
{
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.rsmFooterBodyInner p
{
	margin: 0 0 0.5em 0;
}
.rsmFooterBodyInner img
{
	max-width: 100%;
	height: auto;
}

.rsmFooterEdit
{
	display: inline-block;
	margin-top: 6px;
	font-size: 10px;
	line-height: 1.2;
	font-weight: normal;
	opacity: 0.7;
}
.rsmFooterCopy
{
	margin: 16px 0 0 0;
	text-align: center;
	font-size: 13px;
}
.rsmFooter a:link,
.rsmFooter a:visited,
.rsmFooter a:hover
{
	color: var(--footer-text);
	text-decoration: underline;
}
.rsmLoginStatus
{
	color: #fff !important;
}

@media (max-width: 700px)
{
	.rsmFooterInner
	{
		grid-template-columns: 1fr;
		gap: 0;
	}
	.rsmFooterCol
	{
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}
	.rsmFooterCol:first-child
	{
		border-top: none;
	}
	.rsmFooterToggle
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 0;
		cursor: pointer;
	}
	.rsmFooterToggle::after
	{
		content: "";
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 7px solid currentColor;
		opacity: 0.85;
		flex-shrink: 0;
		margin-left: 8px;
		transition: transform 0.25s ease;
	}
	.rsmFooterCol.is-open .rsmFooterToggle::after
	{
		transform: rotate(90deg);
	}
	.rsmFooterBody
	{
		grid-template-rows: 0fr;
		margin-top: 0;
		opacity: 0;
	}
	.rsmFooterCol.is-open .rsmFooterBody
	{
		grid-template-rows: 1fr;
		padding-bottom: 12px;
		opacity: 1;
	}
}
