#mapn-map {
    width: 100%;
    height: 500px;
    box-sizing: border-box;
}
#mapn-informations,
#mapn-filters {
    background: white;
    border-radius: 5px;
    width: 230px;
}
#mapn-controls{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#mapn-filters,  #mapn-informations {
    width: auto;
    height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#mapn-informations {
    right: auto;
    left: 0;
}
#mapn-filters h4, #mapn-informations h4{
    display: block;
    font-size: 24px;
    margin: 0;
    margin-bottom: 0;
    margin-right: 12px;
}
#mapn-informations small {
    color: #999;
}
#mapn-filters input {
    display: none;
}
#mapn-filters input:checked + label {
    background: #000;
    color: #FEFEFE !important;
}
#mapn-filters input:checked + label.both {
    background: #777;
    background:repeating-linear-gradient(45deg, #50aabf, #50aabf 10px, #6e9b3b 10px, #6e9b3b 20px);
}
#mapn-filters input:checked + label.ZPS {
    background: #50aabf;
}
#mapn-filters input:checked + label.ZSC {
    background: #6e9b3b;
}
#mapn-filters label {
    text-transform: uppercase;
    display: inline-block;
    border: 1px solid black;
    padding: 5px 12px;
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    padding: 1px 12px;
    left: 0;
    float: left;
    cursor: pointer;
    transition: background .2s;
}
#mapn-filters label.both {
    border-color: #777;
    border-right: 1px solid #777;
    color: #333;
    border-radius: 5px 0 0 5px;
}

#mapn-filters label.both:hover {
    background: rgba(119, 119, 119, 0.2);
    background:repeating-linear-gradient(45deg, rgba(80, 170, 191,.2), rgba(80, 170, 191,.2) 10px, rgba(110, 155, 59,.2) 10px, rgba(110, 155, 59, .2) 20px);
}
#mapn-filters label.ZPS {
    border-color: #50aabf;
    color: #50aabf;
    border-left: 1px solid #50aabf;
    border-right: 1px solid #50aabf;
}
#mapn-filters label.ZPS:hover {
    background: rgba(80, 170, 191, 0.2);
}
#mapn-filters label.ZSC {
    border-color: #6e9b3b;
    border-left: 1px solid #6e9b3b;
    color: #6e9b3b;
    border-radius: 0 5px 5px 0;
}
#mapn-filters label.ZSC:hover {
    background: rgba(110, 155, 59, 0.2);
}