{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "min-width": "100%",
        "display": "flex",
        "align-items": "center",
        "white-space": "nowrap"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "95%",
            "position": "absolute",
            "display": "flex",
            "flex-direction": "row",
            "justify-content": "space-around",
            "border": "2px solid",
            "font-size": "15px"
          },
          "attributes": {
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "width": "=if([$UTC]>0,((1-abs([$UTC]%1)) *100)+'%',(abs([$UTC]%1)*100)+'%')",
                "display": "=if([$UTC]%1==0,'none','')"
              },
              "attributes": {
                "class": "=if(abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)<=5||abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)>=22,'ms-bgColor-themePrimary ms-fontColor-white',if(abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)<=8||abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)>=19,'ms-bgColor-themeLight',''))"
              }
            },
            {
              "elmType": "div",
              "forEach": "hour in split('0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23',',')",
              "txtContent": "=ceiling(abs((24+Number([$UTC])+Number([$hour]))%24))",
              "style": {
                "width": "=if(Number([$hour])==23,if(Number([$UTC])%1==0,'100%',if(Number([$UTC])>0,(abs(Number([$UTC])%1)*100)+'%',((1-abs(Number([$UTC])%1))*100)+'%')),'100%')",
                "text-align": "center"
              },
              "attributes": {
                "class": "=if(abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)<=5||abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)>=22,'ms-bgColor-themePrimary ms-fontColor-white',if(abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)<=8||abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)>=19,'ms-bgColor-themeLight',''))"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "width": "7px",
            "height": "43px",
            "left": "=((Number(@now)%86400000)/3600000)/24*100+'%'",
            "cursor": "pointer"
          },
          "attributes": {
            "class": "ms-bgColor-neutralTertiary ms-bgColor-neutralPrimary--hover"
          },
          "customCardProps": {
            "openOnEvent": "hover",
            "directionalHint": "rightCenter",
            "isBeakVisible": true,
            "formatter": {
              "elmType": "div",
              "style": {
                "padding": "10px 20px",
                "font-weight": "bold",
                "font-size": "20px"
              },
              "children": [
                {
                  "elmType": "span",
                  "txtContent": "=padStart(toString(floor(((Number(@now)+Number([$UTC])*3600000)%86400000)/3600000)),2,'0')"
                },
                {
                  "elmType": "span",
                  "txtContent": ":"
                },
                {
                  "elmType": "span",
                  "txtContent": "=padStart(toString(floor(((Number(@now)+Number([$UTC])*3600000)%86400000)%3600000/60000)),2,'0')"
                }
              ]
            }
          }
        }
      ]
    }
  ]
}