@import url(https://fonts.googleapis.com/css?family=Open+Sans);

* { box-sizing: border-box; }

body {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  background-color: #f3f9fb;
  margin: 0;
  padding: 0;
}

/* STRUCTURE */
.wrapper {
  padding: 15px;
  max-width: 650px;
  width: 95%;
  margin: 20px auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

header {
  padding: 0 15px;
}

.parent-info-box {
  background-color: #018abe;
  color: white;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: left;
}

.parent-row {
  margin: 5px 0;
  font-size: 11pt;
}

.gender-title {
  font-weight: bold;
  font-size: 13pt;
  margin-top: 20px;
  margin-bottom: 5px;
  padding-bottom: 3px;
  border-bottom: 2px solid #ccc;
  text-align: left;
}

/* Desktop/tablet: flex */
.columns {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 5px 0;
}

.column {
  flex: 1 1 260px;
  max-width: 260px;
  width: 100%;
  border: 1px solid gray;
  margin: 3px;
  padding: 10px;
  margin-bottom: 10px;
  border-top: 4px solid #018abe;
}

/* Tabellen & Resultaten */
table, .result-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  font-size: 10pt;
}

.result-table th {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  font-weight: bold;
}

.result-table td {
  border: 1px solid #ddd;
  padding: 8px;
  vertical-align: top;
}

td, th {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.dynamic-container { 
  margin: 10px 0; 
}

.dynamic-select { 
  display: block; 
  margin: 6px auto; 
  width: 235px; 
}

.action-container {
  text-align: center;
  margin-top: 25px;
}

/* BUTTONS - TEKST PERFECT IN HET MIDDEN */
.classname {
  background-color: #018abe;
  color: #ffffff !important;
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding: 11px 24px;   /* Gelijke boven- en onderpadding centreert de tekst */
  border: 1px solid #018abe;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: inset 0px 1px 0px 0px #97c4fe;
  text-shadow: 1px 1px 0px #016f9a;
}

.classname:hover {
  background-color: #65c1e5;
  border-color: #65c1e5;
}

.classname:active {
  position: relative;
  top: 1px;
}

.print-footer {
  display: none;
  text-align: center;
  margin-top: 30px;
  font-size: 8pt;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

footer {
  padding: 0 15px;
}

a:link, a:visited, a:hover, a:active {
  color: #0000FF;
  text-decoration: none;
}

h1 {
  font-family: "arial", verdana, Calibri;
  font-size: 20pt;
  color: #018abe;
  text-align: center;
  font-weight: 400;
}
h2 {
  font-family: "arial", verdana, Calibri;
  font-size: 18pt;
  background-color: #018abe !important; /* Blauwe achtergrond */
  color: #ffffff !important;            /* Witte tekst */
  font-weight: 400;
  padding: 12px;
  margin: 0;
  border-radius: 4px;
  text-align: center;
}

@media print {
  .action-container { display: none; }
  .print-footer { display: block; }
  body { background: white; }
  .wrapper { border: none; max-width: 100%; width: 100%; padding: 0; }
}

@media (max-width: 768px) {
  .columns { display: block !important; margin: 0; }
  .column { max-width: 100% !important; width: 100% !important; margin: 0 0 10px 0; }
  .wrapper { width: 100%; max-width: 100%; padding: 10px; margin: 10px auto; }
  .classname { display: block; width: 100% !important; margin: 0 0 10px 0; }
}