{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "row"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "@currentField.displayValue"
    },
    {
      "elmType": "div",
      "style": {
        "cursor": "pointer",
        "padding": "5px",
        "margin": "5px",
        "border-radius": "3px",
        "font-size": "16px",
        "visibility": "=if(@currentField,'visible','hidden')"
      },
      "attributes": {
        "iconName": "World",
        "class": "ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
      },
      "customCardProps": {
        "openOnEvent": "hover",
        "directionalHint": "rightCenter",
        "isBeakVisible": true,
        "formatter": {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "column",
                "padding": "15px 20px",
                "width": "570px"
              },
              "children": [
                {
                  "elmType": "div",
                  "forEach": "UTC in split('-8|Seattle,-5|New-York,0|Portugal,2|Finland,5.5|India,9|Japan',',')",
                  "style": {
                    "display": "flex",
                    "flex-direction": "row",
                    "justify-cotent": "center",
                    "align-items": "center",
                    "margin": "5px",
                    "width": "100%"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "=replaceAll(substring([$UTC],indexOf([$UTC],'|')+1,indexOf([$UTC]+'^','^')),'-',' ')",
                      "style": {
                        "width": "12%",
                        "word-wrap": "break-word"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "width": "8%",
                        "text-align": "center",
                        "margin": "0px 5px"
                      },
                      "children": [
                        {
                          "elmType": "span",
                          "txtContent": "=padStart(toString(floor(((Number(@currentField)+Number(substring([$UTC],0,indexOf([$UTC],'|')))*3600000)%86400000)/3600000)),2,'0')"
                        },
                        {
                          "elmType": "span",
                          "txtContent": ":"
                        },
                        {
                          "elmType": "span",
                          "txtContent": "=padStart(toString(floor(((Number(@currentField)+Number(substring([$UTC],0,indexOf([$UTC],'|')))*3600000)%86400000)%3600000/60000)),2,'0')"
                        }
                      ]
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "width": "80%",
                        "height": "80%",
                        "position": "relative",
                        "display": "flex",
                        "align-items": "center"
                      },
                      "children": [
                        {
                          "elmType": "div",
                          "style": {
                            "display": "flex",
                            "flex-direction": "row",
                            "justify-content": "space-around",
                            "border": "2px solid",
                            "width": "100%",
                            "height": "100%"
                          },
                          "attributes": {
                            "class": "ms-fontColor-themePrimary"
                          },
                          "children": [
                            {
                              "elmType": "div",
                              "style": {
                                "display": "=if(Number(substring([$UTC],0,indexOf([$UTC],'|')))%1==0,'none','flex')",
                                "width": "=if(Number(substring([$UTC],0,indexOf([$UTC],'|')))>0,((1-abs(Number(substring([$UTC],0,indexOf([$UTC],'|')))%1))*100)+'%',(abs(Number(substring([$UTC],0,indexOf([$UTC],'|')))%1)* 100)+'%')",
                                "text-align": "center"
                              },
                              "attributes": {
                                "class": "=if(abs(ceiling(24+Number(substring([$UTC],0,indexOf([$UTC],'|')))+Number([$hour]))%24)<=5||abs(ceiling(24+Number(substring([$UTC],0,indexOf([$UTC],'|')))+Number([$hour]))%24)>=22,'ms-bgColor-themePrimary ms-fontColor-white','')"
                              }
                            },
                            {
                              "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(substring([$UTC],0,indexOf([$UTC],'|')))+Number([$hour]))%24))",
                              "style": {
                                "width": "=if(Number([$hour])==23,if(Number(substring([$UTC],0,indexOf([$UTC],'|')))%1==0,'100%',if(Number(substring([$UTC],0,indexOf([$UTC],'|')))>0,(abs(Number(substring([$UTC],0,indexOf([$UTC],'|')))%1)*100)+'%',((1-abs(Number(substring([$UTC],0,indexOf([$UTC],'|')))%1))*100)+'%')),'100%')",
                                "text-align": "center"
                              },
                              "attributes": {
                                "class": "=if(abs(ceiling(24+Number(substring([$UTC],0,indexOf([$UTC],'|')))+Number([$hour]))%24)<=5||abs(ceiling(24+Number(substring([$UTC],0,indexOf([$UTC],'|')))+Number([$hour]))%24)>=22,'ms-bgColor-themePrimary ms-fontColor-white',if(abs(ceiling(24+Number(substring([$UTC],0,indexOf([$UTC],'|')))+Number([$hour]))%24)<=8||abs(ceiling(24+Number(substring([$UTC],0,indexOf([$UTC],'|')))+Number([$hour]))%24)>=19,'ms-bgColor-themeLight',''))"
                              }
                            }
                          ]
                        },
                        {
                          "elmType": "div",
                          "style": {
                            "position": "absolute",
                            "width": "1.5%",
                            "height": "100%",
                            "left": "=((Number(@currentField)%86400000)/3600000)/24*100+'%'"
                          },
                          "attributes": {
                            "class": "ms-bgColor-neutralTertiary"
                          }
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    }
  ]
}