@font-face {
  font-family: 'NotoSans';font-weight: 100;font-style:normal;
  src: url("/assets/fonts/NotoSansThin/NotoSans-Thin.woff2") format("woff2"),
       url("/assets/fonts/NotoSansThin/NotoSans-Thin.woff")  format("woff");}
@font-face {
  font-family: 'NotoSans';font-weight: 400;font-style:normal;
  src: url("/assets/fonts/NotoSans/NotoSans-Regular.woff2") format("woff2"),
       url("/assets/fonts/NotoSans/NotoSans-Regular.woff")  format("woff");}
@font-face {
  font-family: 'NotoSans';font-weight: 500;font-style:normal;
  src: url("/assets/fonts/NotoSans/NotoSans-Medium.woff2") format("woff2"),
       url("/assets/fonts/NotoSans/NotoSans-Medium.woff")  format("woff");}
@font-face {
  font-family: 'NotoSans';font-weight: 700;font-style:normal;
  src: url("/assets/fonts/NotoSans/NotoSans-Bold.woff2") format("woff2"),
       url("/assets/fonts/NotoSans/NotoSans-Bold.woff")  format("woff");}

@font-face { font-family:'NotoSansTC'; font-weight:300; font-style:normal;
  src:url("/assets/fonts/NotoSansTC/NotoSansTC-Light.woff2")format("woff2"),
      url("/assets/fonts/NotoSansTC/NotoSansTC-Light.woff")format("woff"); }
@font-face { font-family:'NotoSansTC'; font-weight:400; font-style:normal;
  src:url("/assets/fonts/NotoSansTC/NotoSansTC-Regular.woff2")format("woff2"),
      url("/assets/fonts/NotoSansTC/NotoSansTC-Regular.woff")format("woff"); }
@font-face { font-family:'NotoSansTC'; font-weight:600; font-style:normal;
  src:url("/assets/fonts/NotoSansTC/NotoSansTC-SemiBold.woff2")format("woff2"),
      url("/assets/fonts/NotoSansTC/NotoSansTC-SemiBold.woff")format("woff"); }
@font-face { font-family:'NotoSansTC'; font-weight:700; font-style:normal;
  src:url("/assets/fonts/NotoSansTC/NotoSansTC-Bold.woff2")format("woff2"),
      url("/assets/fonts/NotoSansTC/NotoSansTC-Bold.woff")format("woff"); }

@font-face { font-family:'NotoSansSC'; font-weight:300; font-style:normal;
  src:url("/assets/fonts/NotoSansSC/NotoSansSC-Light.woff2")format("woff2"),
      url("/assets/fonts/NotoSansSC/NotoSansSC-Light.woff")format("woff"); }
@font-face { font-family:'NotoSansSC'; font-weight:400; font-style:normal;
  src:url("/assets/fonts/NotoSansSC/NotoSansSC-Regular.woff2")format("woff2"),
      url("/assets/fonts/NotoSansSC/NotoSansSC-Regular.woff")format("woff"); }
@font-face { font-family:'NotoSansSC'; font-weight:600; font-style:normal;
  src:url("/assets/fonts/NotoSansSC/NotoSansSC-SemiBold.woff2")format("woff2"),
      url("/assets/fonts/NotoSansSC/NotoSansSC-SemiBold.woff")format("woff"); }
@font-face { font-family:'NotoSansSC'; font-weight:700; font-style:normal;
  src:url("/assets/fonts/NotoSansSC/NotoSansSC-Bold.woff2")format("woff2"),
      url("/assets/fonts/NotoSansSC/NotoSansSC-Bold.woff")format("woff"); }
:root {
    --vtm-header-color: #c5c7c9;
    --vtm-data-color: #fff;
    --vtm-text-color: #000;
    --vtm-text-g: #0B8D45;
    --vtm-text-a: #F26222;
    --vtm-text-r: #ED2F24;
}

body { background-color: transparent; }
:lang(en) body {font-family: 'NotoSans';}
:lang(zh-hk) body {font-family: 'NotoSansTC';}
:lang(zh-cn) body {font-family: 'NotoSansSC';}

.vtm-status-text.status-not_crowded  { color: var(--vtm-text-g); }
.vtm-status-text.status-normal       { color: var(--vtm-text-a); }
.vtm-status-text.status-crowded      { color: var(--vtm-text-r); }


#vtm_embed {
    color: var(--vtm-text-color);
    background-color: var(--vtm-data-color);
    text-wrap-mode: wrap;
    text-wrap-style: balance;
    /* max-width: 1200px; */
    font-weight: normal;
}

.mobile-view  { display: block;
    /* max-width: 289px; */
} 
.desktop-view { display: none; }

@media (min-width: 1028px) {
    .mobile-view  { display: none; }
    .desktop-view { display: block; }
}
