/*
Gebruikte kleuren:
Groen:       #C7D300  (button, underline)
Lichtblauw:  #0086A6  (pijlen)
Donkerblauw: #000000  (tekst kopjes)    
Donkergrijs: #000000  (tekst)
Lichtgrijs:  #000000  (tekst)
    */

:root {
--RHGreen: #C7D300;
--RHLightGrey: #cccccc; /*was #a6a6a6;   ook gebruikt: #999999*/
--RHGrey: #4b4b4b;
--RHLightBlue:#1ac6ff;    /*bij wgeenblok:#01A7D1*/  /*te hard blauw #00ccff;*/
--RHDarkBlue:#0086A6;
}

/*in de CSS worden de variabele kleuren voorafgegaan door dezelfde kleurinstellingen met een "harde" kleur. Dit ivm IE die geen variabelen ondersteunt*/

@font-face { font-family: TheSansOsF-Black; src: url('fonts/TheSansOsF-Black.otf'); } 
@font-face { font-family: TheSansOsF-BlackItalic; font-weight:normal; src: url('fonts/TheSansOsF-BlackItalic.otf');}
@font-face { font-family: TheSansOsF-Bold; font-weight: bold; src: url('fonts/TheSansOsF-Bold.otf');}
@font-face { font-family: TheSansOsF-BoldItalic; font-weight: bold; src: url('fonts/TheSansOsF-BoldItalic.otf');}
@font-face { font-family: TheSansOsF-ExtraBold; font-weight: bold; src: url('fonts/TheSansOsF-ExtraBold.otf');}
@font-face { font-family: TheSansOsF-ExtraBoldItalic; font-weight: bold; src: url('fonts/TheSansOsF-ExtraBoldItalic.otf');}
@font-face { font-family: TheSansOsF-ExtraLight; font-weight:lighter; src: url('fonts/TheSansOsF-ExtraLight.otf');}
@font-face { font-family: TheSansOsF-ExtraLightItalic; font-weight: lighter; src: url('fonts/TheSansOsF-ExtraLightItalic.otf');}
@font-face { font-family: TheSansOsF-Light; font-weight: bold; src: url('fonts/TheSansOsF-Light.otf');}
@font-face { font-family: TheSansOsF-LightItalic; font-weight: bold; src: url('fonts/TheSansOsF-LightItalic.otf');}
@font-face { font-family: TheSansOsF-Plain; font-weight: bold; src: url('fonts/TheSansOsF-Plain.otf');}
@font-face { font-family: TheSansOsF-PlainItalic; font-weight: bold; src: url('fonts/TheSansOsF-PlainItalic.otf');}
@font-face { font-family: TheSansOsF-SemiBold; font-weight: bold; src: url('fonts/TheSansOsF-SemiBold.otf');}
@font-face { font-family: TheSansOsF-SemiBoldItalic; font-weight: bold; src: url('fonts/TheSansOsF-SemiBoldItalic.otf');}
@font-face { font-family: TheSansOsF-SemiLight; font-weight: bold; src: url('fonts/TheSansOsF-SemiLight.otf');}
@font-face { font-family: TheSansOsF-SemiLightItalic; font-weight: bold; src: url('fonts/TheSansOsF-SemiLightItalic.otf');}

/*Ander font voor de IE-gebruikers*/
@font-face {font-family: 'Roboto', sans-serif;}
@font-face {font-family: 'Overpass', sans-serif;}



html, body  
{
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    /*font-family: TheSansOsF-Plain;*/
    font-family: Roboto;
    color:#4b4b4b;
    color: var(--RHGrey);
   
}

#map {
    padding: 0px;
    top:0px;
    left:0px;
    width:100%; 
    height:100%; 
    border:0px;
    display:block;
}

#popup 
{
    padding: 0px 0px 0px 10px;  /*was 60*/
    top:0px;
    left:0px;
    width:99%; 
    height:100%; 
    border:0px;
    display: none;
    z-index: 10;
    margin: 0;
}

#map_zoom_slider {
    border-radius:0px;
    border-color:#cccccc;
    border-color:var(--RHLightGrey)
}
.esriSimpleSliderIncrementButton{
    color:#1ac6ff;
    color:var(--RHLightBlue);
    
}

.esriSimpleSliderVertical .esriSimpleSliderIncrementButton{
    border-bottom:#cccccc;
    border-bottom:1px solid var(--RHLightGrey);
}

.esriSimpleSliderDecrementButton {
    color:#1ac6ff;
    color:var(--RHLightBlue)
}
#downloadtekst 
{
    margin: 50px;
    padding: 50px;
}

#Kaartpopup {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 500px;
    height: 250px;
    
    background-color: white;
    color: var(--RHDarkGey);   
    
    z-index:10;
    cursor:pointer;
 }

#Toelichting{
    position:relative;
        top:0px;
        left:0px;
    width:500px;
    height:25px;
    background-color:#0086A6;
    background-color: var(--RHDarkBlue);
    color: white;
    display: inline-block;
    padding-left:15px;
    padding-top:2px;
}

#Toelichtingtekst{
    /*position:relative;
        top:0px;
        left:0px;*/
    width:485px;
    height:225px;
    background-color: white;
    color: var(--RHDarkGey);   
    display: inline-block;
    padding:15px;
    overflow-y: auto;
    overflow-x: hidden;
}



#form1 
{
    padding: 0px;
    width:100%; 
    height:100%; 
}


#imageDiv
{
    float:left; 
    width: 100%; 
    height: 100%;
    display:none
}

#header
/*{
    /*background: linear-gradient(to right, #010180, green); Standard syntax 
	background: linear-gradient(to right, #805D89, #EED6F4);
	height: 32px;
	width: 100%;
	z-index: 999; *
	position: absolute;
    top: 10px;
	box-shadow: 0px 8px 5px rgba(200,200,200,0.7);
	color: white;
}*/

#header a
{
	color: #FFFFFF;
	text-decoration:none;
	vertical-align:top;
	line-height: 32px;
} 

#edgeItems
{
    position: absolute;
    left: 0px;
	height: 100%;
    z-index: 99;
	width: 250px;
	background-color: #FFFFFF;
    color: #a6a6a6;    /*hier de kleuren van alle fonts In de TOC instellen*/;
  
   
    
}

#DawPubHeader {
    
	height: 40px;
	width: 235px;
    padding-top: 10px;
    padding-left:15px;
	background-color: #0086A8;
    
}

#TOCon
{
     position: absolute;
	height: 35px;
	width: 40px;
    padding-top: 15px;
    padding-left:20px;
	background-color: #0086A8;
    display: none;
    z-index:99;
    
}
.dawaco-publisher {
    position: relative;
    top:-49px;
    left:33px;
	height: 16px;
	width: 155px; /*width: 146px;   bij gebruik van theSans*/
	color: #FFFFFF;
	/*font-family: TheSansOsF-Plain;*/
    font-family: Roboto;
	font-size: 16px;
	font-weight: 200;
	line-height: 19px;
	text-align: center;
    display:inline-block;
}

.circle { 
        width:0%;
        padding:7px 7px;
        margin:0 auto;
        border:2px solid #a1a1a1;
        border-radius:14px;
        background-color:#C7D300;
        display: inline-block;
        position: relative;
        top: 4px;
        }

#TOCButton
{
    position: relative;
    top:-35px;
    left:45px;
    display:inline-block;
}

#Dawlogo
{
    position: relative;
    display:inline-block;
}

#selSoortThemaContainer{
    border-spacing:2px 0;
    position: relative;
    left:13px;
    font-family:Roboto;
    /*font-family: TheSansOsF-Plain;*/
    color:#4b4b4b;
    color: var(--RHGrey);

}


#rbSoortKaartContainer{
    /*padding-top:20px;*/
    max-height:105px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size:11pt;

}

#rbSoortGegevensContainer{
    /*padding-top:20px;*/
    max-height:56px;
    overflow-y: auto;
    overflow-x:hidden;
    font-size:11pt;
}



.TCOHeaders
{
    position:relative;
    left:13px;
	height: 34px;
	width: 98px;
	color: #00567D;
    font-family: Roboto;
	/*font-family: TheSansOsF-Plain;*/
	font-size: 16px;
	font-weight: 600;
	line-height: 34px;
}

.PageTitle
{
    position:relative;
	height: 28px;
	/*width: 450px !important;*/
	color: #00567D;
    font-family:Roboto;
	/*font-family: TheSansOsF-Plain;*/
	font-size: 32px;
	font-weight: 600;
	line-height: 34px;
    margin-top:10px;
    margin-bottom:35px
}

.PageTitle::first-letter{
    border-bottom-color: #C7D300;
    border-width:5px;
    border-bottom-style: solid;
}




/*#basemapMenuContainer
{
   position:absolute;
   top: 20px;
   left:300px;
   z-index:10;
}*/

#BasemapMenu{
    position:absolute;
    left:270px;
    top:15px;
    height: 45px;
	width: 170px;
	border: 2px solid rgba(153,153,153,0.5);
	background-color: #FFFFFF;
    z-index:10;
}

.line {
    position:relative;
	box-sizing: border-box;
	height: 35px;
	width: 2px;
	border: 1px solid #999999;
	opacity: 0.3;
    display: inline-block;
    margin-top:5px;
}

/*.kaart {
	position:relative;
    top:10px;
    left:14.5px;
    height: 26px;
	width: 38px;
	color: #01A7D1;
	font-family: TheSansOsF-Plain;
	font-size: 16px;
	line-height: 26px;
 
}*/


.optie{
    position:relative;
    color:#cccccc;
    color:var(--RHLightGrey);
    font-family: Roboto;
	/*font-family: TheSansOsF-Plain;*/
	font-size: 16px;
	line-height: 26px;
    border-bottom-color:#cccccc;
    border-bottom-color: var(--RHLightGrey);
    border-width:3px;
    border-bottom-style: solid;
    padding-bottom:7px;
    padding-left:10px;
    padding-right:10px;
    display:inline-block;
    cursor:pointer;
}

.active, .optie:hover {
    color:#1ac6ff;
    color:var(--RHLightBlue);
    border-bottom-color:#1ac6ff;
    border-bottom-color: var(--RHLightBlue);
}



#kaart {
    top:-11px;
    height: 26px;
	width: 38px;
}

#wegen {
    top: -11px;
    height: 26px;
    width: 85px;
}

#lucht {
    top:-11px;
	height: 26px;
	width: 77px;
}



hr
{
	border: 0;
	color: #aaa;
	background-color: #aaa;
	height: 1px;
}

#placeholder
{
	height: 60px;
	}
	
#metalinks
{
	position: absolute;
	bottom: 5px;
	
}


#meetpuntnummer
{
	font-weight: bold;
	}

.img_fullwidth
{
    width: 100%;
}

#graphdiv .dygraph-legend {
    right: 130px;
    left: auto !important;
    top: -50px !important;   /*of -30*/
}

#graphLegend
{
    position: absolute;
    right: 25px;
    top:128px;
    text-align: left; 
    margin-left:1%;
    border:1px solid #cccccc;
    border:1px solid var(--RHLightGrey);
    background-color: white;
    padding:10px;
    z-index:1;
    
}
#graphLegendButton{
    color:#1ac6ff;
    color:var(--RHLightBlue);
    position:absolute;
    right:25px;
    top:76px;
    cursor:pointer;
    padding-right:25px;
    
    background: url(images/arrow-desc.svg) no-repeat;
    background-position-x:61px;
    background-position-y:6px;
    background-size:19px;
    
}

#HidelegendButton{
    color:#1ac6ff;
    color:var(--RHLightBlue);
    position:relative;
    left:150px;
    width:22px;
    cursor:pointer;
    top:2px;
    display:inline-block;
    background: url(images/arrow-gr-asc.svg) no-repeat;
    background-size:19px;
    border:none;
    
}

#ShowlegendButton{
    color:#1ac6ff;
    color:var(--RHLightBlue);
    position:relative;
    left:150px;
    width:22px;
    cursor:pointer;
    top:2px;
    display:inline-block;
    background: url(images/arrow-gr-desc.svg) no-repeat;
    background-size:19px;
    border:none;
    
}


/* Tooltip container 
.tooltip {
    /*position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: white;
    color: #4b4b4b;
    text-align: center;
    font-size:10pt;
    padding: 5px 0;
    border-radius: 6px;
    border:none !important; 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}





/*uppercase vanuit de code in de applicatie doen*/
.Tabeltitle{
    font-family: Roboto;
/*font-family: TheSansOsF-Plain;*/
font-size:15pt;


}


#graphInstruction{
    color:#cccccc;
    color:var(--RHLightGrey);
}


table {
    width:100%;    
    border-collapse: separate;
    border-spacing: 15px 0;
    font-family: Roboto;
    /*font-family: TheSansOsF-Plain;*/
}
/*td {
   /*column-gap:10px;
}*/

th {
   /*padding-left:20px;*/
   padding-right:20px;
   font-family: Roboto;
   /*font-family: TheSansOsF-Plain;*/
   font-size:11pt;
   
   /*font-type:*/
   color: #00567D;   
   border-bottom: 1px solid grey;
      text-align: left;
      padding-bottom:5px;
   
}

.dijitEditorIcon {
  background-image: url(images/left-arrow.svg);
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  text-align: center;
}

.imgbutton{
    
    position: relative;
    cursor:pointer;
    left:-4px;
    margin-bottom:10px;
}

/*.allbtn
{
    color: #C7D300;
}*/


.allbtn{
    font-family: Roboto;
    /*font-family: TheSansOsF-Plain;*/
     background-color: #C7D300;
    border: none;
    color: white;
    padding: 15px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor:pointer;
    background-size:30px;
    position: relative;
    left: -3px;
}

#zoekblok
{
    Width:95%;
    left:15px;
    margin-bottom:10px;
}

.zoekbox{
    font-family: Roboto;
    /*font-family: TheSansOsF-Plain;*/
    border:1px solid #aaa;
    height:44px;
    width:50%;
    
    font-size:14px;
    text-indent: 15px;
}


.image{position:relative;
       top:3px;
}

.button{
    font-family: Roboto;
    /*font-family: TheSansOsF-Plain;*/
    background-color: #C7D300;
    border: none;
    color: white;
    padding: 15px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor:pointer;
        
    background: url(images/arrow-right-white.svg) no-repeat;
    background-position-x:8px;
    background-position-y:8px;
    background-size:30px;
}

.buttoncontainer{
    margin-top:10px;
    margin-bottom: 10px;
    position: relative;
    
    width:230px;
    height:50px;
    background-color: #C7D300;
}

.downlbutton{
        font-family: Roboto;
    /*font-family: TheSansOsF-Plain;*/
    background-color: #C7D300;
    border: none;
    color: white;
    padding: 15px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor:pointer;
        
    /*background: url(images/arrow-right-white.svg) no-repeat;
    background-position-x:8px;
    background-position-y:8px;
    background-size:30px;*/
}



.ResponseBlock {
    width: 98%;
    margin-left:1%;
    margin-right:1%;
    
}

#FolderFilter
{
    float: left;
    display: inline-block;
    Width: 28%;
    Height: 600px;
    margin-right: 2%;
    
}

#Downloadgrid {
    float: left;
    display: inline-block;
    Width: 70%;
   
}

#rblDownloadTypes
{
    border-spacing: 15px 10px;
    /*color:red;*/

}

/*.rdbtn
{
    position: absolute;
	opacity: 0;
	visibility: hidden;
	&:checked + .mylabel {
		color: #009688;
		&::before {
			margin-right: 2rem;
			border: 0.5rem solid #009688;
			background: #fff;
		}
	}*
    /*-webkit-appearance: none;
	background-color: black;nvt
	border: 1px solid #cacece;
	/*box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);*/
	/*padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}*/

/*.verwijderen
{
    /*padding-bottom: 8px;
    
	color: #a6a6a6;
	font-size: 12pt;
}*/


 .myradio  {
    color:#4b4b4b;
	color: var(--RHGrey);
	height:25px;
}

 .verwijderen{
     color:#4b4b4b;
	color: var(--RHGrey);
	height:25px;
}

 


 #meetpuntnummer {
    position: relative;
    
    left:12px;
    }

 
.graphLabel{
    position:relative;
    top:4px;
}

 .legend
 {
         font-family: Roboto;
     /*font-family: TheSansOsF-Plain;*/
	/*padding-bottom: 8px;*/
    padding-left:10px;
    color:#4b4b4b;
	color:var(--RHGrey);
	font-size: 11pt;
    height:30px;
}



.legendlabel {
    position: relative;
    display:block;
    left: 30px;
    top:-18px;
    }




 







a{text-decoration: none;
  position:relative;
  top:-3px;
  color:#1ac6ff;
  color: var(--RHLightBlue);
}


input[type='checkbox']{
    display:none;
}
input[type='checkbox'] + label {
    font-family:Roboto;
    /*font-family: TheSansOsF-Plain;*/
    display:inline-block;
    width:19px;
    height:19px;
    background:url(images/checkbox_default.svg) no-repeat;
    cursor: pointer
}

input[type='checkbox']:checked + label {
    background:url(images/checkbox.svg) no-repeat;
}

/*XXX onderstaande is specifiek voor de Dwonload pagina. Hier ijn de radiobuttons aangemaakt vanuit ASPX*/
input[type='radio']{
    display:none;
}
input[type='radio'] + label {
    font-family:Roboto;
    /*font-family: TheSansOsF-Plain;*/
    display:inline-block;
   
    height:19px;
    background:url(images/radio_default.svg) no-repeat;
    cursor: pointer;
        padding-left:30px;
}

input[type='radio']:checked + label {
    background:url(images/radio_checked.svg) no-repeat;
    
}


/*Onderstaande is voor de Radiobuttons welke worden gegenereerd in de Dijit-code*/
.rdbtn + label {  
    font-family:Roboto;
    /*font-family: TheSansOsF-Plain;*/
    display:inline-block;
    height:19px;
    background:url(images/radio_default.svg) no-repeat;
    cursor: pointer;
}

.rdbtn{
    display:none;
}
.dijitChecked + label
{
    background:url(images/radio_checked.svg) no-repeat;
    
}

.mylabel {
    position: relative;
    width:15px;
    left:20px;
   
    }

.mydivlabel {
    position: relative;
    left:19px;
    margin-left:8px;
    width:180px;
    display: inline-block;
    top:-6px;
    }

 .myspan {
    position: relative;
    margin-left:30px;
    }


/*.rectangleWegen {
    position:relative;
    top:-14px;
    left:-28px;
	height: 3px;
	width: 110px;
	background-color: #999999;
    display:inline-block;
}*/
/*.rectangleLucht {
    position:relative;
    top:-14px;
    
	height: 3px;
	width: 115px;
	background-color: #999999;
    display:inline-block;
}*/

/*.rectangleKaart {
    position:relative;
    top:-14px;
	height: 3px;
	width: 65px;
	background-color: #01A7D1;
    display:inline-block;
}*/
.pager a
    {
    font-family:Roboto;
    /*font-family: TheSansOsF-Plain;*/
	    border: 1px solid #EDF5FF;
	    color:  #0086a8 !important;
	    text-decoration: none;
	    padding: 8px 16px;
        border-radius:4px;
        font-size:16px;
        
        
}
.pager span
{
	background-color: #0086a8;
	border: 1px solid #DBEAFF;
	color: #FFFFFF;
	padding: 8px 16px;
    border-radius:4px;
    
    }


    .pager a:hover
    {
        background-color: #DDD;
        
    }

          }