:root {
   --text-color-standaard: #1B2463;
   --text-color-annotaties: #1B2463;
   --text-color-tekst: #39870C;
   --background-color-standaard: #EDEFFF;
   --background-color-annotaties: #FAF9F6;
   --background-color-annothover: #FFE5B4;
   --border-color-annotbox: #FF6A00;
   --text-color-annotbox: #FFFFFF;
   --hilite-color-annotaties: #A3ADFF;
   --header-color-tekst: #DAEFE0;
   --top-panel-height: 108px;
   --menu-offset: 0px;
   --tab-menu-offset: 112px;
   --top-panel-offset: 50px;
   --left-panel-width: 40%;
   --hr-height: 0px;
   --tab-hover-background: #ccddff;
   --tab-active-background: #bbccee;
   --background-color-owregel: #D7E8D7;
   --background-color-owregelhover: #D7E8D7;
}

body {
   color: #222222;
   font-family: 'Segou UI', Arial, Helvetica, sans-serif;
   font-size: 14px;
}

div, ol, ul, tr, th {
   line-height: 1.2em;
   margin-bottom: 1.2em;
}

.compact {
   margin-bottom: 0;
}

table {
   table-layout: auto;
   line-height: 1.2em;
   font: inherit;
}

#map {
   height: calc(100% - var(--top-panel-offset) - 4px);
   margin: 4px;
}

#ambtsgebied {
   background-image: url('img/ambtsgebied.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#zoomExtents {
   background-image: url('img/zoomAll.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#zoomIn {
   background-image: url('img/zoom-in.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#zoomOut {
   background-image: url('img/zoom-out.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#kaartMax {
   background-image: url('img/kaart-max.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#kaartStd {
   background-image: url('img/kaart-std.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#kaartMin {
   background-image: url('img/kaart-min.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#kaartNone {
   background-image: url('img/kaart-none.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#navBack {
   background-image: url('img/pijlBLinks.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#navForward {
   background-image: url('img/pijlBRechts.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#navTop {
   background-image: url('img/pijlBop.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#navBottom {
   background-image: url('img/pijlBNeer.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 28px 28px;
}

#showStructuur {
   background-image: url('img/hierarchy.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 26px 26px;
}

#showTekst {
   background-image: url('img/hoofdletter.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 26px 26px;
}

#annotToggle {
   background-image: url('img/kaart-label.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 26px 26px;
}

a {
   color: var(--text-color-annotaties);
   text-decoration: underline;
   display: inline-block;
}

   a:hover {
      background-color: var(--hilite-color-annotaties);
      color: var(--text-color-annotaties);
      text-decoration: underline;
   }

h6 {
   font-size: 1.0em;
   font-weight: bold;
   color: var(--text-color-tekst);
   margin: 12px 0 4px 0;
}

.panelTop {
   background-color: var(--background-color-standaard);
   color: var(--text-color-standaard);
   height: var(--top-panel-height);
   left: 0;
   margin: 0;
   overflow: hidden;
   position: fixed;
   top: 0;
   width: 100%;
}

.titel {
   padding-left: 12px;
   font-size: 32px;
   font-weight: bold;
   line-height: 8px;
}

.info {
   background-color: var(--background-color-standaard);
   color: var(--text-color-standaard);
   height: var(--top-panel-height);
   margin: 0;
   overflow: hidden;
   padding: 0 2px 0 0;
   position: fixed;
   right: 0;
   top: 0;
}

.infoTable {
   border: 0;
   font-size: 12px;
}

.infoItem {
   font-weight: bold;
   text-align: right;
}

.infovalue {
   padding-left: 6px;
}

.knoppenKaart {
   padding-left: 10px;
   height: 36px;
   width: -webkit-calc(var(--left-panel-width) - 20px);
   width: -moz-calc(var(--left-panel-width) - 20px);
   width: calc(var(--left-panel-width) - 20px);
   display: inline-block;
}

.knoppenTekst {
   padding-left: 10px;
   height: 36px;
   display: inline-block;
}

.separator {
   border: none;
   background-color: var(--text-color-annotaties);
   height: 30px;
   width: 3px;
   margin: 0 1px 0 1px;
   padding: 0;
}

.knop {
   border: none;
   background-color: var(--tab-hover-background);
   height: 30px;
   width: 30px;
}

   .knop:hover {
      border: none;
      background-color: var(--tab-active-background);
   }

.panelLeft {
   top: -webkit-calc(var(--top-panel-height) + var(--hr-height));
   top: -moz-calc(var(--top-panel-height) + var(--hr-height));
   top: calc(var(--top-panel-height) + var(--hr-height));
   height: -webkit-calc(100% - var(--top-panel-height));
   height: -moz-calc(100% - var(--top-panel-height));
   height: calc(100% - var(--top-panel-height));
   background-color: var(--background-color-annotaties);
   color: var(--text-color-annotaties);
   left: 0;
   overflow-x: hidden;
   padding-top: var(--menu-offset);
   position: fixed;
   width: var(--left-panel-width);
   z-index: 1;
}

.panelRight {
   top: -webkit-calc(var(--top-panel-height) + var(--hr-height) + var(--top-panel-offset));
   top: -moz-calc(var(--top-panel-height) + var(--hr-height) + var(--top-panel-offset));
   top: calc(var(--top-panel-height) + var(--hr-height) + var(--top-panel-offset));
   height: -webkit-calc(100% - var(--top-panel-height) - var(--hr-height) - var(--top-panel-offset));
   height: -moz-calc(100% - var(--top-panel-height) - var(--hr-height) - var(--top-panel-offset));
   height: calc(100% - var(--top-panel-height) - var(--hr-height) - var(--top-panel-offset));
   width: -webkit-calc(100% - var(--left-panel-width));
   width: -moz-calc(100% - var(--left-panel-width));
   width: calc(100% - var(--left-panel-width));
   background-color: white;
   overflow-x: hidden;
   padding-left: 0;
   padding-top: 0;
   position: fixed;
   right: 0;
   z-index: 1;
}

.kaart {
   left: 0;
   position: absolute;
   text-align: center;
   top: 16px;
   width: 100%;
}

.kaart-link {
   border: 0;
   background-color: var(--background-color-annotaties);
   font-style: normal;
   width: 100%;
   text-align: left;
}

.kaart-link-inline {
   border: 0;
   padding-left: 0;
   padding-right: 0;
   background-color: var(--background-color-annotaties);
   font-style: normal;
}

   .kaart-link:hover, .kaart-link-inline:hover {
      cursor: hand;
      background-color: var(--background-color-annothover);
   }

.kaart-link.active {
   background-color: var(--background-color-annothover);
}

.owregel-attr {
   background-color: var(--background-color-annotaties);
   margin-top: 0;
   margin-bottom: 0;
   padding-left: 5px;
   font-style: normal;
   text-align: left;
}

.toggleAnnots {
   background-color: white;
   background-image: url('img/kaart-label.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 22px 22px;
   border: none;
   color: var(--text-color-annotaties);
   cursor: pointer;
   display: inline-block;
   float: right;
   height: 32px;
   outline: none;
   padding: 10px 0px 8px 0px;
   width: 24px;
}

   .toggleAnnots:hover {
      background-color: var(--background-color-annothover);
   }

.opschrift {
   color: var(--text-color-tekst);
   font-size: 22px;
   font-weight: bold;
   padding: 4px 6px 4px 0px;
}

.kaart-titel {
   color: var(--text-color-annotaties);
   font-size: 22px;
   font-weight: bold;
   margin-top: 12px;
   margin-bottom: 12px;
   padding: 0;
   text-align: center;
   font-style: normal;
}

.soortdocument {
   font-size: 15px;
   padding: 4px 6px 4px 0px;
}

.toggleTekst {
   background-color: white;
   background-image: url('img/expanded.png');
   background-position: left;
   background-repeat: no-repeat;
   background-size: 12px 12px;
   border: none;
   color: var(--text-color-tekst);
   cursor: pointer;
   display: inline-block;
   font-size: 16px;
   font-weight: bold;
   height: 32px;
   margin: 0;
   outline: none;
   padding-left: 28px;
   text-align: left;
   width: -webkit-calc(100% - 28px);
   width: -moz-calc(100% - 28px);
   width: calc(100% - 28px);
}

   .toggleTekst:hover, .annotaties.active {
      background-color: var(--header-color-tekst);
   }

.content {
   background-color: white;
   display: block;
   margin-top: 0px;
   overflow: hidden;
   padding-left: 10px;
}

.indent1 {
   padding-left: 10px;
}

.lid {
   font-size: 14px;
}

.annotaties {
   color: var(--text-color-annotaties);
   display: none;
   margin-left: 0;
   margin-top: 0;
   overflow: hidden;
}

.annotatiesBox {
   margin-left: 10px;
   border: 2px solid var(--border-color-annotbox);
   padding-bottom: 5px;
   margin-bottom: 3px;
}

.annotatiesBoxHeader {
   font-size: 13px;
   padding-left: 5px;
   padding-top: 0;
   padding-bottom: 2px;
   margin-top: 0;
   margin-bottom: 2px;
   background-color: var(--border-color-annotbox);
   color: var(--text-color-annotbox);
}

ul.no-bullets {
   list-style-type: none;
   margin: 0;
   padding-left: 20px;
   padding-top: 4px;
   padding-bottom: 4px;
}

.tab {
   background-color: var(--background-color-standaard);
   border: none;
   overflow: hidden;
   position: fixed;
   top: var(--tab-menu-offset);
}

   .tab button {
      background-color: inherit;
      border: 4px solid white;
      border-right: none;
      border-top: none;
      color: var(--text-color-standaard);
      cursor: pointer;
      float: left;
      font-size: 16px;
      font-weight: bold;
      outline: none;
      padding: 14px 16px;
      transition: 0.3s;
   }

      .tab button:hover {
         background-color: var(--tab-hover-background);
      }

      .tab button.active {
         background-color: var(--tab-active-background);
      }

.tabcontent {
   border: 1px solid var(--background-color-standaard);
   border-top: none;
   display: none;
   padding: 4px 4px 4px 4px;
}