/* basic CSS */

body, a, p, input, td, select {
  font-family: Avenir,Arial, Helvetica,sans-serif;
  font-size: medium;
  color: rgb(0, 109, 140);
}



h1 {
  margin: 10px 5px 20px 0px;
  font-weight: 400;
  line-height: 1.17;
  font-size: 36px;
}

body {
  margin:0;
  padding:0;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #11b5e9;
}

a:hover {
  text-decoration: underline;
}

.breadcrumbs {
  font-size: 14px;
  line-height: 1;
  min-height: 17px;
}

.breadcrumbs a {
  color: #11b5e9;
  text-decoration: none;
  border-bottom: 1px solid #11b5e9;
}

a.button.secondary {
  background-color: #11b5e9;
  /*padding: 10px */
  /*min-height: 40px;*/
}

a.button {
  border-radius: 8px;
  background-color: #006d8c;
  color: #fff;
  /*min-height: 30px;
  text-decoration: none;*/
  padding: 10px;
  white-space: nowrap;
}

.highlight-background {
  background-color: rgb(245,250,252);
}

/* tables
.with100 {
  width:calc(100% - 10px);
} */


.styled-table, 
.value-table {
  border-collapse: collapse;
  margin: 0;
  /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);*/
}

.value-table {
  background-color: rgb(245,250,252);
  padding-left: 10px;
}


.styled-table thead tr,
.value-table thead tr {
  /*background-color: #b8e9f8;*/
  color: rgb(0, 109, 140);
  text-align: left;
}

.styled-table thead th,
.value-table thead th {
  font-weight: normal;
  border-bottom: 1px solid #b3d3dd;
}

.styled-table th,
.styled-table td {
    padding: 8px 8px 8px 0; /* original: 12 + 15px */
    vertical-align: top;
    text-align: left;
}

.value-table th,
.value-table td {
    padding: 6px 6px 6px 0px; /* original: 12 + 15px */
    vertical-align: top;
    text-align: left;
}


.styled-table tbody tr,
.value-table tbody tr {
  border-bottom: 1px dashed #b3d3dd;
}

.styled-table tr:last-child td,
.value-table tr:last-child td {
    border-bottom: 1px solid #b3d3dd;
}


.styled-table tbody .active-row {
    font-weight: bold;
    color: rgb(0, 109, 140);
}


/* div classes for main page */


.iframe-container {
  display: flex !important;
} 

.iframe-container .fw-iframe {
    min-height: calc(100vh - 284px) !important;
    flex: 1;
}
.spacer {
	padding: 0 0 0 60px;
}

.clear {
	clear:both;
}

.footer{ 
  margin-top: 10px;
}

/* lists */
ul.no-bullets {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

/* forms and inputs */

.searchInput {
  /* Google Material Search Icon (Data URI) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%23006d8c"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
  background-position: 7px 7px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  padding: 5px 5px 5px 25px;
  border: 1px solid #b3d3dd; 
  border-radius: 4px;
  line-height: 1.15;
  margin:0;
  width: 130px;
  height: 21.3px;
}

.category-select {
  padding: 5px;
  border: 1px solid #b3d3dd; 
  border-radius: 4px;
  line-height: 1.15;
  margin:0;
  color: #b3d3dd;
}

.category-select:focus {
  color: rgb(0, 109, 140);
}

input[type="checkbox"] {
  accent-color: #006d8c;
  border: 1px solid #b3d3dd;
  /*outline: 1px solid #b3d3dd;*/ 
  
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  /*transform: scale(1.5);*/
  zoom: 1; /* works better, less pixalated than transform */
}

/* element specific styling */

#title {
  float: left;
}

#exportButtons {
  float: right;
  /*bottom: 5px;*/
  /*padding-top:25px;*/
  margin: 0 5px 5px 10px;
  text-align: right;
  /*white-space: nowrap;*/
}

#VariableCounter {
  /*min-height: 30px;*/
  /*margin: 10px;*/
  display:inline-block;
  margin-right: 15px;
}

#copyIcon {
  vertical-align: middle;
}

#downloadIcon {
  vertical-align: middle;
}

#helpIcon {
  vertical-align: middle;
}

.showValues {
  cursor: pointer; 
  text-decoration: none; 
  white-space: nowrap;
}

.toelichting {
  line-height: 1.6;
  display:none;
  padding-top:15px;
  font-size: 14px;
}



/* Tooltip container */
/* Based on https://talkerscode.com/webtricks/create-simple-tooltip-using-css3.php */

.tooltip {
  display: inline;
  position: relative;
}


.tooltip:hover:after {
  font-size: 13px;
  background: #fff;
  border-radius: 5px;
  bottom: 26px;
  color: rgb(0, 109, 140);
  content: attr(data-title);
  right: 20px;
  padding: 5px 5px;
  position: absolute;
  z-index: 98;
  width: 220px;
  box-shadow: 0px 0px 2px 2px rgb(0 0 0 / 20%);
}

.tooltip2 {
  display: inline;
  position: relative;
}

.tooltip2:hover:after {
  font-size: 14px;
  background: #fff;
  border-radius: 5px;
  top: 26px;
  color: rgb(0, 109, 140);
  content: attr(data-title);
  right: 20px;
  text-align: left;
  padding: 5px 5px;
  position: absolute;
  z-index: 98;
  width: 650px;
  box-shadow: 0px 0px 2px 2px rgb(0 0 0 / 20%);
}
/*.tooltip:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}*/