﻿html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
  padding-left: 15px;
  padding-right: 15px;
}
main {
  display: inline-block;
}
footer {
  width: 100%;
  overflow: hidden;
  text-align: center;
}
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
dd {
  padding-left: 4px;
}
.dl-horizontal dt {
  white-space: normal;
  display: grid;
  grid-gap: 4px 16px;
  grid-template-columns: max-content;
}
dt {
  width: 180px !important;
  /*padding-left: 4px;*/
  margin: 0;
  grid-column-start: 2;
}
form {
  float: left;
  width: inherit;
}
h2 {
  background-color: whitesmoke;
}
input[type="text"] {
  width: 650px;
}
#divContact div {
  margin-left: 0;
  width: inherit;
}
#divContact div textarea {
  width: 650px;
  height: 150px;
}
label {
  float: left;
  text-align: left;
  min-width: 200px;
}
td {
  vertical-align: top;
}
td a span:first-of-type {
  display: flow;
}
td a span ~ span {
  display: none;
}
td a:hover span ~ span {
  display: flow;
}
td,
th {
  padding: 0 6px;
}
#tdEerste,
#tdTweede,
#tdBegeleider,
#tdLijnrechters {
  min-width: 130px;
}
#divCachedSince,
footer {
  font-size: 8px;
}
.col-md.hidden {
  display: none;
  visibility: hidden;
}
.success {
  padding: 6px;
  background-color: #7fba00;
}
.small {
  width: 400px;
}
.row {
  margin-top: 6px;
}
.field-validation-error,
.validation-summary-errors,
#ulErrors {
  color: red;
  float: left;
}
.required-label::after {
  color: red;
  content: "*";
}
.datum {
  white-space: nowrap;
}
.notToday {
  color: #f33;
  background: #ffa;
}
.securitynote {
  font-weight: bold;
}
.saveUrlTip {
  float: left;
  height: 33px;
  margin: 4px 0 0 2px;
  padding: 0 0 0 2px;
  font-size: 20px;
  background-color: greenyellow;
}
.saveUrlTip img {
  margin-right: 6px;
}
.dataLost {
  background-color: darkorange;
  color: navy;
}
.dataLost p {
  text-align: center;
  font-size: 20px;
}
/*
.dataLost > p {
  text-align: center;
  font-size: 20px;
}
*/
.currentOfficial {
  font-weight: bold;
  color: green;
}
.vlagger {
  display: inline;
}
.conceptMatches {
  background-color: azure;
}
h3.region {
  text-align: center;
}
#resp-table {
  width: 100%;
  padding: 0;
  display: table;
}
#resp-table-caption {
  display: table-caption;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  width: 100%;
}
#resp-table-body {
  display: table-row-group;
  width: 100%;
}
.resp-table-row {
  display: table-row;
  width: 100%;
}
.table-body-cell {
  padding: 10px;
  display: table-cell;
  text-align: center;
}
.poules {
  width: 350px;
}
.table-body-cell-label {
  padding: 10px;
  display: table-cell;
  width: 150px;
}
.poule {
  width: 75px;
  text-align: center;
  padding: 2px;
  margin: 0 auto;
}
tr.competitie {
  margin-top: 10px;
}
/* tabbed */
div.regios {
  padding: 0.6em;
  margin: 1em 2em;
}
div.tabs {
  min-height: 7em;
  /* No height: can grow if :target doesn't work */
  position: relative;
  /* Establish a containing block */
  line-height: 1;
  /* Easier to calculate with */
  z-index: 0;
  /* So that we can put other things behind */
}
div.tabs > div {
  display: inline /* We want the buttons all on one line */;
}
div.tabs > div > a {
  color: black;
  /* Looks more like a button than a link */
  background: #CCC;
  /* Active tabs are light gray */
  padding: 0.2em;
  /* Some breathing space */
  border: 0.1em outset #BBB;
  /* Make it look like a button */
  border-bottom: 0.1em solid #CCC;
  /* Visually connect tab and tab body */
}
div.tabs > div:not(:target) > a {
  border-bottom: none;
  /* Make the bottom border disappear */
  background: #999;
  /* Inactive tabs are dark gray */
}
div.tabs > div:target > a,
:target #Oost > a {
  /* ... to the default item */
  border-bottom: 0.1em solid #CCC;
  /* Visually connect tab and tab body */
  background: #CCC;
  /* Active tab is light gray */
  text-decoration: none;
}
div.tabs > div > div {
  z-index: -2;
  /* Behind, because the borders overlap */
  left: 0;
  top: 1.3em;
  /* The top needs some calculation... */
  right: 0;
  /* Other sides flush with containing block */
  padding: 0.3em;
  /* Looks better */
  border: 0.1em outset #BBB;
  /* 3D look */
  background-color: #FFF;
  /* Light gray */
  display: flex;
  min-width: 300px;
}
div.tabs > div:not(:target) > div {
  /* Protect CSS1 & CSS2 browsers */
  position: absolute;
  /* All these DIVs overlap */
}
div.tabs > div:target > div,
:target #Oost > div {
  position: absolute;
  /* All these DIVs overlap */
  z-index: -1;
  /* Raise it above the others */
}
#nationaal {
  left: 0;
  top: 1.3em;
  /* The top needs some calculation... */
  right: 0;
  /* Other sides flush with containing block */
  padding: 0.3em;
  /* Looks better */
  border: 0.1em outset transparent;
  /* 3D look */
  min-width: 300px;
}
table.ranking {
  border: 1px solid gray;
}
table.ranking th {
  border: 1px solid gray;
  text-align: center;
}
table.ranking td {
  border: 1px solid gray;
  text-align: right;
}
i.icon-link-ext::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}
.retry {
  display: flow;
  margin-top: 5px;
}
.box {
  display: flex;
  vertical-align: top;
}
.float {
  width: 45%;
  vertical-align: top;
}
.poulelabel {
  width: 10% !important;
}
/* Style the tab buttons */
.tablink {
  background-color: #f2f2f2;
  float: left;
  border: 1px solid #ccc;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  transition: 0.3s;
}
.tablink:hover {
  background-color: #8aff8a;
}
/* Style the active tab */
.tablink.active {
  background-color: green;
  color: white;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: 43px;
}
.tab-container {
  overflow: hidden;
  margin: auto;
  width: 100%;
  display: flow;
}
/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
  /* Hide captions */
  .carousel-caption {
    display: none;
  }
  input[type="text"] {
    width: inherit;
  }
  #divContact input[type="text"],
  #divContact textarea {
    width: inherit;
  }
}
@media screen and (min-width: 767px) {
  td {
    white-space: nowrap;
    font-size: 16px;
  }
}
@media screen and (min-width: 1600px) {
  .container {
    width: 1800px;
    max-width: none;
    /* background-color: azure;*/
  }
}