{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(@currentField, 'flex', 'none')",
    "flex-direction": "column",
    "align-items": "flex-start",
    "justify-content": "flex-start",
    "padding": "10px",
    "padding-bottom": "0px",
    "font-size": "12px",
    "color": "#323130"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "center",
        "gap": "4px"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "=if(floor((Date(@currentField) + 46800000) / 86400000) == floor((@now + 46800000) / 86400000), '0d', if(floor((Date(@currentField) + 46800000) / 86400000) > floor((@now + 46800000) / 86400000), toString(floor((Date(@currentField) + 46800000) / 86400000 - floor((@now + 46800000) / 86400000))) + 'd', '-' + toString(floor((@now + 46800000) / 86400000 - (Date(@currentField) + 46800000) / 86400000)) + 'd'))",
          "style": {
            "color": "#666",
            "font-size": "10px",
            "padding-right": "1px"
          }
        },
        {
          "elmType": "span",
          "attributes": {
            "iconName": "=if(floor((Date(@currentField) + 46800000) / 86400000) > floor((@now + 46800000) / 86400000), 'SortUp', if(floor((Date(@currentField) + 46800000) / 86400000) < floor((@now + 46800000) / 86400000), 'SortDown', 'CheckMark'))"
          },
          "style": {
            "font-size": "10px",
            "color": "=if(floor((Date(@currentField) + 46800000) / 86400000) > floor((@now + 46800000) / 86400000), '#107c10', if(floor((Date(@currentField) + 46800000) / 86400000) < floor((@now + 46800000) / 86400000), '#a4262c', '#666'))"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "center",
        "gap": "4px",
        "margin-top": "2px"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "Calendar"
          },
          "style": {
            "font-size": "12px",
            "padding-right": "5px"
          }
        },
        {
          "elmType": "span",
          "txtContent": "@currentField",
          "style": {
            "font-weight": "500"
          }
        }
      ]
    }
  ]
}