From 5ffeb80f8d44a7eabcdfb4180c383a37dbcfde33 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 10 Nov 2021 15:32:01 +0200
Subject: [PATCH] UI: Improvement api usage page, incorrect display long button
 text

---
 .../home/pages/api-usage/api_usage_json.raw        | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw b/ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw
index 44b0b04b02..19351e4de3 100644
--- a/ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw
+++ b/ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw
@@ -1,6 +1,8 @@
 {
   "title": "Api Usage",
   "image": null,
+  "mobileHide": false,
+  "mobileOrder": null,
   "configuration": {
     "description": "",
     "widgets": {
@@ -125,7 +127,7 @@
           "padding": "0",
           "settings": {
             "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"javascript_functions_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>",
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
           },
           "title": "JavaScript functions",
           "dropShadow": true,
@@ -283,7 +285,7 @@
           "padding": "0",
           "settings": {
             "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"telemetry_persistence_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>",
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
           },
           "title": "Telemetry persistence",
           "dropShadow": true,
@@ -440,7 +442,7 @@
           "color": "#666666",
           "padding": "0",
           "settings": {
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n",
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n",
             "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"rule_engine_statistics_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-statistics}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n        <button id=\"rule_engine_execution_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>"
           },
           "title": "Rule Engine execution",
@@ -622,7 +624,7 @@
           "padding": "0",
           "settings": {
             "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n            var pointsCount = \"${pointsCount:0}\";\n            var pointsLimit = \"${pointsLimit:0}\";\n            pointsCount = pointsCount.length > 0 ? parseInt(pointsCount, 10) : 0;\n            pointsLimit = pointsLimit.length > 0 ? parseInt(pointsLimit, 10) : 0;\n            var pointsPercentElement = $('#api-usage-percent2', parentTag);\n            var pointsValueElement = $('#api-usage-value2', parentTag);\n            var pointsBarElement = $('#api-usage-bar2', parentTag);\n            if (Number.isFinite(pointsLimit) && pointsLimit > 0) {\n                var percent = Math.min(100, ((pointsCount / pointsLimit) * 100));\n                pointsBarElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                pointsPercentElement.text(percent + '%');\n                pointsValueElement.text(toShortNumber(pointsCount) + ' / ' + toShortNumber(pointsLimit));\n            } else {\n                pointsBarElement.width('0%');\n                pointsPercentElement.text('');\n                pointsValueElement.text(toShortNumber(pointsCount) + ' / ∞');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>\n                    <span>${title}</span>\n                </div>\n                <div class='state'>${apiState}</div>\n            </div>\n            <div class=\"bars-row\">\n                <div class=\"bar-column\" style=\"margin-right: 10px;\">\n                    <div class='bar-container'>\n                        <div class=\"unit\">{i18n:api-usage.messages}</div>\n                        <div class='bar'>\n                            <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                        </div>\n                        <div class='bar-labels'>\n                            <div id=\"api-usage-percent\"></div>\n                            <div style=\"flex: 1;\"></div>\n                            <div id=\"api-usage-value\"></div>\n                        </div>\n                    </div>    \n                </div>\n                <div class=\"bar-column\" style=\"margin-left: 10px;\">\n                    <div class='bar-container'>\n                        <div class=\"unit\">{i18n:api-usage.data-points}</div>\n                        <div class='bar'>\n                            <div class=\"bar-fill\" id=\"api-usage-bar2\"></div>\n                        </div>    \n                        <div class='bar-labels'>\n                            <div id=\"api-usage-percent2\"></div>\n                            <div style=\"flex: 1;\"></div>\n                            <div id=\"api-usage-value2\"></div>\n                        </div>\n                    </div>    \n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"transport_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div>    \n</div>",
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bars-row {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .bar-column {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 6px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n"
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bars-row {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .bar-column {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .mat-button {\n    text-transform: uppercase;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 6px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n"
           },
           "title": "Transport",
           "dropShadow": true,
@@ -780,7 +782,7 @@
           "padding": "0",
           "settings": {
             "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"email_messages_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>",
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
           },
           "title": "Alarm created",
           "dropShadow": true,
@@ -4054,7 +4056,7 @@
           "color": "#666666",
           "padding": "0",
           "settings": {
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bars-row {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .bar-column {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 6px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n",
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bars-row {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .bar-column {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .mat-button {\n    text-transform: uppercase;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 6px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n",
             "cardHtml": "<div class='card'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n\n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                    {key: 'Q', value: Math.pow(10, 15)},\n                    {key: 'T', value: Math.pow(10, 12)},\n                    {key: 'B', value: Math.pow(10, 9)},\n                    {key: 'M', value: Math.pow(10, 6)},\n                    {key: 'K', value: 1000}\n                ];\n\n                var key = '';\n\n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n\n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n            var pointsCount = \"${pointsCount:0}\";\n            var pointsLimit = \"${pointsLimit:0}\";\n            pointsCount = pointsCount.length > 0 ? parseInt(pointsCount, 10) : 0;\n            pointsLimit = pointsLimit.length > 0 ? parseInt(pointsLimit, 10) : 0;\n            var pointsPercentElement = $('#api-usage-percent2', parentTag);\n            var pointsValueElement = $('#api-usage-value2', parentTag);\n            var pointsBarElement = $('#api-usage-bar2', parentTag);\n            if (Number.isFinite(pointsLimit) && pointsLimit > 0) {\n                var percent = Math.min(100, ((pointsCount / pointsLimit) * 100));\n                pointsBarElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                pointsPercentElement.text(percent + '%');\n                pointsValueElement.text(toShortNumber(pointsCount) + ' / ' + toShortNumber(pointsLimit));\n            } else {\n                pointsBarElement.width('0%');\n                pointsPercentElement.text('');\n                pointsValueElement.text(toShortNumber(pointsCount) + ' / ∞');\n            }\n            var apiState = \"${apiState}\";\n            var apiStatePoint = \"${apiStatePoint}\";\n            var currentState;\n            if (apiState === 'DISABLED' || apiStatePoint === 'DISABLED') {\n                currentState = 'DISABLED';\n            } else if (apiState === 'WARNING' || apiStatePoint === 'WARNING') {\n                currentState = 'WARNING';\n            } else {\n                currentState = 'ENABLED';\n            }\n            var stateTitle = $('#api-state', parentTag);\n            stateTitle.text(currentState);\n            parentTag.classList.add(currentState.toLowerCase());\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>\n                    <span>${title}</span>\n                </div>\n                <div id=\"api-state\" class='state'></div>\n            </div>\n            <div class=\"bars-row\">\n                <div class=\"bar-column\" style=\"margin-right: 10px;\">\n                    <div class='bar-container'>\n                        <div class=\"unit\">{i18n:api-usage.email}</div>\n                        <div class='bar'>\n                            <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                        </div>\n                        <div class='bar-labels'>\n                            <div id=\"api-usage-percent\"></div>\n                            <div style=\"flex: 1;\"></div>\n                            <div id=\"api-usage-value\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"bar-column\" style=\"margin-left: 10px;\">\n                    <div class='bar-container'>\n                        <div class=\"unit\">{i18n:api-usage.sms}</div>\n                        <div class='bar'>\n                            <div class=\"bar-fill\" id=\"api-usage-bar2\"></div>\n                        </div>\n                        <div class='bar-labels'>\n                            <div id=\"api-usage-percent2\"></div>\n                            <div style=\"flex: 1;\"></div>\n                            <div id=\"api-usage-value2\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"transport_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div>\n</div>"
           },
           "title": "Notifications (Email/SMS)",