/* 
28-09-2018 : toegpast in header.php
12-12-2024 : BackToTop button toegevoegd 
4-1-2025 nieuwe menustructuur in header */

#balkOntw { background-color : #c0b6da; /*Paars*/ }
#balkTest { background-color : #E9EC4B; /*Geel*/ }
/*#balkTest { background-color : #CCFF00; /*Neon geel-groen*/ /*}*/
#balkDemo { background-color : #d0dab6; /*Licht groen*/ }
#balkProd { background-color : #9EB368; /*Groen*/ }

.header_breed section {
    position: fixed;
    top: 0%;
 /*   padding: 0px;*/
    padding: 12px;
/*    left: 0%; right: 0; /* is nodig na position : sticky om element te centreren bron : https://stackoverflow.com/questions/2005954/center-a-positionsticky-element */
    left: .5%;
    width: 100%;
   /* height: 60px;*/
    height: 37px;
    font-size: 30px;
    background-color: #A6C6EB; /*Blauw*/
    z-index: 1;
}

.header_breed img {
    position: fixed;
    /*left: 14px; */ right: 4px;
    top: 1.5px;
    width: 175px;
    height: 57px;
    z-index: 1;
}

.header_smal {
    position: fixed;
    top: 47px;
    padding: 0;
    left: .5%; right: 0; /* is nodig na position : sticky om element te centreren bron : https://stackoverflow.com/questions/2005954/center-a-positionsticky-element */
    width: 99.5%;
    height: 25px;
    font-size: 14px;
    z-index: 1;
    /*background-color: #9EB368; Deze kleur wordt bepaald in header.php */ 
}

ul {
    list-style-type: none; /* geen bullets bij element <li> */
}

.header_smal li {
  float: left; /* Dit zorgt ervoor dat de menu-opties naast elkaar worden getoond i.p.v. onder elkaar */ 
}

#rechts_uitlijnen {
    display: block;
    padding: 1px;
    float: right;
}

#table1 {
    width: 95%;
    border: 0px solid #A6C6EB;
    left: 20px;
}


/*
.dropdown {
  position: relative;
  display: inline-block;
  padding: 5px 25px;
}*/

.dropdown {
  position: relative;
  padding: 5px 15px; /* hoogte van boven in de groene balk en ruimte tussen 2 menu-items */
}

.nested-dropdown {
    padding: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #9EB368; /*#f9f9f9;*/
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 10px 10px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a:hover {
    background-color: #b5cc7a;
    padding: 5px 2px;
    /*font-size: 16px;*/
}

.dropdown-content-smal {
  display: none;
  position: absolute;
  background-color: #9EB368; /*#f9f9f9;*/
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 10px 10px;
  z-index: 1;
}

.dropdown:hover .dropdown-content-smal {
  display: block;
}

.dropdown-content-smal a:hover {
    background-color: #b5cc7a;
    padding: 5px 2px;
    /*font-size: 16px;*/
}

.dropdown-content-breed {
  display: none;
  position: absolute;
  background-color: #9EB368; /*#f9f9f9;*/
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 10px 10px;
  z-index: 1;
}

.dropdown:hover .dropdown-content-breed {
  display: block;
}

.dropdown-content-breed a:hover {
    background-color: #b5cc7a;
    padding: 5px 2px;
    /*font-size: 16px;*/
}

.dropdown2 {
  display: relative;
}

.dropdown-content2 {
  display: none;
  position: absolute;
  background-color: #9EB368; /*#f9f9f9;*/
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 10px 10px;
  z-index: 1;
}

.dropdown2:hover .dropdown-content2 {
  display: block;
}

.dropdown-content2 a:hover {
    background-color: #b5cc7a;
    padding: 5px 2px;
    /*font-size: 16px;*/
}

/* BackToTop button css 
 bron : https://www.wpromotions.eu/nl/hoe-een-scroll-to-top-knop-toevoegen-aan-website-in-webnode/ */
#scroll {
    position:fixed;
    right:10px;
    bottom:80px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#A6C6EB; /* #3498db;*/
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
#scroll span { /* element id 'scroll' zit in header.php */
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#scroll:hover { /* element id 'scroll' zit in header.php */
    background-color:#9EB368; /*#e74c3c;*/
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
/* Einde BackToTop button css */

/* Sortering css */
thead th span.icon-arrow { /* Verwijzing naar html-element thead -> html element th -> html element span met class naam icon-arrow */
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    color: white;
    border-radius: 50%; /*Afronding van de hoeken van een vierkant. 50% is tot een cirkel */
    border: 1.4px solid transparent;

    text-align: center;
    font-size: 1rem;

    margin-left: .5rem;
   /* transition: .2s ease-in-out;*/
}

thead th.active span.icon-arrow { /* Verwijzing naar html-element thead -> html element th met class naam active en tevens Verwijzing naar html-element thead -> html element span met class naam icon-arrow */
   border: 1.4px solid #9EB368;
   color: #9EB368;

}

thead th.asc span.icon-arrow { /* Verwijzing naar html-element thead -> html element th -> html element span met class naam icon-arrow */
   transform: rotate(180deg);

}
/* Einde Sortering css */