@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap");@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700);
body{background:#fff;margin:0;padding:0;font:15px Roboto Condensed,"Hiragino Sans GB","WenQuanYi Micro Hei","Heiti SC","冬青黑",Microsoft YaHei,"微软正黑体",'Microsoft JhengHei','微软雅黑',"宋体",STHeiti,'LiHei Pro','华文黑体','Open Sans',sans-serif,arial,helvetica,Tahoma,'Source Sans Pro',verdana;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;color:#000;text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important;font-feature-settings:"kern";-moz-font-kerning:normal;font-kerning:normal;font-variant-ligatures:common-ligatures;scroll-behavior:smooth;position:relative;transition:all 0.35s ease-in-out;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;position:relative;overflow-x:hidden;overflow-y:scroll;}
em{font-style:normal;}
a,button{color:#A80034;webkit-transition:all 0.25s;-moz-transition:all 0.25s;-o-transition:all 0.25s;transition:all 0.25s;}
a,a:focus,video,button{outline:0!important;text-decoration:none!important;}
a:hover,a:focus{text-decoration:normal;}
a:hover{text-decoration:none;color:#003866;}

.sgpsi{display:flex;margin:0 auto;}
.psi-map,.psi-legend{display:flex;align-items:center;justify-content:center;}
.psi-map{justify-content:end;}
.psi-legend{justify-content:start;}
.sgmap{width:100%;position:absolute;}
.psi-legend{width:100%;}
.psi-legend h2{font-size:1.56rem;padding:0.2em;font-weight:700;}
#psireading{padding:0.5em;background-color:#f5fbff;border-bottom:1px solid #03283D;display:flex;justify-content:center;}

.psireading{padding-right:0.4em;}
.legend{width:100%;display:flex;font-size:0.9em;padding:0.4em 0.8em;color:#fff;font-weight:bold;}
.legend span{margin-right:0.6em;}
.legend-wrap{display:block;}
span.bold{font-weight:700;display:block;}
#PSI-Overview #output{width:440px;height:260px;display:block;position:relative;background-image:url(../images/singapore-map.png);background-position:center;background-size:100% auto;background-repeat:no-repeat;}
#PSI-Overview #output >div{border-radius:50% 50%;width:50px;height:50px;padding:0.6em 0.2em;color:#fff;line-height:1.2;position:absolute;}
#PSI-Overview #output .label,#PSI-Overview #output .num{margin:auto;display:block;}
#PSI-Overview #output .label{font-size:0.9em;}
.west{top:40%;left:20%;}
.east{top:40%;right:20%;}
.south{bottom:14%;left:44%;}
.north{top:12%;left:44%;}
.central{top:40%;left:44%;}
.good{background-color:#479b02;}
.moderate{background-color:#006fa1;}
.unhealthy{background-color:#ffb500;}
.very-unhealthy{background-color:#ff7300;}
.hazardous{background-color:#d60000;;}

@media (min-width:320px) and (max-width:767px){
.container{padding:0;}
.psi-map,.psi-legend{justify-content:center!important;}
#PSI-Overview #output{width:90%;height:200px;}
#PSI-Overview #output >div{border-radius:50px;width:auto;height:auto;padding:0.2em 0.6em;display:flex;}
#PSI-Overview #output .label{margin-right:0.4em;}
.west{top:44%;left:16%;}
.east{top:44%;right:14%;}
.south{bottom:20%;left:40%;}
.north{top:20%;left:40%;}
.central{top:44%;left:40%;}
.legend-wrap{width:100%;}
.psi-legend .legend{width:auto;margin:0 -1px 2px 0;display:inline-block;white-space:nowrap;}
.psi-legend .legend span{display:inline-block;}
/*
.psi-legend .good{color:#479b02;}
.psi-legend .moderate{color:#006fa1;}
.psi-legend .unhealthy{color:#ffb500;}
.psi-legend .very-unhealthy{color:#ff7300;}
.psi-legend .hazardous{color:#d60000;}
*/
}