/*mapp plan*/
/*
#ND201901{ color:#40b4d9; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201902{ color:#007499; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201903{ color:#e9cbf7; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201904{ color:#afaafa; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201905{ color:#c1ff40; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201906{ color:#be40ff; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201907{ color:#006666; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202401{ color:#a364b3; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202402{ color:#ff0000; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202403{ color:#660000; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202404{ color:#ffa540; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202405{ color:#a68e40; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202406{ color:#42ff00; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202407{ color:#ff40da; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202408{ color:#0000ff; fill:currentColor; fill-opacity:0.5; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
*/
#ND201901{ color:#6c7ec1; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201902{ color:#a96262; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201903{ color:#c9dd79; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201904{ color:#b3af7a; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201905{ color:#86d3a9; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201906{ color:#9e6fa3; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201907{ color:#699ecd; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202401{ color:#b2ebeb; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202402{ color:#e2a8f0; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202403{ color:#f5ba89; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202404{ color:#a897cf; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202405{ color:#c2c7ed; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202406{ color:#816ad7; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202407{ color:#f3aeca; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202408{ color:#84caed; fill:currentColor; fill-opacity:0.8; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }

/*labrl*/
#lbl_ND201901::before{ background-color:#6c7ec1; }
#lbl_ND201902::before{ background-color:#a96262; }
#lbl_ND201903::before{ background-color:#c9dd79; }
#lbl_ND201904::before{ background-color:#b3af7a; }
#lbl_ND201905::before{ background-color:#86d3a9; }
#lbl_ND201906::before{ background-color:#9e6fa3; }
#lbl_ND201907::before{ background-color:#699ecd; }
#lbl_ND202401::before{ background-color:#b2ebeb; }
#lbl_ND202402::before{ background-color:#e2a8f0; }
#lbl_ND202403::before{ background-color:#f5ba89; }
#lbl_ND202404::before{ background-color:#a897cf; }
#lbl_ND202405::before{ background-color:#c2c7ed; }
#lbl_ND202406::before{ background-color:#816ad7; }
#lbl_ND202407::before{ background-color:#f3aeca; }
#lbl_ND202408::before{ background-color:#84caed; }

/*pop text box*/
div[data-project="ND201901"] .clrbox{ background-color:#6c7ec1; }
div[data-project="ND201902"] .clrbox{ background-color:#a96262; }
div[data-project="ND201903"] .clrbox{ background-color:#c9dd79; }
div[data-project="ND201904"] .clrbox{ background-color:#b3af7a; }
div[data-project="ND201905"] .clrbox{ background-color:#86d3a9; }
div[data-project="ND201906"] .clrbox{ background-color:#9e6fa3; }
div[data-project="ND201907"] .clrbox{ background-color:#699ecd; }
div[data-project="ND202401"] .clrbox{ background-color:#b2ebeb; }
div[data-project="ND202402"] .clrbox{ background-color:#e2a8f0; }
div[data-project="ND202403"] .clrbox{ background-color:#f5ba89; }
div[data-project="ND202404"] .clrbox{ background-color:#a897cf; }
div[data-project="ND202405"] .clrbox{ background-color:#c2c7ed; }
div[data-project="ND202406"] .clrbox{ background-color:#816ad7; }
div[data-project="ND202407"] .clrbox{ background-color:#f3aeca; }
div[data-project="ND202408"] .clrbox{ background-color:#84caed; }

/*
#ND201903{color: #e9cbf7; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201905{color: #c1ff40; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201904{color: #afaafa; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201906{color: #be40ff; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202407{color: #ff40da; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202408{color: #0447f7; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202406{color: #42ff00; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202404{color: #ffa540; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201907{color: #006666; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202403{color: #660000; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202401{color: #a364b3; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202405{color: #a68e40; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND202402{color: #ffffff; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; }
#ND201901{color: #40b4d9; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; fill-rule: evenodd;}
#ND201902{color: #007499; fill:currentColor; fill-opacity:0.6; stroke:currentColor; stroke-width: 5; stroke-opacity:0; fill-rule: evenodd;}
*/
/*
.project-btn.label-clr-1::before{	background-color:	#e9cbf7	}
.project-btn.label-clr-2::before{	background-color:	#c1ff40	}
.project-btn.label-clr-3::before{	background-color:	#afaafa	}
.project-btn.label-clr-4::before{	background-color:	#be40ff	}
.project-btn.label-clr-5::before{	background-color:	#ff40da	}
.project-btn.label-clr-6::before{	background-color:	#0447f7	}
.project-btn.label-clr-7::before{	background-color:	#42ff00	}
.project-btn.label-clr-8::before{	background-color:	#ffa540	}
.project-btn.label-clr-9::before{	background-color:	#006666	}
.project-btn.label-clr-10::before{	background-color:	#e9cbf7	}
.project-btn.label-clr-11::before{	background-color:	#660000	}
.project-btn.label-clr-12::before{	background-color:	#a364b3	}
.project-btn.label-clr-13::before{	background-color:	#a68e40	}
.project-btn.label-clr-14::before{	background-color:	#ffffff	}
.project-btn.label-clr-14::before{	background-color:	#40b4d9	}
.project-btn.label-clr-15::before{	background-color:	#007499	}
*/
/*
div[data-project="ND201903"] .clrbox{background-color: #e9cbf7;}
div[data-project="ND201905"] .clrbox{background-color: #c1ff40;}
div[data-project="ND201904"] .clrbox{background-color: #afaafa;}
div[data-project="ND201906"] .clrbox{background-color: #be40ff;}
div[data-project="ND202407"] .clrbox{background-color: #ff40da;}
div[data-project="ND202408"] .clrbox{background-color: #0447f7;}
div[data-project="ND202406"] .clrbox{background-color: #42ff00;}
div[data-project="ND202404"] .clrbox{background-color: #ffa540;}
div[data-project="ND201907"] .clrbox{background-color: #006666;}
div[data-project="ND201903"] .clrbox{background-color: #e9cbf7;}
div[data-project="ND202403"] .clrbox{background-color: #660000;}
div[data-project="ND202401"] .clrbox{background-color: #a364b3;}
div[data-project="ND202405"] .clrbox{background-color: #a68e40;}
div[data-project="ND202402"] .clrbox{background-color: #ffffff;}
div[data-project="ND201901"] .clrbox{background-color: #40b4d9;}
div[data-project="ND201902"] .clrbox{background-color: #007499;}
*/

.area-plan{cursor: pointer; position: relative; stroke-linejoin: round;  mix-blend-mode: multiply;}
.area-plan:hover, .area-plan.trigger, .area-plan.hover-effect{ animation: flashingLine 1s ease-out infinite; z-index:999}

.location-mark {
  cursor: pointer;
  fill: #fff;                  
  stroke: currentColor;        
  stroke-width: 0;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 1));  
  transform-origin: center;   
  animation: ripple 1.5s ease-out infinite;
  color:#00F  
}

.legend-wrapper{ padding-left: 15px; padding-right: 15px; padding-bottom: 30px;}
.legend-wrapper .row-flex{-ms-flex-pack: start; justify-content: flex-start; ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; }
.legend-wrapper .row-flex>div{ -ms-flex:0 0 auto;flex:0 0 auto;}
.legend-wrapper .row-flex>div.lbl{  min-width: 6em; text-align: justify; text-align-last: justify; color:#73859f; padding: 0 2rem 0 0 ; position: relative;}
.legend-wrapper .row-flex>div.lbl::after{ content: ":"; display:block; position: absolute; top:0; right:1em; }
.legend-wrapper .row-flex>div.row-flex{ margin-left: 0; margin-right: 0; /*padding-left: 15px; padding-right: 15px;*/ max-width: calc(100% - 6em);}
html[lang=en-GB] .legend-wrapper .row-flex>div.lbl{ min-width: 10.5em; text-align: left; text-align-last: left;}
html[lang=en-GB] .legend-wrapper .row-flex>div.row-flex{ margin-left: 0; margin-right: 0; /*padding-left: 15px; padding-right: 15px;*/ max-width: calc(100% - 10.5em);}

.outer-wrapper{ max-width: 100%; max-height: 90vh; /*width: 100%; height: 100%;*/ overflow: hidden;  margin: auto; position: relative; 
    transition: none;
    -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    -ms-transition:none; 
   /* border: 1px #dcdddf solid;
   background-color: #f6fcff; color:#d5e3eb; width: 100%; height: 90vh; 
   background-image: linear-gradient(currentColor 1px, transparent 1px),linear-gradient(to right, currentColor 1px, transparent 1px);
   background-size: 20px 20px; 
   */
}
.outer-wrapper.f2{ max-width: none; max-height: none; width: 100%; height: 100%;}


.control-legend-wrapper{position: absolute; font-size: 12px; top:0; right:0; padding: 0 1.5em; background-color: #f4f4f4; /*min-width: 35em; min-height: 25em;*/ }
.control-legend-wrapper .legend-title{font-size: 1.2em; font-weight: bold; text-transform: uppercase; text-align: left}
.control-legend-wrapper>.wrapper{ max-height: 20em; 
   display:-ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: start; justify-content: flex-start; 
}
.project-btn{ -ms-flex:0 0 auto;  flex:0 0 auto; display: block; font-size: 12px; font-weight: bold; line-height: 1; padding: 0.5em 0.5em 0.5em 1.5em;  box-shadow: 0 3px 3px #e3e9f4; color: #53616c; border-radius: 6px; position: relative; margin-bottom: 1em; margin-right: 1em; border: 1px #e1e5f3 solid;}
.project-btn::before{content: ""; display: inline-block; width: 1em; position: absolute; top:0; bottom:0; left:0; margin: auto; border-radius: 6px 0 0 6px}
.project-btn .num{font-weight: bold}

/*
.legend-btn, .pin-btn{ -ms-flex:0 0 auto;  flex:0 0 auto; display: block; font-size: 10px; font-weight: bold; line-height: 1; width: 10em; padding: 0.4em 0.25em 0.4em 2.5em;  position: relative; margin: 0.5em 1em 0.5em 0; color:#53616c;}
.legend-btn::before{content: ""; display: inline-block; width: 2em; position: absolute; top:0; bottom:0; left:0; margin: auto; }
.legend-btn:hover{background-color: #FFF; color:#222;}
*/

.legend-btn{ -ms-flex:0 0 auto;  flex:0 0 auto; display: block; font-size: 0.875rem; font-weight: bold; line-height: 1; padding: 0.4em 1em 0.4em 2em; border: 1px #d8def6 solid ;  position: relative; margin: 0 1em 0.5em 0; color:#53616c; border-radius: 1rem; box-shadow: 0 2px 4px 0 rgba(64, 90, 213, 0.25) !important; background-color: #FFF; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.legend-btn::before{content: ""; display: inline-block; width: 1em; height: 1em; position: absolute; top:0; bottom:0; left:0.5em; margin: auto; border-radius: 50%; }
.legend-btn:hover{background-color: #FFF; color:#222;}

.legend-btn.lbl-all{ padding: 0.4em 1em; padding: 0.4em 1.75em; margin: 0.5em 10px 0.5em 0; }
html:not([lang=en-GB]) .legend-btn.lbl-all{ line-height: 2em;}

.pin-btn{-ms-flex:0 0 auto;  flex:0 0 auto; display: block; font-size: 10px; font-weight: bold; line-height: 1; /*width: calc(20% - 10px);*/ padding: 0.4em 0.25em 0.4em 2.5em;  position: relative; margin: 0.5em 10px 0.5em 0; color:#53616c; border: 1px #d8def6 solid; box-shadow: 0 2px 4px 0 rgba(64, 90, 213, 0.25) !important; }
.pin-btn{font-size: 1em; padding: 0.4em 1.75em 0.4em 36px; text-align: left; display: block; /*width: 100%; background: none; border: none;*/}
html[lang=en-GB] .pin-btn{font-weight: normal !important; padding-right:0.5em}
.pin-btn:hover{ background-color: #FFF;}
.pin-btn::before{content: ""; mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32'%3E%3Cellipse opacity='.25' cx='12' cy='31.5' rx='4' ry='.5'/%3E%3Cpath fill='%23000' d='M12 0C4.707 0 0 3.495 0 12s12 19 12 19 12-10.495 12-19S19.293 0 12 0z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: cover; mask-position: center; background-repeat: no-repeat; background-size: cover; display:block; width:18px; height:24px; background-color: currentColor; position: absolute; top:0; bottom:0; left:10px; margin: auto;
    transition: color 0.5s, filter 0.5s;}
.pin-btn span{color:#53616c;}
.pin-btn:hover span{color:#222;}

.svg-wrapper .pin-box{ position: absolute; top:0; left:0; z-index: 1; pointer-events: none; }
.svg-wrapper .map-pin{ position: absolute; pointer-events: all !important; cursor: pointer; transform-origin: center; z-index: 1; font-size: 10px; width: 0; height: 0; line-height: 0; display:block; /* border-radius: 50%; */ background:none; /*color:#00fff5; filter: drop-shadow(0 0 4px #4444dd); */color:#0068b5; filter: drop-shadow(0 0 3px #FF0); }
#map_ema .map-pin{filter: drop-shadow(0 0 4px #FFFF00); }
.svg-wrapper .map-pin:hover{z-index: 999; filter: drop-shadow(0 0 12px #4444dd); }

/* ::before for effect*/
.svg-wrapper .map-pin::before{content: ""; display:block; width:0; height: 0; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none !important; /*border: 0.2em #3a89ff double;*/ box-sizing: border-box;
      /*animation: ripple2 1.5s ease-out infinite;*/
}
.svg-wrapper .map-pin::after{content: ""; mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32'%3E%3Cellipse opacity='.25' cx='12' cy='31.5' rx='4' ry='.5'/%3E%3Cpath fill='%23000' d='M12 0C4.707 0 0 3.495 0 12s12 19 12 19 12-10.495 12-19S19.293 0 12 0z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: cover;mask-position: center; background-repeat: no-repeat; background-size: cover; display:block; width:2.4em; height: 3.2em; margin-left: -1.2em; margin-top:-3.2em; position: absolute; z-index: 1;  background-color: currentColor;  
    transition: color 0.5s, filter 0.5s;
    /*background-color: #FF0; border:1px #44D solid; border-radius: 50%; box-shadow: 0 0 8px 2px #44D;filter: drop-shadow(0 0 4px #000000);*/}

/*.svg-wrapper .map-pin:hover::before{ border: 0.2em #F60 double; animation: ripple2 1.5s ease-out infinite;}*/
.svg-wrapper .map-pin:hover::after{/*background-color: #FFF; border:2px #F00 solid; border-radius: 50%; box-shadow: 0 0 5px 1px #F00;*/
    /*background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32'%3E%3Cellipse opacity='.25' cx='12' cy='31.5' rx='4' ry='.5'/%3E%3Cpath fill='%23FF0' stock='%23000' stock-width='1' d='M12 0C4.707 0 0 3.495 0 12s12 19 12 19 12-10.495 12-19S19.293 0 12 0z'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 12px #4444dd);*/
    color:#FF0 !important;
}

@keyframes ripple {
  0% {
    stroke-width: 12; 
    stroke-opacity: 1;  
  }
  100% {
    stroke-width: 120; 
    stroke-opacity: 0;
  }
}

@keyframes ripple2 {
  0% {
      transform: scale(1);
      opacity: 1;
    /*stroke-width: 24; 
    stroke-opacity: 1;  */    
  }
  100% {
      transform: scale(12);
      opacity: 0;
    /*stroke-width: 240;      
    stroke-opacity: 0; */
  }
} 


 @keyframes flashingLine {
        0% {
            fill-opacity: 0.8;
            stroke-opacity: 0;
        }
        50% {
            fill:#FC0;
            stroke:#F90;
            fill-opacity: 1;
            stroke-opacity: 1;
            filter: drop-shadow(0 0 12px #4444dd)
        }
        100% {
           fill-opacity: 0.8;
           stroke-opacity: 0;
        }
}

@media(min-width:1280px){
.pin-btn {font-size: 16px;}
}
@media(max-width:1024px){
    /*.outer-wrapper.f2{ padding-bottom: 250px; }*/
    .control-legend-wrapper{ position: relative; top:auto; bottom:auto; left:auto; right:auto; padding-bottom: 1em; /*padding: 0 1.5em; background-color: #f4f4f4; min-width: 35em; min-height: 25em;*/ }
    /*.control-legend-wrapper .wrapper{ display: block; max-height: none; }*/
    .control-legend-wrapper>.wrapper{max-height: 12em;}
}
@media(max-width:767px){
    .control-panel{ position: relative;  top:auto; bottom:auto; left:auto; right:auto;}
    .svg-wrapper .map-pin{font-size: 24px;}
}
@media(max-width:424px){
    #map_switch button{ width: 100%; display:block; margin-bottom: 0.25em}
    .control-legend-wrapper .wrapper{ display: block; max-height: none; }
    .svg-wrapper .map-pin{font-size: 32px;}
}


.move-panel{ display:none !important;}