:root {
    --dpigroen: #788377;
    --dpiwit: #fff;
    --dpibruin: #bc7d5a;
    --dpizwart: #000;
    --dpigrijs: #e4e9e3;
  }
body {padding-top: 40px; background-color: var(--dpigrijs); font-family: 'Roboto', sans-serif; font-size: 14px; }
@media screen and (max-width: 979px) {body { padding-top: 0px; }}
div.control-group label.control-label {width: 205px;}
form.form-horizontal div.control-group div.controls {margin-left: 217px;}
.btn, .badge, .nav-pills>li>a, select, textarea, input[type="text"], input[type="password"] {border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;}
.btn-success.active {background-color: #e5e5e5; color: #555; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear,0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);}
a, a:hover, a:active, a:visited {text-decoration: none; color: var(--dpigroen);}
a:focus {outline:none; text-decoration: none;}
a.badge, a:hover.badge, a:visited.badge, a:active.badge {color: #fff; padding: 0px 1px; font-size: 12px; vertical-align: middle; line-height: 12px;}
h4, h4 a, h4 a:visited {font-size: 14px; margin: 5px 0 0px 0; color: #777 !important; font-weight: normal; text-shadow: 0 1px 0 #fff;}
h4 a:hover {color: var(--dpizwart) !important;}
a.wittetekst {color: #fff;}
/*.navbar .nav {left: 8.9%;} */
table.geenstreep td {border-top: 0px; padding: 2px;}
table.activiteit td {padding: 1px 2px;}
table.geenstreep td .input-kort {width: 60px; padding-right: 0px;}
table.geenstreep td .input-korter {width: 40px; padding-right: 0px;}
/*
table.scrollable td, table.scrollable th {width: 33%; height: 18px; margin: 0px;}
table.scrollable2 td, table.scrollable2 th {width: 20%; height: 18px; margin: 0px;}
table.scrollable tr, table.scrollable2 tr {height:20px;}
*/
/*
.scrolltabel {clear: both; margin-bottom: 3px; overflow: auto; width: 100%;} 
.scrolltabel table {width: 100%; height: 450px; position: relative;}
.scrolltabel thead {position: relative; width: 100%;}
.scrolltabel thead tr {display: block; position: relative;}
.scrolltabel thead th {display: table-cell;}
.scrolltabel tbody {position: relative; display: block; width: 100%; height: 450px; overflow-x: hidden; overflow-y: scroll; -ms-overflow-x: hidden; -ms-overflow-y: scroll; overflow: auto;}
.scrolltable td {display: table-cell;}
.scrolltabel tr > td:last-child {white-space: nowrap;}
.scrolltabel tr {height: 20px;}
.scrolltabel td, .scrolltabel th {height: 20px; width: 33%;}
.scrolltabel table.scrollable2 td, .scrolltabel table.scrollable2 th {width: 20%;}
*/
form#zoekform a, form#zoekform button {margin-right: -2px;}
.scrollme {overflow-y: scroll;}
.scrollme table {margin-bottom: 0px; width: 100%;}
.scrollme tr {height: 20px;}
.scrollme table tr td, .scrollme table tr th {width: 28%;}
.scrollme2 table tr td, scrollme2 table tr th {width: 20%;}
.scrollmetoo {height: 100%; width: 100%;} /* 500px voorkomt dubbele scrollbalk op scherm patrick */ /* 26-5-14 moet toch groter; 29-9-14 op 100% gezet */ 
select {border: 1px solid #fff;}
select {border: 0; border-radius: 0px;} /* -webkit-appearance: none; -moz-appearance: none; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;}*/
select, input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="date"], input[type="month"] {padding: 0px 1px; margin-bottom: 0px; height: 18px; line-height: 18px;}
textarea {padding: 4px; padding-top: 0px; margin-bottom: 0px;}
.w93 input, .w93 select {width: 93%;}
.add-on:last-child {padding: 0px 4px;}
.navbar a.brand {margin-left: 4px; font-size: 14px; padding: 10px; font-weight: bold;}
.navbar ul.nav.nav-pills>li>a {padding: 10px 8px;}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
  background-color: var(--dpiwit); -webkit-box-shadow: none; box-shadow:none; 
}
.btn {padding: 0px 12px;}
/*offveld maring-right van 10 naar 0 tbv customers ; 27-7-21 van 280 naar 180 */
.offveld {height: 145px; padding: 4px; padding-top: 0px; overflow: auto; margin-bottom: 7px; background-color: #fff; margin-right: 0px;} /*border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;} */
.margeonder0 {margin-bottom: 0px;}
.border10 {border-right: 10px solid #ccc;}
.form-horizontal label.control-label {text-align: left;} /* padding-left:12px;} */
.form-horizontal .control-group {margin-bottom: 10px;}
#tblSearchMe h4 a, #tblSearchMe h4 a:visited {color: #777 !important;}
#tblSearchMe h4 a:hover {color: #000 !important;}
#tblSearch td {padding: 0px 5px;}
#tblSearch tr.odd td {background-color: #f9f9f9;}
/*#tblSearch td:last-child {padding-right: 12px;}*/
#tblSearch tr.even td {background-color: #ccc;}
#tblSearch tr:hover td {background-color: #aaa;}
input.uneditable-input {background-color: #eee;}
.contactpersonen input.squeeze, .contactpersonen select.squeeze {min-height: 18px; margin: -1px;}
div.klantenkaart div.row-fluid div {min-height: 18px;}
div.klantenkaart input, div.klantenkaart select {width: 100%;} /* was 115px; */
div.klantenkaart2 input, div.klantenkaart2 select {width: 100%;}
div.klantenkaart input.korter {width: 100%; } /*margin-right: 20%;} */ /* was 70%; */
div.klantenkaart2 input.korter {width: auto; float: right;}
div.klantenkaart select.korter {width: 100%; } /* margin-right:20%;} */ /* was 70%; */
div.klantenkaart select, div.klantenkaart select.korter {width: 102%;} /* na apperance none weg, was 100% */
.w93 select {width: 95%;} /* na apperance none weg, was 93% */
table.activiteit {margin-bottom: 0px;}
table.activiteit tr {height:20px;}
table.activiteit tr td {min-height:20px !important; padding: 0px;}
table.activiteit input, table.activiteit select {min-height:20px;}
div.contactpersonen form {margin: 0px;}
div#legenda.in, div#legenda2.in, div#legenda3.in {height: auto;}
div#legenda.collapse, div#legenda2.collapse, div#legenda3.collapse {overflow: hidden !important; height: 0px !important;}
textarea.h265 {height: 185px; } /*285px;}*/
textarea.h600, div.h600 {height: 185px; } /* 600px;} */
textarea.h150, div.h150 {height: 153px;}
.placeholder { color: #aaa; }
input::-webkit-input-placeholder {color: #aaa;}
input:-moz-placeholder {color: #aaa;}
input::-moz-placeholder {color: #aaa;}
input:-ms-input-placeholder {color: #aaa;}
.scrollme table.factuur th, .scrollme table.factuur td {
  width: 16%;
}
.navbar ul.nav.nav-pills>li>a {border-radius: 5px;}
/* .navbar .nav > li > a {border-radius: 5px;} */
.nav-pills li a.sux {
    color: var(--dpizwart);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.nav-pills li a.sux:hover, .nav-pills li.active a.sux{
    color: #333333;
    background-color: #e6e6e6;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}
form#offadd input, form#offadd textarea {width:350px; background-color: #fff;}
form#offedit input {width:350px; background-color: #fff;}
form#offedit select, form#offadd select {width:355px; background-color: #fff;} /* 255 sinds appearance none uit staat, was 250px */
form#corrform select {width: 210px;}
form#offadd input[type="radio"] {width:20px;}
form#offadd input {border: none; margin: 1px 0px; height: 18px;}
form#offadd input.submitbtn {width: 353px; margin-bottom: 2px; background-color: #eee;} /* was 256 */
form#offadd input.btn, form#offedit input.btn {width: 256px; margin-bottom: 4px; margin-top: 1px; line-height: 19px;}
form#offadd input.btnb, form#offedit input.btnb {width: 354px; margin-bottom: 4px; margin-top: 1px; line-height: 19px;}
form#offadd textarea {width: 346px; border: none;} /* was 244px; */
form#offedit textarea {width: 346px; border: none;} /* was 244px; */
form#recledit input, form#recleditn input {width:350px;}
form#recledit select, form#recleditn select {width: 355px;}
form#recledit textarea, form#recleditn textarea {width: 346px;}
input[type="radio"] {vertical-align: top;}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
    cursor: not-allowed;
    background-color: #eeeeee;
}
/* grafieken tbv queries.php */
.bargraph { 
  height: 229px; 
  position: relative; 
  /* background: url(images/papergrid.jpg) repeat-x; */
  background-color: #fff;
  border-left: 1px solid #d4d4d4;
  margin: 15px auto 50px;
}
.bargraph ul.bars {
  margin: 0; 
  padding: 0; 
  list-style-type: none;
}
.bargraph ul.bars li { 
  position: absolute; 
  /*background: url(img/bars200.jpg) no-repeat; */
  background-color: var(--dpibruin);
  border: 1px solid var(--dpibruin);
  /*move it up from bottom label*/
  bottom: 20px; 
  width: 28px; /* was 30, nu 28 ivm border */
  height: 200px; 
  padding: 0; margin: 0; 
  text-align: center; 
  font-weight: 800; 
  color: white; 
  line-height: 2.5em;
  font-size: 12px; 
  /* z-index: 99; niet nodig zonder bg img */
}
.bargraph ul.bars li span { position: relative; top: -23px; color:var(--dpizwart);}
/* positioning each bar on the graph paper - these numbers will change based upon the background image for graph paper */
.bargraph ul.bars li.bar1 { left: 21px; }
.bargraph ul.bars li.bar2 { left: 94px; } 
.bargraph ul.bars li.bar3 { left: 167px; } 
.bargraph ul.bars li.bar4 { left: 240px; } 
.bargraph ul.bars li.bar5 { left: 313px; }
.bargraph ul.bars li.bar6 { left: 386px; }
.bargraph ul.bars li.bar7 { left: 459px; }
.bargraph ul.bars li.bar8 { left: 532px; }
.bargraph ul.bars li.bar9 { left: 605px; }
.bargraph ul.bars li.bar10 { left: 678px; }
/* Sprites - bottom means 100% in background-position */
.bargraph ul.bars li.color1        { background-position: 0px bottom; }
.bargraph ul.bars li.color2         { background-position: -30px bottom; }
.bargraph ul.bars li.color3      { background-position: -60px bottom; }
.bargraph ul.bars li.color4      { background-position: -90px bottom; }
.bargraph ul.bars li.color5      { background-position: -120px bottom; }
.bargraph ul.bars li.color6      { background-position: -150px bottom; }
.bargraph ul.bars li.color6      { background-position: -180px bottom; }
.bargraph ul.bars li.color7       {  background-position: -210px bottom; }
.bargraph ul.bars li.color8      { background-position: -240px bottom; }
.bargraph ul.bars li.color9       {  background-position: -270px bottom; }
.bargraph ul.bars li.color10       {  background-position: 0px bottom; }
.glabel { 
  list-style-type: none; 
  position: absolute;
  bottom: 0px; 
  margin: 0;
  padding: 0;
  background-color: var(--dpigroen);
}
.glabel li { 
  color: white; 
  text-transform: uppercase; 
  letter-spacing: 0.1em;
  font-size: 10px;
  width: 73px;
  text-align: center;
  overflow: hidden;
  float: left;
}
ul.y-axis { 
  list-style-type: none; 
  position: absolute; 
  /*positioning the ul box - the box that goes around the list, 100, 75,... */
  left: -45px; 
  bottom: 0;
  width: 40px;
  text-align: right;
  margin: 0; padding: 0; 
}
ul.y-axis li { 
  color: var(--dpigrijs); 
  font-size: 12px;
  height: 47px; /* was 51 */
  line-height: 47px; /* was 51 */
  text-align: right;
}
ul.y-axis li:first-child {
  height: 40px;
  line-height: 40px;
}
ul.y-axis li.units {
  position: absolute;
  bottom: 110px;
  right: 20px;
  line-height: 1.2em;
  height: auto;
}
/* number fields */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {appearance:textfield;}
img.factuurrood, a.orderrood {color: #f00;}
.navbar .nav > li > a, .navbar .brand {
  color: #ffffff;
  text-shadow: none;
}
.navbar .nav > li > a:focus, .navbar .nav > li > a:hover { 
  color: var(--dpigrijs);
}
.navbar .nav > li > i {color: #fff;}
.navbar .nav > .active > a  {color: #000;}
.isdisabled {
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
  pointer-events: none;
}