/* main block locations */

#main {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1em;
}

@media screen and (min-width: 800px) {
    #title {
        width: 100%;
        display: flex;
    }
    #title-name {
        width: 100%;
    }
    #language-selection {
        display: block;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 1em;
        margin-right: 1em;
        //font-size: 20px;
    }
    #title .icon {
        display: none;
    }


    #content-container {
        display: flex;
        width: 100%;
    }

    #site-table-of-contents {
        margin-top: 0.5em;
        width: 180px;
    }

    #content {
        margin-left: auto;
        margin-right: auto;
        padding-left: 3em;
        padding-right: 5em;
        max-width: 800px;
    }

    #content-document {
        padding-top: 2em;
    }

    #page-table-of-contents {
        float: right;
        width: 180px;
        margin-top: 0.5em;
    }

    #page-navigation {
        width: 100%;
        margin-top: 2em;
    }
    #page-navigation-prev {
        float: left;
    }
    #page-navigation-next {
        float: right;
    }
}

@media screen and (max-width: 800px) {
    #title {
        width: 100%;
        display: flex;
    }
    #title-name {
        width: 100%;
    }
    #language-selection {
        display: block;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 1em;
        margin-right: 1em;
        //font-size: 20px;
    }
    #title .icon {
        display: block;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 1em;
        margin-right: 1em;
        font-size: 20px;
    }

    #content-document {
        padding-top: 1em;
    }

    #site-table-of-contents {
        display: none;
        text-align: right;
        width: 100%;
    }

    #page-table-of-contents {
        display: none;
        width: 180px;
    }

    #page-navigation {
        width: 100%;
        margin-top: 1.5em;
    }
    #page-navigation-prev {
        float: left;
    }
    #page-navigation-next {
        float: right;
    }
}

/* General statements, applicable to all elements and all screens */

table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table thead tr {
    background-color: #01689b;
    color: #ffffff;
    text-align: left;
}
table th,
table td {
    padding: 12px 15px;
}
table tbody tr {
    border-bottom: 1px solid #dddddd;
}
table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
table tbody tr:last-of-type {
    border-bottom: 2px solid #01689b;
}



a:link {
  //color: #5bb0ff;
  color: #01689b;
}

a:visited {
  color: #01689b;
}

.site-table-of-contents ul {
  font-size: 14px;
  list-style: none;
  padding: 0;
  margin-top: 0.6em;
}

.site-table-of-contents ul li {
  margin-top: 0.6em;
}

.site-table-of-contents ul ul li {
  margin-top: 0.3em;
}

.site-table-of-contents ul ul {
  margin-top: 0.3em;
  padding-left: 1em;
}
.site-table-of-contents li a {
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.site-table-of-contents li.visible > a {
  color: #111;
  transform: translate(5px);
}
.site-table-of-contents-active {
  font-weight: bold;
}


.page-table-of-contents ul {
  font-size: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-table-of-contents ul li {
  margin-top: 0.5em;
}

.page-table-of-contents ul ul {
  padding-left: 2em;
}
.page-table-of-contents li a {
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.page-table-of-contents li.visible > a {
  color: #111;
  transform: translate(5px);
}

.page-navigation a {
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Dropdown Button for language selector*/
.ion-btn {
  background-color: #f2f2ff;
  border: 1px solid #b3d4fc;
  box-shadow: none;
  color: black;
  padding: 2px 8px 2px 8px;
  cursor: pointer;
  border-radius: 8px;
}

.language-selector:hover, .language-selector:focus {
  background-color: #white;
  border: 1px solid black;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

.flex {
  display: flex;
}
.ma-1 {
  margin-left: 1em;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}












.click-zoom {
  background-color: #ff00000;
  text-align: center;
  z-index: 10;
}

.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {
  transition: transform 0.25s ease;
  cursor: zoom-in;
  border: 1px solid #222222;
  border-radius: 4px;
  width: 64%;
  z-index: 10;
}

.click-zoom input[type=checkbox]:checked~img {
  transform: scale(280%);
  cursor: zoom-out;
  z-index: 10;
}

@media print {

  /* make sure the background image is printed */
  * {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
  }

  /* add the NPa logo */
  main {
    background: url(https://peppolautoriteit.nl/mod/pleio_template/logo.php) no-repeat;
    background-position: center top;
    position: absolute;
    top: 0px;
    padding-top: 0px;
    margin-top: 0px;
  }

  /* Add some margins, and extra room for the logo */
  article {
    margin-left: 4em;
    margin-right: 4em;
    position: relative;
    top: 40px;
  }

  div, p, img, h2 {
    page-break-inside: avoid;
  }

  /* remove navigation and other web-specific elements */
  #site-table-of-contents, #page-table-of-contents, #page-navigation, #title .icon {
    display: none;
  }
}