.box{
    -webkit-transition: width 0.2s, heigth 0.2s ;
    -moz-transition:    width 0.2s, heigth 0.2s ;
    -o-transition:      width 0.2s, heigth 0.2s ;
    transition:         width 0.2s, heigth 0.2s ;
    border: solid 1px #DDD ;/*#a3a3a3;*/
    margin-left: 15px;
    margin-right: 15px;
}

.box > .padding-l-r {
    padding: 0 15px 0 15px;
}

.box > .padding-l {
    padding: 0 0 0 15px;
}

.white-background{
    background-color: #FFFFFF;
}

svg#carte-benelux path{
    -webkit-transition: transform 0.2s;
    -moz-transition:    transform 0.2s;
    -o-transition:      transform 0.2s;
    transition:         transform 0.2s;
}

g#border-lines > path {
    fill: none;
    stoke: #337AB7 ;
    stroke-width: 1 ;
    -webkit-filter: none ;
    filter: none ;
    fill-opacity: 0;
    fill-rule: evenodd;
    stroke: #666;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-miterlimit: 4;
    stroke-dasharray: none;
    stroke-opacity: 1;
}

svg#carte-benelux path[class*='-']{
    -webkit-transition: stroke-width 0.2s, fill-opacity 1.5s, fill 0.2s ;
    -moz-transition:    stroke-width 0.2s, fill-opacity 1.5s, fill 0.2s ;
    -o-transition:      stroke-width 0.2s, fill-opacity 1.5s, fill 0.2s ;
    transition          stroke-width 0.2s, fill-opacity 1.5s, fill 0.2s ;
    cursor:pointer;
    fill: #66A7C4;
    fill-rule: evenodd;
    stroke: #666;
    stroke-width: 0.5;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-miterlimit: 4;
    stroke-dasharray: none;
    stroke-opacity: 1;
}

svg#carte-benelux path[class*='region-']:hover{
    -webkit-transition: stroke-width 0.2s, fill-opacity 0.2s, fill 0.2s;
    -moz-transition:    stroke-width 0.2s, fill-opacity 0.2s, fill 0.2s;
    -o-transition:      stroke-width 0.2s, fill-opacity 0.2s, fill 0.2s;
    transition          stroke-width 0.2s, fill-opacity 0.2s, fill 0.2s;
    fill:white;
    fill-opacity: 1 ;
    stroke:#337AB7 ;
    stroke-width: 2.5  ;
    -webkit-filter: drop-shadow( 5px 5px 5px rgba(0,0,0,0.25) );
    filter: drop-shadow( 5px 5px 5px rgba(0,0,0,0.25) );
}

svg#carte-benelux path.region-BE{
    fill-opacity: 0.7 ;
}

svg#carte-benelux path.region-NL{
    fill-opacity: 0.9;
}

svg#carte-benelux path.region-LU{
    fill-opacity: 0.5;
}

div#containerMap{
    position: relative;
    width:550px;
    height:580px;
    padding:0;
    margin:0 0 0 -100px;
}

div#containerMap div h4{
    font-size: 12pt;
    margin:0;
    float:left;
}

div#containerMap div#map-tooltip-NL,
div#containerMap div#map-tooltip-BE,
div#containerMap div#map-tooltip-LU {
    padding-left:5px;
    padding-right:5px;
    min-width:100px;
    text-align: center;
    font-weight:bold;
    position:absolute;
    display:block;
    cursor:pointer;
    -webkit-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.1);
    -moz-box-shadow:    3px 3px 3px 0 rgba(0,0,0,0.1);
    -o-box-shadow:      3px 3px 3px 0 rgba(0,0,0,0.1);
    box-shadow:         3px 3px 3px 0 rgba(0,0,0,0.1);
}

div.tooltip-content {
    display:flex;
    align-items: center;
    gap: 5px;
}

.tooltip-content div.search {
    width: 16px;
    height: 16px;
    color: #5f5f5f;
}

.tooltip-content div.flag {
    width: 18px;
    height: 12px;
}

.tooltip-content h4 {
    color: black;
    margin: 0px;
    white-space: nowrap;
}

div#containerMap div#map-tooltip-NL{
    left:220px;
    top:250px;
}

div#containerMap div#map-tooltip-BE{
    left:200px;
    top:410px;
}

div#containerMap div#map-tooltip-LU{
    left:320px;
    top:530px;
}

.tooltip-map{
    -webkit-transition: width 0.2s ;
    -moz-transition:    width 0.2s ;
    -o-transition:      width 0.2s ;
    transition:         width 0.2s ;
    font-weight: bold;
    z-index:     1000;
    display:     none;
    position:    absolute;
    width:       auto;
    height:      auto;
    padding:     5px ;
    -webkit-border-radius: 3px;
    -moz-border-radius:    3px;
    border-radius:         3px;
    -moz-box-shadow:    3px 3px 3px 0px rgba(0, 0, 0, 0.1) ;
    -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.1) ;
    -o-box-shadow:      3px 3px 3px 0px rgba(0, 0, 0, 0.1) ;
    box-shadow:         3px 3px 3px 0px rgba(0, 0, 0, 0.1) ;
}

.tooltip-map > .triangle{
    border-bottom: 1px solid #DDD ;
    border-left: 1px solid #DDD ;
    background-color: white;
    width: 15px;
    height: 15px;
    margin-top: -4px;
    display: block;
    position: absolute;
    -webkit-transform: rotate(-45deg);
    -moz-transform:    rotate(-45deg);
    -o-transform:      rotate(-45deg);
    transform:         rotate(-45deg);
    -webkit-box-shadow: inset -1px 1px 0 #fff;
    -moz-box-shadow:    inset 0 1px 0 #fff;
    -o-box-shadow:      inset 0 1px 0 #fff;
    box-shadow:         inset 0 1px 0 #fff;
}

.tooltip-map > h5{
    color: #286090;
    padding:0 10px 0 10px;
    margin: 5px 0 5px 0;
    font-weight: bold;
    font-size: 1em;
}

.tooltip-map > p{
    padding:0 10px 0 10px;
    margin: 0;
}

@media (min-width:768px){
    div#containerMap{
        margin:0 auto;
    }
}