@font-face {
  font-family: Monaco;
  src: url(./img/Monaco.woff);
}

body, html {
  padding: 0;
  margin: 0;
  font-family: 'Helvetica Neue', 'Calibri', Arial, sans-serif;
  height: 100%;
}
a, a:visited { text-decoration: none; color: #0a8;}
.header {
  padding: .5em 1em 0px 1em;
  background: #059b12;
  color: white;
}
.header a { color: yellow; }
.stitle, .stitle a, .stitle a:visited {
  color:white !important;
  font-size: 130% !important;
  text-decoration: none;
  margin-left: 0.1em;
  padding-bottom: .3em;
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: .5em 1em 1.2em;
  background-color: #059b12;
  color: #FFF;
}
.content { padding: 1em; }
.chk_ok { color: green; font-weight: bold; }
.chk_nok { color: red; }
h1, h2, h3, h4 {
  margin: 0.5em 0 0.1em 0em;
}
h1 { font-size: 1.6em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }

.notitie {
  margin: 0.1em 0 0.2em 0.5em;
  width:18em;
}
input[type=text], input[type=password], select {
  padding: 2px 8px;
  margin: 1px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 20em;
  background-color: #06c10a;
  color: white;
  padding: 6px 6px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit].red {
  width: 20em;
  background-color: #B65;
  color: white;
  padding: 4px 4px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover { background-color: #008678; }
input[type=submit].red:hover { background-color: #A33; }
input[type=submit].xshort, input[type=text].xshort { width: 3em; }
input[type=submit].short, input[type=text].short { width: 6em; }
input[type=submit].mid, input[type=text].mid { width: 8em; }

.btn-success,
.btn-error,
.btn-warning,
.btn-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.btn-success { background: rgb(28, 184, 65); }           /* this is a green */
.btn-error {   background: rgb(202, 60, 60); }           /* this is a maroon */
.btn-warning { background: rgb(223, 117, 20); }          /* this is an orange */
.btn-secondary { background: rgb(66, 184, 221); }        /* this is a light blue */

table.contrast { background-color: #acd; }
.ix1 { width: 5em; }
.ix2 { width: 10em; }
.ix3 { width: 15em; }
.ix4 { width: 25em; }

.small-label {
	font-size: 80%;
  width:9em;
}

.s-label {
  font-size: 90%;
  width:4em;
}
.m-label {
  width:15em;
  margin: 0.1em 1em 0.1em 0.1em;
}

div.inspr {
  padding-left: 2em;
}

div.zoek-box {
  border-radius: 5px;
  background-color: #eee;
  width: 20em;
  padding: 3px;
}
input.zoek-veld {
  border-radius: 5px;
  width: 100%;
  padding: 8px;
}
td.bedrag {
  text-align: right;
  font-size: 14px;
}
.zresult, .zsresult {
  z-index: 9999;
}
.zresult p, .zsresult p {
  padding: 3px 0px 3px 0px;
}
.zresult p:hover {
  background-color: #ccc;
}
p.apires {
  font-size:85%;
  border-bottom: 1px solid #dde;
  margin: 0px;
}
.red {
  color: red;
}
.gray {
  color: gray;
  border: 1px solid lightgray;
}
.green {
  color: green;
}
div.link {
	margin: 0.2em 0 0.2em 0;
}
table {
  border: none;
  border-bottom: thick double #32a1ce;;  
}
th, td {
  border: none;
  border-bottom: 1px dotted #a5dbd6;
  margin: 0 0.3em 0.1em 0.1em;
  padding: 0.1em 0.3em 0.1em 0.3em;
}
th {
  background-color: #0a3f2d;
  color: white;
}
table#sresult {
  border-bottom: thick #32a155;
  border-spacing: 0px;
  margin:0px;
  font-size: 90%;
}
.tdd {
  border: 1px dashed #009688;
}
textarea.txt {
  width: 22em;
  height: 4em;
}
textarea {
  font-family: Monaco;
  font-size: 0.8em;
}
.Row {
  display: table;
}
.Col {
  display: table-cell;
  padding: 0.3em 0em .3em 0em;  
}
.Col a {
  padding: 0.3em .7em .3em .7em;
  white-space: nowrap;
  border-left: 1px solid green;
}
.Col a:hover, .Col a:hover {
  color: #059b12;
  background-color: #eef;
}

/* details: member status */
.stat_Lid, .stat_Lid a {
	background: green;
	color: white;
	font-weight: bold;
  cursor: pointer;
}
.stat_Weg, .stat_Afgewezen, .stat_Dubbel, .stat_Nee, .stat_Overleden, .stat_Weg a, .stat_Afgewezen a, .stat_Dubbel a, .stat_Nee a, .stat_Overleden a {
	background: red;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
.stat_Review {
  background: orange;
}
.not_last_rev {
	background: orange;
}
.ErrStatus {
  background: red;
  color: white;
}
.unsel {
 color:grey; 
}
.psaldo {
  background-color: #6d7;
  font-weight: bold;
}
.nsaldo {
  border: 3px solid #d54;
  font-weight: bold;
}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  font-size: 16px;
  font-weight: normal;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -50px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.floatButn {
  background-color: #d99;
  font-weight: bold;
}
.menuCats {
  position:fixed;
  top:3em;
  left:3em;
  height: auto;
  background-color: #FBB;
  z-index: 1000;
}
.hide {
  visibility: hidden;
}
.hidden {
  display: none;
}
.kleur {
  background-color: #ffa;
}
.klein {
  height: 1.5em;
  padding: 0.06em 0.3em;
  border-radius: 4px;
  vertical-align: baseline;
}
.menuCats ul {
  padding-inline-start: 0px;
}
.catItem {
  list-style-type: none;
  width: 100%;
  text-align: center;
  font-size: 1.1em;
  background-color: #DFD;
  padding: 0.2em 1em 0.2em 1em;
}
.catItem:hover {
  background-color: #AEA;  
}
.selRow {
  background-color: #DDF;
}
.footerMenu {
    width: 10em;
    background-position: top;
    padding: 0px 10px 10px 0px;
    position: fixed;
    right: 0;    
    bottom: 10px;
    z-index: 100;
}
.condMenu {
  overflow: hidden;
  top: 0; /* Position the navbar at the top of the page */
  right: 0;
  background-color: yellow;
  padding: 0.7em;
  border-radius: 4px;
  border: 1px solid green;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: -1em;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 4px 4px;
  z-index: 1;
}
.dropdown-content p {
  padding: 0.6em;
  margin: 0em;
}

.popup {
  display: relative;
  position: fixed;
  top: 30%;
  right: 30%;
  background-color: #bde;
}
.popup ul{
  border: 1px solid black;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
.popup li {
  list-style-type: none;
  text-align: center;
  font-size: 1.1em;
  background-color: #def;
  padding: 0.2em 1em 0.2em 1em;
  margin: 0;  
}
.popup li:hover {
  background-color: #bce;
}
.modalDialog{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.4);z-index:999;
  -webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;transition:opacity .2s ease-in;pointer-events:auto}
.modalDialog:target{opacity:1}
.modal-head{width:22em;position:relative;margin:2em auto 0 auto;padding:5px 1em 0.3em 1em;border-radius:3px;background-color:#ffa;font-weight:bold;border-bottom: 1px solid #777}
.modal-wrap{width:22em;position:relative;margin:0 auto 1em auto;padding:0.6em 1em 1em 1em;border-radius:3px;background:#fff}
.close, .closepop{position:absolute;right:4px;text-align:center;width:24px;text-decoration:none;font-weight:bold;}
.close:hover{background:#00d9ff}
.closepop:hover{background:#00d9ff}
.modalDialog p{line-height:20px;margin-block-end:0;margin-block-start:0px;}

.Sel {background: #fd8;color: purple;font-weight: bold;}
/* Chrome, Safari, Edge, Opera */
.numbrsNoSpinn::-webkit-outer-spin-button,.numbrsNoSpinn::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
.numbrsNoSpinn[type=number] {
  -moz-appearance: textfield;
}
.ok{background-color:green;color:white}
.error{background-color:red;color:white}
.warning{background-color:orange;color:white}
.message{padding:4px 7px;border:3px solid #ec9630;width:95%;font-weight:bold;}
.message.ok{border-color:green;background-color:#eee;color:green}
.message.error{border-color:red;background-color:#eee;color:red}
.message.alert{border-color:orange;background-color:#eee;color:orange}

.todoO {background-color: orange}
.todoC {background-color: lightgreen}
.todoA {background-color: lightgrey}

.klaar {background-color: lightgreen }