#mapwrapper {font-family:Arial, Helvetica, sans-serif;width:100%;max-width:1024px;margin:0 auto;padding:0;background:transparent;/*-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;*/}
#mapbase{display: inline-block;position:relative;width:100%;padding-bottom:100%;vertical-align:middle;}
#mapbase svg {max-height:100%;width:100%;margin:0;display:inline-block;position:absolute;top:0;left:0;}
#romania{padding-top:15px;margin-left:0;}
#provinceInfo{position:absolute;top:30px;right:50px;width:32%;background:rgba(255,255,255,0.8);pointer-events:none;opacity:0;-webkit-transition:1s;transition:1s;z-index:1;font-size:14px}
#provinceInfo.show{opacity:1}
#provinceInfo h1{padding:0 5px;padding-left:10px;margin-top:0px;font-weight:400;color:#111;font-size:26px}
#provinceInfo p{margin-left:10px;margin-right:10px;}
#provinceInfo table{margin-top:-10px;padding:0 10px 5px 10px}
#provinceInfo table tr:first-child{color:blue;font-weight:600}
svg{max-width:100% !important;height:auto;display:block}

@media all and (max-width:800px) {
#romania{margin-top:15px;}
#provinceInfo{width:40%;}
}
@media all and (max-width: 600px) {
#romania{margin-left:0;margin-top:10px;}
#provinceInfo{width:50%;top:15px;right:5px;margin-left:0;margin-top:0;}
#provinceInfo.show p{margin-bottom:10px;padding-bottom:5px;}
#provinceInfo h1{font-size:26px;}
}
@media all and (max-width: 400px) {
#romania{margin-left:0;margin-top:10px;}
#provinceInfo{width:65%;top:15px;right:5px;margin-left:0;margin-top:0;}
#provinceInfo.show p{font-size:14px;margin-bottom:10px;padding-bottom:5px;}
#provinceInfo h1{font-size:20px;}
}
@media screen and (max-width: 320px){
#map_base svg {width:270px;}
}
@media screen and (max-width: 400px) and (min-width: 321px) {
#map_base svg {width:320px;}
}
@media screen and (max-width: 480px) and (min-width: 401px) {
#map_base svg {width:400px;}
}
@media screen and (max-width: 568px) and (min-width: 481px) {
#map_base svg {width:480px;}
}
@media screen and (max-width: 685px) and (min-width: 569px) {
#map_base svg {width:550px;}
}
@media screen and (max-width: 767px) and (min-width: 686px) {
#map_base svg {width:560px;}
}
@media screen and (min-width: 768px) {
#map_base svg {width:590px;}
}
@media screen and (min-width: 1024px) {
#map_base svg {width:720px;}
}

#romania g {fill:#00765f;pointer-events:fill;}
#romania g:hover {fill:#ff0000;}
#romania g.active {fill:#00c39d;}
#romania g text{fill:#fff}
.enabled {fill:#21669e;cursor:pointer;}
#descriptionf{display:none;position:absolute;top:0;left:0;z-index:1;background-color:#fafafa;color:#111;border:2px solid #111;border-radius:5px;padding:8px;font-family:arial;width:auto;max-width:300px;text-align:left;margin-top:-410px;margin-left:-10px;overflow-wrap: normal;font-size:14px;}
#descriptionf.activ_map {display:block;z-index:101000;}
#descriptionf:after{content: "";position:absolute;left:50%;top:100%;width:0;height:0;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fafafa;}
#descriptionf h1{color:black;font-size:18px;font-weight:600;padding-bottom:3px;border-bottom:solid 1px #333;margin-bottom:0;}
#descriptionf p{margin:0;padding:0;}
#descriptionf table{width:100%;margin-top:5px;padding:0;}
#descriptionf table tr:first-child{width:100%;color:blue;}

@media screen and (min-width:320px){
#descriptionf{margin-top:-385px;}
}
@media screen and (min-width:480px){
#descriptionf {margin-top:-350px;}
}
@media screen and (min-width:600px){
#descriptionf {margin-top:-370px;}
}
@media screen and (min-width:768px){
#descriptionf {margin-top:-310px;}
}
@media screen and (min-width:1024px){
#descriptionf {margin-top:-300px;}
}

table.tabel2{border:solid 1px #aaa;border-collapse:separate;border-spacing:0}
table.tabel2{border-collapse:separate;border-spacing:0} table.tabel2 caption,table.tabel2 th{text-align:left;font-weight:normal;}
table.tabel2 th{text-align:left;background:rgba(0, 0, 0, 0.14);border-bottom:1px dotted #aaa;font-weight:700;color:#111;padding:5px}
table.tabel2 td{text-align:left;font-weight:normal;padding:5px;border:1px dotted #aaa;}
table.tabel2 tr:nth-child(odd){background:rgba(0, 0, 0, 0.07);}

@media screen and (max-width: 800px) {
table.tabel2,table.tabel2 thead,table.tabel2 tbody,table.tabel2 th,table.tabel2 td,table.tabel2 tr{display:block;}
table.tabel2 thead tr{position:absolute;top:-9999px;left:-9999px;}
table.tabel2 td{border:none;border-bottom:1px solid #eee;position:relative;padding-left:150px;}
table.tabel2 td:before{position:absolute;top:5px;left:6px;width:120px;padding-right:30px;white-space:normal;}
table.tabel2 td:nth-of-type(1):before { content: "Judet"; }
table.tabel2 td:nth-of-type(2):before { content: "Localitate"; }
table.tabel2 td:nth-of-type(3):before { content: "Depozit"; }
table.tabel2 td:nth-of-type(4):before { content: "Firma";}
table.tabel2 td:nth-of-type(5):before { content: "Telefon"; }
table.tabel2 td:nth-of-type(6):before { content: "Email"; }
}