#wrapper {
	background: url('/images/bg.png') repeat-x;
	min-width: 860px;
	
	padding-top: 15px;
	min-height:500px;
}

.clear {
	clear: both;
}
/**************************
HEADER
***************************/

#header a {
	color: #FFFFFF;	
	text-decoration: none;
}

#header a:hover {
	text-decoration: underline;	
}

#header {
	margin: 0px auto;
	width:980px;
	position: relative;
}

#header_logo {
	padding-top: 2px;
	width: 145px;
	height: 114px;
	margin: 0px auto;
	float: left;
}

#header_my {
	font-size: 10px;	
	color: white;
	position: absolute; 
	top: -14px; 
	font-style: italic;
}


#header_out {
	font-size: 10px;	
	color: white;
	position: absolute; 
	top: -14px;
	right: 0px; 
	font-style: italic;
}

#ofnavcontainer {
	float: left;
	position: absolute; 
	top: 85px; 
	right: 0px;
}

ul#navlist {
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
}

#navlist li {
	display: inline;
	list-style-type: none;
	
}

#navlist a { 
	text-decoration: none;
    font: bold 0.85em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;
    
	padding: 5px 2px; 
	-moz-border-radius: .3em;
    border-radius: .3em;
        
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);            
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    
    
	border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)),to(rgba(0,0,0,0)));                       
}

#navlist a:link, #navlist a:visited {
	color: #fff;
	text-decoration: none;
}

#navlist a:hover {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.0)),to(rgba(0,0,0,0.2)));
}

#navlist a.active {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.0)),to(rgba(0,0,0,0.2)));	
}

/**************************
BODY
***************************/

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

/* Uitklapbare panel-headers gebruiken .panel-title (Bootstrap = 16px); gelijk-
   trekken met de reguliere panel-headers zodat alle blokken dezelfde tekstgrootte
   hebben. */
.panel-heading .panel-title {
    font-size: inherit;
}

/* iOS/Safari rendert date(-time)-velden standaard met een eigen, te brede maat
   die buiten smalle containers (modals) valt. -webkit-appearance:none dwingt ze
   in de form-control-breedte; height:auto voorkomt dat de waarde onderin het veld
   plakt (Bootstrap forceert anders height:34px) en lijnt de waarde links uit. */
input[type="date"], input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    max-width: 100%;
    height: auto;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: left;
}

/* Subscriptions-tabel: celinhoud verticaal centreren (Bootstrap zet standaard
   vertical-align:top), zodat tekst/icoontjes mooi uitlijnen met de actieknoppen. */
.subs-table > tbody > tr > td, .subs-table > tbody > tr > th {
    vertical-align: middle;
}

/* Wachtwoord onthullen-oogje: het is een <a>, dus standaard krijgt het link-
   kleur, onderstreping en een focus-outline (randje) bij klikken. Neutraal
   (grijs) stijlen zonder outline. */
#pwToggle, #pwToggle:link, #pwToggle:visited, #pwToggle:hover, #pwToggle:focus, #pwToggle:active {
    color: #777;
    text-decoration: none;
    outline: none;
}

/* Focusring op knoppen alleen tonen bij toetsenbordnavigatie, niet na een
   muisklik. Bootstrap 3 zet op .btn:focus een -webkit-focus-ring-color outline
   die anders blijft 'hangen' nadat een klik bv. een modal opent en je die weer
   sluit. :focus-visible houdt de ring voor toetsenbordgebruikers wel intact. */
.btn:focus:not(:focus-visible) {
    outline: none;
}

#content {
    margin: 0px auto;
    padding-top: 5px;
	width:980px;
}

a {
	text-decoration: none;
	color: #48603c;
	
}

a:hover {
	text-decoration: none;
	color: #e17244;
}

/* Links binnen meldingsbalken (.alert, bv. de blauwe alert-info) volgen de
   tekstkleur van de balk i.p.v. de globale (groene) linkkleur. De vetgedrukte
   delen markeren al wat klikbaar is; bij hover onderstrepen we voor affordance. */
.alert a,
.alert a:hover,
.alert a:focus {
	color: inherit;
}
.alert a:hover,
.alert a:focus {
	text-decoration: underline;
}


.contentbox {
	padding: 10px 20px; 
	-moz-border-radius: .3em;
    border-radius: .3em;

    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);           
	margin: 10px 0px 10px 0px;     
}

.contentbox .title {
	color: #3e5697;
	padding: 3px;    
}


.contentbox-success {
	border: 1px solid #009900;
	background: #CCFFCC;	
}

.contentbox-error {
	border: 1px solid #990000;
	background: #FFCCCC;	
}

.title {
	padding-top: 5px;
	font-size: 1.2em;
}

.contentbox .message {
	padding: 3px;    
}

.contentbox .author {
	text-align: right;
	font-size: 0.7em;
	color: gray;	 
	padding: 3px;          
}


.inputField select, .inputField option, .inputField input {
	width:100%;
	border: none;
 	background-color: #F3F7FF;
}

.submit input { 
	text-decoration: none;
    font: bold 1em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;
    
	padding: 3px 10px; 
	-moz-border-radius: .3em;
    border-radius: .3em;
        
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0,0,0, 0.3);            
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    
    
	border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(62, 86, 151,1)),to(rgba(101,141,245,1)));        	
}

.submit input:hover {
	text-decoration: none;
    font: bold 1em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;
    
	padding: 3px 10px; 
	-moz-border-radius: .3em;
    border-radius: .3em;
        
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0,0,0, 0.3);            
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    
    
	border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(101,141,245,1)),to(rgba(62, 86, 151,1)));        	
}

#logo600 {
	background-image: url("/images/logo_openfiber_600x600.png");
	width: 600px;
	height: 600px;
	margin: 0px auto;
}

#fb_logo {
	width: 10px;	
}

#comingsoon {
	font-size: 10px;	
	color: gray;
	margin: 0px auto;
	width: 100%;
	text-align:center;
	padding: 10px 0px 50px 0px;
}

.displayGrid table {
	width:100%;	
	border-collapse:collapse;	
}

.displayGrid th {
	border: 1px solid gray;	
	background-color: #FFFFFF;
}

.displayGrid tr, .displayGrid td {
	border: 1px solid gray;	
	background-color: #f3f7ff;
}

.displayGrid tr.warning {
	color: #A8A8A8 ;
}

.infobox td {
	border: 1px solid gray;	
	background-color: #f3f7ff;	
}

#searchResults table {
	width:100%;		
	font-size: 1em;
}

#searchResults td {
	padding: 3px;
}

#searchResults th { 
	background-color: #ffffff;
}


#searchResults tr { 
/*	background-color: #f3f7ff; */
}

#searchResults tr:hover { 
	background-color: #daffca;
	cursor: pointer;
}

#highlight {
	background-color: #daffca;
}

/* Warning */
.infobox .warning {
	background-color: #ffad9e;
}

.displayGrid .warning {
	background-color: #ffad9e;
}
	
.tvchannel-logo {
	background-color: #FFFFFF;
}

.tvchannel-logo:hover {
	background-color: #808080;
}


.code pre {
  background: #303030;
  color: #f1f1f1;
  padding: 10px 16px;
  border-radius: 2px;
  border-top: 4px solid #00aeef;
  -moz-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #000;
  counter-reset: line;
}
.code pre span {
  display: block;
  line-height: 1.5rem;
}
.code pre span:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888;
  width: 2em;
}
/* ---------------------------------------------------------------------------
   Vervoerder-badge: een Bootstrap-badge in de huisstijl van de vervoerder, met
   het logo erin. Bootstrap's .badge is donkergrijs en pilvormig; die kleur en
   vorm zetten we hier om naar de merkkleur met het logo als inhoud.
   Ontbreekt het logobestand, dan staat de naam er in tekst -- vandaar dat de
   tekstkleur per vervoerder ook klopt.
   --------------------------------------------------------------------------- */
.carrier-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	height: 22px;
	padding: 3px 8px;
	border-radius: 4px;
	vertical-align: middle;
	font-weight: bold;
	font-size: 11px;
	line-height: 1;
	background: #6b7787;   /* onbekende vervoerder: neutraal grijs */
	color: #fff;
}
/* Het logo schaalt mee met de badge en houdt z'n verhoudingen. */
.carrier-badge img { display: block; height: 14px; width: auto; max-width: 76px; }

/* DHL: rood logo op het gele merkvlak. */
.carrier-dhl    { background: #ffcb05; color: #d40511; }
/* DPD: het logo is rood + zwart, dus een wit vlak met een lichte rand -- zonder
   die rand zweeft de badge op een witte tabelachtergrond. */
.carrier-dpd    { background: #ffffff; color: #414141; border: 1px solid #dfe6ec; }
/* PostNL: wit logo op het oranje merkvlak. */
.carrier-postnl { background: #f56900; color: #ffffff; }

/* Aanklikbare vervoerder-badge (link naar de trackingpagina van de vervoerder zelf).
   Bootstrap geeft a.badge bij hover een onderstreping en een eigen kleur; die zouden de
   huisstijl van het merk overrulen. De badge houdt dus z'n eigen kleuren, met alleen een
   subtiele verdonkering als affordance dat je erop kunt klikken. */
a.carrier-badge, a.carrier-badge:hover, a.carrier-badge:focus { text-decoration: none; }
a.carrier-dhl,    a.carrier-dhl:hover,    a.carrier-dhl:focus    { color: #d40511; }
a.carrier-dpd,    a.carrier-dpd:hover,    a.carrier-dpd:focus    { color: #414141; }
a.carrier-postnl, a.carrier-postnl:hover, a.carrier-postnl:focus { color: #ffffff; }
a.carrier-badge:hover { filter: brightness(0.94); }

/* Retour-overzicht: de hele rij is de link naar de zending, dus ook de cursor moet dat
   beloven. table-hover doet de achtergrondmarkering al. */
table.hrreturns tr[data-href] { cursor: pointer; }

/* ---------------------------------------------------------------------------
   Filterrij van het retour-overzicht. De filters staan als tweede header-rij IN de
   tabel, zodat de tabel zelf het uitlijnen doet -- een losse balk erboven kan nooit
   meebewegen met kolommen die zich op hun inhoud opmeten.
   --------------------------------------------------------------------------- */
tr.hrfilter > td { padding: 6px 8px !important; border-top: 0 !important; vertical-align: top; }
/* Alles vult z'n eigen cel; zo bepaalt de kolombreedte de veldbreedte en niet andersom. */
tr.hrfilter .form-control { width: 100%; min-width: 0; }
tr.hrfilter select.form-control { padding-left: 6px; padding-right: 18px; }

/* Meerkeuze-dropdowns (apparatuur, vervoerder, status). Bootstrap's eigen dropdown,
   gevuld met checkboxes -- geen extra library, en dus dezelfde look als de rest. */
tr.hrfilter .hrms { width: 100%; }
tr.hrfilter .hrms-knop { width: 100%; text-align: left; padding-right: 22px; position: relative; }
tr.hrfilter .hrms-knop .caret { position: absolute; right: 8px; top: 50%; margin-top: -2px; }
.hrms-label { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.hrms-menu { min-width: 100%; padding: 4px 0; }
.hrms-menu > li > label { display: block; margin: 0; padding: 4px 12px; font-weight: normal; cursor: pointer; white-space: nowrap; }
.hrms-menu > li > label:hover { background: #f5f5f5; }
.hrms-menu > li > label input { margin-right: 6px; }
.hrms-menu .divider { margin: 4px 0; }

/* Suggestielijst onder het klantveld: zweeft over de tabel heen. */
.hrf-klant { position: relative; }
.hrklant-sug {
	position: absolute; z-index: 10; left: 8px; right: 8px; top: 100%;
	margin: 2px 0 0; max-height: 260px; overflow-y: auto;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.hrklant-sug .list-group-item { padding: 6px 10px; font-size: 13px; text-align: left; }

/*
   Retour-nummer. Het vakje is precies zeven tekens breed (# plus zes cijfers) en staat
   links in de cel, zodat het hekje op dezelfde x begint als de #000001-waarden eronder.
   De grijze laag ligt ACHTER het invoerveld; beide zijn monospace, even breed en rechts
   uitgelijnd, waardoor de getypte cijfers exact over hun onzichtbare kopie vallen.
   ch-eenheden werken alleen zonder letter-spacing -- die staat hier dus bewust op 0.
*/
.hrid-wrap { position: relative; width: calc(7ch + 14px); }
.hrid-wrap .hrid-input,
.hrid-wrap .hrid-pad {
	font-family: Menlo, Consolas, "Courier New", monospace;
	font-size: 12px;
	letter-spacing: 0;
	text-align: right;
}
.hrid-input { background: transparent; position: relative; z-index: 1; padding-left: 6px; padding-right: 6px; }
.hrid-pad {
	position: absolute; z-index: 0;
	top: 0; bottom: 0; left: 0; right: 0;
	padding-left: 6px; padding-right: 6px;
	display: flex; align-items: center; justify-content: flex-end;
	pointer-events: none;
}
/* Het hekje is grijs zolang het veld leeg is -- dan is het puur een opmaakhint (#000000
   toont het formaat). Zodra er een nummer staat kleurt het mee met de getypte cijfers
   (#555, de kleur van .form-control), zodat #000002 als een geheel leest. */
.hrid-hash        { color: #b6c2cd; }
.hrid-hash.gevuld { color: #555; }
/* De ontbrekende nullen zijn grijs; de getypte cijfers worden in deze laag WEL
   meegetekend maar onzichtbaar, anders vallen de nullen over het getal heen. */
.hrid-zeros { color: #b6c2cd; }
.hrid-ghost { color: transparent; }

/* Celinhoud in het retour-overzicht verticaal centreren. Bootstrap zet td's op
   vertical-align:top, en .label is bovendien een INLINE element dat op de tekstregel gaat
   staan -- terwijl de vervoerder-badge een vaste hoogte heeft en op middle uitlijnt.
   Daardoor stond de status-badge zichtbaar hoger dan het logo ernaast. */
table.hrreturns > tbody > tr > td { vertical-align: middle; }
/*
   De Retour-kolom uitlijnen op de tekst IN het filtervakje. Dat vakje schuift z'n tekst
   naar rechts met celpadding (8px) + veldrand (1px) + veldpadding (6px) = 15px, terwijl
   een gewone datacel alleen die 8px heeft -- vandaar dat #000001 en het filter niet onder
   elkaar stonden. De kop en de data krijgen daarom dezelfde 15px.
*/
table.hrreturns > thead > tr > th:first-child,
table.hrreturns > tbody > tr > td:first-child { padding-left: 15px; }
/* ...behalve de filterrij zelf: daar zit die 15px al in het veld verwerkt. */
table.hrreturns > thead > tr.hrfilter > td:first-child { padding-left: 8px !important; }
table.hrreturns .label { display: inline-block; vertical-align: middle; }