@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

#sp-slideshow-wrapper {width: 125px; height: 120px; position: relative; margin:0; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; right:55px; bottom:10px; position: fixed; border:0; outline: 0; z-index: 10000; font-family: 'Open Sans', sans-serif;}
#sp-slideshow-wrapper #slideshow li a{border:0 !important; outline:0 !important; text-decoration: none !important;}
#sp-slideshow-wrapper #slideshow {position: absolute; list-style-type: none; padding: 0px 16px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;}
#sp-slideshow-wrapper #slideshow > * {display: block; position: absolute;}
#sp-slideshow-wrapper #slideshow .front {-webkit-transform: translateZ( 100px ); -moz-transform: translateZ( 100px ); -o-transform: translateZ( 100px ); transform: translateZ( 100px ); opacity: 1; -webkit-transition: -webkit-transform 1s, opacity 1s; -moz-transition: -moz-transform 1s, opacity 1s; -o-transition: -o-transform 1s, opacity 1s; transition: transform 1s, opacity 1s;}
#sp-slideshow-wrapper #slideshow .right {-webkit-transform: rotateY( 90deg ) translateZ( 100px ); -moz-transform: rotateY( 90deg ) translateZ( 100px ); -o-transform: rotateY( 90deg ) translateZ( 100px ); transform: rotateY( 90deg ) translateZ( 100px ); opacity: 0; -webkit-transition: -webkit-transform 1s, opacity 1s; -moz-transition: -moz-transform 1s, opacity 1s; -o-transition: -o-transform 1s, opacity 1s; transition: transform 1s, opacity 1s;}
#sp-slideshow-wrapper #slideshow .left {-webkit-transform: rotateY( -90deg ) translateZ( 100px ) translateX(-360px); -moz-transform: rotateY( -90deg ) translateZ( 100px ) translateX(-360px); -o-transform: rotateY( -90deg ) translateZ( 100px ) translateX(-360px); transform: rotateY( -90deg ) translateZ( 100px ) translateX(-360px); opacity: 0; -webkit-transition: -webkit-transform 1s, opacity 1s; -moz-transition: -moz-transform 1s, opacity 1s; -o-transition: -o-transform 1s, opacity 1s; transition: transform 1s, opacity 1s;}
#sp-slideshow-wrapper #slideshow li{border:0; width:100px; height:100px; background-color:#fff; -webkit-box-shadow: 1px 0px 10px 1px rgba(0,0,0,0.4); -moz-box-shadow: 1px 0px 10px 1px rgba(0,0,0,0.4); box-shadow: 1px 0px 10px 1px rgba(0,0,0,0.4); -webkit-border-radius: 5px; border-radius: 5px; font-weight:600; font-family: 'Open Sans', sans-serif; font-size:14px; /* overflow: hidden; */}
.div0{width:100px; height:100px; background-color:#E8E8E8; font-family: 'Open Sans', sans-serif;}
.div1{height:26px; border-bottom:0; padding-top:1px; margin: 0; line-height:0; text-align:center; background-color:red; color:#fff; font-family: 'Open Sans', sans-serif;}
.div2{height:74px; text-align:center; padding:2px 14px 0 14px; background-color:#fff; font-family: 'Open Sans', sans-serif; font-size:14px; color: #000; font-weight: 500;}
.cout-title{margin:0; padding-top:13px; line-height:0; color:#fff; font-size:13px; line-height: 0; font-weight: 600; font-family: 'Open Sans', sans-serif;}
.cout{margin:4px 0; padding:0; font-family: 'Open Sans', sans-serif; line-height:19px; font-size: 14px;}
.cout-number{margin:4px 0; padding:0; font-family: 'Open Sans', sans-serif; line-height:19px; font-size: 14px;}
.crossbutton {border: 1px solid #ff0808; transform: rotate(45deg); width: 21px; height: 21px; margin:0; float: left; border-radius: 50%; background: #FFF; box-sizing: border-box; position: absolute; cursor: pointer; top: -13px; right: -13px; z-index: 999;}
.crossbutton:before {position: absolute; content: ''; top: 5px; left: 9px; height: 9px; width: 1px; background: #ff0808;}
.crossbutton:after {position: absolute; content: ''; top: 9px; left: 5px; width: 9px; height: 1px; background: #ff0808;}

@media screen and (max-width: 480px) {
#sp-slideshow-wrapper {width:115px; height:100px;}
#sp-slideshow-wrapper #slideshow li{width:90px; height:90px;}
#sp-slideshow-wrapper {right:16px; bottom:94px;}
.cout-title{padding-top:11px; font-size:13px; font-weight: 500;}
.cout{line-height:16px; font-size: 13px; font-weight: 500;}
.cout-number{line-height:16px; font-size: 13px; font-weight: 500;}
.div0 {width: 100%; height: 86px;}
.div1{height:24px;}
.div2{height:62px; padding:1px 11px 0 11px;}
}

/* Live Map */
.inmapdiv {width:100%; background:#d0e7f0; padding:0; border:1px solid #eee; overflow:hidden;}
.inmapdiv .country{fill:#f2f2f2; stroke:#fff; stroke-width:0.48px; transition: fill 0.3s; cursor:default !important;}

.inmapdiv .normal{fill:#c5e466 !important;}
.inmapdiv .warning{fill:#fdd228 !important;}
.inmapdiv .danger-lite{fill:#db8131 !important;}
.inmapdiv .danger{fill:#b11818 !important;}

.info_panel {background-color: rgba(255,255,255, .9); padding: 5px 10px 5px 5px; font-size: 12px; font-family: Segoe, 'Segoe UI', Verdana, 'sans-serif'; position: absolute; border:1px solid #C7C7C7; color: #000; white-space: nowrap;}
.info_panel::first-line {font-weight: bold;}

#inmapdiv2{width: 100%; clear: both; position: relative; float: left;}
.chart-list-data {width: 100%; text-align: center;}
.chart-list-data ul {margin: 0; padding: 8px 0; -webkit-columns: 1; -moz-columns: 1; columns: 1;}
.chart-list-data ul li {margin: 0; padding:4px 8px; list-style-type: none; color: #222; display: inline-block; font-weight: 400; font-size: 16px;}
.chart-list-data ul li span, .chart-list-data ul li span {display: inline-block; width: 15px; height: 15px; margin-bottom: 0px;  margin-right: 5px;}