#archiefbeheer {
	height: 500px;
}

#kaartlegenda {
    margin-top: 20px;
}

#kaartlegenda table td {
    cursor: pointer;
}

.container_archiefbeheer {
max-width: 1140px;
	margin: 0 auto;
}

.map-container {
    width: 100%;
    margin-bottom: 2em;
    position:relative;
}

.mapHandlers {
	float: left;
	width: 100%;
	background: #f4f4f4;
    height: 5em;
}

.mapselect.period {
    visibility: hidden;
}

span.mapLegend.color {
	width:10px;
	height:10px;
	display:block;
}

.mapLegend.color1 {
	background-color:#00B050;
}
.mapLegend.color2 {
	background-color:#F79646;
}
.mapLegend.color3 {
	background-color:#FF0000;
}

.mapLegend.color4 {
	background-color: rgb(165,165,165);
}

/* FONT AWESOME NAV MAP */

.mapresetzoom {
    width: 2.5em;
    height: 2.4em;
    margin-top: 1.2em;
    margin-left: .7em;
    border: 1px solid #6e6e6e;
    border-radius: 4px;
}

.mapresetzoom .resetzoom {
    width: 2.5em;
    height: 2.2em;
}

.fa-search-minus:before {
    font-size: 1.5em;
}

.mapsearch, .mapselect {
    margin: 0 .5em 1em 0;
    padding: .5em 0 0 0px;
    height: 2em;
    width: 50%;
    border: 1px solid #6e6e6e;
    border-radius: 4px;
}

.mapselect.indicator {
	width: 100%;
}

.mapselect.variable {
    margin-left: 15px;
}

.mapsearch .searchresults, .mapselect .mapselectlist {
    margin-top: 10px;
    width: 98.2%;
}

.mapsearch .searchresults .searchitem:hover, .mapselect .mapselectlist .selectitem:hover {
    background-color:#f4f4f4;
}

.custommaphover {
    stroke-width: 5px !important;
    fill-opacity: 0.4;
}

g.map path {
    cursor: pointer;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #000;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #000;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #000;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #000;
}

.yearsContainer {
    position: absolute;
    margin-top: 70px;
    background: #f4f4f4;
    top: 0;
}

button.yearbutton {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
}

.year {
    font-size: 25px;
    padding: 25px;
    cursor: pointer;
}
.year.selected {
    background: #d4d4d4;;
    border-left: 4px solid #831625;
}

td.even {
    margin-right: 2em;
    display: inline-block;
}

.footer {
    background-color: #404040;
    height: 100px;
    max-width: 100%;
    margin: 0 auto;
}

.footer p{
max-width: 1140px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    padding: 2.8em;
}

.footer a{
    color: #fff;
}
	
	
	#logo {
        margin: 15px 20px 5px 0px;
    }
    .titel h1 {
        padding: 10px 15px;
    }
    nav a {
        padding: 5px 32px 5px 15px;
    }
    #archiefbeheer {
        display: inline-block;
        width:550px;
    }
    
    #archiefbeheer_taart {
        float: right;
        width: 550px;
        height: 300px;
    }
    
    #archiefbeheer_taart path {
        stroke: white;
        stroke-width: 5px;
    }
	
	#archiefbeheer_tabel {
		float: right;
		width: 550px;
		height: 200px;
		overflow-y: auto;
		position: absolute;
		bottom: 0;
		right: 0;
		margin-bottom: 50px;
		margin-right:20px;
		font-size:0.85em;
	}
	
	#archiefbeheer_tabel table {
		width: 100%;
		border-collapse:collapse;
	}
	
	#archiefbeheer_tabel tr:nth-child(2n) {
	  background-color: #E7E9EB;
	}
	
	#archiefbeheer_tabel th {
		text-align: right;
		width: 50%;
	}
	#archiefbeheer_tabel td {
		max-width: 25%;
		padding-top: 4px;
		padding-bottom:4px;
	}
	#archiefbeheer_tabel td:nth-child(2) {
		padding-left:10px;
	}
	#archiefbeheer_tabel td:nth-child(3) {
		text-align: right;
	}
	
	
	#archiefbeheer_tabel a {
		color: black;
	}
    
    .mapHandlers {
        float: none;
        height: auto;
		display: flex;
    }
    .mapselect.variable {
        margin-left: 0;
    }
    .mapsearch, .mapselect {
        display: inline-block;
        margin: 0 .5em 1em 0px;
        padding: 10px 0 5px 10px;
        height: 43px;
        border: 1px solid #6e6e6e;
        border-radius: 4px;
        box-sizing: border-box;
    }
	
	.mapselect:first-child {
		margin-left: 15px;
	}
	.mapselect:last-child {
		margin-right: 15px;
	}
    
    .mapselected {
		max-width: 90%;
	}
	
	.inputareasearch {
		width: 90%;
	}
	
	.mapselected span {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 100%;
		display: inline-block;
		height: 100%;
		vertical-align: bottom;
	}
	
    #kaartlegenda table {
        margin:auto;
    }
    
    g.slices {
        cursor: pointer;
    }
    
    rect.labelBG {
        opacity: 0.8!important;
    }
    
    .selectContainer {
        position: relative;
        width: 100%;
        margin-top: 0px;
        box-sizing: border-box;
    }
    
    .map-wrapper {
        padding: 15px;
        border: 1px solid #831625;
        border-radius: 4px;
    }
    
    @media (max-width: 1200px) {
        #archiefbeheer {
            width: 500px;
        }
        
        #archiefbeheer_taart {
            width: 500px;
        }
    }
    
    @media (max-width: 1100px) {
        #archiefbeheer {
            width: 450px;
        }
        
        #archiefbeheer_taart {
            width: 450px;
        }
    }
    
    @media (max-width: 1000px) {
        #archiefbeheer {
            width: 400px;
        }
        
        #archiefbeheer_taart {
            width: 400px;
        }
    }
    
    @media (max-width: 900px) {
        #archiefbeheer {
            width: 350px;
        }
        
        #archiefbeheer_taart {
            width: 350px;
        }
    
    }
    
    @media (max-width: 800px) {
        #archiefbeheer {
            width: 300px;
        }
        
        #archiefbeheer_taart {
            width: 300px;
        }
    
    }
    
    @media (max-width: 700px) {
        #archiefbeheer {
            width: 250px;
        }
        
        #archiefbeheer_taart {
            width: 250px;
        }
        .mapsearch, .mapselect {
            width: 16em;
        }
    }
    
    
    @media (max-width: 600px) {
        #archiefbeheer {
            width: 200px;
        }
        
        #archiefbeheer_taart {
            width: 200px;
        }
    }
    
        @media (max-width: 500px) {
        #archiefbeheer {
            width: 100px;
        }
        
        #archiefbeheer_taart {
            width: 100px;
        }
    }