svg-map-extra/dist/svg-map.css

svg-map-extra is an extended JavaScript library that lets you easily create an interactable world map comparing customizable data for each country inspired by the original svgMap.

.svg-map-wrapper{position:relative;width:100%;padding-top:50%;overflow:hidden;background:#d9ecff;color:#111}.svg-map-wrapper *{box-sizing:border-box}.svg-map-wrapper :focus:not(:focus-visible){outline:0}.svg-map-wrapper .svg-map-image{display:block;position:absolute;top:0;left:0;width:100%;height:100%;margin:0}.svg-map-wrapper .svg-map-controls-wrapper{position:absolute;bottom:10px;left:10px;z-index:1;display:flex;overflow:hidden;border-radius:2px;box-shadow:0 0 0 2px rgba(0,0,0,0.1)}.svg-map-wrapper .svg-map-controls-zoom,.svg-map-wrapper .svg-map-controls-move{display:flex;margin-right:5px;overflow:hidden;background:#fff}.svg-map-wrapper .svg-map-controls-zoom:last-child,.svg-map-wrapper .svg-map-controls-move:last-child{margin-right:0}.svg-map-wrapper .svg-map-control-button{background-color:transparent;border:none;border-radius:0;color:inherit;font:inherit;line-height:inherit;margin:0;padding:0;overflow:visible;text-transform:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;width:30px;height:30px;position:relative}.svg-map-wrapper .svg-map-control-button.svg-map-zoom-button:before,.svg-map-wrapper .svg-map-control-button.svg-map-zoom-button:after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:#666;transition:background-color 0.2s}.svg-map-wrapper .svg-map-control-button.svg-map-zoom-button:before{width:11px;height:3px}.svg-map-wrapper .svg-map-control-button.svg-map-zoom-button:hover:before,.svg-map-wrapper .svg-map-control-button.svg-map-zoom-button:hover:after{background:#111}.svg-map-wrapper .svg-map-control-button.svg-map-zoom-button.svg-map-disabled:before,.svg-map-wrapper .svg-map-control-button.svg-map-zoom-button.svg-map-disabled:after{background:#ccc}.svg-map-wrapper .svg-map-control-button.svg-map-zoom-in-button{margin:1px 0 1px 1px}.svg-map-wrapper .svg-map-control-button.svg-map-zoom-in-button:after{width:3px;height:11px}.svg-map-wrapper .svg-map-control-button.svg-map-zoom-out-button{margin:1px 1px 1px 0}.svg-map-wrapper .svg-map-country{cursor:pointer;stroke:#fff;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill 0.2s, stroke 0.2s}.svg-map-wrapper .svg-map-country:hover,.svg-map-wrapper .svg-map-country.svg-map-active{stroke:#333}.svg-map-wrapper .svg-map-country.svg-map-active{stroke-width:1.5}.svg-map-tooltip{box-shadow:0 0 3px rgba(0,0,0,0.2);position:absolute;z-index:2;border-radius:2px;background:#fff;transform:translate(-50%, -100%);border-bottom:1px solid #000;display:none;pointer-events:none;min-width:60px}.svg-map-tooltip.svg-map-tooltip-flipped{transform:translate(-50%, 0);border-bottom:0;border-top:1px solid #000}.svg-map-tooltip.svg-map-active{display:block}.svg-map-tooltip .svg-map-tooltip-content-container{position:relative;padding:10px 20px}.svg-map-tooltip .svg-map-tooltip-content-container .svg-map-tooltip-flag-container{text-align:center;margin:2px 0 5px}.svg-map-tooltip .svg-map-tooltip-content-container .svg-map-tooltip-flag-container.svg-map-tooltip-flag-container-emoji{font-size:50px;line-height:0;padding:25px 0 15px}.svg-map-tooltip .svg-map-tooltip-content-container .svg-map-tooltip-flag-container .svg-map-tooltip-flag{display:block;margin:auto;width:auto;height:32px;padding:2px;border-radius:2px}.svg-map-tooltip .svg-map-tooltip-title{white-space:nowrap;font-size:18px;line-height:28px;padding:0 0 8px;text-align:center}.svg-map-tooltip .svg-map-tooltip-content{white-space:nowrap;font-size:14px;color:#777;margin:-5px 0 0}.svg-map-tooltip .svg-map-tooltip-content table.svg-map-tooltip-content-table{padding:0;border-spacing:0px;margin:auto}.svg-map-tooltip .svg-map-tooltip-content table.svg-map-tooltip-content-table td{padding:2px 0;text-align:left}.svg-map-tooltip .svg-map-tooltip-content table.svg-map-tooltip-content-table td span{color:#111}.svg-map-tooltip .svg-map-tooltip-content table.svg-map-tooltip-content-table td:first-child{padding-right:10px;text-align:right}.svg-map-tooltip .svg-map-tooltip-content table.svg-map-tooltip-content-table td sup{vertical-align:baseline;position:relative;top:-5px}.svg-map-tooltip .svg-map-tooltip-content .svg-map-tooltip-no-data{padding:2px 0;color:#777;font-style:italic;text-align:center}.svg-map-tooltip .svg-map-tooltip-pointer{position:absolute;top:100%;left:50%;transform:translateX(-50%);overflow:hidden;height:10px;width:30px}.svg-map-tooltip .svg-map-tooltip-pointer:after{content:'';width:20px;height:20px;background:#fff;border:1px solid #000;position:absolute;bottom:6px;left:50%;transform:translateX(-50%) rotate(45deg)}.svg-map-tooltip.svg-map-tooltip-flipped .svg-map-tooltip-pointer{bottom:auto;top:-10px;transform:translateX(-50%) scaleY(-1)}


/*# sourceMappingURL=svg-map.css.map*/