/*
  Webselect basis stylesheet
  Door: Roland Melkert, XZale Software.

  Notes:
    Vaste breedte is momenteel 1250px  (zoek en vervang bij wijz)

  todo:
    Breedte via var, ter voorbereiding op tablet/smartphone versies. [deels gedaan]
*/



/* vars, worden ook in de andere css bestanden gebruikt. */
/* todo later naar 'base.css' tbv mul layouts etc */
:root {
  --linkDefHoverColor: rgb(255, 0, 0);

  --mercuurGroen: rgb(4, 143, 78);

  --leadDlgBorder: rgb(4, 143, 78);

  --leadOpen: rgb(200, 0, 0);
  --leadGesloten: rgb(0, 0, 200);
  --leadNeutraal: rgb(0, 0, 0);

  --leadOpenBorder: rgb(136, 0, 0);
  --leadGeslotenBorder: rgb(0, 0, 136);
  --leadBorderText: rgb(255, 255, 255);

  --dlgCap: rgb(4, 143, 78); /*rgb(240, 240, 240);*/
  --dlgCapTxt: rgb(255, 255, 255);
  --dlgBorder: rgb(4, 143, 78); /*rgb(240, 240, 240);*/

  --siteWidth: 1250px;

  --headerHeight: 44px;
  --navHeight: 28px;
  --subNavHeight: 28px;

  --headerInclNavHeight: calc( var(--headerHeight) + var( --navHeight) );
  --headerInclSubNavHeight: calc( var(--headerHeight) + var( --navHeight) + var( --subNavHeight ) );

  --msgCmpColor: rgb(200, 0, 0);
  --msgCmpNewColor: rgb(0, 200, 0);
}


/* reset / defs */
div {
  margin: 0px;
  padding: 0px;
}

table {
  padding: 0px;
  margin: 0px;
  border-collapse: collapse;
}

tr, td {
  padding: 0px;
  margin: 0px;
  vertical-align: top;
}

header, nav, content, footer, article {
  display: block;
}

html {
  height: 100%;
}

body {
  margin: 0 auto;
  width: var( --siteWidth );

  font: 12px Helvetica, Arial, sans-serif;
  background-color: #f0f0f0;

  display: flex;
  flex-flow: column;

  align-items: stretch;
  min-height: 100%;
}

img {
  padding: 0px;
  margin: 0px;
  border: 0px;
}


/* links */

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: var(--mercuurGroen);
  border: 0px;
}

a:hover {
  color: var(--linkDefHoverColor);
}

a.btn {
	background-color: #7d807d;
	color: white;
	padding: 4px;
	border: 1px black solid;
	font-weight: bold;
}

a.btn:hover {
  background-color: var(--mercuurGroen);
}


a.prive,
a.prive:visited,
a.prive:hover,
a.prive:active {
  text-decoration: none;
  color: rgb(255, 0, 0);
  border: 0px;
}

a.prive:hover {
  color: rgb(0, 100, 255);
}


a.hoverOnly,
a.hoverOnly:visited,
a.hoverOnly:hover,
a.hoverOnly:active {
  text-decoration: none;
  color: inherit;
  border: 0px;
}

a.hoverOnly:hover {
  color: var(--linkDefHoverColor);
}


a.genLinkBtn,
a.genLinkBtn:visited {
  color: var(--mercuurGroen);
  text-decoration: underline;
}

a.genLinkBtn:hover {
  color: #FF0000;
}


/* span */
span.textHL {
  background-color: #0000FF;
  color: #FFFFFF;
}

span.boOnly {
  color: rgb(255, 0, 0);
}


/* notify */

notifyPanel {

  --panW: 250px;
  --panH: 80px;

  display: none;

  position: fixed;

  left: calc( 100vw - var( --panW ) - 50px );
  top: calc( 100vh - var( --panH ) - 50px );

  width: var( --panW );
  height: var( --panH );

  overflow: hidden;

  background-color: #FFFFFF;
  margin: 10px;
  padding: 4px;

  border-color: black;
  border-width: 3px;
  border-style: solid;

  font-size: 20px;

  z-index: 999;
}

notifyPanel div:nth-child(2) {
  opacity: 0.6;
}

notifyPanel div:nth-child(3) {
  opacity: 0.35;
}

notifyPanel div:nth-child(4) {
  opacity: 0.1;
}



/* forms */

input[type=text],
input[type=password],
input[type=checkbox],
select,
textarea {
  padding: 2px;
  margin: 2px;
  border: 1px solid rgb(120,120,120);

  background-color:  rgb(255, 255, 255);
  color: rgb(0, 0, 0)
}

/* fancy form ctrls */
section .selChk14,  /* tbv msg check */
section .selChk10 { /* tbl filter check */
  -webkit-appearance: none;
  background-color:  #fafafa;
  display: inline-block;
  position: relative;
  top: 0px;
  left: 0px;
}

section .selChk14:active,
section .selChk10:checked:active,
section .selChk14:active,
section .selChk10:checked:active {
  /*box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);*/
}

section .selChk14:checked,
section .selChk10:checked {
  /*background-color:  rgb(240,240,240); */
  /*border: 1px solid rgb(200,200,200); */
 /* box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset px 15px 10px -12px rgba(255,255,255,0.1);*/
  /*color: rgb(0, 0, 0);*/
}

section .selChk14:checked:after,
section .selChk10:checked:after {
  content: '\2714';
  font-size: 12px;
  position: absolute;
  top: -1px;
  left: 3px;
  color: var( --mercuurGroen);
}

section .selChk14 {
  padding: 6px;
  margin-top: 2px;
}

section .selChk14:checked:after {
  font-size: 10px;
}

section .selChk10 {
  padding: 6px;
  top: 5px; /* anders staat tie veel te hoog, todo universeel via calc ofzo ? */
}

section .selChk10:checked:after {
  font-size: 9px;
}



/* knoppen */
input[type=button],
input[type=submit] {

  border: 0;
  border-radius: 4px;
  margin: 2px;
  padding: 2px 4px 2px 4px;
  cursor: pointer;
/*  vertical-align: middle;*/

  background-color: rgb(220, 220, 220);
  color: rgb(0, 0, 0);
}

input[type=button].submit,
input[type=submit] {

  background-color: var(--mercuurGroen);
  color: rgb(255, 255, 255);
}


/* dunne scrollbar ~hetzelfde in firefox en chrome */
div.thinScrollBar {
  scrollbar-width: thin; /* werkt alleen in ff */
}

/* rest werkt alleen in chrome */
div.thinScrollBar::-webkit-scrollbar {
  width: 8px;
}

div.thinScrollBar::-webkit-scrollbar-track {
  background: rgb(240, 240, 240);
}

div.thinScrollBar::-webkit-scrollbar-thumb {
  background-color: rgb(205, 205, 205);
}


/* gen */
span.verWarn {
  float: right;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  margin-top: 4px;
  margin-right: 16px;

  animation: blinkWarn 1.0s infinite;
}

@keyframes blinkWarn {
    0%   { color: #FF0000; }
    49%  { color: #FF0000; }
    50%  { color: #FFFFFF; }
    100% { color: #FFFFFF; }
}

span.leadO {
  color: var(--leadOpen);
}

span.leadG {
  color: var(--leadGesloten);
}

span.leadN {
  color: var(--leadNeutraal);
}

span.red {
  color: rgb(255, 0, 0);
}


/* calender edit met 'combo' knop */
input.calFld {
  width: 80px;
  height: 16px;
}

img.calFld {
  float: right;
  width: 20px;
  height: 20px;
  margin: 0px;
}


/* header */
header {
  top: 0px;

  width: var( --siteWidth );

  vertical-align: middle;
  color: #FFFFFF;
  overflow: hidden;
  background-image: url(../images/headTrans.png);
  background-repeat: no-repeat;
  background-color: rgb(0, 100, 54);

  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: var( --headerHeight );

  position: sticky;
  top: 0px;

  z-index: 2;
}

header table {
  float: right;
  width: 475px;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

header table td.title {
  margin: 0px;
  padding: 4px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

header table td.copy {
  margin: 0px;
  padding: 4px;
  padding-right: 6px;
  /*width: 125px;*/
  font-size: 10px;
  text-align: right;
  vertical-align: bottom;
}

header table td.msg {
  margin: 0px;
  padding: 0px;
  padding-right: 6px;
  color: #FF0000;
  font-weight: bold;
  font-size: 12px;
  text-align: right;
  vertical-align: middle;
}

div.siteDisabled {
  display: block;
  position: fixed;
  top: 10px;
  left: 50%;
  width: 500px;
  margin-left: -250px;
  font-size: 20px;
  text-align: center;
  color: #0000FF;
  background-color: #FFFFFF;
  border-color: #000000;
  border-width: 2px;
  border-style: solid;
}

/* tab nav bar */
nav {
/*  position: fixed;*/
  width: var( --siteWidth );

  background: var(--mercuurGroen);
  overflow: hidden;

  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: var( --navHeight );

  position: sticky;
  top: var( --headerHeight );

  z-index: 2;
}

nav#tabs {

  height: var( --navHeight );
  top: var( --headerHeight );
  font-size: 16px;
}

nav#tabs div.nbChk {
  width: 20px;
  float: left;
  display: flex;
  align-items: center;
  height: 100%;
}

nav#tabs ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;

  padding-left: 20px;
}

nav#tabs ul.nbChk {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

nav#tabs li {
  float: left;
  background: rgb(0, 143, 77);
  color: #FFFFFF;
  font-weight: bold;
  padding: 4px 8px 6px  8px;
  margin: 0px;
}

nav#tabs li#cur {
  background: rgb(0, 100, 54);
  color: #FFFFFF;
}

nav#tabs a {
  color: inherit;
  text-decoration: none;
}

nav#tabs a:hover {
  color: #000000;
  text-decoration: none;
}

nav#tabs span.navItems {
  float: right;
  color: #FFFFFF;
  padding-right: 8px;
  padding-top: 4px;
}

nav#tabs span.navItems img {
  width: 20px;
  height: 20px;
}

nav#tabs span.btns {
  font-size: 75%;
  float: right;
  color: #FFFFFF;
  font-weight: bold;
  padding-right: 8px;
  padding-top: 7px;
}

nav img.navBtn {
  padding-left: 2px;
  padding-right: 2px;
  margin: 0px;
}


nav#subTabs {
  height: var( --subNavHeight );
  top: var( --headerInclNavHeight );
  font-size: 12px;
  background: rgb(20, 120, 74);
}

nav#subTabs ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;

  padding-left: 20px;
}

nav#subTabs li {
  float: left;
  color: #FFFFFF;
  font-weight: bold;
  padding: 4px 8px 6px  8px;
  margin: 0px;
}

nav#subTabs li#cur {
  color: #FFFFFF;
  text-decoration: underline;
}

nav#subTabs a {
  color: inherit;
  text-decoration: none;
}

nav#subTabs a:hover {
  color: #FFFF00;
  text-decoration: none;
}



/* footer */
footer {
  background-color: rgb(0, 143, 77);
  color: #FFFFFF;
  font-style: italic;
  text-align: center;
  vertical-align: middle;
  padding: 2px 4px 2px 4px;
  overflow: hidden;

  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 12px;
}

footer a {
  color: #FFFFFF;
  font-weight: bold;
}

footer a:hover {
  color: #FFFF00;
  text-decoration: underline;
}



body.fullWidth,
body.fullWidth header,
body.fullWidth nav,
body.fullWidth section {
  width: 100%;
}



siteOffline {

  display: block;
  position: fixed;
  top: 10px;
  left: 50%;
  width: 500px;
  margin-left: -250px;

  font-size: 20px;
  text-align: center;
  color: #0000FF;

  background-color: #FFFFFF;
  border-color: #000000;
  border-width: 2px;
  border-style: solid;
}




/* main content (tab pages) */
section {
  background: #FFFFFF;
  flex-grow: 1;
  flex-shrink: 0;
  flex-grow: 1px;
}


section.lev0 {
 /* margin-top: 72px; /*header (44) + nav (28) height*/
}

section.lev1 {
/*  margin-top: 96px; /*header (44) + nav (28) + subNav(24) height*/
}



/* Hints */
div#hintDiv {
  visibility: hidden;
  position: fixed;
  background-color: #FFFFFF;
  border-width: 2px;
  border-style: solid;
  border-color: #000000;
  border-radius: 5px;
  color: #000000;
  font-weight: bold;
  font-size: 12px;
  padding: 6px;
  z-index: 1000;
  max-width: 400px;
  overflow: hidden;
}

div#hintDiv img {
  max-width: 200px;
}



/* loading */
div#divLoading {
  position: fixed;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 300px;

  width: 200px;
  height: 200px;

  /*width: 256px;
  height: 256px;*/
  padding: 0px;
  z-index: 999;
  visibility: hidden;
  /*background-color: #FFFFFF;*/
  background-image: url(../images/loading.gif);
  /*background-blend-mode: multiply;*/
}




/*-----------------------------------todo moet weg/elders  */


/*edit lookup panel*/
div#pnlLookup {
  visibility: hidden;
  position: fixed;
  left: 20px;
  top: 20px;

  background-color: #FFFFFF;
  border-width: 1px;
  border-style: solid;
  border-color: var(--mercuurGroen);
  border-radius: 0px;
  color: #000000;
  font-size: 12px;
  padding: 6px;
  z-index: 10;
}

div#pnlLookup div#luCon {
  overflow: auto;
  max-height: 300px;
}

div#pnlLookup a,
div#pnlLookup a:visited {
  color: #000000;
  text-decoration: none;
}

div#pnlLookup a:hover {
  color: #FF0000;
}

div#pnlLookup div.btns {
  text-align: center;
  margin-top: 12px;
}

div#pnlLookup div a {
  color: #000000;
}



/* lookup panels basis */
div.lookUpPanel {
  visibility: hidden;
  position: absolute;
  left: 20px;
  top: 20px;

  background-color: #FFFFFF;
  border-width: 1px;
  border-style: solid;
  border-color: var(--mercuurGroen);
  border-radius: 0px;
  color: #000000;
  font-size: 12px;
  padding: 6px;
  z-index: 10;
}

div.lookUpPanel div.lupItems {
  overflow: auto;
  max-height: 300px;
}

div.lookUpPanel th,
div.lookUpPanel td {
  padding: 4px;
}

div.lookUpPanel th {
  font-weight: bold;
}

div.lookUpPanel a,
div.lookUpPanel a:visited {
  color: #000000;
  text-decoration: none;
}

div.lookUpPanel a:hover {
  color: #FF0000;
}

div.lookUpPanel div.btns {
  text-align: center;
  margin-top: 12px;
}

div.lookUpPanel div a {
  color: #000000;
}



/*
  sta wrapping toe bij breedte kleinder dan de statische
  todo is nog voor de oude zoeken/berichten v3 opzet, herzie.
*/

@media (max-width: 1250px) {

  body {
    width: 100%;
    min-width: 750px;
  }

  header {
   width: 100%;
   min-width: 750px;
  }

  nav {
   width: 100%;
   min-width: 750px;
  }

  section#search div.col2 {
    float: left;
    margin-left: 20px;
    margin-right: 20px;
  }

  section#search div#main {
    float: left;
    margin-left: 20px;
    margin-right: 20px;
  }

  section#search div#btns {
    float: left;
    margin-left: 20px;
    margin-right: 20px;
  }

}