x* {
-webkit-user-select: none;
font-family:Helvetica, Sans-serif;
box-sizing: border-box; 

}

input,textarea {
-webkit-user-select: text;
}
body {
    color: #222;            /* Foreground color used for text */
    font-family: Helvetica; 
    font-size: 15px;
    margin: 0;              /* Amount of negative space around the outside of the body */
    padding: 0;          /* Amount of negative space around the inside of the body */
    overflow-x:hidden;overflow-y:auto;
	background-color:#f1f1f1;
}
p {
	margin-top:0;
	margin-bottom:0;
}
b {
	color:#00823e;
	font-weight:700;
}
i {
	color:#82003e;
	font-weight:700;
}
.wrap {
	background-color:white;
	width:100%;
	overflow-x:hidden;
	max-width:750px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: -1px 1px 48px -9px rgba(0,0,0,0.3);
	-webkit-box-shadow: -1px 1px 48px -9px rgba(0,0,0,0.3);
	-moz-box-shadow: -1px 1px 48px -9px rgba(0,0,0,0.3);
	border-radius:8px;
	margin-bottom:10px;
	border:solid #fff 5px;
}
.loading {
	vertical-align:middle;
	text-align:center;
	font-size:50px;
	font-weight:bold;
	width:100%;
	height:100%;
	z-index:3000;
	position:fixed;
	background-color:black;
	color:white;
	}
.clearButton {
	text-decoration:none;
	text-transform:uppercase;
	display: inline-block;
	-webkit-border-radius:8px;
	border-radius:8px;
	-webkit-box-shadow: inset #ccc 0 2px 2px;
	box-shadow: inset #ccc 0 2px 2px;
	border: solid 1px #777;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#85daae), color-stop(0.5, #10a156), color-stop(0.5, #009246), to(#00823e));  
	color: #fff;
	text-shadow: #000 0 1px 0;
	font: bold 15px Helvetica, Sans-serif;
	padding: 5px;
	margin:5px;
}
.box {
	width:calc(50% - 20px);
	float:left;
	padding:5px;
	border-radius:8px;
	background-color:#eee;
	margin-top:10px;
	text-decoration:none;
	margin-left:10px;
	margin-right:10px;
	color:black;
	font-size:17px;
}
.box2 {
	width:calc(50% - 20px);
	float:left;
	padding:5px;
	border-radius:8px;
	background-color:#eee;
	margin-top:10px;
	text-decoration:none;
	margin-left:10px;
	margin-right:10px;
	color:black;
	font-size:17px;
}

@media (max-width: 767px ){
	.box2, .box {
		width:100% !important;
		float:left;
		margin-left:0;
		margin-right:0;
	}
	body {
		border:0;
	}
	.wrap {
		border:0 !important;
	}
}

td .box, td .box2 {
	width:100%;
}

.fout {
    padding:20px;
    color:red;
    font-weight:bold;
    font-size:16px;
    background-color:#fff;
    border:solid 4px #009933;
    margin-bottom:20px;
}
.goed {
    padding:20px;
    color:#009933;
    font-weight:bold;
    font-size:16px;
    background-color:#fff;
    border:solid 4px #009933;
    margin-bottom:20px;
}
#tijden td {
	height:40px;
}
#tijden input {
	width:76px;
	margin-bottom:0;
	font-size:12px;
}
.black {
	text-decoration:none;
	text-transform:uppercase;
	display: inline-block;
	border-radius:8px;
	-webkit-border-radius:8px;
	box-shadow: inset #ccc 0 2px 2px;
	-webkit-box-shadow: inset #ccc 0 2px 2px;
	border: solid 1px #777;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#85daae), color-stop(0.5, #10a156), color-stop(0.5, #009246), to(#00823e));  
	color: #fff;
	text-shadow: #000 0 1px 0;
	font: bold 12px Helvetica, Sans-serif;
	padding: 5px;
	margin:0;
	margin-bottom:5px;
}
.black:hover, .black.hover {
	color: #fff;
	text-shadow: #000 0 1px 0;
	background-image: none;  
	background-color:#14a55a;
	-webkit-box-shadow: inset rgba(207,207,255,0.75) 0 3px 5px;
}
.blackred {
	background-image:none;
	background-color:red;
}
.blackorange {
	background-image:none;
	background-color:orange;
}

#connection {
	position:absolute;
	float:left;
	margin:0;
	padding:0;
}
.header {
    margin: 0;
	height:70px;
	width:100%;
    background-image: url(../img/toolbar.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	
}
.menu {
	margin-left:152px;
	padding-top:5px;
}
.goback {
	position:fixed;
	width:150px;
	height:70px;
}


#content ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}
#content ul li a {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    color: #222222;
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: -1px;
    padding: 12px 10px;
    text-decoration: none;
}
#content, #sidebar {
    padding: 10px;
}
#content {
	padding:20px;
	padding-top:0;
    margin-top:0;
}
#content ul li:first-child a {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
}
#content ul li:last-child a {
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
}
#content ul.hide {
    display: none;
}
label {
	float:left;
	width:150px;
}
br {
	clear:both;
}
input,textarea,select {
	width:100%;
	font-size:16px;
	border:solid 1px #aaa;
	padding:4px;
	margin-bottom:15px;
	-webkit-overflow-scrolling:touch;
}
.table {
	border-top:solid 1px black;
	border-left:solid 1px black;
	border-right:solid 1px black;
	border-collapse: collapse;
	width:100%;
}
.table td {
	border-bottom:solid 1px black;
	padding:3px;
	background-color:white;
	word-break: break-all;
}
.table th {
	color:white;
	text-align:left;
	border-bottom:solid 1px black;
	padding:3px;
	background-color:#14a55a;
	word-break: break-all;
	vertical-align:top;
}
h3 {
	padding:5px;
	padding-left:40px;
	text-transform:uppercase;
	border-radius:8px;
	-webkit-box-shadow: inset #ccc 0 1px 1px;
	border: solid 1px #777;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#85daae), color-stop(0.5, #10a156), color-stop(0.5, #009246), to(#00823e));  
	color: #fff;
	text-shadow: #000 0 1px 0;
	font: bold 16px Helvetica, Sans-serif;	
}
h4 {
	font-size:15px;
	margin:0;
	padding:0;
}

.opmerking {
	padding:10px;
	width:100%;
	font-size:16px;
	-webkit-overflow-scrolling:touch;
	background-color:#fff;
	border-radius:8px;
	border:solid 1px black;
}
.keuzecontact {
	padding:0;
	margin:0;
	float:left;
	display:inline;
	width:20px;
	height:20px;
}
.contactpersonentabel {
	width:30%;
}
.ondertekenen p {
	float:left;
	display:inline;
}
#fancybox-wrap {
  position: absolute;
  top: 40px !important;
}
br {
	clear:both;
}
input[type=checkbox] {
	width:30px;
	height:30px;
}
.items {
	border-radius:8px;
	border:solid 1px;
    padding: 0;
	width:100%;
	background-color:white;
}
.items th {
	text-align:left;
	padding:8px;
}
.items td {
	padding:8px;
}

.offline {
	display:hidden;
	position:fixed;
	width:100%;
	height:100%;
	background-color:black;
	z-index:3000;
}
.offline h1 {
	color:white;
	margin-top:25%;
	text-align:center;
}
#pmbottom {
	display:hidden;
	position:fixed;
	right:0;
	bottom:-10px;
	z-index:3000;
}
#content h1 {
	text-transform:uppercase;
	margin-bottom:0;
	}


#scrollbar1 { width: 100%; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 100% !important; height: 300px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; width: 100% !important;}
#scrollbar1 .thumb,
#scrollbar1 .thumb { background-color: #00a650; -webkit-border-radius: 8px; 	text-decoration:none;
	-webkit-box-shadow: inset #ccc 0 2px 2px;
	border: solid 1px #777;
	background-image: -webkit-gradient(linear, left top, right bottom, from(#85daae), color-stop(0.5, #10a156), color-stop(0.5, #009246), to(#00823e));  
}
#scrollbar1 .thumb .end { display:hidden; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 40px; }
#scrollbar1 .track { background-color: #ddd; height: 100%; width:40px; position: relative; padding: 0 1px; -webkit-border-radius: 8px;}
#scrollbar1 .thumb { height: 20px; width: 40px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }

#scrollbar1 .disable{ display: none; }

#tijden input {
	width:100px;
}
.inloggen {
	background-color:#eee;
	border:solid 4px #14a55a;
	padding:30px;
	border-radius:8px;
}
.inloggen label {
	padding-top:7px;
	font-size:20px;
	width:220px;
	margin-bottom:2px;
}
.inloggen input {
	font-size:20px;
	height:30px;
	border-radius:8px;
}
.tekenen {
	float:left;
	width:100%;
	overflow:hidden;
}
.ondertekenen {
	float:left;
	width:100%;
	margin-right:10px;
	overflow:hidden;
}
/* =====================================================================
   MODERNE SKIN — Habasit band-app  (toegevoegd 2026)
   Overschrijft de stijlen hierboven via de cascade. Niet-destructief:
   verwijder dit hele blok om terug te keren naar het origineel.
   Tweak de kleuren/afronding via de variabelen hieronder.
   ===================================================================== */
:root{
  --hb-green:#14a55a;
  --hb-green-dark:#0e8a49;
  --hb-green-soft:#e8f6ee;
  --hb-ink:#1f2a30;
  --hb-muted:#6b7780;
  --hb-line:#e6ebed;
  --hb-radius:12px;
  --hb-shadow:0 2px 10px rgba(20,40,30,.07);
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--hb-ink);
  background:#eef1f0;
  font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.wrap{ border:0; border-radius:16px; box-shadow:0 10px 40px rgba(20,40,30,.12); margin-top:14px; }
#content{ padding:22px; padding-top:6px; }

/* Paginatitel */
#content h1{
  text-transform:none; font-size:22px; font-weight:700; letter-spacing:.2px;
  color:var(--hb-ink); border-bottom:3px solid var(--hb-green);
  display:inline-block; padding-bottom:6px; margin:10px 0 18px;
}

/* Knoppen (.black, .clearButton, menu) — vlak modern groen i.p.v. oude gradient */
.black,.clearButton{
  background:var(--hb-green) !important; background-image:none !important;
  color:#fff !important; border:0 !important; border-radius:10px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18) !important; text-shadow:none !important;
  font-weight:600 !important; font-size:13px !important; padding:5px 10px !important;
  letter-spacing:.4px; cursor:pointer; transition:background .15s, transform .05s;
}
.black:hover,.black.hover,.clearButton:hover{ background:var(--hb-green-dark) !important; box-shadow:0 2px 6px rgba(0,0,0,.2) !important; }
.black:active{ transform:translateY(1px); }
.blackred{ background:#e23b3b !important; }
.blackorange{ background:#f0922b !important; }
.menu a.black{ margin-left:4px; }

/* Sectiebalk (h3) — zachte groene balk i.p.v. gradient-knop */
h3{
  background:var(--hb-green-soft) !important; background-image:none !important;
  color:var(--hb-green-dark) !important; border:0 !important;
  border-left:4px solid var(--hb-green) !important; border-radius:8px !important;
  text-shadow:none !important; box-shadow:none !important;
  padding:10px 14px !important; font-size:15px !important;
}

/* Invoervelden */
input,textarea,select{
  border:1px solid var(--hb-line); border-radius:10px; padding:10px 12px;
  font-size:15px; background:#fff; transition:border-color .15s, box-shadow .15s;
}
input:focus,textarea:focus,select:focus{
  outline:0; border-color:var(--hb-green); box-shadow:0 0 0 3px rgba(20,165,90,.18);
}

/* Login-kaart */
.inloggen{ background:#fff; border:0; border-radius:16px; box-shadow:var(--hb-shadow); padding:28px 24px; }
.inloggen label{ float:none; width:100%; font-size:14px; font-weight:600; color:var(--hb-muted); margin:8px 0 4px; }
.inloggen input{ width:100%; height:auto; font-size:16px; border-radius:10px; }
.inloggen input[type=submit]{
  background:var(--hb-green) !important; color:#fff; border:0; border-radius:10px;
  padding:13px; font-weight:700; font-size:15px; cursor:pointer; margin-top:10px;
}
.inloggen input[type=submit]:hover{ background:var(--hb-green-dark) !important; }

/* Kaarten (.box / .box2) */
.box,.box2{
  background:#fff; border-radius:var(--hb-radius); box-shadow:var(--hb-shadow);
  padding:14px 16px; transition:transform .12s, box-shadow .12s;
}
.box:hover,.box2:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,40,30,.12); }

/* Tabellen (.table) */
.table{ border:0; border-radius:12px; overflow:hidden; box-shadow:var(--hb-shadow); }
.table th{ background:var(--hb-green); border:0; padding:5px 8px; font-size:13px; letter-spacing:.3px; }
.table td{ border:0; border-bottom:1px solid var(--hb-line); padding:4px 8px; }
.table tr:nth-child(even) td{ background:#f7faf8; }
.table tr:hover td{ background:var(--hb-green-soft); }

/* Meldingen */
.goed,.fout{ border:0; border-left:4px solid; border-radius:10px; padding:14px 16px; font-size:15px; }
.goed{ background:var(--hb-green-soft); border-left-color:var(--hb-green); color:var(--hb-green-dark); }
.fout{ background:#fdecec; border-left-color:#e23b3b; color:#b42318; }

/* Header: schone witte balk met logo links en menu rechts */
.header, .header *{ box-sizing:border-box; }   /* padding telt mee in width:100% (anders steekt het menu eruit) */
.header{
  width:100%;
  background:#fff !important; background-image:none !important;
  height:auto !important; min-height:58px;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:8px 12px; padding:9px 16px; margin:0;
  border-bottom:1px solid var(--hb-line);
  border-radius:16px 16px 0 0;
}
.header .logo{ display:flex; align-items:center; cursor:pointer; flex:0 0 auto; margin-right:auto; }
.header .logo img{ height:30px; width:auto; display:block; }
.menu{
  margin:0 !important; padding:0 !important;
  min-width:0; max-width:100%;          /* nooit breder dan de container */
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; justify-content:flex-end;
}
.menu a.black{ margin:0 !important; }
.menu a.uitloggen{ margin-left:8px !important; background:#5b6b73 !important; }
.menu a.uitloggen:hover{ background:#48565d !important; }

/* Hamburger: alleen op mobiel */
.hamburger{ display:none; }
@media (max-width:600px){
  .hamburger{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    margin-left:auto; width:44px; height:38px; padding:0 11px;
    border:0; border-radius:10px; background:var(--hb-green); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .hamburger span{ display:block; width:100%; height:3px; background:#fff; border-radius:2px; }
  .menu{
    display:none; order:3; flex:1 1 100%; width:100%; margin-top:8px !important;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:6px;
  }
  .menu.open{ display:flex; }
  .menu a.black{ width:100%; text-align:center; padding:11px !important; font-size:14px !important; }
  .menu a.uitloggen{ margin-left:0 !important; }
}

/* Invoervelden border-box: width:100% + padding loopt anders over (oude x*-typefout) */
input,textarea,select{ box-sizing:border-box; }

/* Bandzoek-formulier (tabblad Banden) */
.bandzoek{ margin:0 0 16px; }
.bandzoek-rij{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.bandzoek-rij input[type=number]{ flex:1 1 130px; min-width:0; margin-bottom:0; }
.bandzoek-rij input[type=submit]{ flex:0 0 auto; width:auto; }
/* Actieknoppen op de banddetailpagina: net rooster van gelijke knoppen */
.acties{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:8px; margin:8px 0 6px; }
.acties a.actie{
  box-sizing:border-box; margin:0 !important;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:48px; padding:10px 14px !important; font-size:13px !important; border-radius:12px !important;
}
.acties a.actie.blackred{ grid-column:1 / -1; }   /* SPOED over volle breedte */
/* ===================== EINDE MODERNE SKIN ===================== */

/* ===== Bandentabel: simpele rijen (klik = popup) + eigen scrollbare modal ===== */
#regelsx td{ padding:9px 7px; border-bottom:1px solid #e3e8e5; font-size:14px; vertical-align:middle; }
.bandrij-disp{ cursor:pointer; }
.bandrij-disp:hover td, .bandrij-disp:active td{ background:#eef7f1; }

/* Generieke scrollbare modal (vervangt fancybox) */
#appmodal{ display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.55); z-index:99998; }
#appmodal-box{ position:absolute; top:2%; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%);
    width:94%; max-width:560px; max-height:96vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:#fff; z-index:99999; border-radius:10px; padding:12px 18px 22px; box-shadow:0 12px 50px rgba(0,0,0,.4); }
.appmodal-sluit{ display:block; text-align:right; color:#c0392b; font-size:17px; font-weight:bold; cursor:pointer; margin-bottom:8px; }
#appmodal-content > div{ display:block !important; }
.bandklaar-knop{ display:block; text-align:center; background:#14a55a; color:#fff !important; padding:12px; border-radius:8px; margin-top:16px; cursor:pointer; font-weight:bold; }

/* Adres-/rapportblokken: 2 naast elkaar op tablet/desktop (paste eerder net niet), 1 op mobiel via bestaande @media */
.box, .box2{ box-sizing:border-box; width:calc(50% - 18px); margin:8px; }
a.box[style*="width:100%"], a.box[style*="width: 100%"]{ width:100% !important; }

/* Foto in de band-modal: groot tonen, klik = volledig */
.bandfoto-app{ display:block; width:100%; height:auto; border:1px solid #ccc; border-radius:6px; margin:8px 0; }
.bandfoto-app.groot{ width:100%; }