/** ************************************* **
	@Author			Vincent
	@Last Update	april 07, 2015

	CONTENTS
	---------------------------
		00. AOL name
		01. Popup scheidsrechter
		02. Upload foto
		03. calendarSpecialDates
		04. Spinner
		05. FAQ
		06. iFrame
		07. Zoekborder popup
		08. Table landingpage
		09. Wedstrijdmonitor
		10. Tooltip
		11. Responsive video
		12.	validatiered
        13. Popup fullscreen
        14. Ajax loader
		15. veldform extra benadrukken Hit
		16. Image aol support
		17. Support-box
		18. Popup programma
		19. Popup Teamdetail
		20. Popup add official
		21. Forms
		22.	AOL footer brand
		23.	Game info
		24. label-booking
		25. Feature box button

	---------------------------

 ** ************************************* **/
.text-white{color: white!important}
.text-black{color: black!important}
.text-grey{color: grey}
.text-red{color: red!important}
.text-green{color: #01ab91!important}

.text-upper{text-transform: uppercase}
.text-cap{text-transform: capitalize}
.text-lower{text-transform: lowercase}

.fs-12{font-size: 12px}
.fs-14{font-size: 14px}
.fs-15{font-size: 15px}
.fs-16{font-size: 16px}
.fs-18{font-size: 18px}

.fw-500{font-weight: 500!important}
.fw-600{font-weight: 600!important}
.fw-bold{font-weight: bold}

.p-0{padding: 0px!important}
.p-2{padding: 2px!important}
.p-4{padding: 4px!important}
.p-6{padding: 6px!important}
.p-10{padding: 10px!important}

.pt-0{padding-top: 0px}
.pt-5{padding-top: 5px!important}
.pt-10{padding-top: 10px!important}
.pt-15{padding-top: 15px!important}

.pr-0{padding-right: 0px!important}
.pr-10{padding-right: 10px!important}
.pr-15{padding-right: 15px!important}
.pr-20{padding-right: 20px!important}

.pb-0{padding-bottom: 0px}
.pb-10{padding-bottom: 10px}

.pl-0{padding-left: 0px!important}
.pl-15{padding-left: 15px!important}
.pl-20{padding-left: 20px!important}

.m-0{margin: 0px!important}
.m-4{margin: 4px!important}
.m-10{margin: 10px!important}

.mt-0{margin-top: 0px!important}
.mt-2{margin-top: 2px!important}
.mt-4{margin-top: 4px!important}
.mt-6{margin-top: 6px!important}
.mt-8{margin-top: 8px}
.mt-10{margin-top: 10px}
.mt-20{margin-top: 20px}
.mt-30{margin-top: 30px}

.mt-10neg{margin-top: -10px!important}

.mr-14{margin-right: 14px}

.mb-0{margin-bottom: 0px!important}
.mb-2{margin-bottom: 2px!important}
.mb-4{margin-bottom: 4px!important}
.mb-6{margin-bottom: 6px!important}
.mb-8{margin-bottom: 8px!important}
.mb-10{margin-bottom:10px!important}

.mb-10neg{margin-bottom: -10px!important}

.ml-0{margin-left: 0px!important}
.ml-6{margin-left: 6px!important}
.ml-10{margin-left:10px!important}
.ml-16{margin-left: 16px}

.w-14{width: 14px!important}
.w-130{width: 130px!important}
.w-242{width: 242px!important}

.m-w-110{max-width: 110px!important}

.h-12{height: 12px!important}
.h-50{height: 50px}
.h-75{height: 75px}
.h-300{height: 300px}

.lh-28{line-height: 28px!important}
.lh-30{line-height: 30px!important}
.lh-40{line-height: 40px!important}

.min-h-50{min-height: 50px}
.min-h-300{min-height: 300px}

.float-left{float: left!important}
.float-right{float: right!important}

.block{
	display: block;
}

.bg-color-srz-red{background-color: #dc3545;color: white}
.bg-grey{background-color: #f9f9f9!important}
.bg-gray{background-color: #f9f9f9!important}
.bg-gray-footer{background-color: #f0f0f0!important}
.bg-color-aol-orange{background-color: #ff7d26!important}

.border-0{border: 0;}
.border-1{border: solid 1px rgba(0,0,0,0.1)}

.border-top-1{border-top: 1px solid rgba(0,0,0,0.1)}
.border-top-2{border-top: 2px solid rgba(0,0,0,0.1)}

.border-bottom-1{border-bottom: 1px solid rgba(0,0,0,0.1)}
.border-bottom-2{border-bottom: 2px solid rgba(0,0,0,0.1)}

.border-greenn{border-color: #01ab91}
.border-grey{border-color: rgba(0,0,0,0.1)}

.vert-center{
	display: flex;
	align-items: center;
}

/**	00. aol brand
*************************************************** **/
.aol_name:after{
	font-weight: 600;
	color: grey;
	content: "Arbitrage online";
	}
.aol_url:after{
	content: "arbitrageonline.nl";
	src: url(https://www.arbitrageonline.nl);
}

/**	00. srz banner
*************************************************** **/
.srz_ad{
	display:flex;
	justify-content:center;
	align-items:center;
}
.srz_ad img{
	max-height: 30;
	padding-right: 10px;
}
.srz_ad span{
	padding-right: 10px;
}
.srz_ad button{
	color: #fff;
	background-color: #dc3545;
	padding: 4px 10px;
}
.bg-srz-banner{background: linear-gradient(180deg,#787878 0,#313131)}

/**	00. Event form
*************************************************** **/

/* 01-10-2026: de drie .eventform-regels die hier stonden zijn WEG. De class stond alleen nog op
   pages/events_form.cfm, en `.eventform select { height:60px !important }` won met zijn !important
   van de uniforme veldmaat van dat formulier - juist die ene keuzelijst bleef daardoor te hoog.
   ⚠️ De regel hieronder stond in dezelfde opsomming en LEEK op .eventform gescoped, maar dat gold
   alleen voor het eerste deel: input[type=time], [type=datetime-local] en [type=month] waren
   site-breed. Die blijven daarom staan, want ze raken nog drie echte velden
   (pages/popup/popup_events.cfm 2x en public/embed/ewedstrijd.cfm). Nu expliciet opgeschreven, zodat
   het geen ongeluk meer is. input[type=date] viel alleen binnen .eventform en is dus vervallen. */
input[type=time], input[type=datetime-local], input[type=month]{
	height: 60px;
	color: #000!important;
	font-size: 16px;
}

/**	00. In ontwikkeling
*************************************************** **/
.aol_dev{
	display: none;
}

/**	01. Popup scheidsrechter
*************************************************** **/
.popup-sr-label {
	padding-right:5px;
	text-align:left;
	height:20px;
}
.popup-sr-label-right {
	padding-right:5px;
	text-align: righ;
	height:20px;
}
.popup-sr-field {
	padding-right:5px;
}
.popup-sr-kop {
	font-size:14px;
	font-weight:700;
}

.uploadifive-button {
		float: left;
		margin-right: 10px;
}
	
/**	02. Upload foto
*************************************************** **/
.uploadifive-button {
	float: left;
	margin-right: 10px;
}

#queue {
	border: 1px solid #E5E5E5;
	height: 40px;
	overflow: auto;
	margin-bottom: 10px;
	padding: 0 3px 3px;
	width: 200px;
}

/**	03. calendarSpecialDates
*************************************************** **/
.calendarSpecialDates {

	font-weight:bold;
	color:#01AB91;
}

.calendarSpecialDates2 {
	font-weight:bold;
	color: #FF0000;
}

/**	04. Spinner
*************************************************** **/
.spinner {
    position: fixed;
    top: 50%;
    left: 60%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}

/**	05. faq
*************************************************** **/
.faq-balk {
	background-color: #ECECEC;
	border: #01ab91 1px solid;
	color:#01AB91;
	font-size:18px;
	padding:10px;
	border-radius:20px 0px 0px 0px;
}
.faq-vraag{
	font-weight:bold;
	cursor:pointer;
	margin-top:5px;
}
.faq-antwoord{
	margin-left:15px;
}

/**	06. iFrame
*************************************************** **/
.header {
	font-family: #qryGetCSS.fontprog#;
	text-transform:uppercase;
    font-weight:700;
    color: #qryGetCSS.fontcolorprog#;
    font-size:18px;

}
.menu{
    font-family: #qryGetCSS.fontprog#;
    color: #qryGetCSS.fontcolorprog#;
    font-size: #qryGetCSS.fontsizeprog#px;
    margin-top:10px!important;
}

.iframerow1{
    border-right:hidden;
    border-left:hidden;
    background-color:##F0F0F0;
    font-family: #qryGetCSS.fontprog#;
    color: #qryGetCSS.fontcolorprog#;
    font-size: #qryGetCSS.fontsizeprog#px;
}
.iframerow2{
    border-right:hidden;
    border-left:hidden;
    font-family: #qryGetCSS.fontprog#;
    color: #qryGetCSS.fontcolorprog#;
    font-size: #qryGetCSS.fontsizeprog#px;
}
.table-responsive {
    overflow-x:none !important;
}
.parentTbl table {
  border-spacing: 0;
  border-collapse: collapse;
  border: 0;
  width: 100%;
}
.childTbl table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}
.childTbl th,
.childTbl td {
  border: 0px solid ##d7d7d7;
  border-bottom:1px solid ##d7d7d7;
  font-family: #qryGetCSS.fontprog#;
  color: #qryGetCSS.fontcolorprog#;
  font-size: #qryGetCSS.fontsizeprog#px;
  <!--- padding-left:12px !important; --->
  padding-left:2px;
}
.childTbl td {
    line-height:18px;
    padding-left:2px;
}
.scrollData {
  width: 100%;
  height: #qryGetCSS.iframeheight#;
  overflow-x: hidden;
}
.parentTbl .col1 {
    width:5%;
	padding:5px;
}
.parentTbl .col2 {
    width:20%;
}
.parentTbl .col3 {
    width:20%;
}
.parentTbl .col4 {
    width:5%;
}
.parentTbl .col5 {
    width:10%;
}
.parentTbl .col6 {
    width:10%;
	text-align:center;
}
.parentTbl .col7 {
    width:25%;
}
.parentTbl .childTbl th {
    font-weight:bold;
    font-size:15px;
   	<!---line-height:28px;--->
    background-color:##CCC;
    color:white;
    border-color:##CCC;
}
/**	07. Zoekborder popup
*************************************************** **/

.zoekborder{
	background-color: #01ab91;
	margin-top:-15px;

}
.zoeklabel{
	color:#FFFFFF;
}

/**	08. Table Landingpage
*************************************************** **/

.statusbalkclub {
	background-color: [clubborderbgcolormt];
	color: [subheaderfontcolorwm];
	font-weight:bold;
	text-transform:uppercase;
}
.statusbalk {
	background-color: #999999;
	color:#FFFFFF;
	font-size:11px;
	text-decoration:none;
}

/**	10. Tooltip
*************************************************** **/

.easyTooltip{
	font-size:12px;
	color:#FFFFFF;
	padding-left:5px;
	padding-right:5px;
	border:1px solid #333333;
	background-color: #333333;
	border-radius: 5px 5px 5px 5px;
}


.popover {
  font-family: #qryGetCSS.fontprog#;
  color: #qryGetCSS.fontcolorprog#;
  font-size: #qryGetCSS.fontsizeprog#px;
}

/**	11. Responsive video
*************************************************** **/
.responsive-video {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
}


.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/**	12. Validatie red
*************************************************** **/
.validatie-red {
	color: red;
	margin: opx;
	font-size: 10px;
}

/**	13. Popup fullscreen
*************************************************** **/

/* Fix: modal-backdrop scrolt mee + witruimte rond popups.
   De theme-bootstrap (v3.3.1) zet de backdrop position:absolute zonder
   bottom en plaatst hem binnen de scrollende .modal, waardoor het donkere
   vlak meescrolt en eronder niet-klikbaar wit verschijnt (bv. na uitklappen
   van een carrousel + omhoog scrollen). Terugzetten naar viewport-fixed +
   volle hoogte herstelt het standaardgedrag voor ALLE modals. */
.modal-backdrop {
  position: fixed;
  bottom: 0;
}

/* .modal-transparent */

.modal-transparent {
  background: transparent;
}
.modal-transparent .modal-content {
  background: transparent;
}
.modal-backdrop.modal-backdrop-transparent {
  background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
  opacity: .9;
  filter: alpha(opacity=90);
}

/* .modal-fullscreen */

.modal-fullscreen {
  background: transparent;
}
.modal-fullscreen .modal-content {
  background: transparent;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.modal-backdrop.modal-backdrop-fullscreen {
  background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
  opacity: .97;
  filter: alpha(opacity=97);
}

.modal-fullscreen .modal-dialog {
  margin: 10px;
  width: 100%;
}

/**	17. Support-box
*************************************************** **/
.support-box{
	background-color: #f5f5f5;
}
.support-box p{
	margin: 0px 0px 10px 0px;
	background-color: #999;
	color: white;
	padding: 4px;
	font-weight: bold;
	text-transform: uppercase;
}
.support-box li{
	margin: 6px 0px 6px 0px;
}
.support-box ul{
	margin-bottom: 0px;
	padding-bottom: 6px;
}


.ajaxloader{
    display:none;
    position: absolute;
    top: 30%;
    left: 45%;
    z-index: 99999;
}

/* .veldform extra benadrukken hit */
.hit{
	border-radius: 5px;
	background-color: #01ab91;
	margin: 0px 0px 0px 5px;
	padding: 0px 20px 5px 10px!important;
}

/* .image aol support */
.img-aol{
	border: 0px solid #ffffff;
	border-radius: 10px;
}

/* om text in een grid te centreren */
.gridcell_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}


.gridcell_small {
	font-size:13px;
    padding: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* grid-kolommen waarop een klik de regel opent (pages/js/programma.js, FD 4482) */
.gridcell_klikbaar {
	cursor: pointer;
}

/* SRZ-boekingen in het programmagrid (pages/srz-matches.cfm).
   Per rol laat de celkleur zien of die official via SRZ is geboekt:
     ingevuld = geboekt en de official is bekend
     open     = geboekt, nog geen official, en de wedstrijd komt nog  -> hier is actie nodig
     inactief = geboekt, geen official, maar niet meer actueel (afgelast/gespeeld/verleden)
   Een cel zonder klasse is een eigen official van de club. Er staat geen legenda onder de grid;
   de tooltip op de cel legt de kleur uit.
   !important is nodig omdat jqxGrid met altrows:true zelf al een achtergrond op de even rijen zet. */
.srz-bk-ingevuld                { background-color:#E6F4EA !important; }
.srz-bk-open                    { background-color:#FDF0D5 !important; }
.srz-bk-inactief                { background-color:#EDEDED !important; }

/* Merkteken in de statuskolom bij een boeking voor de 4e official: die rol heeft geen eigen
   kolom in dit grid, en zou hier anders helemaal niet te zien zijn. */
.srz-badge-off4                 { display:inline-block; margin-left:6px; padding:0 5px;
                                  font-size:10px; line-height:15px; border-radius:3px;
                                  background:#DFE7F3; color:#3C5A86; font-weight:bold; }

/**	18. Popup programma
*************************************************** **/

.teamdetail{
	text-align: right;
	color: #01ab91;
}

/**	19. Popup teamdetail
*************************************************** **/

.teamblock{
	background-color: #f5f5f5;
	padding: 5px;
	border: 1px solid #ced4da;
	margin: 0rem 0rem 1rem 0rem;
}

.teamblock-label{
	display: inline-block;
	margin: 6px 0px 10px 0px;
	font-weight: 500;
	
}
	
.input-group-over{
	position: relative;
}

.input-group-over a{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: -10px;
}

.badge-aol{
	padding: 5px 7px 7px 5px;
	font-size: 12px;
	color: #fff;
	white-space: nowrap;
	background-color: #ccc;
}

/**	20. Popup add official
*************************************************** **/

/**	21. Forms
*************************************************** **/

/**	22. Aol brand footer
*************************************************** **/
.aol_brand_footer_popup{
	background-color: #01ab91;
	padding: 6px;
}
.aol_brand_footer_popup img{
	height: 20px;
	margin: 4px;
}
.aol_brand_footer_popup span{
	color: black;
	margin: 5px;
}

/**	23. Game info
*************************************************** **/


/**	24. label-booking
*************************************************** **/

.label-booking{
	border: 1px solid #ccc;
	background-color: #01ab91;
	color: white;
	padding: 1px 6px;
	margin: 0px;
}
.label-booking a{
	display: block;
	color: white;
}
.label-booking i{
	float: right;
	margin-top: 5px;
}

/**	24. Future box buttons
*************************************************** **/
.fb-btn{
	
}
.m-bottom-0{
	margin-bottom: 0px!important;
}

/* ---------------------------------------------------------------------------
   Sticky footer — portal-breed (2026-07-24).
   Deze regels stonden in index.cfm alleen achter session.ARBITRAGETOEGANG IS 1,
   waardoor de footer op PUBLIEKE / landingspagina's met weinig content omhoog
   schoof (bijna midden op de pagina). Hier globaal, zodat de footer op elke
   pagina netjes onderaan blijft: de content vult minimaal de vensterhoogte
   minus de footerhoogte en duwt de footer naar beneden.
   --------------------------------------------------------------------------- */
body #wrapper      { min-height: 100vh; }
body .footerpos    { width: 100%; height: 90px; }

/* Footer onderaan houden bij WEINIG content — maar ALLEEN op pagina's zónder de groene CTA-band.
   Pagina's mét die band (login, clubarbitrage, ...) hebben genoeg 'bodemgewicht' en stromen
   natuurlijk; ze uitrekken gaf juist onnodige witruimte tussen de content en de band.
   :has() wordt door alle moderne browsers ondersteund; oudere vallen terug op natuurlijke flow. */
body .contentfill:not(:has(.callout.styleBackgroundColor)) { min-height: calc(100vh - 90px); }

/* ---------------------------------------------------------------------------
   VIEW-AS-BALK — waarschuwingsstrook zodra "bekijk als" aanstaat.
   Plan: ~/.claude/plans/light-club-onboarding.md (fase 1d).
   Wisselen gebeurt in het ADMIN-menu; deze strook verschijnt alléén als view-as
   actief is, zodat een beheerder nooit onbewust naar een beperkt portaal kijkt.
   --------------------------------------------------------------------------- */
.viewas-bar             { background:#fff5ec; border-bottom:1px solid #ffd9bd; font-size:13px; }
.viewas-inner           { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
                          padding-top:8px; padding-bottom:8px; }
.viewas-tekst           { color:#16233F; flex:1 1 auto; }
.viewas-tekst strong    { color:#B8620E; }
.viewas-knop            { border:1px solid #d7deea; background:#fff; color:#5b6b86;
                          font-weight:700; font-size:12.5px; line-height:1;
                          padding:7px 11px; border-radius:7px; cursor:pointer; }
.viewas-knop:hover      { border-color:#01AB91; color:#16233F; }
.viewas-knop:focus      { outline:2px solid #01AB91; outline-offset:1px; }
.viewas-knop--terug     { background:#FF7D26; border-color:#FF7D26; color:#fff; }
.viewas-knop--terug:hover { background:#e96f1c; border-color:#e96f1c; color:#fff; }

/* ---------------------------------------------------------------------------
   licentie_banner.cfm — strook ná activatie: club is binnen via het nieuwe
   traject maar heeft nog geen incasso-machtiging, en kan dus geen officials
   activeren. Zelfde vormtaal als de view-as-strook hierboven, maar met een
   uitnodigende in plaats van waarschuwende toon: dit is een laatste stapje,
   geen fout.
   --------------------------------------------------------------------------- */
.lic-bar                { background:#eefaf7; border-bottom:1px solid #bfe6dc; font-size:13px; }
.lic-inner              { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
                          padding-top:9px; padding-bottom:9px; }
.lic-ico                { color:#007a66; font-size:15px; flex:none; }
.lic-tekst              { color:#16233F; flex:1 1 auto; }
.lic-tekst b            { color:#007a66; }
.lic-knop               { background:#FF7D26; border:1px solid #FF7D26; color:#fff;
                          font-weight:700; font-size:12.5px; line-height:1;
                          padding:8px 13px; border-radius:7px; text-decoration:none;
                          white-space:nowrap; flex:none; }
.lic-knop:hover,
.lic-knop:focus         { background:#e96f1c; border-color:#e96f1c; color:#fff; text-decoration:none; }
.lic-knop:focus         { outline:2px solid #01AB91; outline-offset:1px; }

/* ---------------------------------------------------------------------------
   VALIDATIE-HINTS (jqxValidator)
   Met hintType 'label' maakt de widget een .jqx-validator-error-label. Bij een smal
   element werd de tekst tot één woord per regel geperst; als blok en zonder
   afbreken staat de melding netjes onder het veld.
   --------------------------------------------------------------------------- */
/* Bewust gescoped op het licentieformulier: dezelfde class wordt door alle andere
   formulieren in het portaal gebruikt, en die zien er nu goed uit. */
#frm_licentie .jqx-validator-error-label { display: block; white-space: nowrap; margin-top: 4px; }


/* ===========================================================================
   E-WEDSTRIJD BEHANDEL-KAART (5d) — gemoderniseerde "Wedstrijd aanvraag"-box
   in popup_programma. Gescoped op #panelwedstrijdaanvraag; veld-ID's/flow onveranderd.
   --------------------------------------------------------------------------- */
#panelwedstrijdaanvraag{--wab-teal:#01AB91;--wab-teald:#007A66;--wab-amber:#e8912a;--wab-amberbg:#fdf2e1;--wab-green:#2fae66;--wab-greenbg:#eaf7ef;--wab-red:#e0393f;--wab-redbg:#fdeceb;--wab-ink:#0f2b26;--wab-sub:#5a726c;--wab-line:#e4ece9;--wab-card:#fff;--wab-row:#f6fbfa}
#panelwedstrijdaanvraag .panel-heading{position:relative}
#panelwedstrijdaanvraag .panel-heading .wab-badge{position:absolute;right:14px;top:11px;margin-left:0}
.wab-body{padding:16px 18px;font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--wab-ink)}
.wab-hd{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.wab-hd .wab-t{font-weight:800;font-size:14.5px;color:var(--wab-ink)}
.wab-badge{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 10px;border-radius:999px;white-space:nowrap}
.wab-badge.amber{color:var(--wab-amber);background:var(--wab-amberbg);border:1px solid #f0cd94}
.wab-badge.green{color:var(--wab-green);background:var(--wab-greenbg);border:1px solid #a9dcbe}
.wab-badge.red{color:var(--wab-red);background:var(--wab-redbg);border:1px solid #f0b3b1}
.wab-grid{display:flex;gap:16px;flex-wrap:wrap}
.wab-grid .wab-sub{flex:1 1 280px;border:1px solid var(--wab-line);border-radius:12px;padding:14px 15px;background:var(--wab-card)}
.wab-sub h5{margin:0 0 12px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--wab-sub)}
.wab-kv{display:flex;flex-direction:column;gap:9px}
.wab-kv .wab-r{display:flex;gap:10px;font-size:13.5px;align-items:baseline}
.wab-kv .wab-r .wab-k{color:var(--wab-sub);font-weight:700;min-width:70px;flex:none}
.wab-kv .wab-r .wab-v{font-weight:600;word-break:break-word;flex:1 1 auto}
#panelwedstrijdaanvraag .wab-v input.form-control{border:0 !important;background:transparent !important;padding:0 !important;height:auto !important;box-shadow:none !important;font:inherit;font-weight:600;color:var(--wab-ink);width:100%;line-height:1.4}
.wab-roles{display:flex;gap:6px;flex-wrap:wrap}
.wab-rchip{font-size:11px;font-weight:800;color:var(--wab-teald);background:#eef7f5;border:1px solid #b4e2d8;padding:3px 9px;border-radius:7px}
.wab-rchip .wab-rr{color:var(--wab-sub);margin-right:4px;font-size:9.5px}
.wab-opm{margin-top:11px;width:100%;resize:none;font:inherit;font-size:13px;line-height:1.4;color:var(--wab-ink);background:var(--wab-row);border-radius:9px;padding:10px 12px;border:1px solid var(--wab-line)}
.wab-fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.wab-fld label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--wab-sub)}
.wab-fld select,.wab-fld textarea{font:inherit;font-size:13.5px;padding:10px 11px;border:1px solid var(--wab-line);border-radius:9px;background:var(--wab-card);color:var(--wab-ink);width:100%}
.wab-send{width:100%;border:0;background:var(--wab-teal);color:#fff;font:inherit;font-weight:800;font-size:13.5px;padding:11px;border-radius:10px;cursor:pointer}
.wab-send:hover{background:var(--wab-teald)}
.wab-note{font-size:11.5px;color:var(--wab-sub);margin:10px 0 0}
@media(max-width:640px){.wab-grid{flex-direction:column}}

/* Menu-item dat de licentie niet toestaat: wel zichtbaar als upgrade-pad, niet als dood eind.
   Gezet door pages/aol_menu.cfm op basis van TblMenu.feature_key + TblLicentieFeature. */
.side-nav .menu-vergrendeld{opacity:.55}
.side-nav .menu-vergrendeld:hover{opacity:.8}
/* 05-10-2026: een item op Slot is een <a> ZONDER href, zodat het exact de theme-opmaak van de andere
   items houdt (letter, kleur, breedte van het pijltje). Alleen gedimd (hierboven) en niet klikbaar. */
ul.side-nav ul li a.menu-vergrendeld,
ul.side-nav ul li a.menu-vergrendeld:hover{cursor:not-allowed;color:#333;text-decoration:none}
/* Fase 4: licentie-icoon rechts achter het menu-item, in één kolom (oog / oog met stip / slot). */
/* Icoon in één vaste kolom rechts, verticaal gecentreerd op de regel — los van de tekstlengte. */
ul.side-nav ul li{position:relative}
ul.side-nav ul li a{padding-right:34px}
.side-nav .menu-lic{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:18px;line-height:1;
  text-align:center;color:#aab3bc;font-size:12px;cursor:help}
ul.side-nav ul li .menu-lic i.fa{width:auto;margin:0}
.side-nav .menu-lic-deels:after{content:"";position:absolute;right:0;bottom:1px;width:6px;height:6px;border-radius:50%;background:#01ab91;border:1px solid #fff}
.side-nav a:hover .menu-lic{color:#018a75}

/* ---------------------------------------------------------------------------
   ROLPROFIELEN in de beheerder-popup (popup_beheerder.cfm + beheerders.js).
   Kaartjes per rol; het aangevinkte kaartje krijgt de teal rand. Het basisdeel
   is niet uit te vinken en draagt het label 'altijd'.
   --------------------------------------------------------------------------- */
.prof-grid              { display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 10px; }
.prof-kaart             { position:relative; flex:0 0 calc(33.333% - 7px); min-width:0;
                          border:1px solid #cfd8d5; border-radius:6px; background:#fff;
                          padding:11px 13px; }
.prof-kaart.aan         { border-color:#01AB91; border-width:2px; padding:10px 12px; }
.prof-kaart .checkbox   { margin:0 0 2px; font-weight:400; }
.prof-kaart .checkbox strong { font-size:14.5px; }
.prof-rol               { display:block; font-size:12px; color:#8b9793; margin:0 0 6px 28px; }
.prof-items             { margin:0; padding-left:28px; list-style:none;
                          font-size:12.5px; color:#55635f; line-height:1.7; }
.prof-items li:before   { content:'\2022'; margin-right:6px; color:#8b9793; }
.prof-altijd            { position:absolute; top:10px; right:11px; font-size:10.5px;
                          text-transform:uppercase; letter-spacing:.06em; color:#01AB91;
                          border:1px solid #01AB91; border-radius:8px; padding:2px 7px; }
#profiel_melding        { display:block; margin-top:4px; }

@media (max-width:767px) {
    .prof-kaart          { flex:0 0 100%; }
}

/* ============================================================
   Fase 6 — Clubsettings & widgets (nieuwe getabde carrousel)
   Scoped op #panel_widgets. Bouwt op Epona (nav-tabs/sky-form/.wm-upzone).
   ============================================================ */
#panel_widgets .w-intro        { font-size:13px; color:#5a726c; margin:0 0 16px; padding:11px 13px;
                                  background:#eef7f5; border:1px solid #cfe9e2; border-radius:10px; }
#panel_widgets .w-intro.beh    { background:#fdf3e2; border-color:#f0d19a; color:#5a4a2a; }
.w-eyeoff                     { display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-left:5px;
                                  background:#b8791b; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") center/contain no-repeat;
                                  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") center/contain no-repeat; }
#panel_widgets .w-aotip        { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#b8791b;
                                  background:#fdf3e2; border:1px solid #f0d19a; border-radius:8px; padding:5px 10px; margin:0 0 12px; }
/* 27-08-2026: .w-hint stond alleen binnen #panel_widgets. Sinds "Gegevens organisatie",
   "Coördinatoren" en "Mail templates teamtaken" óók zichzelf opslaan, staat dezelfde
   "wordt automatisch opgeslagen"-regel in die carrousels — zonder de losse selector viel de
   opmaak daar weg. De ID-variant blijft staan zodat niets binnen de widgets-tab verschuift. */
#panel_widgets .w-hint,
.w-hint                        { font-size:12px; color:#8a96ad; margin:4px 0 0; }
#panel_widgets .w-sec          { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
                                  color:#5a726c; margin:18px 0 10px; }
#panel_widgets .w-seg          { display:inline-flex; border:1px solid #d5dee0; border-radius:8px; overflow:hidden; }
#panel_widgets .w-seg button   { border:0; background:#fff; font:inherit; font-weight:600; font-size:13px; color:#5a726c;
                                  padding:8px 15px; cursor:pointer; border-right:1px solid #d5dee0; }
#panel_widgets .w-seg button:last-child { border-right:0; }
#panel_widgets .w-seg button.on{ background:#01AB91; color:#fff; }
#panel_widgets .w-code         { position:relative; }
#panel_widgets .w-code pre     { margin:0; background:#0f2b26; color:#e8f1ee; border-radius:10px; padding:14px 15px;
                                  overflow-x:auto; font-family:Menlo,Consolas,monospace; font-size:12px; line-height:1.6; white-space:pre; }
#panel_widgets .w-code .w-copy { position:absolute; top:9px; right:9px; border:1px solid rgba(255,255,255,.22);
                                  background:rgba(255,255,255,.12); color:#fff; font:inherit; font-size:11.5px; font-weight:700;
                                  padding:5px 10px; border-radius:7px; cursor:pointer; }
#panel_widgets .w-copyrow      { display:flex; gap:8px; align-items:center; }
#panel_widgets .w-copyrow input{ flex:1 1 auto; }
#panel_widgets .w-soon         { text-align:center; padding:40px 20px; color:#8a96ad; }
#panel_widgets .w-soon .w-big  { font-size:32px; margin-bottom:8px; }
#panel_widgets .w-soon h4      { color:#0f2b26; margin:0 0 6px; }
#panel_widgets .w-subtabs      { display:flex; gap:2px; border-bottom:1px solid #e3e7ee; margin:4px 0 14px; }
#panel_widgets .w-subtabs a    { font-weight:700; font-size:12.5px; color:#5a726c; padding:9px 14px; cursor:pointer;
                                  border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; }
#panel_widgets .w-subtabs a.on { color:#007A66; border-bottom-color:#01AB91; }
#panel_widgets .w-subpane      { display:none; }
#panel_widgets .w-subpane.on   { display:block; }
#panel_widgets .w-newbadge     { font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
                                  color:#fff; background:#FF7D26; border-radius:999px; padding:1px 7px; margin-left:8px; vertical-align:2px; }
/* Mini auto-opslaan-toast rechtsboven (fade in/out) */
.w-toast                       { position:fixed; top:16px; right:16px; z-index:99999; display:inline-flex; align-items:center; gap:8px;
                                 background:#7f7f7f; color:#fff; font-family:'Open Sans',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
                                 font-size:13px; font-weight:600; padding:10px 16px; border-radius:10px;
                                 box-shadow:0 10px 30px rgba(15,43,38,.22); opacity:0; transform:translateY(-10px);
                                 transition:opacity .28s ease, transform .28s ease; pointer-events:none; }
.w-toast.on                    { opacity:1; transform:translateY(0); }
.w-toast.err                   { background:#c0392b; box-shadow:0 10px 30px rgba(192,57,43,.28); }
/* tabs carrousel-breed: het extra ingekaderde grijze boxje rond de tab-content strippen */
#panel_widgets .tabs           { margin:0; border:0; background:transparent; box-shadow:none; }
#panel_widgets .tab-content    { background:transparent; border:0; box-shadow:none; padding:16px 0 0; }
#panel_widgets .tab-pane       { background:transparent; }
#panel_widgets .nav-tabs       { margin:0; }
/* Actieve tab: Epona onderscheidt hem alleen met een iets lichtere grijstint, wat op een
   grijze balk nauwelijks leesbaar is. Teal onderlijn + vette donkere tekst; inactieve tabs
   blijven bewust licht zodat de actieve eruit springt. Hover geeft alvast een grijze lijn,
   zodat zichtbaar is dat de tab klikbaar is. box-shadow i.p.v. border-bottom: de tabs
   verspringen dan niet 3px bij het wisselen. */
#panel_widgets .nav-tabs > li > a,
#panel_widgets .nav-tabs > li > a:focus     { color:#8a96ad; font-weight:400; border:0;
                                              background:transparent; box-shadow:none;
                                              transition:color .15s, box-shadow .15s; }
#panel_widgets .nav-tabs > li > a:hover     { color:#5a726c; background:transparent; border:0;
                                              box-shadow:inset 0 -3px 0 #d5dee0; }
#panel_widgets .nav-tabs > li.active > a,
#panel_widgets .nav-tabs > li.active > a:hover,
#panel_widgets .nav-tabs > li.active > a:focus { color:#555555; font-weight:700; border:0;
                                              background:transparent;
                                              box-shadow:inset 0 -3px 0 #01AB91; }
/* fieldset-padding weg zodat het hele tab-blok edge-to-edge over de carrousel loopt */
#panel_widgets .sky-form       { margin:0; border:0; background:transparent; }
#panel_widgets .sky-form fieldset { padding:0; background:transparent; }

/* ---------------------------------------------------------------------------
   CLUB ACTIVEREN — landingspage_activeren.cfm (stap 1 van 3).
   Publieke pagina achter een clubtoken; zie plan light-club-onboarding (fase 3c).
   --------------------------------------------------------------------------- */
.act-voortgang          { display:flex; flex-wrap:wrap; margin:0 0 18px; }
.act-voortgang .vstap   { flex:1 1 90px; text-align:center; padding:7px 4px;
                          border-bottom:3px solid #dfe5e3; color:#8b9793; }
.act-voortgang .vstap.nu    { border-bottom-color:#FF7D26; color:#22302d; font-weight:700; }
.act-voortgang .vstap.klaar { border-bottom-color:#01AB91; color:#018a75; }

/* Het aantal wachtende officials: de reden dat deze club is aangeschreven. */
.act-wacht              { background:#fdf3e3; border-left:4px solid #FF7D26;
                          border-radius:0 5px 5px 0; padding:13px 15px; margin:0 0 16px; }
.act-wacht strong       { color:#8a6320; font-size:17px; }
.act-wacht span         { display:block; color:#8a6320; opacity:.85; margin-top:2px; }

.act-uitleg             { color:#55635f; background:#eaefed; border-radius:5px;
                          padding:11px 14px; margin:0 0 4px; }
.act-uitleg strong      { color:#22302d; }
#act_melding, #act_relmelding { display:block; margin-top:4px; }

.act-uitleg ul          { margin:6px 0 0; padding-left:18px; line-height:1.75; }
.act-uitleg > strong    { display:block; margin-bottom:4px; font-size:15px; }
.act-meer              { margin:10px 0 0; padding-top:8px; border-top:1px solid #dfe5e3;
                          color:#8b9793; }

/* Validatie-hints op de activatiepagina: als blok onder het veld, niet ernaast geperst. */
#frm_activeren .jqx-validator-error-label { display:block; white-space:nowrap; margin-top:4px; }

/* ============================================================
   Media-uploadzones (sponsorlogo's + achtergrondfoto)
   Gebruikt door TWEE secties van template_clubgegevens.cfm: de admin-only
   wedstrijdmonitor-carrousel en de widgets-carrousel (#panel_widgets), die
   iedereen ziet. Stond eerder als <style> binnen de admin-carrousel, waardoor
   de stijlen verdwenen zodra die carrousel wegviel en de achtergrondfoto op
   ware grootte over de pagina liep. Hoort daarom hier, los van beide.
   ============================================================ */
.wm-upzone              { border:2px dashed #ccd4e0; border-radius:10px; padding:14px; display:flex;
                          align-items:center; gap:14px; background:#fafbfc; min-height:96px;
                          transition:border-color .15s, background .15s; }
.wm-upzone.drag         { border-color:#01ab91; background:#eefaf6; }
.wm-upzone.busy         { opacity:.55; pointer-events:none; }
.wm-upfile              { display:none !important; }
.wm-upprev              { width:150px; height:74px; flex:0 0 auto; border-radius:8px; background:#fff;
                          border:1px solid #e3e7ee; display:flex; align-items:center; justify-content:center;
                          overflow:hidden; padding:9px 13px; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.wm-upprev img          { height:48px; width:auto; max-width:100%; object-fit:contain; display:block; }
.wm-upprev .ph          { color:#aeb6c2; font-size:12px; text-align:center; }
.wm-upbody              { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.wm-upbody .btn         { margin:0; }
.wm-updel               { padding-left:0; padding-right:0; width:42px; text-align:center; }
.wm-uphint              { color:#8a96ad; font-size:12px; margin:0; line-height:1.35; flex-basis:100%; }

/* Achtergrondfoto: breder kader en vullend bijgesneden, i.p.v. passend gemaakt logo. */
.wm-upzone[data-kind='bg'] .wm-upprev     { width:210px; height:118px; padding:0; position:relative; }
.wm-upzone[data-kind='bg'] .wm-upprev img { height:100%; width:100%; object-fit:cover; border-radius:6px; }
.wm-upzone[data-kind='bg'] .wm-upprev .badge-default { position:absolute; left:6px; top:6px;
                          background:rgba(0,0,0,.55); color:#fff; font-size:10px; padding:2px 6px; border-radius:4px; }

/* ==========================================================================
   10. Toggle-rij in beheertabellen
   Een uitklapper onder een tabelrij, met Bootstrap's eigen collapse (zoals de
   "single toggles" van het thema) in plaats van eigen JavaScript.

   Waarom de rij ALTIJD in de tabel staat en niet met display:none wordt weggezet:
   collapse animeert de hoogte van het blokje erbinnen, en dat kan alleen als de
   rij zelf al meedoet in de tabel. Daarom levert de dichte staat hier nul hoogte
   op — geen padding en geen randlijn — zodat 475 dichte togglerijen niets kosten.
   ========================================================================== */
.toggle-rij > td            { padding:0 !important; border-top:0 !important; }
.toggle-rij .panel-body     { background:#FAFAFA; border-top:1px solid #EEE; }

/* De clubregel IS de balk: hij draagt de gegevens en is tegelijk de trigger.
   Bootstrap zet .collapsed op de trigger zolang het paneel dicht is — daar hangt de
   richting van de chevron aan, dus daar komt geen JavaScript aan te pas.

   Waarom hier geen .table-hover: die zet zijn achtergrond op de td's met een hogere
   specificiteit dan een losse rijklasse, en dan wint hover het van de balkkleur. De
   hover staat daarom hieronder zelf.

   Eén regel per club is een bewuste keuze en niet alleen opmaak: bij 475 rijen bepaalt
   de regelhoogte hoeveel clubs je in één blik ziet. Alles wat een tweede regel wilde
   (clubcode, volgende ronde) staat nu ingetogen op dezelfde regel. */
#activatietabel > thead > tr > th,
#uitnodigingtabel > thead > tr > th    { background:#8C8C8C; color:#FFF; font-weight:normal; border:0;
                                         text-transform:uppercase; letter-spacing:.06em; font-size:11px;
                                         padding:11px 8px; }
.klub-balk > td                        { background:#F5F5F5; cursor:pointer; padding:12px 8px !important;
                                         vertical-align:middle !important; border-top:2px solid #FFF !important; }
.klub-balk:hover > td                  { background:#ECECEC; }
.klub-balk:not(.collapsed) > td        { background:#ECECEC; }
.klub-balk .fa-chevron-up,
.klub-balk .fa-chevron-down            { color:#888; margin-left:10px; }
.klub-balk .fa-chevron-up              { display:none; }
.klub-balk:not(.collapsed) .fa-chevron-up   { display:inline-block; }
.klub-balk:not(.collapsed) .fa-chevron-down { display:none; }
.klub-balk .aantekening                { color:#A94442; }
.klub-balk .waarschuwing               { color:#B07D2B; }

/* Kolombreedtes. table-layout:fixed is hier de kern van de oplossing en geen finetuning:
   zonder dat verdeelt de browser de breedte naar de INHOUD, en dan duwt één lang mailadres
   de rechterkolommen buiten beeld — precies waardoor Actie en de chevron wegvielen.
   Met fixed krijgen de smalle kolommen hun maat en gaat de rest naar ontvanger.

   De smalle kolommen staan op nowrap: "link actief" en "actie nodig" over twee regels
   maakten de rij hoger dan de rest en dat oogt als een fout. Het mailadres mag juist wél
   afbreken, want dat is de enige kolom die kan meegeven. */
#activatietabel                        { table-layout:fixed; }
/* Overzicht Uitgenodigd (07-10-2026): vaste breedtes, alleen het mailadres mag afbreken. */
#uitnodigingtabel                      { table-layout:fixed; }
#uitnodigingtabel td                   { vertical-align:top; padding:10px 8px; }
#uitnodigingtabel th:nth-child(1)      { width:18%; }
#uitnodigingtabel th:nth-child(2)      { width:128px; }
#uitnodigingtabel th:nth-child(3)      { width:auto; }
#uitnodigingtabel th:nth-child(4)      { width:84px; }
#uitnodigingtabel th:nth-child(5)      { width:100px; }
#uitnodigingtabel th:nth-child(6)      { width:96px; }
#uitnodigingtabel th:nth-child(7)      { width:118px; }
#uitnodigingtabel td:nth-child(3)      { word-break:break-word; }
#uitnodigingtabel td:nth-child(4),
#uitnodigingtabel td:nth-child(5),
#uitnodigingtabel td:nth-child(6)      { white-space:nowrap; }
/* Let op de child-combinators: zonder "> tbody > tr >" raakt nth-child ook de td's van het
   opmaaktabelletje IN het adrespaneel, en dan krijgt het invoerveld daar de 23% van de
   clubkolom toebedeeld. Deze regels gelden uitsluitend de buitenste tabelrijen. */
#activatietabel > thead > tr > th:nth-child(1),
#activatietabel > tbody > tr > td:nth-child(1) { width:34px; }
#activatietabel > thead > tr > th:nth-child(2),
#activatietabel > tbody > tr > td:nth-child(2) { width:20%; }
#activatietabel > thead > tr > th:nth-child(3),
#activatietabel > tbody > tr > td:nth-child(3) { word-break:break-word; }
#activatietabel > thead > tr > th:nth-child(4),
#activatietabel > tbody > tr > td:nth-child(4) { width:78px;  text-align:right; white-space:nowrap; }
#activatietabel > thead > tr > th:nth-child(5),
#activatietabel > tbody > tr > td:nth-child(5) { width:64px;  white-space:nowrap; }
#activatietabel > thead > tr > th:nth-child(6),
#activatietabel > tbody > tr > td:nth-child(6) { width:90px; white-space:nowrap; }
#activatietabel > thead > tr > th:nth-child(7),
#activatietabel > tbody > tr > td:nth-child(7) { width:178px; white-space:nowrap; text-align:right; } /* 07-10-2026: was 122px, Afmelden viel erbuiten */
/* De uitklaprij overspant alles; die mag de vaste breedtes niet erven. */
#activatietabel > tbody > tr.toggle-rij > td   { width:auto; white-space:normal; text-align:left; }
/* Een mailadres is zelden langer dan een cm of acht; een veld dat de hele paneelbreedte
   pakt suggereert ruimte die er nooit gebruikt wordt en maakt de drie regels rommelig. */
#activatietabel > tbody > tr.toggle-rij .form-control { max-width:320px; }
/* "Link sturen naar" (14-10-2026): veld + knop als één groep. De groep krijgt de grens, anders is hij
   paneelbreed en staat de knop ver rechts van het (begrensde) veld; het veld zelf vult de groep. */
#activatietabel > tbody > tr.toggle-rij .input-group               { max-width:430px; }
#activatietabel > tbody > tr.toggle-rij .input-group .form-control { max-width:none; }

/* Clubcode onder de naam, ingetogen. */
.klub-balk .clubcode                   { display:block; color:#999; font-weight:normal; font-size:11px; }

/* ------------------------------------------------------------------
   Bovenbalk boven de jqxGrid-koppen
   ------------------------------------------------------------------
   Probleem: op pagina's MET een jqxGrid viel de ADMIN-dropdown deels weg achter
   de kolomkop. Zonder grid was er niets aan de hand.

   De keten van oorzaken, want er zaten drie valkuilen in:

   1. assets/css/header-default.css r.35-41 zet #topNav op position:relative +
      z-index:10. Dat is een stapelcontext, dus een hogere z-index op het menu
      ZELF telt alleen binnen die laag en helpt niet. De balk moet omhoog.

   2. jqxGrid zet de z-index van de kolomkoppen INLINE bij het renderen, niet in
      een stylesheet: role="columnheader" style="z-index: 299". Die 299 staat
      nergens in jqx.base.css, dus opzoeken werkte niet - alleen de inspector
      liet het zien. Een waarde als 120 was daardoor te laag.

   3. De balk permanent optillen brak de modals: Bootstrap zet .modal op 1040, en
      met #topNav op 1050 verdween elke popup achter de navigatie.

   Daarom: optillen ALLEEN zolang de muis op de balk staat. Dit menu klapt open op
   hover (#topNav .nav li:hover > ul.dropdown-menu in header-default.css), dus
   Bootstrap voegt hier nooit een .open-klasse toe - een regel op .open greep
   daarom niet. :hover is bovendien eenvoudiger en werkt in elke browser.

       normaal          #topNav = 10    (modals hebben vrij baan)
       muis op de balk  #topNav = 1030  (boven de kolomkop 299, onder .modal 1040) */
#topNav:hover { z-index: 1030; }

/* ------------------------------------------------------------------
   Licentie: alleen-lezen  (Lite-licentie, blok C)
   ------------------------------------------------------------------
   Twee dingen: de strook met de uitleg (pages/_licentie_strook.cfm) en de demping van een
   scherm waarin niets gewijzigd mag worden.

   WAAROM DEMPEN EN NIET ALLEEN WEIGEREN: eerst liet het portaal je een veld wijzigen om het
   daarna terug te zetten. Dat leest als een bug. Nu zie je meteen dat er niets te wijzigen valt.

   LET OP - dit is opmaak, geen slot. De velden krijgen in de browser ook echt readonly/disabled
   (js/aol_licentie.js), en de serverkant weigert met LICENTIE_VEREIST. Alleen kleuren of
   pointer-events:none is niet genoeg: de waarde wordt dan gewoon meegestuurd bij een opslag. */

/* De melding staat IN de kopregel, niet erboven: een blok boven de tabel duwt de inhoud naar
   beneden en dat viel meteen op. Vandaar inline, klein, en zonder eigen hoogte - hij past binnen
   de regelhoogte van de <h4> waar hij in hangt. De volledige zin zit in de title-tooltip. */
/* Voor een kopregel waarvan de titel zelf een blok-element is (programma: de datum staat in een
   <div> die door JS wordt overschreven). Zonder flex zou de melding op een eigen regel vallen en
   alsnog de inhoud naar beneden duwen. */
.lic-kopregel                   { display:flex; align-items:baseline; flex-wrap:wrap; }

.lic-melding                    { display:inline-flex; align-items:baseline; gap:7px; margin-left:14px;
                                  font-size:12px; font-weight:400; line-height:1; color:#8A94A6;
                                  vertical-align:middle; white-space:nowrap; }
.lic-melding .fa-lock           { font-size:11px; color:#A7B0BB; }
.lic-melding a                  { color:#01AB91; font-weight:600; text-decoration:none; }
.lic-melding a:hover,
.lic-melding a:focus            { color:#018A75; text-decoration:underline; }

/* Variant voor een modal-titelbalk (donkere ondergrond): geen uitleg, alleen de stand. De uitleg
   staat al op de pagina eronder - twee keer dezelfde zin in één beeld was te veel. */
.lic-label                      { display:inline-flex; align-items:baseline; gap:6px; margin-left:12px;
                                  font-size:11px; font-weight:600; line-height:1; letter-spacing:.02em;
                                  color:#fff; background:rgba(255,255,255,.16);
                                  border:1px solid rgba(255,255,255,.35); border-radius:20px;
                                  padding:3px 10px; vertical-align:middle; white-space:nowrap; }
.lic-label .fa-lock,
.lic-label .fa-eye              { font-size:10px; }
/* Staat het label los in de modal-header (omdat de titel door JS wordt overschreven, zoals in de
   wedstrijdpopup), dan moet het alsnog op dezelfde regel als de titel komen. In Bootstrap 3 zweeft
   de sluitknop al naar rechts; dit gaat er netjes naast staan. */
.modal-header > .lic-label      { float:right; margin:3px 16px 0 0; }

/* De gedempte stand. Waarden blijven leesbaar - je ziet je eigen gegevens, je kunt ze alleen
   niet wijzigen. Vandaar gedempt en niet verborgen.

   Gekoppeld aan [data-lic-uit], het merkteken dat aolAlleenLezen zet op wat hij ECHT heeft
   uitgeschakeld - niet aan "elke input binnen dit formulier". Dat verschil telt zodra een scherm
   deels open is: in de wedstrijdpopup werken de boekings-toggles bij een geactiveerde Lite-club
   wél, en die horen dan ook niet grijs te staan. */
.lic-alleenlezen [data-lic-uit] { background:#F4F5F7 !important; border-color:#E4E7EA !important;
                                  color:#98A1AC !important; box-shadow:none !important; }
.lic-alleenlezen input[data-lic-uit] + i { opacity:.55; }   /* sky-form toggle/checkbox */
.lic-alleenlezen .panel-heading,
.lic-alleenlezen .toggle-content { opacity:.85; }
/* Knoppen die iets wijzigen horen weg: er valt niets op te slaan. Wélke knoppen dat zijn bepaalt
   de JS (aolAlleenLezen / aolSchrijfknoppenUit), niet dit bestand - een lijstje knopklassen hier
   loopt gegarandeerd achter. Zo miste een btn-success ("Koppel aan team") de eerste versie.
   Bewust NIET genest onder .lic-alleenlezen: op een pagina staan schrijfknoppen los, buiten het
   gedempte formulier (programma: Nieuw en de importknoppen naast Vorige/Volgende). */
/* Fase 4 (30-09-2026): niet meer verbergen maar GRIJS en uitgeschakeld, met "Alleen inzien" bij
   hover. Verborgen knoppen maakten een scherm raadselachtig ("waar is Nieuw?"); grijs laat zien
   dát het kan, en de hover zegt waarom niet. */
.lic-knop-uit,
.lic-knop-uit:hover,
.lic-knop-uit:focus             { background:#eef0f2 !important; border-color:#dde2e6 !important; color:#a3acb5 !important;
                                  box-shadow:none !important; cursor:not-allowed !important; opacity:1 !important; }
.lic-knop-uit i                 { color:#a3acb5 !important; }

/* ============================================================================
   FASE 8b - Historie aanstellingen (paneel in de wedstrijd-popup)
   ============================================================================ */
.hist-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.hist-chip{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; cursor:pointer;
  background:#f1f3f5; color:#6c757d; border:1px solid #e4e7eb; }
.hist-chip.on{ background:#e8f0fa; color:#2b6cb0; border-color:#bcd6f0; }
.hist-tbl{ font-size:13px; margin-bottom:0; }
.hist-tbl thead th{ font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#9aa1ab; border-top:0; border-bottom:1px solid #e4e7eb; padding:6px 8px; white-space:nowrap; }
.hist-tbl tbody td{ padding:8px; border-top:1px solid #eef0f2; vertical-align:top; }
.hist-when{ font-variant-numeric:tabular-nums; color:#6c757d; white-space:nowrap; }
.hist-rol{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.04em; padding:2px 7px;
  border-radius:5px; background:#f1f3f5; border:1px solid #e4e7eb; color:#6c757d; }
.hist-pill{ display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.hist-pill.g{ background:#e7f6ee; color:#1d9d5b; box-shadow:inset 0 0 0 1px #bfe6cf; }
.hist-pill.r{ background:#fdecee; color:#dc3545; box-shadow:inset 0 0 0 1px #f5c2c8; }
.hist-pill.a{ background:#fbf3dd; color:#b3790a; box-shadow:inset 0 0 0 1px #f0dca6; }
.hist-pill.b{ background:#e8f0fa; color:#2b6cb0; box-shadow:inset 0 0 0 1px #bcd6f0; }
.hist-hint{ font-size:11px; color:#9aa1ab; }
.hist-src{ display:inline-block; font-size:9.5px; color:#9aa1ab; border:1px solid #e4e7eb; border-radius:4px; padding:1px 5px; }


/* SRZ voucher herkomst-badges (Fase 4.1) — grid Betaling-kolom + popup */
.srz-hb{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;line-height:1.5;white-space:nowrap}
.srz-hb-ideal{background:#e7f6ee;color:#1f8a5b;border:1px solid #bfe3d0}
.srz-hb-match{background:#e7f0fb;color:#2b6cb0;border:1px solid #c3d8f2}
.srz-hb-vou{background:#efe9fb;color:#6b46c1;border:1px solid #d9cdf3}
.srz-hb-man{background:#eef1f1;color:#7b8a89;border:1px solid #dbe2e1}

/* ── toggle-label met uitleg (21-08-2026) ──────────────────────────────────────────
   De uitleg hangt aan de LABELTEKST zelf in plaats van aan een los vraagteken-icoon.
   Dat moet een <a> zijn: assets/js/scripts.js (_popover) initialiseert popovers alleen
   op `a[data-toggle=popover]` — een <span> doet niets. Zie ook pages/_kengetallen.cfm.
   Een los icoon náást het label werkte niet: label.toggle uit sky-form vult de breedte,
   waardoor het icoon achter of onder de schakelaar belandde. En ín het label zetten kan
   niet, want dan bedient een klik erop de schakelaar.
   Stippellijn + help-cursor maken zichtbaar dat er iets achter zit, zonder het als
   hyperlink te laten ogen.                                                            */
.toggle-uitleg,
.toggle-uitleg:hover,
.toggle-uitleg:focus  { color:inherit; text-decoration:none; cursor:help;
                        border-bottom:1px dotted #9aa5a2; }
.toggle-uitleg:hover  { border-bottom-color:#3aa98b; }


/* SRZ voucher-beheer: subbar (filter-dropup) + KPI-blok (Fase 4.1) */
.srz-vc-subbar{display:flex;justify-content:space-between;align-items:center;margin:4px 0 16px;flex-wrap:wrap;gap:10px}
.srz-vc-addbtns{display:flex;gap:8px;flex-wrap:wrap}
.srz-vc-kpi{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.srz-vc-tile{flex:1 1 150px;background:#fff;border:1px solid #e2e8e7;border-left:4px solid #26A69A;border-radius:7px;padding:11px 13px}
.srz-vc-tile .l{font-size:10.5px;color:#7b8a89;text-transform:uppercase;letter-spacing:.03em;font-weight:600}
.srz-vc-tile .b{font-size:19px;font-weight:700;margin-top:3px;color:#33413f}
.srz-vc-tile .c{font-size:11px;color:#7b8a89;margin-top:1px}
.srz-vc-tile.t-ideal{border-left-color:#1f8a5b}
.srz-vc-tile.t-match{border-left-color:#2b6cb0}
.srz-vc-tile.t-vou{border-left-color:#6b46c1}
.srz-vc-tile.t-man{border-left-color:#7b8a89}
#srz_vc_filtermenu{min-width:255px}


/* SRZ voucher herkomst-keten (Fase 4b-3) */
.srz-kt-step{padding:9px 0;border-bottom:1px dashed #d7e3e1}
.srz-kt-step:last-child{border-bottom:0}
.srz-kt-step.bron{background:#e7f6ee;border:1px solid #bfe3d0;border-radius:6px;padding:9px 11px;margin-top:4px}
.srz-kt-head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.srz-kt-head .code{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:13px}
.srz-kt-head .tag{font-size:11px;color:#7b8a89}
.srz-kt-head .saldo{margin-left:auto;font-weight:700;font-size:13px;color:#33413f}
.srz-kt-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 24px;font-size:12.5px;line-height:1.5}
.srz-kt-grid .k{color:#7b8a89;font-weight:600;display:inline-block;min-width:74px}
.srz-kt-bron{margin-top:7px;padding-top:6px;border-top:1px dashed #bfe3d0;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#7b8a89}
.srz-kt-bron b{color:#1f7a52}


/* SRZ voucher terugbetaal-route (Fase 4b) */
.rt-direct{color:#1f8a5b;font-weight:600}
.rt-keten{color:#2b6cb0;font-weight:600}
.rt-hand{color:#7b8a89;font-weight:600}
.srz-vc-routeleg{display:flex;flex-wrap:wrap;gap:5px 22px;margin:14px 0 10px;font-size:11.5px;color:#7b8a89;line-height:1.55}
.srz-vc-tile.t-direct{border-left-color:#1f8a5b}
.srz-vc-tile.t-keten{border-left-color:#2b6cb0}
.srz-vc-tile.t-hand{border-left-color:#7b8a89}


/* ============================================================
   InMail — gedeeld door de clubcomposer (aol_communicatie) en de
   admin-composer (aol_inmail_admin). Was inline op beide pagina's;
   21-08-2026 hierheen gehaald zodat de twee schermen niet uit elkaar
   lopen en een kleurwijziging op één plek staat.
   ============================================================ */
.inm-counter{float:right;font-weight:400;color:#888}
.inm-hint{color:#888;font-size:12px}
.inm-fout{color:#e74c3c;font-size:11px;margin-top:3px}
.inm-uploadbox{border:1px solid #ddd;border-radius:6px;padding:12px;background:#fafafa;max-width:440px}
.inm-uploadbox p{margin:8px 0 0;color:#888;font-size:12px}
.inm-hero{display:block;max-width:100%;max-height:150px;border-radius:6px;margin-bottom:10px}
.inm-ctablok{margin-top:8px}

/* Kopbalk met de doelgroep-teller rechts (alleen admin). De teller stond eerst als
   los kader onder de keuzelijsten; 21-08-2026 verhuisd naar de grijze balk, zodat het
   formulier niet in tweeën wordt gebroken door een regel die alleen een aantal noemt. */
.inm-kopbalk td{background:#7f7f7f;color:#fff;height:37px;font-size:14px}
.inm-kopbalk td.rechts{text-align:right;padding-right:12px;font-size:12px;white-space:nowrap}
.inm-kopbalk .is-fout{color:#ffd7d2}

/* Zoekbare clubkiezer: naam links, plaats + clubcode rechts in grijs. Twee clubnamen
   komen dubbel voor, dus die tweede kolom is nodig om ze te kunnen onderscheiden. */
.inm-clubnaam{display:inline-block}
.inm-clubsub{float:right;color:#999;font-size:11px;padding-left:14px}
#adm_club_paneel{padding:7px}
/* het zoekveld tekent jqxListBox zelf (filterable) - alleen wat lucht eromheen */
#adm_club_lijst .jqx-listbox-filter-input{font-size:13px}
.inm-clubmeer{padding:6px 2px 0;color:#999;font-size:11px}
/* Personenkiezer (19-09-2026): zelfde paneel als de clubkiezer, maar met een EIGEN zoekveld —
   de ledenlijst komt van de server, dus jqxListBox kan er niet zelf doorheen filteren. */
#adm_pers_paneel{padding:7px}
.inm-perszoek{width:100%;height:30px;margin:0 0 6px;padding:4px 8px;font-size:13px;border:1px solid #ccc;border-radius:3px}
/* Gekozen personen als badges onder het keuzeveld, met een kruisje om ze weg te klikken. */
/* VASTE hoogte van twee regels badges, met scroll erboven: het vak is altijd even hoog, of je nu
   niemand of twintig mensen hebt gekozen. Met min/max-height groeide het blok bij de tweede regel
   alsnog en versprong het scherm - vandaar height, niet min-height. */
.inm-chips{padding:4px 0 0;line-height:1.9;height:62px;overflow-y:auto}
.inm-chip{display:inline-block;background:#eef7f5;border:1px solid #cfe7e1;border-radius:12px;padding:1px 6px 1px 9px;margin:0 4px 4px 0;font-size:12px;color:#33574f;white-space:nowrap}
.inm-chip-naam{vertical-align:middle}
.inm-chip-x{display:inline-block;margin-left:5px;padding:0 3px;color:#7d9a94;font-size:14px;line-height:1;text-decoration:none;vertical-align:middle}
.inm-chip-x:hover{color:#c0392b;text-decoration:none}
.inm-chip-leeg{display:inline-block;margin-left:2px;font-size:11px;color:#999;text-decoration:underline}
.inm-clubknop{padding-left:4px;color:#555}
.inm-kanalen{padding-top:6px}
.inm-kanaal{display:inline-block;margin-right:22px}
.inm-geentoegang{margin:20px}
/* URL-veld: goed/fout terwijl je typt (was .css('border-color') in de JS) */
.inm-veld--ok{border-color:#01AB91 !important}
.inm-veld--fout{border-color:#e74c3c !important}
.inm-mailrem{color:#e74c3c;font-size:12px;margin-left:10px}
.inm-waarschuwing{color:#e74c3c}

/* tabbalk Verzonden / Concepten */
.inm-tabs{border-bottom:1px solid #dfe3e6;margin:16px 0 10px}
.inm-tab{text-decoration:none;font-weight:600;color:#888;border-radius:0}
.inm-tab:hover,.inm-tab:focus{text-decoration:none;color:#888}
.inm-tab.is-actief,.inm-tab.is-actief:hover,.inm-tab.is-actief:focus{color:#007A66;border-bottom:2px solid #01AB91}
.inm-grid{margin-bottom:16px}

/* jqxGrid-cellen: een cellsrenderer geeft HTML terug, dus classes werken daar ook */
.inm-cel{margin-top:7px}
.inm-cel--rechts{margin-top:7px;text-align:right;padding-right:9px}
.inm-cel--leeg{margin-top:7px;text-align:right;padding-right:9px;color:#aaa}
.inm-acties{padding:5px}
.inm-acties a{margin-right:16px}
.inm-acties a:last-child{margin-right:0}
.inm-act{color:#555}
.inm-act--bekijk{color:#01AB91}
.inm-act--kopie{color:#888}
.inm-act--rood{color:#b23b3b}
.inm-gelezen{padding:6px;color:#01AB91}
.inm-ongelezen{padding:6px;color:#aaa}
.inm-selectall{color:#01AB91}
#grid_verzonden .jqx-grid-cell>div,#grid_concepten .jqx-grid-cell>div,
#adm_grid_verzonden .jqx-grid-cell>div,#adm_grid_concepten .jqx-grid-cell>div{padding-left:9px !important}
#grid_verzonden .jqx-grid-cell-right-align,#grid_concepten .jqx-grid-cell-right-align,
#adm_grid_verzonden .jqx-grid-cell-right-align,#adm_grid_concepten .jqx-grid-cell-right-align{padding-right:9px !important}

/* ============================================================
   TABSTRIP ALS PAGINAKOP (26-08-2026)
   Gebruikt op pages/aol_teams.cfm: de tabs staan op de plek waar eerst <h4>TEAMS</h4>
   stond, en moeten er dus uitzien als die kop. De theme zet h4 op Open Sans 300 /
   1.4em / line-height 27px (assets/css/essentials.css); dat is hier overgenomen.
   Inactieve tab grijs, actieve zwart - zoals de kop eruitzag.
   Het oog-icoon voor 'alleen beheerders' is de bestaande klasse .w-eyeoff hierboven.
   ============================================================ */
.nav-tabs.nav-kop              { border-bottom:1px solid #ddd; margin:0 0 14px; }
.nav-tabs.nav-kop>li>a         { font-family:'Open Sans'; font-weight:300; font-size:1.4em;
                                 line-height:27px; color:#9a9a9a; padding:2px 18px;
                                 margin-right:2px; border-radius:0; }
.nav-tabs.nav-kop>li.active>a,
.nav-tabs.nav-kop>li.active>a:hover,
.nav-tabs.nav-kop>li.active>a:focus { color:#000; }
.nav-tabs.nav-kop>li>a:hover   { color:#555; background:#f7f7f7; }
.nav-tabs.nav-kop .badge       { font-size:11px; vertical-align:middle; margin-left:4px; }

/* Quarantaine-tab: de tabel en de knoppenrij. */
#quar_tabel td                 { vertical-align:middle; }
#quar_tabel .quar-acties       { white-space:nowrap; }
#quar_tabel .quar-feed         { font-size:.85em; color:#8a8a8a; }
#quar_leeg                     { color:#8a8a8a; padding:14px 0; }

/* ==========================================================================
   SRZ Match popup v2 (A1 herontwerp) — rolkaarten
   Leunt op Bootstrap-3 panels + labels; alleen de kop-layout is maatwerk.
   ========================================================================== */
.srzm-rolpanel                 { margin-bottom:10px; border:1px solid #ddd; }
.srzm-rolpanel .panel-heading  { padding:0; background:#f7f7f7; }
.srzm-rolhead                  { display:block; padding:11px 14px; color:#333;
                                 text-decoration:none; cursor:pointer; }
.srzm-rolhead:hover,
.srzm-rolhead:focus            { text-decoration:none; color:#333; background:#f0f0f0; }
.srzm-rolhead > .fa-user       { color:#01ab91; margin-right:4px; }
.srzm-rolname                  { font-weight:600; margin-right:8px; }
.srzm-bookref                  { float:right; font-size:12px; color:#8a8a8a;
                                 font-weight:400; }
.srzm-caret                    { float:right; margin-left:12px; margin-top:2px;
                                 color:#999; transition:transform .2s ease; }
.srzm-rolhead.collapsed .srzm-caret { transform:rotate(-90deg); }
.srzm-rolpanel .panel-body     { padding:14px; }
.srzm-refline                  { border-top:1px solid #eee; margin-top:12px;
                                 padding-top:10px; font-size:12px; color:#8a8a8a; }
.srzm-verg                     { display:flex; align-items:center; height:34px; }
.srzm-verg .badge-aol          { margin-right:8px; }
.srzm-verg-bedrag              { font-weight:600; font-size:16px; }
.srzm-info                     { color:#8a8a8a; margin-left:4px; cursor:pointer; }
.srzm-minirow                  { background:#f7f7f7; }
.srzm-rolstatus                { margin-left:6px; }
/* niet-geboekte rol: gedempte kop */
.srzm-rolpanel[data-geboekt="0"] .srzm-rolname { color:#8a8a8a; font-weight:400; }

/* Kleurvarianten op het AOL-badge (badge-aol = huis-badge; NIET Bootstrap .label,
   want sky-form claimt .label als block-formulierlabel). fee = vergoeding, st = status. */
.badge-aol.b-full              { background-color:#01ab91; }  /* FULL  = AOL-groen */
.badge-aol.b-partial           { background-color:#f0ad4e; }  /* PARTIAL = oranje */
.badge-aol.b-none              { background-color:#d9534f; }  /* NONE  = rood   */
.badge-aol.st-ok               { background-color:#01ab91; }  /* aangesteld = AOL-groen */
.badge-aol.st-bad              { background-color:#d9534f; }  /* vervallen      */
.badge-aol.st-open             { background-color:#f0ad4e; }  /* open/pending   */
.badge-aol.st-info             { background-color:#5bc0de; }  /* bevestigd      */

/* Inline "official aanstellen / wijzigen"-zoekblok in de rolkaart */
.srzm-aanstel                  { margin-top:12px; padding:12px; border-radius:4px;
                                 background:#f4fbf9; border:1px dashed #cbd5d1; }
.srzm-aanstel .ah              { font-weight:600; color:#01875f; margin-bottom:8px; }
.srzm-aanstel-input            { max-width:420px; }
.srzm-results                  { max-width:560px; margin:8px 0 0; }
.srzm-results .list-group-item { display:flex; align-items:center; gap:10px; padding:8px 12px; }
.srzm-results .avatar          { width:28px; height:28px; border-radius:50%; background:#dfe7e5;
                                 display:inline-flex; align-items:center; justify-content:center; color:#6b7d78; }
.srzm-results .srzm-aanstel-btn{ margin-left:auto; }

/* Inline "vrij bericht"-compose in de rolkaart (berichtencentrum → inbox+push) */
.srzm-bericht                  { margin-top:12px; padding:12px; border-radius:4px;
                                 background:#fbf7ef; border:1px dashed #e2cfa5; }
.srzm-bericht .ah              { font-weight:600; color:#a06a12; margin-bottom:10px; }
.srzm-bericht .seg .label      { margin-bottom:4px; }
.srzm-bericht .btn-group       { margin-bottom:4px; }
.srzm-bericht textarea         { width:100%; max-width:640px; border:1px solid #cfd8d5;
                                 border-radius:4px; padding:8px; }
.srzm-bericht .send            { margin-top:8px; }
.srzm-bericht-preview          { margin-top:12px; }
.srzm-pv-card                  { background:#fff; border:1px solid #e2cfa5; border-radius:6px;
                                 overflow:hidden; max-width:640px; }
.srzm-pv-head                  { background:#01ab91; color:#fff; padding:6px 12px; font-weight:600;
                                 font-size:13px; }
.srzm-pv-body                  { padding:12px; font-size:13px; min-height:46px; line-height:1.5;
                                 word-wrap:break-word; }

/* AOL-groene knop (Epona-accent), groene modal-header + footer-uitlijning (v2-popup) */
.btn-aol                       { background-color:#01ab91; border-color:#01ab91; color:#fff; }
.btn-aol:hover, .btn-aol:focus,
.btn-aol:active                { background-color:#019a82; border-color:#019a82; color:#fff; }
#popup_srz_match_v2 .modal-header      { background-color:#01ab91; border-bottom:0; }
#popup_srz_match_v2 .modal-title,
#popup_srz_match_v2 .modal-header .close { color:#fff; opacity:1; text-shadow:none; }
#popup_srz_match_v2 .modal-title small { color:rgba(255,255,255,.85); }
.srzm-footer                   { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.srzm-autosave                 { margin-right:auto; align-self:center; }
.srzm-footer-actions           { display:flex; align-items:center; gap:8px; }
.srzm-footer-actions .btn-group{ margin:0; }
.srzm-footer-actions .btn      { height:36px; line-height:34px; padding:0 14px; margin:0;
                                 box-sizing:border-box; vertical-align:middle; }

/* === Club events (beheerscherm aol_clubevents) ===============================
   Alleen wat Bootstrap 3 niet al kan; voor uitlijnen en dempen gebruikt het scherm
   text-right / text-muted / pull-right uit het theme zelf. */
.ce-veldlabel                  { font-size:12px; color:#666; margin-bottom:4px; display:block; font-weight:400; }
.ce-hint                       { font-size:12px; color:#999; font-weight:400; }
.ce-hint-klein                 { font-size:11px; color:#999; }
.ce-tabel                      { font-size:13px; margin:0; }
.ce-tabel > thead > tr         { background:#8a8a8a; color:#fff; }
.ce-tabel > tfoot > tr > td    { background:#fbfbfb; }
.ce-tabel .ce-regel-nieuw      { background:#fbfbfb; }
.ce-celtekst                   { padding-top:12px; }
.ce-totaalveld                 { background:#f1faf8 !important; border-color:#a8ddd2 !important;
                                 font-weight:600; cursor:default; }   /* !important: sky-form zet zelf een input-achtergrond */
.ce-kiesknop                   { background:#fff; color:#01ab91; cursor:pointer; text-align:center;
                                 border:1px solid #ddd; border-radius:3px; padding:4px 8px; font-size:12px; }
.ce-kiesknop:hover             { background:#f1faf8; border-color:#a8ddd2; }
.ce-treffer                    { padding:6px 10px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.ce-treffer:hover              { background:#f6f6f6; }
.ce-treffers                   { max-height:190px; overflow:auto; border:1px solid #ddd; border-radius:3px; }
.ce-gekozen                    { background:#f1faf8; border:1px solid #a8ddd2; border-radius:3px; padding:6px 10px; }
.ce-negatief                   { color:#d9534f; }
.ce-positief                   { color:#3c763d; }
.ce-waarschuwing               { color:#8a6d3b; }
.ce-badge                      { display:inline-block; min-width:18px; padding:1px 6px; border-radius:9px;
                                 background:#e8e8e8; color:#555; font-size:11px; font-weight:600; text-align:center; }
.ce-gridcel                    { margin:9px 0 0 4px; }
.ce-gridcel-badge              { margin-top:8px; }
.ce-gridcel-accent             { color:#01ab91; }
.ce-totaalregel                { border-top:1px solid #ddd; }
/* --- Eventpopup: sessieregels ------------------------------------------------------------
   De velden zijn van het theme (sky-form: label.input / label.select / label.toggle); hier alleen
   de kolombreedtes. Bewust FLEX met vaste maten en geen 12-koloms grid: een twaalfde is ~75px en
   daar past "20:00" niet in - de tijdvelden werden afgekapt en de toggle-tekst liep buiten de rand.
   Koprij en regels delen dezelfde .ce-c-*-classes, zodat de koppen boven hun eigen veld staan. */
.ce-sessies                    { border:1px solid #ddd; border-radius:3px; margin-bottom:14px; background:#fff; }
.ce-seskop,
.ce-sesrij                     { display:flex; align-items:center; margin:0; }
.ce-seskop                     { background:#8a8a8a; color:#fff; padding:8px 4px; font-size:12px; }
.ce-sesrij                     { padding:6px 4px; border-bottom:1px solid #f0f0f0; }
.ce-sesrij:last-child          { border-bottom:0; }
.ce-seskop > div               { padding:0 6px; }
.ce-sesrij > section           { padding:0 6px; margin:0; }

.ce-c-datum                    { flex:0 0 152px; }
.ce-c-tijd                     { flex:0 0 86px; }
.ce-c-soort                    { flex:1 1 auto; min-width:0; }   /* min-width:0 = mag krimpen */
.ce-c-bedrag                   { flex:0 0 112px; text-align:right; }
.ce-c-tog                      { flex:0 0 92px; text-align:center; }
.ce-c-del                      { flex:0 0 44px; text-align:center; }

/* Geen eigen hoogte op de velden: sky-form positioneert de select-pijl t.o.v. zijn eigen maat,
   en een override liet de tekst wegzakken met de pijl in het midden. Alleen de tekengrootte. */
.ce-sesrij .input input,
.ce-sesrij .select select      { font-size:13px; }
/* De toggle van sky-form: de schakelaar (i) staat ABSOLUUT rechts binnen padding-right:61px, en
   het bolletje (i:before) en de ON/OFF-tekst (i:after) hangen daar weer absoluut in. Raak i dus
   niet aan - een eerdere position:static zette bolletje en tekst scheef. Hier staat de uitleg in de
   kolomkop, dus er is geen labeltekst: de box krijgt alleen de maat van de schakelaar zelf. */
.ce-sesrij .toggle             { display:inline-block; width:61px; height:32px; margin:0; }
.ce-c-del a                    { display:inline-block; padding-top:2px; font-size:15px; }
.ce-sesvoet                    { padding:7px 10px; background:#fbfbfb; border-top:1px solid #eee; }
.ce-geen                       { padding:12px; color:#999; }
.ce-rij-afgelast > section     { opacity:.55; }
.ce-rij-afgelast .toggle       { opacity:1; }
.ce-midden                     { text-align:center; }
/* --- Eventpopup: plekkentabel van een TOERNOOI -------------------------------------------
   Een toernooi biedt plekken aan die officials zelf innemen; de tabel staat daarom gegroepeerd
   per sessie (ochtend/middag hebben hun eigen bezetting). Bewust dezelfde grijstoon voor de
   groepskop als voor een tabelkop elders in het scherm, zodat het een kop blijft lezen. */
.ce-sesgroep > td              { background:#f2f2f2; font-size:12px; font-weight:600; color:#444;
                                 border-top:1px solid #ddd !important; padding:6px 10px !important; }
.ce-sesgroep-re                { float:right; font-weight:400; color:#888; }
.ce-rij-open > td:first-child,
.ce-rij-bezet > td:first-child { color:#aaa; }
.ce-tabel-plekken > tbody > tr > td { padding:4px 6px; vertical-align:middle; }
.ce-plekcel                    { display:inline-flex; align-items:center; gap:6px; background:#f1faf8;
                                 border:1px solid #a8ddd2; border-radius:3px; padding:3px 7px; font-size:12px; }
.ce-plek-naam                  { font-weight:600; color:#2a6b60; }
.ce-plekcel a                  { color:#999; font-size:14px; line-height:1; text-decoration:none; }
.ce-plekcel a:hover            { color:#d9534f; }
/* --- Eventpopup: wedstrijdlocatie per sessie (toernooi) ----------------------------------- */
.ce-locblok                    { border:1px solid #eee; border-radius:3px; padding:10px 12px; margin-bottom:10px; }
.ce-locblok:last-child         { margin-bottom:0; }
.ce-locwanneer                 { font-size:12px; font-weight:600; color:#444; margin-bottom:4px; }
.ce-loc-huidig                 { font-size:13px; }
.ce-loczoek                    { margin-bottom:10px; }
/* De zoekrij onder een sessie, om een bestaande wedstrijd te koppelen. */
.ce-koppelrij > td             { background:#fbfbfb; }
.ce-koppelrij .ce-treffers     { max-height:220px; }
/* De live-balk: knop links, uitleg ernaast. Flex zodat de tekst meeloopt op een smal scherm. */
.ce-livebalk                   { display:flex; flex-wrap:wrap; align-items:center; gap:12px;
                                 margin-top:14px; padding:10px 12px; background:#f7fbfa;
                                 border:1px solid #d8ece8; border-radius:3px; }


/* Kop van de popup */
.ce-clubnaam                   { font-size:15px; font-weight:600; padding-top:4px; }

/* Voet: acties links, status en sluiten rechts */
.ce-voet                       { text-align:left; }
.ce-bewaard                    { color:#01ab91; margin-left:8px; }
.ce-voetrechts                 { display:inline-flex; align-items:center; gap:8px; }
/* ===== Licentie-indeling (Admin → Licentie-indeling, fase 2b 30-09-2026) ===== */
.li-legenda                    { display:flex; flex-wrap:wrap; gap:6px 22px; margin:6px 0 12px; font-size:13px; color:#6f7a85; }
.li-chip                       { display:inline-block; padding:1px 9px; border-radius:10px; font-weight:600; font-size:12px; }
.li-tabel                      { font-size:13px; }
.li-tabel th                   { background:#fafbfb; color:#6f7a85; font-weight:600; font-size:12px; vertical-align:bottom !important; }
.li-tabel th.li-cel            { text-align:center; min-width:112px; }
.li-aantal                     { display:block; font-weight:400; font-size:11px; color:#9aa3ab; }
.li-tabel td                   { vertical-align:middle !important; }
.li-tabel td.li-cel            { text-align:center; }
.li-groep td                   { background:#737373; color:#fff; text-transform:uppercase; font-size:13px; padding:8px 10px !important; }
.li-item .li-naam::before      { content:"›"; margin-right:9px; color:#555; }
.li-sub .li-naam               { padding-left:30px !important; color:#445; }
.li-sub .li-naam::before       { content:"└"; margin-right:7px; color:#b8c0c7; }
.li-sleutel                    { display:block; font-size:11px; color:#9aa3ab; }
.li-i                          { width:30px; text-align:center; }
.li-info                       { color:#aab3bc; cursor:help; }
.li-info:hover                 { color:#01ab91; }
.li-vast                       { color:#9aa3ab; font-size:12px; }
.li-sel                        { font-weight:600; height:28px; padding:2px 6px; border-radius:10px; }
.li-actief                     { background:#e6f6f3 !important; color:#018a75 !important; border-color:#bfe6dc; }
.li-alleen_lezen               { background:#e8f0fb !important; color:#2f6fb5 !important; border-color:#c9daf0; }
.li-vergrendeld                { background:#fdf3e1 !important; color:#b7791f !important; border-color:#f0dcb4; }
.li-noot                       { color:#b8c0c7; font-size:11px; margin-left:3px; cursor:help; }

/* ══ Kwalificatie-indeling (Admin › Kwalificatie-indeling, 14-10-2026) — bouwt op de li-tabel van de Licentie-indeling ══ */
.ki-intro                      { font-size:13px; color:#6f7a85; margin:0 0 12px; }
.ki-kop                        { margin-top:4px; }
.ki-clear                      { clear:both; }
.ki-groepen                    { max-width:620px; }
.ki-groepen .ki-vanaf          { width:70px; margin:auto; text-align:center; }
.ki-noot                       { font-size:12px; color:#9aa3ab; margin-top:-8px; }
.ki-rol                        { color:#445; white-space:nowrap; }
.ki-gelijk                     { color:#9aa3ab; font-size:12px; }
.ki-tabel td.li-cel .ki-sel    { min-width:96px; display:inline-block; width:auto; }
.ki-asr, .ki-weg               { color:#aab3bc; margin-left:4px; }
.ki-asr:hover, .ki-weg:hover   { color:#01ab91; }
.ki-label                      { font-size:12px; color:#6f7a85; }
.ki-proefinvoer                { margin-bottom:8px; }
.ki-check                      { font-size:13px; margin-right:12px; }
.ki-proef td, .ki-proef th     { font-size:13px; }

/* ══ Eventaanvraagformulier: dagdelen en omvang (fase 3, 01-10-2026) ════════════════════════════
   Een dagdeel is vijf velden naast elkaar: datum, van, tot, officials nodig, leeftijdsgroep. De
   breedte volgt de inhoud (afspraak 30-09-2026) in plaats van elk veld een eigen volle regel te
   geven - dan wordt het formulier onnodig lang en suggereert de lege ruimte dat er iets mist.
   Onder 760 px stapelt de regel tot een omlijste kaart per dagdeel (besluit 14): een flink deel van
   de bezoekers op de eventpagina's komt van een telefoon, en vijf velden naast elkaar zijn daar
   niet in te vullen. */
.aol-dagdeel { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.aol-dagdeel > div { flex: 0 1 auto; }
/* align-items op flex-START, niet flex-end: met gelijke veldhoogtes staan de labels dan op één
   lijn. Bij flex-end stonden ze trapsgewijs onder elkaar, omdat elk veld een andere hoogte had.
   Een vaste regelhoogte op het label houdt dat zo, ook als een label langer wordt. */
.aol-dagdeel label { display: block; margin: 0 0 3px; font-size: 12px; line-height: 16px; min-height: 16px; }
.aol-dagdeel label.select { margin: 0; min-height: 0; }
.aol-dagdeel input, .aol-dagdeel select, .aol-dagdeel .select { width: 100%; display: block; }

/* ── Alle invoervelden op dit formulier even groot ────────────────────────────────────────────
   Het theme styleert een invoerveld alleen BINNEN een .input-omhulsel en een keuzelijst binnen
   .select (sky-forms.css r.95-113): hoogte 39px, rand 2px, letter 15/19px. Velden zonder dat
   omhulsel vielen daarbuiten - en input[type="number"] en input[type="date"] ook - waardoor ze
   zichtbaar kleiner waren dan de rest (Vincent 01-10-2026).
   Hier dezelfde waarden als het theme, gescoped op het ID: dat is specifieker dan elke
   theme-regel, dus geen !important nodig. Verborgen velden blijven buiten schot, zodat het
   honeypot-veld van de antispam-controle niet ineens ruimte krijgt. De textarea houdt zijn eigen
   hoogte - die hoort groter te zijn. */
#eventForm input:not([type="hidden"]),
#eventForm select {
	box-sizing: border-box;
	height: 39px;
	padding: 8px 10px;
	border: 2px solid #e5e5e5;
	border-radius: 0;
	background: #fff;
	font: 15px/19px 'Open Sans', Helvetica, Arial, sans-serif;
	color: #404040;
}
/* Het eigen pijltje van het theme (.select i) dekt de systeempijl af; daarvoor moet die weg.
   Alleen op een keuzelijst DIE dat pijltje heeft, anders houdt hij helemaal geen pijl over. */
#eventForm .select select {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}
#eventForm textarea {
	box-sizing: border-box;
	padding: 8px 10px;
	border: 2px solid #e5e5e5;
	border-radius: 0;
	font: 15px/19px 'Open Sans', Helvetica, Arial, sans-serif;
	color: #404040;
}
.aol-dd-datum  { width: 165px; }
.aol-dd-tijd   { width: 92px; }
.aol-dd-aantal { width: 118px; }
.aol-dd-groep  { width: 230px; }

/* ── Clubzoeker: de trefferlijst onder het naamveld (fase 4, 01-10-2026) ──────────────────────
   Absoluut gepositioneerd, zodat de lijst OVER de velden eronder valt in plaats van ze weg te
   duwen - anders springt het hele formulier bij elke toetsaanslag. De kolom eromheen krijgt
   daarvoor position:relative. */
#event_clubzoek_wrap { position: relative; }
.aol-treffers { position: absolute; z-index: 20; left: 15px; right: 15px; top: 100%;
                max-height: 260px; overflow-y: auto;
                background: #fff; border: 2px solid #e5e5e5; border-top: 0; }
.aol-treffer { padding: 7px 10px; cursor: pointer; font-size: 14px; line-height: 19px;
               border-top: 1px solid #f0f2f3; }
.aol-treffer:first-child { border-top: 0; }
.aol-treffer:hover, .aol-treffer:focus { background: #eef7f5; outline: none; }
.aol-treffer-plaats { color: #8b9793; }
.aol-treffer-geen { cursor: default; color: #8b9793; }
.aol-treffer-geen:hover { background: #fff; }
/* Het kruisje om een gekozen club te wissen. Alleen zichtbaar als er iets GEKOZEN is; het veld
   krijgt dan ruimte aan de rechterkant zodat de tekst er niet onder doorloopt. */
/* De sectiekop met een kleine nevenhandeling ernaast (hier: Inloggen). Zo kost het geen eigen
   regel, en blijft de knop secundair - op een publiek aanvraagformulier is inloggen nooit een
   voorwaarde (besluit 4). */
.aol-kopregel { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.aol-kopregel > label { margin: 0; }

/* "(optioneel)" hoort in het LABEL en niet in de placeholder: een placeholder verdwijnt zodra je
   typt, en dan is niet meer te zien dat een veld mocht leegblijven. Gedempt, want het is een
   bijzin bij de veldnaam. */
.aol-optioneel { color: #8b9793; font-weight: normal; }

.aol-veldwis { position: relative; display: block; }
/* Het kruisje hangt aan het VELD (.aol-veldwis), niet aan de kolom: anders rekent 50% ook het
   label mee en staat het boven het veld. De veldhoogte is 39px (de theme-maat), dus top:0 met
   dezelfde hoogte zet het precies in het midden. */
.aol-wis { position: absolute; right: 6px; top: 0; height: 39px; width: 26px;
           padding: 0; line-height: 37px; text-align: center;
           background: none; border: 0; color: #8b9793; font-size: 20px; cursor: pointer; }
.aol-wis:hover { color: #c0392b; }
#eventForm input.aol-heeftwis { padding-right: 32px; }
/* De uitweg verschijnt onderin de lijst, alleen als er niets is gevonden. */
.aol-treffer-uitweg { cursor: pointer; color: #01AB91; border-top: 1px solid #e6eaee; }
.aol-treffer-uitweg:hover, .aol-treffer-uitweg:focus { background: #eef7f5; }

/* Foutregel bij het inloggen; geen inline style, zodat de kleur op één plek staat. */
.aol-foutregel { color: #c0392b; }

/* Geen prijs bij een toernooi, maar de omvang waarop wij het tarief vaststellen (besluit 9). */
.aol-omvang { border: 1px solid #e6eaee; border-radius: 4px; padding: 12px 14px; margin: 6px 0 16px; }
.aol-omvang-cijfers { margin: 6px 0 4px; }

@media (max-width: 760px) {
	.aol-dagdeel { border: 1px solid #e6eaee; border-radius: 4px; padding: 12px; margin-bottom: 14px; }
	.aol-dagdeel > div { flex: 1 1 100%; width: auto; }
	.aol-dd-datum, .aol-dd-tijd, .aol-dd-aantal, .aol-dd-groep { width: auto; }
}

/* Admin > Socials (05-10-2026) */
.table.soc-tabel>tbody>tr>td{vertical-align:middle}
.soc-tabel .select{margin:0}
.soc-ruimte{margin-top:15px}
.sky-form .toggle.soc-toggle{display:inline-block;width:49px;height:32px;padding:0;margin:0}
.soc-rij{cursor:pointer}
.soc-m-dagveld{width:150px}
.soc-m-standveld{width:110px}
.table.soc-momenten>tbody>tr>td{border-top:0;padding:4px 12px 4px 0;width:1%;white-space:nowrap}
.table.soc-momenten>tbody>tr>td:last-child{width:auto}
.table.soc-momenten{margin-bottom:8px}
.table.soc-momenten>tbody>tr>td{vertical-align:top}
.soc-m-tijdveld{width:110px}
.btn-link.soc-m-weg{height:39px;padding:0 8px;font-size:18px;color:#999}
.btn-link.soc-m-weg:hover,.btn-link.soc-m-weg:focus{color:#a94442;text-decoration:none}

/* ===== Widget-landingspagina (?page=landingspage_widget) — fase 7c clubsite-widgets.md, 06-10-2026 ===== */
.wl-body{padding:24px 0 40px}
.wl-leeg{margin:10px 0 30px}
.wl-slider{position:relative;overflow:hidden;border-radius:10px;margin-top:26px}
.wl-track{display:flex;transition:transform .7s ease}
.wl-bn{position:relative;flex:none;width:100%;box-sizing:border-box;display:flex;align-items:center;gap:28px;min-height:150px;padding:20px 56px;color:#fff;text-decoration:none}
.wl-bn:hover,.wl-bn:focus{color:#fff;text-decoration:none}
.wl-g{background:linear-gradient(110deg,#01ab91,#007a66)}
.wl-o{background:linear-gradient(110deg,#ff7d26,#c75b12)}
.wl-ico{flex:none;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:40px}
.wl-t{flex:1}
.wl-t small{display:block;font-size:12px;letter-spacing:.12em;font-weight:700;opacity:.85;text-transform:uppercase}
.wl-t b{display:block;font-size:26px;font-weight:800;line-height:1.15;margin:4px 0}
.wl-t span{font-size:15px;opacity:.92}
.wl-cta{flex:none;background:#fff;font-weight:700;font-size:15px;padding:11px 22px;border-radius:6px}
.wl-g .wl-cta{color:#007a66}.wl-o .wl-cta{color:#c75b12}
.wl-lbl{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.08em;opacity:.6}
.wl-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;border:0;font-size:18px;line-height:30px;padding:0;cursor:pointer}
.wl-nav.wl-l{left:10px}.wl-nav.wl-r{right:10px}
.wl-dots{display:flex;justify-content:center;gap:7px;margin-top:10px}
.wl-dots i{width:8px;height:8px;border-radius:50%;background:#ccc;cursor:pointer}
.wl-dots i.on{background:#01ab91}
@media (max-width:700px){.wl-bn{flex-wrap:wrap;gap:10px;padding:18px 44px}.wl-ico{display:none}.wl-t b{font-size:19px}}
/* Clubblok rechtsboven op de widget-landingspagina (index.cfm, ?page=landingspage_widget).
   Zelfde maten en kleuren als de kop van public/activeren.cfm: logo max 75x200, naam 15px vet,
   plaats 12px grijs, initialen-rondje 64px. Op de telefoon gecentreerd en kleiner. */
.wl-clubkop{float:right;display:flex;align-items:center;gap:14px;height:75px;margin-top:15px;min-width:0;text-decoration:none}
.wl-clubkop:hover,.wl-clubkop:focus{text-decoration:none}
.wl-cnaamblok{text-align:right;min-width:0}
.wl-cnaam{display:block;font-weight:700;font-size:15px;line-height:1.3;color:#555555}
.wl-csub{display:block;font-size:12px;line-height:1.3;color:#5c6770}
.wl-clubimg{max-height:75px;max-width:200px;width:auto;height:auto;display:block}
.wl-clogo{width:64px;height:64px;border-radius:50%;background:#007a66;color:#fff;flex:0 0 auto;display:grid;place-items:center;font-size:19px;font-weight:800}
@media (max-width:560px){
  .wl-clubkop{float:none;clear:both;justify-content:center;height:auto;margin:6px 0 10px;gap:10px}
  .wl-clubimg{max-height:50px;max-width:130px}
  .wl-clogo{width:46px;height:46px;font-size:15px}
  .wl-cnaam{font-size:13.5px}
}
/* Widgets-tab: plaatsen, adres en deellink als drie genummerde blokken (06-10-2026, Programma/Arbitrage/Clubtaken) */
#panel_widgets .w-blok         { background:#fff; border:1px solid #e3e7ee; border-radius:8px; padding:14px 16px; margin:14px 0; }
#panel_widgets .w-blok > .w-sec{ display:flex; align-items:center; gap:10px; margin:0 0 4px; }
#panel_widgets .w-nr           { width:24px; height:24px; border-radius:50%; background:#01AB91; color:#fff; display:inline-grid;
                                  place-items:center; font-size:12px; letter-spacing:0; flex:0 0 auto; }
#panel_widgets .w-intro        { font-size:12.5px; color:#5a726c; margin:0 0 12px; }

/* Club activaties (07-10-2026): de verstuurbalk blijft onderaan in beeld zodra er clubs zijn aangevinkt. */
.aol-bulkbalk{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fff;border-top:3px solid #01ab91;box-shadow:0 -6px 16px rgba(0,0,0,.08);color:#555555;font-size:15px}

/* X-logo (voorheen Twitter, 08-10-2026). Het thema kent het X-logo niet: masker op currentColor, zodat het de tekstkleur volgt. */
.aol-x-logo{display:inline-block;width:1em;height:1em;vertical-align:-0.125em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>") no-repeat center/contain;}
a.social.aol-x-social:hover{background:#000000!important;color:#ffffff!important;}

/* Dashboards beheerportaal (08-10-2026, plan dashboards-beheerportaal.md). Grafiekvak met vaste hoogte (Chart.js vult zijn ouder), en de toestand van een blok dat los laadt via aolDashLaad() in js/aol_chart.js. */
.aol-grafiek{position:relative;height:260px}
.aol-dashblok.aol-dash-laden{opacity:.45}
.aol-dash-melding{display:none}
.aol-dash-fout .aol-dash-melding{display:block}
/* Dashboard Wedstrijdzaken (09-10-2026): tabel met invoervak in een toggle — tekst en vak op dezelfde hoogte. */
.aol-tabel-midden>tbody>tr>td{vertical-align:middle}
.aol-tabel-midden label.input{margin:0;max-width:240px}
.aol-tabel-midden .btn,.aol-tabel-midden label.input input{margin:0}  /* het theme geeft de knop 10px boven- en het invoerveld 10px ondermarge; dan staan ze niet op één lijn */
/* Lijst "Wat vraagt aandacht" op de dashboards (08-10-2026): getal in een vaste kolom, link met de paginanaam rechts,
   geen streep boven de eerste regel en geen lege ruimte onder de laatste. */
.aol-dash-lijst{margin-bottom:0}
.aol-dash-lijst > tbody > tr:first-child > td{border-top:0}
.aol-dash-lijst > tbody > tr > td{vertical-align:middle}
.aol-dash-lijst .aol-dash-getal{width:1%;white-space:nowrap;text-align:right;font-weight:700;padding-left:0;padding-right:12px}
.aol-dash-lijst .aol-dash-link{width:1%;text-align:right;white-space:nowrap}
/* Periodekiezer rechts in de grijze balk van _kengetallen.cfm (dashboards, variant A, 08-10-2026) */
.aol-balk-rechts{float:right;margin:0 8px 0 10px}
.aol-periode{display:inline-flex;border:1px solid rgba(255,255,255,.6);border-radius:3px;overflow:hidden;font-size:12px;line-height:1.4;vertical-align:middle}
.aol-periode a{color:#fff;padding:3px 10px;text-decoration:none;border-left:1px solid rgba(255,255,255,.6);white-space:nowrap}
.aol-periode a:first-child{border-left:0}
.aol-periode a:hover,.aol-periode a:focus{background:rgba(255,255,255,.18);color:#fff;text-decoration:none}
.aol-periode a.aan{background:#fff;color:#555555;font-weight:600}

/* 09-10-2026 dashboards (fase 5a): klikbare regel in 'Wat vraagt aandacht' opent het venster van die official of dat team */
.toggle-content tr.aol-klikrij{cursor:pointer}
.toggle-content tr.aol-klikrij:hover>td{background:#f5f5f5}
.toggle-content tr.aol-klikrij>td:first-child{color:#007a66}
.toggle-content td.aol-schakelcel{white-space:nowrap;width:1%}
.toggle-content td.aol-schakelcel .sky-form{margin:0}
.toggle-content td.aol-schakelcel .sky-form .toggle{margin:0;font-size:14px;line-height:27px}

/* 09-10-2026 dashboards: lettertype van de kerncijfers zoals in de mockup (pages/_kengetallen.cfm; alle dashboards).
   Indeling blijft het raster in het witte blok (keuze Vincent); alleen label, cijfer en vergelijktekst. */
.aol-kg .label{font-size:13px;color:#888}
.aol-kg .label strong{font-weight:400}
.aol-kg .label strong.text-primary{font-weight:600}
.aol-kg .aol-kengetal{display:block;font-size:28px;font-weight:400;line-height:1.25;color:#444;margin:2px 0}
.aol-kg .aol-kengetal a{color:#444}
.aol-kg .aol-kengetal a:hover{color:#01ab91;text-decoration:none}
.aol-kg .note{font-size:12px;color:#888}

/* Etalage (fase 5b, 13-10-2026): wat een club ziet bij een onderdeel dat niet (helemaal) bij zijn licentie hoort.
   .aol-etalage      = de oranje regel: slotje + tekst + "Lees meer" + een knop (js/aol_aandacht.js :: aolEtalageHtml)
   .aol-etalagekaart = de kaart bovenaan een dashboard of op een pagina op slot (pages/_etalage.cfm)
   .aol-voorbeeld    = het grijze voorbeeld onder zo'n kaart. Kleuren uit het huisstijlpalet. */
.aol-etalage{background:#fff8f2;border-left:3px solid #ff7d26;padding:10px 14px;margin-top:12px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;line-height:1.5}
.aol-etalage>span>i.fa{color:#c75b12;margin-right:8px}
.aol-etalage .btn{margin-bottom:0}
.aol-etalage-lees{color:#007a66;margin-left:8px;white-space:nowrap}
/* 28-10-2026 (dashboards-beheerportaal.md): tekstlinks met › zijn Epona-knoppen (btn btn-default btn-sm + fa-icoon).
   aol-dash-knop = knop op een eigen regel onder een zin; aol-balkknop = knop in de grijze balk; aol-h5-knop = Exporteren in een tussenkop. */
.aol-dash-knop{margin-top:8px}
.aol-dash-lijst .aol-dash-link .btn{margin-bottom:0}
a.btn.aol-balkknop{color:#fff;border-color:rgba(255,255,255,.7);background:transparent;margin:0}
a.btn.aol-balkknop:hover{color:#fff;background:rgba(255,255,255,.12)}
.aol-h5-knop{font-weight:400;margin-top:-6px}
/* Rapportages (28-10-2026): lange wedstrijdnaam afkappen met … in plaats van doorlopen in de volgende kolom; ruimte in de paginabalk. */
#grid_rapport .jqx-grid-cell > div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#grid_rapport .jqx-grid-pager input{margin-right:16px;text-align:center;padding:0 4px}
.btn.disabled>i.fa-lock{margin-right:6px}
.aol-etalagekaart{border:1px solid #e3e3e3;border-left:4px solid #ff7d26;padding:18px 20px;margin-bottom:20px;display:flex;gap:24px;flex-wrap:wrap;align-items:center;background:#fff}
.aol-etalagekaart .et-tekst{flex:1 1 380px;min-width:0}
.aol-etalagekaart h3{margin:0 0 6px;font-size:19px;color:#444;font-weight:500}
.aol-etalagekaart p{margin:0 0 10px;line-height:1.55}
.aol-etalagekaart .et-cijfers{display:flex;gap:26px;flex-wrap:wrap;margin:12px 0 4px}
.aol-etalagekaart .et-cijfers b{display:block;font-size:28px;font-weight:400;color:#444;line-height:1.1}
.aol-etalagekaart .et-cijfers span{font-size:12px;color:#888}
.aol-etalagekaart .et-groot{flex:0 0 auto;text-align:center;min-width:120px}
.aol-etalagekaart .et-groot b{display:block;font-size:56px;font-weight:400;color:#c75b12;line-height:1}
.aol-etalagekaart .et-groot span{font-size:13px;color:#888}
.aol-etalagekaart .et-knoppen{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;min-width:210px}
.aol-etalagekaart .et-knoppen .btn{text-align:left;margin:0}
.aol-voorbeeld-kop{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.05em;margin:4px 0 8px}
.aol-voorbeeld{opacity:.42;-webkit-filter:grayscale(1);filter:grayscale(1);pointer-events:none;-webkit-user-select:none;user-select:none}
/* Menu-item op slot dat wel een eigen pagina heeft (pages/_etalage_<pagina>.cfm): gewoon aanklikbaar. */
ul.side-nav ul li a.menu-vergrendeld.menu-etalage,
ul.side-nav ul li a.menu-vergrendeld.menu-etalage:hover{cursor:pointer}
@media (max-width:767px){.aol-etalagekaart .et-knoppen{flex:1 1 100%}}
/* Nog niet in gebruik (fase 5b stap 1b): de openklapregels onder Wat vraagt aandacht (js/aol_aandacht.js :: aolNietGebruikt). */
div.toggle>label .aol-ng-status{float:right;margin-right:26px;font-size:13px;font-weight:400;color:#888}
dl.aol-ng{margin:0 0 4px;display:grid;grid-template-columns:130px 1fr;gap:8px 14px;line-height:1.5}
dl.aol-ng dt{color:#888;font-weight:400}
dl.aol-ng dd{margin:0}
/* Ruimte boven en onder het blok: padding, zodat het niet tegen Wat vraagt aandacht of de ranglijst eronder aan staat. */
#blok_aandacht{padding-bottom:26px}
#blok_nietgebruikt{clear:both;padding:0 0 30px}
#blok_nietgebruikt #lijst_nietgebruikt{margin-bottom:0}
.aol-ng-knoppen{margin-top:12px}
.aol-ng-knoppen .btn{margin-bottom:0}
.aol-ng-knoppen .sky-form .toggle{margin:0;font-size:14px;line-height:27px;padding-right:70px}
@media (max-width:767px){dl.aol-ng{grid-template-columns:1fr;gap:2px 0}dl.aol-ng dd{margin-bottom:8px}div.toggle>label .aol-ng-status{float:none;display:block;margin:0}}
/* Upgradevenster (fase 5b stap 2, js/aol_upgrade.js): Bootstrap-modal van het theme met sky-form-velden. */
#aol_upgrade_venster .aol-upg-form{margin:0;border:0;box-shadow:none;background:none}
#aol_upgrade_venster .aol-upg-form fieldset{padding:0 0 10px;border:0;background:none}
#aol_upgrade_venster .aol-upg-form .radio,#aol_upgrade_venster .aol-upg-form .checkbox{margin-bottom:8px}
#aol_upgrade_venster .aol-upg-wat{background:#fff8f2;border-left:3px solid #ff7d26;padding:10px 14px;margin-bottom:16px;line-height:1.5}
#aol_upgrade_venster .aol-upg-wat i.fa{color:#c75b12;margin-right:8px}
#aol_upgrade_venster .aol-upg-form h4{margin:0 0 10px}
#aol_upgrade_venster .aol-upg-form section{margin-bottom:12px}
#aol_upgrade_venster #aol_upg_toelichting{margin:0 0 10px}
#aol_upgrade_venster #aol_upg_blok_vw{margin:4px 0 10px}
#aol_upgrade_venster .aol-upg-klaar{text-align:center;padding:18px 0;line-height:1.7}
#aol_upgrade_venster .aol-upg-klaar i.fa{display:block;font-size:44px;color:#01ab91;margin-bottom:10px}
#aol_upgrade_venster .aol-upg-lijst{margin:0 0 14px;padding-left:20px;line-height:1.6}
#aol_upgrade_venster .modal-footer .btn{margin-bottom:0}

/* ── Wedstrijdofficials in de programmapopup (14-10-2026, mockup E2a-2) ─────────────────────────────
   Vier losse regels: lichtgrijze balk met een groene streep links (grijs bij een rol uit de KNVB-feed),
   rolnaam vooraan en vast per positie, veldnamen één keer bovenaan (.aol-rolkop). */
.aol-rolkop { font-size:12px; color:#888; margin:6px 0 2px; }
.aol-rollen .aol-rolregel { display:flex; align-items:center; margin:0 0 6px; padding:7px 0; background:#fff; border:1px solid #e3e7e8; border-left:4px solid #01ab91; border-radius:2px; }
.aol-rollen .aol-rolregel.is-vast { border-left-color:#c9d1d4; }
.aol-rollen .aol-rolregel section { margin-bottom:0; }
.aol-rollen .aol-rolregel label.input { margin-bottom:0; }
/* Het theme geeft een veldkolom ~10px extra hoogte onder het veld; centreren zet de knoppen dan lager dan de velden.
   Daarom alles bovenaan uitlijnen, de rolnaam iets omlaag en de knoppen rechts (14-10-2026). */
.aol-rollen .aol-rolregel { align-items:flex-start; }
.aol-rollen .aol-rolnaam { padding-top:9px; }
.aol-rollen .aol-rolregel > section:last-child { display:flex; justify-content:flex-end; margin-top:-6px; }   /* de theme-knoppen staan ~10px lager (vandaar mt-10neg in de oude opzet); -6px centreert ze op het veld */
.aol-rollen .aol-rolnaam { font-weight:700; white-space:nowrap; }
.aol-rollen .aol-rolnaam .fa { color:#999; margin-right:5px; }
.aol-rollen .aol-rolknoppen { display:flex; flex-wrap:nowrap; white-space:nowrap; }
.aol-rollen .aol-rolknoppen .btn { float:none; padding:5px 10px; }
.aol-rollen input.form-control { padding-left:7px; padding-right:7px; }
.aol-rollen .aol-rolgreep { margin-right:5px; cursor:grab; }
.aol-rollen .is-vast .aol-rolgreep, .aol-rollen.is-uit .aol-rolgreep { cursor:default; color:#bbb; }
.aol-rollen .sleep-geest { opacity:.35; background:#eef7f5; }
/* B9a (27-10-2026, mockup F4d): rol uit de databron = naamvelden grijs, zoeken/verwijderen grijs uitgeschakeld;
   KNVB-badge onder de rolnaam in de kleuren van de KNVB-badge in de inbox */
.aol-rollen .is-bron input.form-control { background:#f3f3f3; color:#555; }
.aol-rollen .is-bron .aol-rolknoppen .btn[disabled] { background:#e9e9e9; border-color:#ddd; color:#999; opacity:1; }
#popup_programma_bron table > thead > tr > th { background:#8C8C8C; color:#FFF; font-weight:normal; border:0; }   /* B9a deel 2: zelfde kop als #activatietabel */
.aol-rollen .aol-rolknvb { display:block; width:max-content; margin:4px 0 0 18px; font-size:10px; font-weight:700; letter-spacing:.3px; padding:1px 6px; border-radius:3px; background:#FFF4E8; color:#B25405; }

/* 16-10-2026: clubpagina via de link van een official (?page=clubarbitrage&via=official) */
.aol-amb-pagina { background:#e6f6f3; border-left:5px solid #01ab91; padding:22px 26px; margin:0 0 30px; }
.aol-amb-pagina h3 { color:#007a66; margin:0 0 8px; }
.aol-amb-pagina .sky-form { background:transparent; border:0; }
.aol-amb-pagina .amb-stap { font-weight:700; margin:14px 0 6px; }
.aol-amb-pagina .radio { font-weight:400; font-size:15px; }
.aol-amb-pagina .amb-uitweg { margin-top:12px; }

/* AOL help per beheerpagina (16-10-2026, plan aol-support-beheerpaginas.md). Knop op de plek van het oude zoekveld
   (#topNav form.search uit het theme bepaalt de plaats); paneel = Bootstrap 3-venster rechts over de volle hoogte. */
#topNav form.aol-help-plek { max-width:none; }
#topNav form.aol-help-plek .aol-help-knop { margin-top:-2px; }
.aol-helppaneel .modal-dialog { position:fixed; right:0; top:0; bottom:0; margin:0; width:420px; max-width:92%; }
.aol-helppaneel .modal-content { height:100%; border:0; border-radius:0; overflow-y:auto; }
.aol-helppaneel .modal-header { background:#f7f9fa; }
.aol-helppaneel .modal-header .modal-title,
.aol-helppaneel .modal-header .modal-title small,
.aol-helppaneel .modal-header .close { color:#555555 !important; text-shadow:none; opacity:1; }
.aol-helppaneel .list-group { margin-bottom:8px; }
.aol-helppaneel .aol-help-pijl,
.aol-helppaneel .aol-help-kennisbank { color:#01ab91; }
.aol-helppaneel hr { margin:14px 0; }
/* Inschuiven van rechts i.p.v. de Bootstrap-standaard (van boven). */
.aol-helppaneel.fade .modal-dialog { transform:translate(100%,0); -webkit-transform:translate(100%,0); transition:transform .3s ease-out, width .3s ease-out; }
.aol-helppaneel.in .modal-dialog { transform:translate(0,0); -webkit-transform:translate(0,0); }
/* Variant A: artikel in het paneel; het paneel wordt breder (op een telefoon de volle breedte). */
.aol-helppaneel.aol-help-breed .modal-dialog { width:680px; max-width:100%; }
.aol-helppaneel .aol-help-art-titel { color:#555555; margin:4px 0 12px; }
.aol-helppaneel .aol-help-art { color:#555555; }
.aol-helppaneel .aol-help-art img { max-width:100%; height:auto; border:1px solid #e3e8eb; margin:6px 0; }
.aol-helppaneel .aol-help-art h1,
.aol-helppaneel .aol-help-art h2,
.aol-helppaneel .aol-help-art h3 { font-size:16px; color:#555555; margin:18px 0 8px; }
.aol-helppaneel .aol-help-art iframe { max-width:100%; }
.aol-helppaneel .aol-help-terug { color:#01ab91; }
.aol-helppaneel .aol-help-art img { cursor:zoom-in; }
/* Vergroten van een artikelafbeelding met Magnific Popup uit het theme: boven het Bootstrap-venster (z-index 1050). */
.mfp-bg { z-index:2000; }
.mfp-wrap { z-index:2001; }
/* AOL help: videokaart (klik opent de video in Magnific Popup). */
.aol-helppaneel .aol-help-video { display:flex; gap:12px; align-items:center; border:1px solid #e3e8eb; background:#f7f9fa; padding:8px; margin-bottom:8px; color:#555555; text-decoration:none; }
.aol-helppaneel .aol-help-video:hover { border-color:#01ab91; }
.aol-helppaneel .aol-help-video-beeld { position:relative; flex:0 0 128px; height:72px; background:#000 center/cover no-repeat; }
.aol-helppaneel .aol-help-video-beeld .fa { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:30px; color:#ffffff; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.aol-helppaneel .aol-help-video-label { display:inline-block; white-space:nowrap; font-size:11px; color:#8a929a; border:1px solid #d5dbe0; padding:0 5px; margin-left:4px; font-weight:400; }

/* 16-10-2026 Knop naast sky-form-velden (Rapportages: Toon): zelfde hoogte als .input (39px) en zonder de 10px marge van het theme. */
.sky-form .aol-veldknop { margin-top:0; height:39px; }

/* 16-10-2026 Gedeelde periodekiezer van de dashboards (pages/_periodekiezer.cfm + js/aol_periode.js), rechts in de grijze balk. */
.aol-periodekiezer { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; font-size:12px; color:#fff; }
.aol-periodekiezer select, .aol-periodekiezer input { width:auto; max-width:190px; height:26px; border:1px solid rgba(255,255,255,.6); border-radius:3px; background:#fff; color:#555555; font-size:12px; padding:0 6px; }
.aol-periodekiezer input { width:92px; }
.aol-periodekiezer .aol-pk-eigen { display:inline-flex; align-items:center; gap:6px; }
.aol-periodekiezer .aol-pk-tm { color:#fff; white-space:nowrap; }
.aol-periodekiezer .aol-pk-toon { display:inline-flex; align-items:center; box-sizing:border-box; height:26px; color:#555555; background:#fff; border:1px solid rgba(255,255,255,.6); border-radius:3px; padding:0 10px; font-weight:600; text-decoration:none; }
.aol-periodekiezer .aol-pk-toon:hover { color:#007a66; text-decoration:none; }
.aol-balk-rechts .aol-periodekiezer { height:37px; flex-wrap:nowrap; }
.aol-periodekiezer select, .aol-periodekiezer input, .aol-periodekiezer .aol-pk-toon { margin:0; vertical-align:middle; }
/* Titel in de grijze balk verticaal midden zodra er een kiezer rechts staat (de float maakt de cel anders boven-uitgelijnd). */
td:has(> .aol-balk-rechts > .aol-periodekiezer) { line-height:37px; }
td:has(> .aol-balk-rechts > .aol-periodekiezer) > .aol-balk-rechts { line-height:0; }
.aol-balk-rechts .aol-periodekiezer { line-height:normal; }
.aol-periodekiezer select { -webkit-appearance:none; -moz-appearance:none; appearance:none; line-height:24px; padding:0 24px 0 8px; cursor:pointer;
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555555' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center; }
.aol-periodekiezer select:focus, .aol-periodekiezer input:focus { outline:none; border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.35); }

/* 20-10-2026 Club activaties: sky-forms-schakelaar rechts in een grijze balk (via _kengetallen.cfm, parameter rechts). */
.aol-balk-rechts .aol-balk-schakelaar{display:inline-block;background:none;border:0;box-shadow:none;margin:0;padding:0}
.aol-balk-rechts .aol-balk-schakelaar .toggle{margin:0;color:#fff;font-size:13px;line-height:37px;font-weight:600}
.aol-balk-rechts .aol-balk-schakelaar .toggle i{top:7px}
td:has(> .aol-balk-rechts > .aol-balk-schakelaar){line-height:37px}

/* ═══ Mijn dashboard · blok BERICHTEN (21-10-2026, voorstel C) ═══════════════════════════════════════════════
   Lijst links, leesvenster rechts. De opmaak van het bericht zelf (infotabel, boekingsregels) is een kopie van de
   app (mobile/.../css/vincent.css, blok "Inbox info-tabel"), hier onder .aol-ber-body zodat niets anders erdoor
   verandert. Wijzig je de app-opmaak, trek deze kopie dan gelijk. */
.aol-ber { display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); min-height:420px; }
.aol-ber-lijst { border-right:1px solid #eee; padding:6px 8px; display:flex; flex-direction:column; min-width:0; }
.aol-ber-lees { padding:16px 22px; min-width:0; }
.aol-ber-chips { display:flex; gap:6px; flex-wrap:wrap; padding:4px 0 8px; }
.aol-ber-chip { border:1px solid #ddd; border-radius:14px; padding:3px 12px; font-size:12px; color:#555; cursor:pointer; }
.aol-ber-chip small { opacity:.75; margin-left:4px; }
.aol-ber-chip.aan { background:#01ab91; border-color:#01ab91; color:#fff; }
.aol-ber-r { display:flex; align-items:center; padding:9px 6px; border-bottom:1px solid #f0f0f0; cursor:pointer; position:relative; }
.aol-ber-r:hover { background:#f7f7f7; }
.aol-ber-r.actief { background:#eef7f5; box-shadow:inset 3px 0 0 #01ab91; }
.aol-ber-logo { width:42px; height:42px; flex:0 0 42px; border-radius:8px; margin-right:12px; background:#01ab91 center/cover no-repeat; color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
.aol-ber-t { flex:1; min-width:0; line-height:1.3; }
.aol-ber-r1 { display:flex; justify-content:space-between; align-items:baseline; }
.aol-ber-van { font-size:12px; color:#7a7a7a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aol-ber-dt { font-size:12px; color:#aaa; white-space:nowrap; margin-left:8px; }
.aol-ber-ond { font-size:15px; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.aol-ber-r.ong .aol-ber-ond { font-weight:600; color:#1c1c1c; }
.aol-ber-r.ong .aol-ber-van { color:#444; }
.aol-ber-r.ong .aol-ber-ond:before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:#01ab91; margin-right:6px; vertical-align:middle; }
.aol-ber-snip { font-size:13px; color:#9a9a9a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.aol-ber-acts { display:none; position:absolute; right:8px; top:50%; transform:translateY(-50%); background:#f7f7f7; padding:4px 2px 4px 10px; }
.aol-ber-r:hover .aol-ber-acts { display:flex; gap:12px; }
.aol-ber-acts i { color:#5e7e8e; cursor:pointer; font-size:15px; }
.aol-ber-meer { margin-top:auto; padding:10px 6px 4px; font-size:13px; color:#888; }
.aol-ber-meer a { color:#01ab91; cursor:pointer; }
.aol-ber-kop { display:flex; align-items:flex-start; }
.aol-ber-afz { flex:1; min-width:0; display:flex; flex-direction:column; }
.aol-ber-afz b { font-weight:500; color:#333; }
.aol-ber-afz span { font-size:12px; color:#888; margin-top:4px; }
.aol-ber-cat { color:#fff; font-size:11px; border-radius:10px; padding:1px 10px; margin-left:8px; white-space:nowrap; }
.aol-ber-lijn { border-bottom:1px solid #eee; margin:10px 0 8px; }
.aol-ber-titel { font-size:20px; color:#333; margin:6px 0 12px; }
.aol-ber-body { font-size:14px; color:#555; }
.aol-ber-body img { max-width:100%; }
.aol-ber-body .aol-wz-row, .aol-ber-body .aol-wz-toggle { display:none; }
.aol-ber-cta { display:block; text-align:center; color:#fff; font-weight:700; letter-spacing:.03em; padding:12px; border-radius:6px; margin-top:16px; }
.aol-ber-cta:hover, .aol-ber-cta:focus { color:#fff; text-decoration:none; opacity:.92; }
.aol-ber-voet { display:flex; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid #eee; }
.aol-ber-voet .btn i { margin-right:6px; }
.aol-ber-leeg { color:#999; font-size:14px; padding:40px 0; text-align:center; }
.aol-ber-undo { background:#555; color:#fff; font-size:13px; padding:8px 14px; display:flex; justify-content:space-between; align-items:center; }
.aol-ber-undo a { color:#7fe3d3; cursor:pointer; font-weight:600; }
.aol-ber-terug { display:none; color:#01ab91; font-size:13px; cursor:pointer; padding:0 0 8px; }
@media (max-width: 767px) {
  .aol-ber { grid-template-columns:1fr; min-height:0; }
  .aol-ber-lijst { border-right:0; }
  .aol-ber.leest .aol-ber-lijst { display:none; }
  .aol-ber:not(.leest) .aol-ber-lees { display:none; }
  .aol-ber-terug { display:block; }
}
/* Opmaak van het bericht: kopie van de app */
.aol-ber-body .aol-inbox-infotable__top { font-size: 14px; font-weight: 600; color: #12211e; margin: 0 0 12px; }
.aol-ber-body .aol-inbox-infotable { border: 1px solid #e4ecea; border-radius: 10px; overflow: hidden; }
.aol-ber-body .aol-inbox-infotable__head { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #6b7d79; background: #f3f5f5; padding: 8px 13px; }
.aol-ber-body .aol-inbox-infotable__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 13px; font-size: 14px; border-top: 1px solid #e4ecea; }
.aol-ber-body .aol-inbox-infotable__row:first-child { border-top: 0; }
.aol-ber-body .aol-inbox-infotable__label { color: #6b7d79; }
.aol-ber-body .aol-inbox-infotable__val { color: #12211e; font-weight: 600; white-space: nowrap; }
.aol-ber-body .aol-inbox-infotable__old { color: #9fb0ac; text-decoration: line-through; }
.aol-ber-body .aol-inbox-infotable__new { color: #007A66; font-weight: 700; }
.aol-ber-body .aol-inbox-infotable__arrow { color: #9fb0ac; }
.aol-ber-body .aol-inbox-infotable__head:not(:first-child) { border-top: 1px solid #e4ecea; }
.aol-ber-body .aol-inbox-infotable__val--wrap { white-space: normal; text-align: right; }
.aol-ber-body .aol-inbox-infotable__badge { display:inline-block; background:#fdecea; color:#C0392B; font-size:12px; font-weight:700; padding:3px 12px; border-radius:20px; white-space:nowrap; }
.aol-ber-body .aol-inbox-infotable__badge:not(:last-child) { margin-left:auto; }
.aol-ber-body .aol-inbox-infotable__val--struck { color:#9fb0ac; text-decoration:line-through; font-weight:600; }
.aol-ber-body .aol-inbox-infotable__badge--green { background:#e7f5ee; color:#1e8449; }
.aol-ber-body .aol-inbox-infotable__badge--amber { background:#fbf0dc; color:#b9770e; }
.aol-ber-body .aol-inbox-infotable__badge--red { background:#fdecea; color:#c0392b; }
.aol-ber-body .aol-inbox-infotable__badge--blue { background:#eaf1fa; color:#2b6cb0; }
.aol-ber-body .aol-inbox-infotable__badge--grey { background:#f0f2f2; color:#8b9a96; }
.aol-ber-body .aol-inbox-infotable__badge--knvb { background:#FFF4E8; color:#B25405; }
.aol-ber-body .aol-inbox-infotable--wedstrijd { border-left:4px solid #2b6cb0; }
.aol-ber-body .aol-srz-regel { display:flex; align-items:center; gap:10px; padding:11px 13px; border-top:1px solid #e4ecea; cursor:pointer; }
.aol-ber-body .aol-srz-regel__rol { flex:1 1 auto; min-width:0; font-size:14px; font-weight:700; color:#2f3b39; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aol-ber-body .aol-srz-regel__naam { flex:0 1 auto; min-width:0; text-align:right; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aol-ber-body .aol-srz-regel__bedrag { flex:0 0 auto; text-align:right; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.aol-ber-body .aol-srz-actie-slot { width:12px; flex:0 0 auto; text-align:center; color:#ff7d26; font-weight:800; font-size:13px; line-height:1; }
.aol-ber-body .aol-srz-actie { background:#e7f5ee; border-left:4px solid #ff7d26; border-radius:6px; padding:8px 10px; font-size:12px; color:#1e8449; }
.aol-ber-body .aol-srz-actie--verwijder { background:#fdecea; color:#c0392b; }
.aol-ber-body .aol-srz-mono { font-family:'Courier New',Courier,monospace; font-size:12px; font-weight:700; color:#5a6575; }
.aol-ber-body .aol-srz-regel__main { flex:1 1 auto; min-width:0; }
.aol-ber-body .aol-srz-regel__teams { font-size:13px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aol-ber-body .aol-srz-regel__meta { font-size:11px; color:#6b7d79; margin-top:2px; }
.aol-ber-body .aol-srz-whead { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:10px 13px 5px; }
.aol-ber-body .aol-srz-whead__teams { flex:1 1 auto; min-width:0; font-size:13px; font-weight:700; line-height:1.32; }
.aol-ber-body .aol-srz-whead__dt { margin-left:auto; font-size:11px; color:#6b7d79; white-space:nowrap; }
.aol-ber-body .aol-wz-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding-top:8px; border-top:1px dashed rgba(0,0,0,.1); }
.aol-ber-body .aol-wz-lbl { font-size:11.5px; font-weight:700; }
.aol-ber-body .aol-wz-row .onoffswitch-1 { position:static; top:auto; right:auto; width:50px; flex:none; }

/* Landingspagina "Officials regelen" (22-10-2026, pages/landingspage_teamarbiter.cfm; mockup D3: kaart per wedstrijd) */
.orl-body{padding:24px 0 40px}
.orl-sectie{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px;padding-bottom:6px;border-bottom:2px solid #01ab91}.orl-sectie-t{font-weight:700;font-size:17px;color:#555}.orl-sectie small{color:#888;font-size:13px}.orl-sectie em{margin-left:auto;font-style:normal;color:#555;font-size:13px;white-space:nowrap}
.orl-kaart{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin-bottom:22px;box-shadow:0 2px 6px rgba(0,0,0,.06);overflow:hidden;scroll-margin-top:20px}
.orl-kaart.orl-doel{border-color:#01ab91;box-shadow:0 0 0 2px rgba(1,171,145,.25)}
.orl-kop{display:flex;align-items:center;gap:16px;padding:14px 16px;background:#f7f7f7;border-bottom:1px solid #e6e6e6}
.orl-dat{width:58px;flex:none;text-align:center;border-radius:6px;background:#01ab91;color:#fff;padding:6px 0;line-height:1.1}
.orl-dat span{display:block;font-size:11px;text-transform:uppercase}.orl-dat b{display:block;font-size:22px}
.orl-dicht .orl-dat{background:#9aa5a3}
.orl-tit{flex:1;min-width:0}.orl-t{font-weight:700;font-size:16px;color:#555}.orl-m{color:#777;font-size:13px}
.orl-gewijzigd{color:#c75b12;font-weight:600;font-size:13px}
.orl-kr{flex:none}
.orl-klaar{color:#888;font-size:13px}
.orl-regel{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #eee}
.orl-regel:first-child{border-top:0}
.orl-regel.orl-actief{background:#f5f5f5}
.orl-rol{width:150px;flex:none;color:#555}.orl-stand{flex:1;min-width:0}.orl-acties{flex:none;text-align:right}
.orl-sub{color:#888;font-size:13px}
.orl-invul{background:#f5f5f5;padding:0 16px 16px}
.orl-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;border:0;background:transparent;margin:0;padding:0}
.orl-form section{flex:1 1 220px;max-width:320px;margin:0}
.orl-form .label{margin-bottom:4px}
.orl-form .btn{height:39px;line-height:37px;padding-top:0;padding-bottom:0;margin:0}.orl-form label.input,.orl-form input{margin-bottom:0}
.orl-form-knoppen{display:flex;gap:8px}
.orl-ov{position:fixed;inset:0;z-index:2000;display:none}
.orl-ov.orl-on{display:block}
.orl-ovbg{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.orl-cart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94%);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.orl-carthd{background:var(--orl-merk,#01ab91);color:var(--orl-merk-tekst,#fff);padding:18px 22px;display:flex;align-items:center;gap:14px}
.orl-carthd b{display:block;font-size:17px}.orl-carthd small{font-size:13px;opacity:.9}
.orl-lg{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:18px;flex:none}
.orl-x{margin-left:auto;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.2);display:grid;place-items:center;color:inherit!important;text-decoration:none!important}
.orl-cartbody{padding:20px 22px}
.orl-mc{border:1px solid #e6e6e6;border-radius:12px;padding:13px 15px;margin-bottom:16px;background:#fafafa}
.orl-mcday{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#777}
.orl-mct{font-size:17px;font-weight:700;margin:4px 0;color:#555}.orl-mcsub{font-size:13px;color:#666}
.orl-kies{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin:4px 0 10px;color:#555}
.orl-lm{font-size:10px;color:#c75b12;border:1px solid #ffc89e;background:#fff3e9;padding:2px 7px;border-radius:5px;margin-left:8px;letter-spacing:.04em}
.orl-role{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e6e6e6;border-radius:11px;margin-bottom:8px;cursor:pointer}
.orl-role.orl-sel{border-color:#01ab91;background:#effaf8}
.orl-role.orl-lock{cursor:default;background:#f6f6f6;color:#888}
.orl-cb{width:22px;height:22px;border:1.5px solid #ccc;border-radius:6px;display:grid;place-items:center;font-size:12px;color:#fff;flex:none}
.orl-role.orl-sel .orl-cb{background:#01ab91;border-color:#01ab91}
.orl-role.orl-sel .orl-cb:after{content:"\2713"}
.orl-role.orl-lock .orl-cb{border:0;color:#999;font-size:15px}
.orl-rn{font-weight:700;flex:1}.orl-rn small{display:block;font-weight:400;font-size:12px;color:#888}
.orl-rv{font-weight:700}
.orl-cartfoot{background:#f2f7f6;padding:16px 22px}
.orl-totrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.orl-totrow span{color:#666;font-weight:700}.orl-totrow b{font-size:22px}
.orl-checkout{display:block;background:var(--orl-merk,#01ab91);color:var(--orl-merk-tekst,#fff)!important;text-align:center;font-weight:700;padding:14px;border-radius:11px;text-decoration:none!important}
.orl-checkout:hover{background:var(--orl-merk-d,#007a66)}
.orl-checkout.orl-off{background:#ddd;color:#888!important;pointer-events:none}
.orl-redir{text-align:center;font-size:12px;color:#777;margin:10px 0 0}
@media (max-width:600px){
  .orl-kop{flex-wrap:wrap}
  .orl-kr{flex:1 1 100%}
  .orl-kr .btn{display:block;width:100%}
  .orl-regel{flex-wrap:wrap;gap:4px 12px}
  .orl-rol{width:100%}
  .orl-acties{flex:1 1 100%;text-align:left}
  .orl-acties .btn,.orl-form .btn{display:block;width:100%;margin:6px 0 0}
  .orl-form section{max-width:none}
}

/* Licentietabel aanmeldpagina (pages/aanmelden.cfm, 23-10-2026): groepskoppen en uitleg-icoon rechts uitgelijnd */
.mega-price-table li.lic-kop { font-weight: bold; text-transform: uppercase; font-size: 12px; letter-spacing: .5px; color: #01ab91; background: #f5f5f5 !important; }
.mega-price-table .pricing-desc .lic-uitleg { float: right; margin-right: 12px; color: #999; }
.lic-legenda i { margin-right: 3px; }

/* Randkleur voor sky-form velden (24-10-2026, wedstrijdvenster rolkeuze): alleen de rand kleurt, achtergrond blijft wit.
   Op het label zetten, net als het theme-state-success: <label class="select rand-success"> of <label class="input rand-warning">.
   Blijft staan bij muis-over en aanklikken (het theme maakt de rand daar anders blauw). Kleuren uit de AOL-huisstijl. */
.sky-form .select.rand-success select, .sky-form .select.rand-success:hover select, .sky-form .select.rand-success select:focus,
.sky-form .input.rand-success input,   .sky-form .input.rand-success:hover input,   .sky-form .input.rand-success input:focus { border-color: #01ab91; border-width: 1px; }
.sky-form .select.rand-warning select, .sky-form .select.rand-warning:hover select, .sky-form .select.rand-warning select:focus,
.sky-form .input.rand-warning input,   .sky-form .input.rand-warning:hover input,   .sky-form .input.rand-warning input:focus { border-color: #ff7d26; border-width: 1px; }
/* Grijze tekst als een keuze "uit" staat (26-10-2026, wens Vincent: "Geen scheidsrechter" grijs naast de groene rand bij aan).
   Op het label: <label class="select tekst-uit">. De lijst zelf blijft leesbaar (opties in de gewone tekstkleur). */
.sky-form .select.tekst-uit select { color: #999; }
.sky-form .select.tekst-uit select option { color: #555; }
/* bootstrap-select kleurt een geldig veld met #28a745 (Bootstrap-groen); in de AOL-huisstijl is dat #01ab91 (besluit Vincent 24-10-2026).
   'body' ervoor: popup_programma.cfm laadt bootstrap-select.css NA vincent.css, dus bij gelijke specificiteit zou de bibliotheek winnen. */
body .bootstrap-select.is-valid .dropdown-toggle,
body .was-validated .bootstrap-select select:valid + .dropdown-toggle { border-color: #01ab91; }
/* Knop naast sky-form velden op dezelfde hoogte (39px) en zonder eigen marge (24-10-2026, Teamtaken wedstrijdofficials: Toevoegen) */
.sky-form .btn.btn-veld { height: 39px; margin: 0; padding-top: 0; padding-bottom: 0; }

/* Teamtaken wedstrijdofficials, tabblad Team inplannen (27-10-2026, mockup F5b): keuzelijst met overige teams in kolommen
   Team · Speelt · Teamleden · Teamtaken, met een kopregel (data-header van bootstrap-select). Getallen rechts. */
.tto-k { display: inline-block; vertical-align: top; }
.tto-k-team { width: 160px; }
.tto-k-speelt { width: 190px; }
.tto-k-getal { width: 90px; text-align: right; }
.bootstrap-select .dropdown-menu li a span.text:has(.tto-k) { display: block; white-space: nowrap; }
.bootstrap-select .popover-title:has(.tto-k) { font-weight: 700; color: #555; padding: 6px 20px 6px 2.25em; background: #f5f5f5; }
.bootstrap-select .popover-title:has(.tto-k) .close { display: none; }

/* Zoekbare keuzelijst (bootstrap-select): kruisje om de zoekterm te wissen (27-10-2026; gedrag in js/aol_toast.js). */
.bs-searchbox { position: relative; }
.bs-searchbox input.form-control { padding-right: 30px; }
.bs-searchbox .aol-zoek-wis { display: none; position: absolute; right: 18px; top: 50%; margin-top: -10px; line-height: 20px; color: #999; }
.bs-searchbox .aol-zoek-wis:hover { color: #555; text-decoration: none; }

/* Onderhoud teams: Automatisch omzetten naast de keuzelijst Scheidsrechter, verticaal op het midden van die lijst (27-10-2026). */
.sky-form .toggle.teamkeuze-omzetten { top: 5px; } /* top, geen margin: die valt samen met de marge van het label erboven */

/* "Ik kan toch niet" (pages/landingspage_teamofficial_afmelden.cfm, 29-10-2026; mockup team-regelt-zelf.html F9). */
.tofa-kaart { background: #fff; border: 1px solid #e3e8eb; border-radius: 12px; margin: 0 0 30px; overflow: hidden; }
.tofa-kop { padding: 14px 18px; border-bottom: 1px solid #e3e8eb; color: #01ab91; font-size: 16px; font-weight: 700; text-transform: uppercase; }
.tofa-in { padding: 10px 18px; }
.tofa-gegevens { width: 100%; }
.tofa-gegevens td { padding: 7px 0; border-bottom: 1px solid #eef3f1; vertical-align: top; }
.tofa-gegevens tr:last-child td { border-bottom: 0; }
.tofa-gegevens td:first-child { width: 130px; color: #8a929a; }
.tofa-voet { padding: 14px 18px; background: #f7f9fa; border-top: 1px solid #e3e8eb; }
.tofa-voet form { margin: 0; }
.tofa-knop { width: 100%; background: #007a66; border-color: #007a66; color: #fff; font-weight: 700; }
.tofa-knop:hover, .tofa-knop:focus { background: #01ab91; border-color: #01ab91; color: #fff; }
.tofa-stand { display: flex; align-items: flex-start; gap: 16px; padding: 20px 18px; }
.tofa-ic { flex: 0 0 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-size: 20px; font-weight: 700; background: #e6f6f3; color: #007a66; }
.tofa-ic.tofa-let { background: #fff1e7; color: #c75b12; }
.tofa-stand h3 { margin: 2px 0 4px; font-size: 18px; font-weight: 700; color: #555; }
.tofa-stand p { margin: 0; color: #5c6770; }

/* 30-10-2026 (plan schiedsrichteronline-de.md): het logo in de kop nooit breder dan het scherm. Het Duitse woordmerk
   (Schiedsrichter online) is 402px breed bij 75px hoog en werd op een iPhone (390px) afgekapt; het NL-logo past al. */
#topBar a.logo img{max-width:100%;max-height:75px;height:auto}