@charset "UTF-8";

html,body{width:100%;margin:0 auto;padding:0;text-rendering:optimizeLegibility;-webkit-font-feature-settings:'kern';-moz-font-feature-settings:'kern';font-feature-settings:'kern';-webkit-font-kerning:normal;-moz-font-kerning:normal;font-kerning:normal;-webkit-font-variant-ligatures:common-ligatures;-moz-font-variant-ligatures:common-ligatures;font-variant-ligatures:common-ligatures;scroll-behavior:smooth;overscroll-behavior:none;-webkit-overflow-scrolling:touch;}
body{font-size:16px;color:#333;font-weight:400;font-family:Roboto-Regular,'NotoSansCJKsc-DemiLight','Noto Sans SC',Hiragino Sans GB,WenQuanYi Micro Hei,Heiti SC,Microsoft YaHei,sans-serif!important;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:none!important;background-attachment:fixed;background-position:center;background-size:100vw 100vh;background-repeat:repeat;overflow-x:hidden;}
h1{color:#ef2e4f;}
h2,h4{margin-top:0;margin-bottom:3px;}
h2{font-weight:700;}
span{display:inline-block;}
.circle{width:10px;height:10px;border-radius:50%;vertical-align:middle;}
.title{vertical-align:top;}
.legend{background:rgba(0,0,0,0.5);color:#ffff;position:absolute;text-align:left;z-index:9;bottom:2em;left:2em;padding:1em;border-radius:8px;font-size:.8em;}
.legend h2{font-size:1em;}
.anchorBL{display:none!important;}
iframe{width:100%;border:none;margin-left:auto;margin-right:auto;display:block;}
.chart-box{border:1px solid #777;padding:1em;margin-bottom:1em;}
.iframe-chart{position:relative;}
.iframe-chart iframe{height:400px;padding-bottom:3em;position:relative;top:0;left:0;width:100%;display:block;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain;}
.iframe-chart:before{content:'向下滚动查看更多';font-size:12px;color:rgba(12,171,207,0.7);bottom:0.5em;z-index:10000;left:0;width:100%;position:absolute;text-align:center;}
.iframe-chart:after{content:'';bottom:0;left:0;height:100px;width:100%;position:absolute;background:rgba(255,255,255,1);background:linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
.iframe-chart:hover:before{display:none;}

.no-scroll .iframe-chart iframe{height:150px;padding-bottom:0;}
.no-scroll .iframe-chart:before,.no-scroll .iframe-chart:after{display:none;}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#fafafa;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);}
::-webkit-scrollbar-thumb:hover{background:rgba(12,171,207,0.7);}

#navbar{width:100%;z-index:1000;position:relative;}
.navbar-nav{line-height:1.2;position:fixed;bottom:-15%;transform:translate(-50%,0);left:50%;}
.navbar-nav a{width:200px;height:200px;padding:1.6em 0 0 0;display:block;background:#76d3e2;color:#fff;text-align:center;position:relative;border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;-webkit-border-radius:50%;}
.navbar-nav a b{display:block;}
.navbar-nav .icon{width:50px;height:50px;border-radius:50%;background:#fff;position:absolute;top:1.5em;right:10px;margin-left:10px;padding:0.1em;border:2px solid #76d3e2;animation-name:spin;animation-duration:5000ms;animation-iteration-count:infinite;animation-timing-function:linear;z-index:100000;}
.navbar-nav .icon{background-image:url(http://interactive.zaobao.com/2020/novel-coronavirus-cases-in-singapore/static/imgs/nav-recovery.svg);background-position:100%;background-repeat:no-repeat;background-size:cover;}

.red-circle{background-color:red;}
.orange-circle{background-color:orange;}
.black-circle{background-color:black;}
.purple-circle{background-color:purple;margin-left:3px;}
.confirm,.suspected,.death{padding:3px;}
.mobile-legend .confirm,.mobile-legend .suspected,.mobile-legend .death,.mobile-legend .highly-suspected{display:inline-block;}
.header{font-weight:bold;}
.main-title{background:#f7f7f7;}
.confirm-title{background:red;color:#fff;}
.death-title{background:black;color:#fff;}
.header{border-bottom:1px solid #D3D3D3;line-height:1.2;}
.header-row{background-color:#fff;padding-top:2px;font-size:0.8em;}
.death-data > .header{border-right:0px;}
.header > .title{padding:5px;border-radius:5px;}
.chart{font-size:.8em;margin-top:15%;}
.country-figure,.confirmed-figure,.death-figure{padding:2px;}
.country-figure:nth-child(2n),.confirmed-figure:nth-child(2n),.death-figure:nth-child(2n){background:#f9f9f9;}
.country:last-child,.confirmed:last-child,.death:last-child{border-bottom:none;}
.death{border-right:0;}
.no-gutters [class*='col-']{padding-right:0;padding-left:0;}
.data-country,.data-death{font-weight:bold;}

@media (min-device-width:320px) and (max-device-width:640px){
.legend{background:rgba(0,0,0,0.5);color:white;padding:5px;margin:0 auto;bottom:1em;left:1em;}
.legend span{font-size:.8em;vertical-align:top;}
.legend .circle{width:10px;height:10px;margin-top:4px;}
}


@media (max-width:767px){
.row{margin-left:0;margin-right:0;}
.container-fluid{padding-left:0;padding-right:0;}
h1{font-size:1.4em;}
h2{font-size:1.2em;}
.navbar-nav{bottom:-150px;font-size:14px;}
.navbar-nav a{padding:1.2em 0 0 0;}
.navbar-nav .icon{top:0.8em;height:40px;width:40px;margin:0;right:1.5em;}
}

@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}

footer{margin-top:4em;}