From 82116c0c2cdf08de1c06329969061bb3253895d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=98=84=EC=84=B1=ED=95=84?= <hyunsp@gmail.com>
Date: Fri, 3 May 2024 16:40:15 +0900
Subject: [PATCH] socket client

---
 src/main/resources/static/css/custom.css | 2087 +++++++++++-----------
 1 file changed, 1056 insertions(+), 1031 deletions(-)

diff --git a/src/main/resources/static/css/custom.css b/src/main/resources/static/css/custom.css
index e1bf241..7746959 100644
--- a/src/main/resources/static/css/custom.css
+++ b/src/main/resources/static/css/custom.css
@@ -1,1787 +1,1790 @@
 /* 이 파일은 커스텀 파일입니다*/
 body {
-    font-family: 'NanumGothicCoding', sans-serif !important;
-    /*font-family: 'NotoSansKR', sans-serif !important;*/
-    /*font-family: 'Nanum Gothic', sans-serif !important;*/
-    /*font-family: 'NanumBarunGothic', sans-serif !important;*/
+  font-family: 'NanumGothicCoding', sans-serif !important;
+  /*font-family: 'NotoSansKR', sans-serif !important;*/
+  /*font-family: 'Nanum Gothic', sans-serif !important;*/
+  /*font-family: 'NanumBarunGothic', sans-serif !important;*/
 
-    font-weight: bold;
+  font-weight: bold;
 }
 
 :root {
-    --border-color: #cacaca;
-    --background-color: #ffffff;
+  --border-color: #cacaca;
+  --background-color: #ffffff;
 
-    --background-box-title: #f7f7f7;
+  --background-box-title: #f7f7f7;
 }
 
 a {
-    color: #000 !important;
-    text-decoration: none !important;
+  color: #000 !important;
+  text-decoration: none !important;
 }
 
 h1 {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .mt70 {
-    margin-top: 70px;
+  margin-top: 70px;
 }
 
 ul li {
-    list-style: none;
+  list-style: none;
 }
 
 .logo {
-    display: block;
-    position: relative;
-    float: left;
-    text-indent: -99999px;
+  display: block;
+  position: relative;
+  float: left;
+  text-indent: -99999px;
 }
 
 .hr_bt {
-    display: block;
-    position: relative;
-    width: calc(100% - 30px);
-    /*margin: 30px auto 60px;*/
-    padding: 0;
-    border-top: 1px solid #222;
+  display: block;
+  position: relative;
+  width: calc(100% - 30px);
+  /*margin: 30px auto 60px;*/
+  padding: 0;
+  border-top: 1px solid #222;
 }
 
 .hr_bt_s {
-    display: block;
-    position: relative;
-    width: calc(100% - 240px);
-    margin: 0 auto 20px;
-    padding: 0;
-    border-top: 1px solid #ccc;
+  display: block;
+  position: relative;
+  width: calc(100% - 240px);
+  margin: 0 auto 20px;
+  padding: 0;
+  border-top: 1px solid #ccc;
 }
 
 a.btn.btn-primary {
-    color: #fff !important;
-    text-decoration: none !important;
+  color: #fff !important;
+  text-decoration: none !important;
 }
 
 .btn-primary {
-    background-color: #39077A;
-    border-color: #39077A;
+  background-color: #39077A;
+  border-color: #39077A;
 }
 
 .list-group-item.active {
-    background-color: #39077A !important;
-    border-color: #39077A !important;
+  background-color: #39077A !important;
+  border-color: #39077A !important;
 }
 
 .list-group-item.active > a {
-    color: #fff !important;
+  color: #fff !important;
 }
 
 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
-    background-color: #39077A;
+  background-color: #39077A;
 }
 
 .btn-primary:disabled {
-    background-color: #766d81;
-    border-color: #766d81;
+  background-color: #766d81;
+  border-color: #766d81;
 }
 
 .info_img {
-    display: block;
-    position: relative;
-    left: -5%;
-    padding: 70px 0;
+  display: block;
+  position: relative;
+  left: -5%;
+  padding: 70px 0;
 }
 
 /*공지사항*/
 .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
-    background-color: #f8f9fa;
+  background-color: #f8f9fa;
 }
 
 /*FAQ*/
 .panel-title > a {
-    font-size: 20px;
-    font-weight: 400;
+  font-size: 20px;
+  font-weight: 400;
 }
 
 .panel-group {
-    border-top: 1px solid #222;
-    border-bottom: 2px solid #222;
+  border-top: 1px solid #222;
+  border-bottom: 2px solid #222;
 }
 
 .panel,
 .panel-group .panel,
 .panel-heading {
-    border-radius: 0px; /*background: url(/developer/img/faq_arrow.png)no-repeat 1060px;*/
+  border-radius: 0px; /*background: url(/developer/img/faq_arrow.png)no-repeat 1060px;*/
 }
 
 /*.panel-heading.on {background: url(./developer/img/faq_arrow_on.png)no-repeat 1060px;}*/
 .panel-default {
-    border: none;
+  border: none;
 }
 
 .panel-default > .panel-heading {
-    padding: 25px 0 25px 30px;
-    border-top: 1px solid #222;
-    background-color: #fff;
+  padding: 25px 0 25px 30px;
+  border-top: 1px solid #222;
+  background-color: #fff;
 }
 
 .panel-default > .panel-heading:last-child {
-    border-bottom: 1px solid #222;
+  border-bottom: 1px solid #222;
 }
 
 .panel-default > .panel-heading + .panel-collapse .panel-body {
-    padding: 20px 30px 40px 30px;
-    font-size: 16px;
+  padding: 20px 30px 40px 30px;
+  font-size: 16px;
 }
 
 .panel-group .panel + .panel {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .collapse.in {
-    background-color: #f8f9fa;
+  background-color: #f8f9fa;
 }
 
 
 .panel-default .panel-title a:focus, .panel-default_s .panel-title a:focus {
-    color: #7456cf;
-    font-weight: 600;
+  color: #7456cf;
+  font-weight: 600;
 }
 
 
 .f-g-l fieldset {
-    display: block;
-    float: left;
-    clear: both;
-    width: 440px;
+  display: block;
+  float: left;
+  clear: both;
+  width: 440px;
 }
 
 .signup .idsave {
-    margin: 10px 0 0 95px;
+  margin: 10px 0 0 95px;
 }
 
 .b-example-divider {
-    flex-shrink: 0;
-    width: 1.5rem;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, .1);
-    border: solid rgba(0, 0, 0, .15);
-    border-width: 1px 0;
-    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
 }
 
 .btn-toggle {
-    display: inline-flex;
-    align-items: center;
-    width: 100%;
-    padding: 20px; /*margin: 10px 0 5px 0;*/
-    height: 30px;
-    background-color: /*transparent*/ #fff8eb;
-    border-radius: 4px;
-    border: 0;
-    font-weight: 500;
-    font-size: 16px;
-    color: #222;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  padding: 20px; /*margin: 10px 0 5px 0;*/
+  height: 30px;
+  background-color: /*transparent*/ #fff8eb;
+  border-radius: 4px;
+  border: 0;
+  font-weight: 500;
+  font-size: 16px;
+  color: #222;
 }
 
 .btn-toggle:hover,
 .btn-toggle:focus {
-    color: rgba(0, 0, 0, .85);
-    background-color: #fff8eb;
+  color: rgba(0, 0, 0, .85);
+  background-color: #fff8eb;
 }
 
 /* 화면 스크롤 해도 nav_bar를 상단에 고정 */
 .fixed_top {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 999;
-    background-color: #fff;
-    animation: appear 0.5s ease-in-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+  background-color: #fff;
+  animation: appear 0.5s ease-in-out;
 }
 
 .dropdown-menu {
-    min-width: 7rem !important;
+  min-width: 7rem !important;
 }
 
 .fixed_menu {
-    position: fixed;
-    top: 50px;
-    z-index: 999;
-    background-color: #fff;
-    display: block;
+  position: fixed;
+  top: 50px;
+  z-index: 999;
+  background-color: #fff;
+  display: block;
 }
 
 .btn-toggle[aria-expanded="true"] {
-    width: 100%;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 500;
-    background-color: #fd9b00;
+  width: 100%;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  background-color: #fd9b00;
 }
 
 .btn-toggle[aria-expanded="true"]::before {
-    transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 
 .btn-toggle-nav a {
-    display: inline-flex;
-    width: 100%;
-    padding: .1875rem .5rem;
-    margin-top: .125rem;
-    margin-left: 1.25rem;
-    text-decoration: none;
-    font-size: 15px;
-    font-weight: 400;
-    line-height: 1.5;
-    color: #222;
+  display: inline-flex;
+  width: 100%;
+  padding: .1875rem .5rem;
+  margin-top: .125rem;
+  margin-left: 1.25rem;
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #222;
 }
 
 
 .scrollarea {
-    overflow-y: auto;
+  overflow-y: auto;
 }
 
 .admin_content {
-    display: block;
-    position: relative;
-    margin: 0 auto;
+  display: block;
+  position: relative;
+  margin: 0 auto;
 }
 
 .has-error .form-control {
-    border-color: #dc312d;
+  border-color: #dc312d;
 }
 
 .explan.error {
-    color: #dc312d;
+  color: #dc312d;
 }
 
 
 /*테스트 등록*/
 .testregister_wrap {
-    width: 100%;
-    padding: 0;
-    border-radius: 10px;
-    border: 1px solid #ddd;
-    margin: 20px 0 40px 0;
+  width: 100%;
+  padding: 0;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  margin: 20px 0 40px 0;
 }
 
 .testregister_top {
-    padding: 40px 60px 40px 60px;
+  padding: 40px 60px 40px 60px;
 }
 
 .testregister_left, .testregister_right {
-    display: inline-block;
-    width: 49.8%;
-    padding: 40px 60px 60px 60px;
-    vertical-align: top;
+  display: inline-block;
+  width: 49.8%;
+  padding: 40px 60px 60px 60px;
+  vertical-align: top;
 }
 
 .testregister_left {
-    border-right: 1px solid #e6e6e6;
+  border-right: 1px solid #e6e6e6;
 }
 
 
 .testregister_wrap h3 {
-    display: block;
-    float: left;
-    margin-top: 10px;
-    font-weight: 600;
-    margin-bottom: 20px;
+  display: block;
+  float: left;
+  margin-top: 10px;
+  font-weight: 600;
+  margin-bottom: 20px;
 }
 
 .jg-regist {
-    display: block;
-    position: relative;
-    float: left;
-    width: 100%;
+  display: block;
+  position: relative;
+  float: left;
+  width: 100%;
 }
 
 .jg-regist table tr {
-    height: 40px;
-    font-size: 14px;
-    border-bottom: 1px solid #ddd;
+  height: 40px;
+  font-size: 14px;
+  border-bottom: 1px solid #ddd;
 }
 
 .jsgrid-table {
-    position: relative;
-    margin-left: 15px;
+  position: relative;
+  margin-left: 15px;
 }
 
 .jsgrid-table tbody tr td, .jsgrid-cell {
-    width: 150px;
+  width: 150px;
 }
 
 .testregister_wrap h3 span {
-    display: inline-block;
-    position: relative;
-    width: 26px;
-    height: 26px;
-    margin-right: 10px;
-    top: -2px;
-    background-color: #222;
-    border-radius: 50%;
-    text-align: center;
-    color: #fff;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 1.6;
+  display: inline-block;
+  position: relative;
+  width: 26px;
+  height: 26px;
+  margin-right: 10px;
+  top: -2px;
+  background-color: #222;
+  border-radius: 50%;
+  text-align: center;
+  color: #fff;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.6;
 }
 
 .testregister_wrap hr {
-    display: block;
-    width: 100%;
-    margin: 0;
-    border-color: #ddd;
+  display: block;
+  width: 100%;
+  margin: 0;
+  border-color: #ddd;
 }
 
 .testregister_result {
-    width: 100%;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    padding: 10px 0 10px 20px;
-    line-height: 1.7;
-    list-style: none;
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 10px 0 10px 20px;
+  line-height: 1.7;
+  list-style: none;
 }
 
 .testregister_select_tit {
-    float: left;
-    width: 100%;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    padding: 15px 0 15px 20px;
-    line-height: 1.7;
-    list-style: none;
+  float: left;
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 15px 0 15px 20px;
+  line-height: 1.7;
+  list-style: none;
 }
 
 .testregister_select_tit li {
-    text-align: center;
+  text-align: center;
 }
 
 .testregister_select {
-    float: left;
-    width: 100%;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    padding: 10px 20px;
-    background-color: #fafafa;
-    line-height: 1.7;
-    list-style: none;
+  float: left;
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 10px 20px;
+  background-color: #fafafa;
+  line-height: 1.7;
+  list-style: none;
 }
 
 .testregister_select li {
-    display: inline-block;
-    width: 100%;
-    height: 46px;
-    line-height: 2.8;
-    text-indent: 20px;
+  display: inline-block;
+  width: 100%;
+  height: 46px;
+  line-height: 2.8;
+  text-indent: 20px;
 }
 
 .testregister_select li:first-child {
-    border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
 }
 
 .testregister_select li:hover {
-    display: inline-block;
-    width: 100%;
-    background-color: #f1f1f1;
+  display: inline-block;
+  width: 100%;
+  background-color: #f1f1f1;
 }
 
 .testregister_result a, .testregister_select a {
-    color: #222;
+  color: #222;
 }
 
 .testregister_left .pagination {
-    margin-top: 15px;
+  margin-top: 15px;
 }
 
 .testregister_left .pagination ul li a,
 .testregister_left .pagination ul li.on a,
 .testregister_left .pagination ul li:hover a {
-    border-radius: 4px;
+  border-radius: 4px;
 }
 
 .testregister_detail {
-    padding: 40px 60px 40px 60px;
+  padding: 40px 60px 40px 60px;
 }
 
 .testregister_detail label {
-    font-size: 20px;
+  font-size: 20px;
 }
 
 .board_content {
-    padding: 10px;
-    line-height: 1.5;
-    text-indent: 0;
+  padding: 10px;
+  line-height: 1.5;
+  text-indent: 0;
 }
 
 .content_area {
-    display: grid;
-    grid-template-rows:auto auto;
-    grid-template-areas:"search" "list";
+  display: grid;
+  grid-template-rows:auto auto;
+  grid-template-areas:"search" "list";
 }
 
 .search_area {
-    grid-area: search;
+  grid-area: search;
 }
 
 .list_area {
-    grid-area: list
+  grid-area: list
 }
 
 /*기타 css*/
 .pt-navbar {
-    padding: .75rem 0;
-    background-color: #7952b3
+  padding: .75rem 0;
+  background-color: #7952b3
 }
 
 .pt-navbar .navbar-toggler {
-    padding: 0;
-    border: 0
+  padding: 0;
+  border: 0
 }
 
 .pt-navbar .navbar-nav .nav-link {
-    padding-right: .25rem;
-    padding-left: .25rem;
-    color: rgba(255, 255, 255, 0.85)
+  padding-right: .25rem;
+  padding-left: .25rem;
+  color: rgba(255, 255, 255, 0.85)
 }
 
 .pt-navbar .navbar-nav .nav-link:hover, .pt-navbar .navbar-nav .nav-link:focus {
-    color: #fff
+  color: #fff
 }
 
 .pt-navbar .navbar-nav .nav-link.active {
-    font-weight: 600;
-    color: #fff
+  font-weight: 600;
+  color: #fff
 }
 
 .pt-navbar .navbar-nav-svg {
-    width: 1rem;
-    height: 1rem
+  width: 1rem;
+  height: 1rem
 }
 
 .pt-search {
-    position: relative
+  position: relative
 }
 
 .pt-search::after {
-    position: absolute;
-    top: .4rem;
-    right: .4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.5rem;
-    padding-right: .25rem;
-    padding-left: .25rem;
-    font-size: .75rem;
-    color: #6c757d;
-    content: "Ctrl + /";
-    border: 1px solid #dee2e6;
-    border-radius: .125rem
+  position: absolute;
+  top: .4rem;
+  right: .4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  padding-right: .25rem;
+  padding-left: .25rem;
+  font-size: .75rem;
+  color: #6c757d;
+  content: "Ctrl + /";
+  border: 1px solid #dee2e6;
+  border-radius: .125rem
 }
 
 @media (max-width: 767.98px) {
-    .pt-search {
-        width: 100%
-    }
+  .pt-search {
+    width: 100%
+  }
 }
 
 .pt-sidebar-toggle {
-    color: #6c757d
+  color: #6c757d
 }
 
 .pt-sidebar-toggle:hover, .pt-sidebar-toggle:focus {
-    color: #7952b3
+  color: #7952b3
 }
 
 .pt-sidebar-toggle:focus {
-    box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
+  box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
 }
 
 .pt-sidebar-toggle .bi-collapse {
-    display: none
+  display: none
 }
 
 .pt-sidebar-toggle:not(.collapsed) .bi-expand {
-    display: none
+  display: none
 }
 
 .pt-sidebar-toggle:not(.collapsed) .bi-collapse {
-    display: inline-block
+  display: inline-block
 }
 
 .pt-masthead {
-    padding: 3rem 0;
-    background: linear-gradient(165deg, #f7f5fb 50%, #fff 50%)
+  padding: 3rem 0;
+  background: linear-gradient(165deg, #f7f5fb 50%, #fff 50%)
 }
 
 .pt-masthead h1 {
-    font-size: calc(1.525rem + 3.3vw);
-    line-height: 1
+  font-size: calc(1.525rem + 3.3vw);
+  line-height: 1
 }
 
 @media (min-width: 1200px) {
-    .container-main {
-        display: block;
-        position: relative;
-        min-width: 1170px;
-        background-color: #D4ECF1;
-    }
+  .container-main {
+    display: block;
+    position: relative;
+    min-width: 1170px;
+    background-color: #D4ECF1;
+  }
 
-    .pt-masthead h1 {
-        font-size: 4rem
-    }
+  .pt-masthead h1 {
+    font-size: 4rem
+  }
 }
 
 .pt-masthead p:not(.lead) {
-    color: #495057
+  color: #495057
 }
 
 .pt-masthead .btn {
-    padding: .8rem 2rem;
-    font-weight: 600
+  padding: .8rem 2rem;
+  font-weight: 600
 }
 
 .pt-masthead .lead {
-    font-size: calc(1.275rem + .3vw);
-    font-weight: 400;
-    color: #495057
+  font-size: calc(1.275rem + .3vw);
+  font-weight: 400;
+  color: #495057
 }
 
 @media (min-width: 1200px) {
-    .pt-masthead .lead {
-        font-size: 1.5rem
-    }
+  .pt-masthead .lead {
+    font-size: 1.5rem
+  }
 }
 
 @media (min-width: 768px) {
-    .mw-md-75 {
-        max-width: 75%
-    }
+  .mw-md-75 {
+    max-width: 75%
+  }
 }
 
 .masthead-followup-icon {
-    padding: .75rem;
-    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.01));
-    border-radius: .75rem;
-    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)
+  padding: .75rem;
+  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.01));
+  border-radius: .75rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)
 }
 
 .masthead-followup-svg {
-    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.125))
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.125))
 }
 
 @media (min-width: 768px) {
-    :root {
-        scroll-padding-top: 4rem
-    }
+  :root {
+    scroll-padding-top: 4rem
+  }
 }
 
 .pt-content > h2:not(:first-child) {
-    margin-top: 3rem
+  margin-top: 3rem
 }
 
 .pt-content > h3 {
-    margin-top: 2rem
+  margin-top: 2rem
 }
 
 .pt-content > ul li, .pt-content > ol li {
-    margin-bottom: .25rem
+  margin-bottom: .25rem
 }
 
 .pt-content > ul li > p ~ ul, .pt-content > ol li > p ~ ul {
-    margin-top: -.5rem;
-    margin-bottom: 1rem
+  margin-top: -.5rem;
+  margin-bottom: 1rem
 }
 
 .pt-content > .table {
-    max-width: 100%;
-    margin-bottom: 1.5rem;
-    font-size: .875rem
+  max-width: 100%;
+  margin-bottom: 1.5rem;
+  font-size: .875rem
 }
 
 @media (max-width: 991.98px) {
 
-    .logo_only {
-        display: none;
-    }
+  .logo_only {
+    display: none;
+  }
 
-    .pt-content > .table {
-        display: block;
-        overflow-x: auto
-    }
+  .pt-content > .table {
+    display: block;
+    overflow-x: auto
+  }
 
-    .pt-content > .table.table-bordered {
-        border: 0
-    }
+  .pt-content > .table.table-bordered {
+    border: 0
+  }
 }
 
 .pt-content > .table th:first-child, .pt-content > .table td:first-child {
-    padding-left: 0
+  padding-left: 0
 }
 
 .pt-content > .table th:not(:last-child), .pt-content > .table td:not(:last-child) {
-    padding-right: 1.5rem
+  padding-right: 1.5rem
 }
 
 .pt-content > .table td:first-child > code {
-    white-space: nowrap
+  white-space: nowrap
 }
 
 .pt-title {
-    font-size: calc(1.425rem + 2.1vw)
+  font-size: calc(1.425rem + 2.1vw)
 }
 
 @media (min-width: 1200px) {
-    .pt-title {
-        font-size: 3rem
-    }
+  .pt-title {
+    font-size: 3rem
+  }
 }
 
 @media (max-width: 849px) {
-    .hide {
-        display: none !important;
-    }
+  .hide {
+    display: none !important;
+  }
 }
 
 @media (min-width: 850px) {
-    .main_menu {
-        display: none !important;
-    }
+  .main_menu {
+    display: none !important;
+  }
 }
 
 .pt-lead {
-    font-size: calc(1.275rem + .3vw);
-    font-weight: 300
+  font-size: calc(1.275rem + .3vw);
+  font-weight: 300
 }
 
 @media (min-width: 1200px) {
-    .pt-lead {
-        font-size: 1.5rem
-    }
+  .pt-lead {
+    font-size: 1.5rem
+  }
 }
 
 .pt-text-purple-bright {
-    color: #7952b3
+  color: #7952b3
 }
 
 .pt-bg-purple-bright {
-    background-color: #7952b3
+  background-color: #7952b3
 }
 
 @media (max-width: 767.98px) {
-    .pt-sidebar {
-        margin: 0 -.75rem 1rem
-    }
+  .pt-sidebar {
+    margin: 0 -.75rem 1rem
+  }
 }
 
 .pt-links {
-    overflow: auto;
-    font-weight: 600
+  overflow: auto;
+  font-weight: 600
 }
 
 .pt-links {
-    top: 5rem;
-    display: block !important;
-    height: calc(100vh - 7rem);
-    padding-left: .25rem;
-    margin-left: -.25rem;
-    overflow-y: auto
+  top: 5rem;
+  display: block !important;
+  height: calc(100vh - 7rem);
+  padding-left: .25rem;
+  margin-left: -.25rem;
+  overflow-y: auto
 }
 
 .pt-links > ul {
-    /*padding: 1.5rem .75rem;*/
-    background-color: #f8f9fa;
-    border-bottom: 1px solid #e9ecef
+  /*padding: 1.5rem .75rem;*/
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #e9ecef
 }
 
 .pt-links a {
-    padding: .1875rem .5rem;
-    margin-top: .125rem;
-    margin-left: 1.25rem;
-    color: rgba(0, 0, 0, 1);
-    text-decoration: none
+  padding: .1875rem .5rem;
+  margin-top: .125rem;
+  margin-left: 1.25rem;
+  color: rgba(0, 0, 0, 1);
+  text-decoration: none
 }
 
 .pt-links a:hover, .pt-links a:focus {
-    color: rgba(0, 0, 0, 1);
-    background-color: rgba(121, 82, 179, 0.1)
+  color: rgba(0, 0, 0, 1);
+  background-color: rgba(121, 82, 179, 0.1)
 }
 
 .pt-links .btn {
-    padding: .25rem .5rem;
-    font-weight: 600;
-    color: rgba(0, 0, 0, 1);
-    background-color: transparent;
-    border: 0
+  padding: .25rem .5rem;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 1);
+  background-color: transparent;
+  border: 0
 }
 
 .pt-links .btn:hover, .pt-links .btn:focus {
-    color: rgba(0, 0, 0, 0.85);
-    background-color: rgba(121, 82, 179, 0.1)
+  color: rgba(0, 0, 0, 0.85);
+  background-color: rgba(121, 82, 179, 0.1)
 }
 
 .pt-links .btn:focus {
-    box-shadow: 0 0 0 1px rgba(121, 82, 179, 0.7)
+  box-shadow: 0 0 0 1px rgba(121, 82, 179, 0.7)
 }
 
 .pt-links .btn::before {
-    width: 1.25em;
-    line-height: 0;
-    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
-    transition: transform 0.35s ease;
-    transform-origin: .5em 50%
+  width: 1.25em;
+  line-height: 0;
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  transition: transform 0.35s ease;
+  transform-origin: .5em 50%
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .pt-links .btn::before {
-        transition: none
-    }
+  .pt-links .btn::before {
+    transition: none
+  }
 }
 
 .pt-links .btn[aria-expanded="true"] {
-    color: rgba(0, 0, 0, 0.85)
+  color: rgba(0, 0, 0, 0.85)
 }
 
 .pt-links .btn[aria-expanded="true"]::before {
-    transform: rotate(90deg)
+  transform: rotate(90deg)
 }
 
 .pt-links .active {
-    font-weight: 600;
-    color: rgba(0, 0, 0, 0.85)
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.85)
 }
 
 .full-screen {
-    background-color: #ffffff;
-    position: fixed; /* Fixed position to cover the whole screen */
-    top: 0;
-    left: 0;
-    width: 100vw; /* Full viewport width */
-    height: 100vh; /* Full viewport height */
-    z-index: 9999; /* High z-index to be on top of other content */
-    overflow: auto; /* Add scroll for overflowing content */
+  background-color: #ffffff;
+  position: fixed; /* Fixed position to cover the whole screen */
+  top: 0;
+  left: 0;
+  width: 100vw; /* Full viewport width */
+  height: 100vh; /* Full viewport height */
+  z-index: 9999; /* High z-index to be on top of other content */
+  overflow: auto; /* Add scroll for overflowing content */
 }
 
 .api-tester-layout {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .api-tester-layout .tester {
-    display: flex;
+  display: flex;
 }
 
 li.selected {
-    background-color: #39077A;
-    color: white !important;
+  background-color: #39077A;
+  color: white !important;
 }
 
 .load_test_list .selected {
-    background-color: #39077A;
+  background-color: #39077A;
 }
 
-.load_test_list .selected a{
-    color: white !important;
+.load_test_list .selected a {
+  color: white !important;
 }
-.load_test_list .selected i{
-    color: white !important;
+
+.load_test_list .selected i {
+  color: white !important;
 }
 
 .api-scenario, .api-catalog, .api-tester {
-    transition: transform 0.5s ease; /* Add transition to each child */
-    min-height: 100px; /* Adjust as needed */
+  transition: transform 0.5s ease; /* Add transition to each child */
+  min-height: 100px; /* Adjust as needed */
 }
 
 .api-catalog {
-    flex: 0 0 200px; /* Fixed width, not flexible */
-    /*order: 1; !* Keep the catalog in the middle *!*/
+  flex: 0 0 200px; /* Fixed width, not flexible */
+  /*order: 1; !* Keep the catalog in the middle *!*/
 }
 
 .api-scenario {
-    flex: 1; /* Flexible size */
-    display: flex;
+  flex: 1; /* Flexible size */
+  display: flex;
 }
 
 .api-scenario-list .selected {
-    background-color: #39077A;
+  background-color: #39077A;
 }
 
-.api-scenario-list .selected a{
-    color: white !important;
+.api-scenario-list .selected a {
+  color: white !important;
 }
-.api-scenario-list .selected i{
-    color: white !important;
+
+.api-scenario-list .selected i {
+  color: white !important;
 }
 
 
 .api-scenario-toolbar {
-    margin: 5px;
+  margin: 5px;
 }
 
 .api-scenario .api-scenario-sidebar {
-    width: 200px;
+  width: 200px;
 }
 
 .tester-toolbar {
-    height: 40px;
-    background: rgba(0, 0, 0, .03);
-    padding: 5px;
+  height: 40px;
+  background: rgba(0, 0, 0, .03);
+  padding: 5px;
 }
 
 .api-scenario .api-scenario-view {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    padding: 5px;
-    width: calc(100vw - 400px);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: 5px;
+  width: calc(100vw - 400px);
 }
 
 .api-scenario .api-scenario-content {
-    flex: 1;
-    padding: 5px;
-    display: flex;
-    flex-direction: column;
+  flex: 1;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
 }
 
 .api-scenario .api-scenario-content .api-scenario-editor {
-    flex: 1;
-    padding: 5px;
-    display: flex;
-    flex-direction: column;
+  flex: 1;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
 }
 
 .scenario_editor {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
 }
 
 .drawflow .drawflow-node.current-execution {
-    border: 4px solid lightskyblue;
+  border: 4px solid lightskyblue;
 }
 
 .drawflow .drawflow-node.result-success {
-    border: 4px solid forestgreen;
+  border: 4px solid forestgreen;
 }
 
 .drawflow .drawflow-node.result-error {
-    border: 4px solid lightcoral;
+  border: 4px solid lightcoral;
 }
 
 .drawflow .drawflow-node.result-abort {
-    border: 4px solid lightslategrey;
+  border: 4px solid lightslategrey;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 .fullHeight {
-    height: 100%;
+  height: 100%;
 }
 
 .halfHeight {
-    height: 50%;
+  height: 50%;
 }
 
 .api-scenario-output {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 5px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
 }
 
 .api-scenario-output-header {
-    height: 50px;
-    border: 1px solid grey;
-    padding: 5px;
+  height: 50px;
+  border: 1px solid grey;
+  padding: 5px;
 }
 
 .api-scenario-output-body {
-    flex: 1;
-    height: 50px;
-    border: 1px solid grey;
-    padding: 5px;
+  flex: 1;
+  height: 50px;
+  border: 1px solid grey;
+  padding: 5px;
 }
 
 
 .api-tester {
-    flex: 1; /* Flexible size */
-    order: 2; /* Positions to the right of .api-catalog */
+  width: calc(100% - 200px);
+  flex: 1; /* Flexible size */
+  order: 2; /* Positions to the right of .api-catalog */
 }
 
 
 @media (min-width: 768px) {
-    .pt-layout {
-        display: grid;
-        gap: 1.5rem;
-        grid-template-areas:"sidebar main";
-        grid-template-columns:1fr 3fr
-    }
+  .pt-layout {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-areas:"sidebar main";
+    grid-template-columns:1fr 3fr
+  }
 }
 
 @media (min-width: 992px) {
-    .pt-layout {
-        grid-template-columns:1fr 5fr
-    }
+  .pt-layout {
+    grid-template-columns:1fr 5fr
+  }
 }
 
 .pt-sidebar {
-    grid-area: sidebar;
-    /*width: 180px;*/
-    background-color: #f0f0f0;
+  grid-area: sidebar;
+  /*width: 180px;*/
+  background-color: #f0f0f0;
 }
 
 .pt-main {
-    grid-area: main
+  grid-area: main
 }
 
 @media (min-width: 768px) {
-    .pt-main {
-    }
+  .pt-main {
+  }
 }
 
 @media (min-width: 992px) {
-    .pt-main {
-        padding-top: 1rem;
-    }
+  .pt-main {
+    padding-top: 1rem;
+  }
 }
 
 .pt-intro {
-    grid-area: intro
+  grid-area: intro
 }
 
 .pt-toc {
-    grid-area: toc
+  grid-area: toc
 }
 
 .pt-content {
-    grid-area: content;
-    min-width: 1px
+  grid-area: content;
+  min-width: 1px
 }
 
 @media (min-width: 992px) {
-    .pt-toc {
-        top: 5rem;
-        right: 0;
-        z-index: 2;
-        height: calc(100vh - 7rem);
-        overflow-y: auto
-    }
+  .pt-toc {
+    top: 5rem;
+    right: 0;
+    z-index: 2;
+    height: calc(100vh - 7rem);
+    overflow-y: auto
+  }
 }
 
 .pt-toc nav {
-    font-size: .875rem
+  font-size: .875rem
 }
 
 .pt-toc nav ul {
-    padding-left: 0;
-    list-style: none
+  padding-left: 0;
+  list-style: none
 }
 
 .pt-toc nav ul ul {
-    padding-left: 1rem;
-    margin-top: .25rem
+  padding-left: 1rem;
+  margin-top: .25rem
 }
 
 .pt-toc nav li {
-    margin-bottom: .25rem
+  margin-bottom: .25rem
 }
 
 .pt-toc nav a {
-    color: inherit
+  color: inherit
 }
 
 .pt-toc nav a:not(:hover) {
-    text-decoration: none
+  text-decoration: none
 }
 
 .pt-toc nav a code {
-    font: inherit
+  font: inherit
 }
 
 .pt-footer a {
-    color: #495057;
-    text-decoration: none
+  color: #495057;
+  text-decoration: none
 }
 
 .pt-footer a:hover, .pt-footer a:focus {
-    color: #0d6efd;
-    text-decoration: underline
+  color: #0d6efd;
+  text-decoration: underline
 }
 
 .pt-highlight {
-    background-color: rgba(86, 61, 124, 0.15);
-    border: 1px solid rgba(86, 61, 124, 0.15)
+  background-color: rgba(86, 61, 124, 0.15);
+  border: 1px solid rgba(86, 61, 124, 0.15)
 }
 
 
 .tooltip-demo a {
-    white-space: nowrap
+  white-space: nowrap
 }
 
 .highlight {
-    padding: 1rem;
-    margin-bottom: 1rem;
-    background-color: #f8f9fa
+  padding: 1rem;
+  margin-bottom: 1rem;
+  background-color: #f8f9fa
 }
 
 @media (min-width: 576px) {
-    .highlight {
-        padding: 1rem 1.5rem
-    }
+  .highlight {
+    padding: 1rem 1.5rem
+  }
 }
 
 .highlight pre {
-    padding: 0;
-    margin-top: .65rem;
-    margin-bottom: .65rem;
-    white-space: pre;
-    background-color: transparent;
-    border: 0
+  padding: 0;
+  margin-top: .65rem;
+  margin-bottom: .65rem;
+  white-space: pre;
+  background-color: transparent;
+  border: 0
 }
 
 .highlight pre code {
-    font-size: inherit;
-    color: #212529;
-    word-wrap: normal
+  font-size: inherit;
+  color: #212529;
+  word-wrap: normal
 }
 
 .pt-content .highlight {
-    margin-right: -.75rem;
-    margin-left: -.75rem
+  margin-right: -.75rem;
+  margin-left: -.75rem
 }
 
 @media (min-width: 576px) {
-    .pt-content .highlight {
-        margin-right: 0;
-        margin-left: 0
-    }
+  .pt-content .highlight {
+    margin-right: 0;
+    margin-left: 0
+  }
 }
 
 .btn-pt-primary {
-    font-weight: 600;
-    color: #fff;
-    background-color: #7952b3;
-    border-color: #7952b3;
+  font-weight: 600;
+  color: #fff;
+  background-color: #7952b3;
+  border-color: #7952b3;
 }
 
 .nav-pills .nav-link.active {
-    font-weight: 600 !important;
-    color: #fff !important;
-    background-color: #39077A !important;
-    border-color: #39077A !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+  background-color: #39077A !important;
+  border-color: #39077A !important;
 }
 
 .btn-pt-primary:hover, .btn-pt-primary:active {
-    color: #fff;
-    background-color: #61428f;
-    border-color: #61428f
+  color: #fff;
+  background-color: #61428f;
+  border-color: #61428f
 }
 
 .btn-pt-primary:focus {
-    box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
+  box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
 }
 
 .btn-pt-download {
-    font-weight: 600;
-    color: #ffe484;
-    border-color: #ffe484
+  font-weight: 600;
+  color: #ffe484;
+  border-color: #ffe484
 }
 
 .btn-pt-download:hover, .btn-pt-download:active {
-    color: #2a2730;
-    background-color: #ffe484;
-    border-color: #ffe484
+  color: #2a2730;
+  background-color: #ffe484;
+  border-color: #ffe484
 }
 
 .btn-pt-download:focus {
-    box-shadow: 0 0 0 3px rgba(255, 228, 132, 0.25)
+  box-shadow: 0 0 0 3px rgba(255, 228, 132, 0.25)
 }
 
 .btn-pt-light {
-    color: #6c757d;
-    border-color: #dee2e6
+  color: #6c757d;
+  border-color: #dee2e6
 }
 
 .show > .btn-pt-light, .btn-pt-light:hover, .btn-pt-light:active {
-    color: #7952b3;
-    background-color: #fff;
-    border-color: #7952b3
+  color: #7952b3;
+  background-color: #fff;
+  border-color: #7952b3
 }
 
 .btn-pt-light:focus {
-    box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
+  box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
 }
 
 .pt-callout {
-    padding: 1.25rem;
-    margin-top: 1.25rem;
-    margin-bottom: 1.25rem;
-    border: 1px solid #e9ecef;
-    border-left-width: .25rem;
-    border-radius: .25rem
+  padding: 1.25rem;
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+  border: 1px solid #e9ecef;
+  border-left-width: .25rem;
+  border-radius: .25rem
 }
 
 .pt-callout h4 {
-    margin-bottom: .25rem
+  margin-bottom: .25rem
 }
 
 .pt-callout p:last-child {
-    margin-bottom: 0
+  margin-bottom: 0
 }
 
 .pt-callout code {
-    border-radius: .25rem
+  border-radius: .25rem
 }
 
 .pt-callout + .pt-callout {
-    margin-top: -.25rem
+  margin-top: -.25rem
 }
 
 .pt-callout-info {
-    border-left-color: #5bc0de
+  border-left-color: #5bc0de
 }
 
 .pt-callout-warning {
-    border-left-color: #f0ad4e
+  border-left-color: #f0ad4e
 }
 
 .pt-callout-danger {
-    border-left-color: #d9534f
+  border-left-color: #d9534f
 }
 
 .pt-brand-logos {
-    color: #7952b3
+  color: #7952b3
 }
 
 .pt-brand-logos .inverse {
-    color: #fff;
-    background-color: #7952b3
+  color: #fff;
+  background-color: #7952b3
 }
 
 .pt-brand-item + .pt-brand-item {
-    border-top: 1px solid #fff
+  border-top: 1px solid #fff
 }
 
 @media (min-width: 768px) {
-    .pt-brand-item + .pt-brand-item {
-        border-top: 0;
-        border-left: 1px solid #fff
-    }
+  .pt-brand-item + .pt-brand-item {
+    border-top: 0;
+    border-left: 1px solid #fff
+  }
 }
 
 .color-swatches {
-    margin: 0 -5px
+  margin: 0 -5px
 }
 
 .color-swatches .pt-purple {
-    background-color: #563d7c
+  background-color: #563d7c
 }
 
 .color-swatches .pt-purple-light {
-    background-color: #cbbde2
+  background-color: #cbbde2
 }
 
 .color-swatches .pt-purple-lighter {
-    background-color: #e5e1ea
+  background-color: #e5e1ea
 }
 
 .color-swatches .pt-gray {
-    background-color: #f9f9f9
+  background-color: #f9f9f9
 }
 
 .color-swatch {
-    width: 4rem;
-    height: 4rem
+  width: 4rem;
+  height: 4rem
 }
 
 @media (min-width: 768px) {
-    .color-swatch {
-        width: 6rem;
-        height: 6rem
-    }
+  .color-swatch {
+    width: 6rem;
+    height: 6rem
+  }
 }
 
 .swatch-blue {
-    color: #fff;
-    background-color: #0d6efd
+  color: #fff;
+  background-color: #0d6efd
 }
 
 .swatch-blue::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "4.50" "\a" "4.50" "\a" "4.66";
-    background-color: #0d6efd;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "4.50" "\a" "4.50" "\a" "4.66";
+  background-color: #0d6efd;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-indigo {
-    color: #fff;
-    background-color: #6610f2
+  color: #fff;
+  background-color: #6610f2
 }
 
 .swatch-indigo::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "7.18" "\a" "7.18" "\a" "2.92";
-    background-color: #6610f2;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "7.18" "\a" "7.18" "\a" "2.92";
+  background-color: #6610f2;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-purple {
-    color: #fff;
-    background-color: #6f42c1
+  color: #fff;
+  background-color: #6f42c1
 }
 
 .swatch-purple::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "6.51" "\a" "6.51" "\a" "3.22";
-    background-color: #6f42c1;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "6.51" "\a" "6.51" "\a" "3.22";
+  background-color: #6f42c1;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-pink {
-    color: #fff;
-    background-color: #d63384
+  color: #fff;
+  background-color: #d63384
 }
 
 .swatch-pink::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "4.50" "\a" "4.50" "\a" "4.66";
-    background-color: #d63384;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "4.50" "\a" "4.50" "\a" "4.66";
+  background-color: #d63384;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-red {
-    color: #fff;
-    background-color: #dc3545
+  color: #fff;
+  background-color: #dc3545
 }
 
 .swatch-red::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "4.52" "\a" "4.52" "\a" "4.63";
-    background-color: #dc3545;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "4.52" "\a" "4.52" "\a" "4.63";
+  background-color: #dc3545;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-orange {
-    color: #000;
-    background-color: #fd7e14
+  color: #000;
+  background-color: #fd7e14
 }
 
 .swatch-orange::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "8.17" "\a" "2.57" "\a" "8.17";
-    background-color: #fd7e14;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "8.17" "\a" "2.57" "\a" "8.17";
+  background-color: #fd7e14;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-yellow {
-    color: #000;
-    background-color: #ffc107
+  color: #000;
+  background-color: #ffc107
 }
 
 .swatch-yellow::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "12.8" "\a" "1.63" "\a" "12.8";
-    background-color: #ffc107;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "12.8" "\a" "1.63" "\a" "12.8";
+  background-color: #ffc107;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-green {
-    color: #fff;
-    background-color: #198754
+  color: #fff;
+  background-color: #198754
 }
 
 .swatch-green::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "4.53" "\a" "4.53" "\a" "4.63";
-    background-color: #198754;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "4.53" "\a" "4.53" "\a" "4.63";
+  background-color: #198754;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-teal {
-    color: #000;
-    background-color: #20c997
+  color: #000;
+  background-color: #20c997
 }
 
 .swatch-teal::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "9.86" "\a" "2.12" "\a" "9.86";
-    background-color: #20c997;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "9.86" "\a" "2.12" "\a" "9.86";
+  background-color: #20c997;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-cyan {
-    color: #000;
-    background-color: #0dcaf0
+  color: #000;
+  background-color: #0dcaf0
 }
 
 .swatch-cyan::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "10.7" "\a" "1.95" "\a" "10.7";
-    background-color: #0dcaf0;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "10.7" "\a" "1.95" "\a" "10.7";
+  background-color: #0dcaf0;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-white {
-    color: #000;
-    background-color: #fff
+  color: #000;
+  background-color: #fff
 }
 
 .swatch-white::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "21" "\a" "1" "\a" "21";
-    background-color: #fff;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "21" "\a" "1" "\a" "21";
+  background-color: #fff;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-gray {
-    color: #fff;
-    background-color: #6c757d
+  color: #fff;
+  background-color: #6c757d
 }
 
 .swatch-gray::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "4.68" "\a" "4.68" "\a" "4.47";
-    background-color: #6c757d;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "4.68" "\a" "4.68" "\a" "4.47";
+  background-color: #6c757d;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-gray-dark {
-    color: #fff;
-    background-color: #343a40
+  color: #fff;
+  background-color: #343a40
 }
 
 .swatch-gray-dark::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "11.5" "\a" "11.5" "\a" "1.82";
-    background-color: #343a40;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "11.5" "\a" "11.5" "\a" "1.82";
+  background-color: #343a40;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 .swatch-gray-500 {
-    color: #000;
-    background-color: #adb5bd
+  color: #000;
+  background-color: #adb5bd
 }
 
 .swatch-gray-500::after {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding-left: 1rem;
-    font-size: .75rem;
-    line-height: 1.35;
-    white-space: pre;
-    content: "10.1" "\a" "2.07" "\a" "10.1";
-    background-color: #adb5bd;
-    background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
-    background-repeat: no-repeat;
-    background-size: .5rem 100%
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding-left: 1rem;
+  font-size: .75rem;
+  line-height: 1.35;
+  white-space: pre;
+  content: "10.1" "\a" "2.07" "\a" "10.1";
+  background-color: #adb5bd;
+  background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
+  background-repeat: no-repeat;
+  background-size: .5rem 100%
 }
 
 
 .pt-clipboard {
-    position: relative;
-    display: none;
-    float: right
+  position: relative;
+  display: none;
+  float: right
 }
 
 .pt-clipboard + .highlight {
-    margin-top: 0
+  margin-top: 0
 }
 
 @media (min-width: 768px) {
-    .pt-clipboard {
-        display: block
-    }
+  .pt-clipboard {
+    display: block
+  }
 }
 
 .btn-clipboard {
-    position: absolute;
-    top: .65rem;
-    right: .65rem;
-    z-index: 10;
-    display: block;
-    padding: .25rem .5rem;
-    font-size: .65em;
-    color: #0d6efd;
-    background-color: #fff;
-    border: 1px solid;
-    border-radius: .25rem
+  position: absolute;
+  top: .65rem;
+  right: .65rem;
+  z-index: 10;
+  display: block;
+  padding: .25rem .5rem;
+  font-size: .65em;
+  color: #0d6efd;
+  background-color: #fff;
+  border: 1px solid;
+  border-radius: .25rem
 }
 
 .btn-clipboard:hover, .btn-clipboard:focus {
-    color: #fff;
-    background-color: #0d6efd
+  color: #fff;
+  background-color: #0d6efd
 }
 
 .pt-placeholder-img {
-    font-size: 1.125rem;
-    text-anchor: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none
+  font-size: 1.125rem;
+  text-anchor: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none
 }
 
 .pt-placeholder-img-lg {
-    font-size: calc(1.475rem + 2.7vw)
+  font-size: calc(1.475rem + 2.7vw)
 }
 
 @media (min-width: 1200px) {
-    .pt-placeholder-img-lg {
-        font-size: 3.5rem
-    }
+  .pt-placeholder-img-lg {
+    font-size: 3.5rem
+  }
 }
 
 .pt-table {
-    table-layout: fixed;
-    width: 100%;
-    white-space: nowrap;
-    background-color: #fff;
-    border-top: 1px solid #7f7677;
+  table-layout: fixed;
+  width: 100%;
+  white-space: nowrap;
+  background-color: #fff;
+  border-top: 1px solid #7f7677;
 }
 
 .pt-table thead tr th {
-    background-color: #f6f6f6;
-    letter-spacing: 0;
+  background-color: #f6f6f6;
+  letter-spacing: 0;
 }
 
 .pt-table tbody tr td {
-    letter-spacing: 0;
+  letter-spacing: 0;
 }
 
 .pt-table thead tr th,
 .pt-table tbody tr td {
-    border-bottom: 1px solid #cbcfd2;
-    letter-spacing: 0;
+  border-bottom: 1px solid #cbcfd2;
+  letter-spacing: 0;
 }
 
 .pt-table tbody tr:hover {
-    background-color: #fafafa;
-    cursor: pointer;
+  background-color: #fafafa;
+  cursor: pointer;
 }
 
 .pt-table tbody tr:last-child td {
-    border-bottom: 1px solid #7e7e7e;
+  border-bottom: 1px solid #7e7e7e;
 }
 
 .pt-table th, .pt-table td {
-    padding: 9px 0;
+  padding: 9px 0;
 }
 
 ul.api_tab > li > a > .active {
-    color: #ffffff !important;
-    font-weight: bold;
+  color: #ffffff !important;
+  font-weight: bold;
 }
 
 footer {
-    display: block;
-    position: relative;
-    margin-top: 20px;
+  display: block;
+  position: relative;
+  margin-top: 20px;
 }
 
 .scroll_top {
-    display: block;
-    position: absolute;
-    right: 15px;
-    width: 34px;
-    height: 34px;
-    background: #666 url(/developer/img/footer_top_arrow.png) no-repeat center 3px;
+  display: block;
+  position: absolute;
+  right: 15px;
+  width: 34px;
+  height: 34px;
+  background: #666 url(/developer/img/footer_top_arrow.png) no-repeat center 3px;
 }
 
 footer div.foot_info {
-    display: block;
-    position: relative;
-    width: 100%;
-    border-top: 1px solid #666;
-    padding: 30px 0 50px 30px;
-    margin: 32px 0 0 0;
+  display: block;
+  position: relative;
+  width: 100%;
+  border-top: 1px solid #666;
+  padding: 30px 0 50px 30px;
+  margin: 32px 0 0 0;
 }
 
 footer div.foot_info span {
-    font-size: .8rem;
-    letter-spacing: .2px;
+  font-size: .8rem;
+  letter-spacing: .2px;
 }
 
 @media (max-width: 1459px) {
-    .header {
-        max-width: 100% !important;
-    }
+  .header {
+    max-width: 100% !important;
+  }
 }
 
 @media (min-width: 1460px) {
-    .header {
-        max-width: 1460px !important;
-    }
+  .header {
+    max-width: 1460px !important;
+  }
 }
 
 .cut-sides {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 @media (max-width: 1919px) {
 
-    .figure_img {
-        width: 100%;
-        display: block;
-        margin: 0 auto;
-        object-fit: cover;
-        object-position: center;
-    }
+  .figure_img {
+    width: 100%;
+    display: block;
+    margin: 0 auto;
+    object-fit: cover;
+    object-position: center;
+  }
 }
 
 @media (min-width: 1920px) {
-    .figure_img {
-        width: 1900px;
-        display: block;
-        margin: 0 auto;
-        object-fit: contain;
-        object-position: center;
-    }
+  .figure_img {
+    width: 1900px;
+    display: block;
+    margin: 0 auto;
+    object-fit: contain;
+    object-position: center;
+  }
 }
 
 .api_banner {
-    display: block;
-    width: 220px;
-    height: 50px;
-    background: url(/developer/img/api_mainban.png);
+  display: block;
+  width: 220px;
+  height: 50px;
+  background: url(/developer/img/api_mainban.png);
 }
 
 .api_banner a {
-    display: block;
-    width: 220px;
-    height: 50px;
+  display: block;
+  width: 220px;
+  height: 50px;
 }
 
 @media (min-width: 576px) {
-    .rounded-nav {
-        border-radius: 50rem !important;
-    }
+  .rounded-nav {
+    border-radius: 50rem !important;
+  }
 }
 
 @media (min-width: 576px) {
-    .rounded-nav .nav-link {
-        border-radius: 50rem !important;
-    }
+  .rounded-nav .nav-link {
+    border-radius: 50rem !important;
+  }
 }
 
 .form-select option[value="POST"] {
-    background-color: #49cc90 !important;
+  background-color: #49cc90 !important;
 }
 
 .post {
-    background-color: #e5bc8d;
+  background-color: #e5bc8d;
 }
 
 .note-editor.note-frame.fullscreen {
-    background-color: white;
+  background-color: white;
 }
 
 .page-item.draft .page-link {
-    background-color: lightblue;
+  background-color: lightblue;
 }
 
 .page-item.archived .page-link {
-    background-color: lightgrey;
+  background-color: lightgrey;
 }
 
 .dev {
-    background-color: #f74140 !important;
-    color: white !important;
+  background-color: #f74140 !important;
+  color: white !important;
 }
 
 .prod {
-    background-color: #49cc90 !important;
-    color: white !important;
+  background-color: #49cc90 !important;
+  color: white !important;
 }
 
 .current {
-    color: #39077A !important;
+  color: #39077A !important;
 }
 
 .reset-button {
-    /* Reset button styles */
-    background: none;
-    border: none;
-    color: inherit;
-    cursor: pointer;
-    padding: 0;
-    font: inherit;
-    outline: inherit;
+  /* Reset button styles */
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  font: inherit;
+  outline: inherit;
 
-    /* Style the icon */
-    display: inline-block;
-    margin-right: 5px; /* Adjust this value as per your requirement */
+  /* Style the icon */
+  display: inline-block;
+  margin-right: 5px; /* Adjust this value as per your requirement */
 }
 
 #drawflow {
-    position: relative;
-    width: calc(100vw - 440px);
-    height: calc(100vh - 520px);
-    background: var(--background-color);
-    background-size: 25px 25px;
-    background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
-    overflow: auto;
+  position: relative;
+  width: calc(100vw - 440px);
+  height: calc(100vh - 520px);
+  background: var(--background-color);
+  background-size: 25px 25px;
+  background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
+  overflow: auto;
 }
 
 .drag-drawflow {
-    line-height: 50px;
-    border-bottom: 1px solid var(--border-color);
-    padding-left: 20px;
-    cursor: move;
-    user-select: none;
+  line-height: 50px;
+  border-bottom: 1px solid var(--border-color);
+  padding-left: 20px;
+  cursor: move;
+  user-select: none;
 }
 
 .drawflow .drawflow-node {
-    background: var(--background-color);
-    /*border: 1px solid var(--border-color);*/
-    -webkit-box-shadow: 0 2px 15px 2px var(--border-color);
-    box-shadow: 0 2px 15px 2px var(--border-color);
-    /*padding: 0px;*/
-    /*width: 200px;*/
+  background: var(--background-color);
+  /*border: 1px solid var(--border-color);*/
+  -webkit-box-shadow: 0 2px 15px 2px var(--border-color);
+  box-shadow: 0 2px 15px 2px var(--border-color);
+  /*padding: 0px;*/
+  /*width: 200px;*/
 }
 
 .drawflow .drawflow-node.selected {
-    background: white;
-    border: 1px solid #4ea9ff;
-    -webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
-    box-shadow: 0 2px 20px 2px #4ea9ff;
+  background: white;
+  border: 1px solid #4ea9ff;
+  -webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
+  box-shadow: 0 2px 20px 2px #4ea9ff;
 }
 
 .drawflow .drawflow-node.start {
-    width: 100px; /* or any size */
-    height: 100px; /* should be the same as width for a perfect diamond */
-    border-radius: 50%;
+  width: 100px; /* or any size */
+  height: 100px; /* should be the same as width for a perfect diamond */
+  border-radius: 50%;
 }
 
 .drawflow .drawflow-node.api {
-    padding: 0;
+  padding: 0;
 }
 
 .drawflow .drawflow-node.api .output {
-    right: 10px;
+  right: 10px;
 }
 
 .drawflow .drawflow-node.api .input {
-    left: -10px;
-    background: white;
+  left: -10px;
+  background: white;
 }
 
 .drawflow .drawflow-node.selected .title-box {
-    color: #22598c;
+  color: #22598c;
 }
 
 .drawflow .connection .main-path {
-    stroke: #4ea9ff;
-    stroke-width: 3px;
+  stroke: #4ea9ff;
+  stroke-width: 3px;
 }
 
 /*.drawflow .drawflow-node .input, .drawflow .drawflow-node .output {*/
@@ -1791,7 +1794,7 @@ footer div.foot_info span {
 /*}*/
 
 .drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover {
-    background: #4ea9ff;
+  background: #4ea9ff;
 }
 
 /*.drawflow .drawflow-node .output {*/
@@ -1804,242 +1807,264 @@ footer div.foot_info span {
 /*}*/
 
 .drawflow > .drawflow-delete {
-    border: 2px solid #43b993;
-    background: white;
-    color: #43b993;
-    -webkit-box-shadow: 0 2px 20px 2px #43b993;
-    box-shadow: 0 2px 20px 2px #43b993;
+  border: 2px solid #43b993;
+  background: white;
+  color: #43b993;
+  -webkit-box-shadow: 0 2px 20px 2px #43b993;
+  box-shadow: 0 2px 20px 2px #43b993;
 }
 
 .drawflow-delete {
-    border: 2px solid #4ea9ff;
-    background: white;
-    color: #4ea9ff;
-    -webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
-    box-shadow: 0 2px 20px 2px #4ea9ff;
+  border: 2px solid #4ea9ff;
+  background: white;
+  color: #4ea9ff;
+  -webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
+  box-shadow: 0 2px 20px 2px #4ea9ff;
 }
 
 .drawflow-node .title-box {
-    height: 50px;
-    line-height: 50px;
-    background: var(--background-box-title);
-    border-bottom: 1px solid #e9e9e9;
-    border-radius: 4px 4px 0px 0px;
-    padding-left: 10px;
+  height: 50px;
+  line-height: 50px;
+  background: var(--background-box-title);
+  border-bottom: 1px solid #e9e9e9;
+  border-radius: 4px 4px 0px 0px;
+  padding-left: 10px;
 }
 
 .drawflow .title-box svg {
-    position: initial;
+  position: initial;
 }
 
 .drawflow-node .box {
-    padding: 10px 20px 20px 20px;
-    font-size: 14px;
-    color: #555555;
+  padding: 10px 20px 20px 20px;
+  font-size: 14px;
+  color: #555555;
 
 }
 
 .drawflow-node .box p {
-    margin-top: 5px;
-    margin-bottom: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 
 .drawflow-node input, .drawflow-node select, .drawflow-node textarea {
-    border-radius: 4px;
-    border: 1px solid var(--border-color);
-    height: 30px;
-    line-height: 30px;
-    font-size: 16px;
-    width: 158px;
-    color: #555555;
+  border-radius: 4px;
+  border: 1px solid var(--border-color);
+  height: 30px;
+  line-height: 30px;
+  font-size: 16px;
+  width: 158px;
+  color: #555555;
 }
 
 .drawflow-node textarea {
-    height: 100px;
+  height: 100px;
 }
 
 
 .drawflow .connection .point {
-    stroke: var(--border-color);
-    stroke-width: 2;
-    fill: white;
+  stroke: var(--border-color);
+  stroke-width: 2;
+  fill: white;
 
 }
 
 .drawflow .connection .point.selected, .drawflow .connection .point:hover {
-    fill: #4ea9ff;
+  fill: #4ea9ff;
 }
 
 .btn-export {
-    float: right;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    color: white;
-    font-weight: bold;
-    border: 1px solid #0e5ba3;
-    background: #4ea9ff;
-    padding: 5px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-    z-index: 5;
+  float: right;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: white;
+  font-weight: bold;
+  border: 1px solid #0e5ba3;
+  background: #4ea9ff;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 5;
 }
 
 .btn-clear {
-    float: right;
-    position: absolute;
-    top: 10px;
-    right: 85px;
-    color: white;
-    font-weight: bold;
-    border: 1px solid #96015b;
-    background: #e3195a;
-    padding: 5px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-    z-index: 5;
+  float: right;
+  position: absolute;
+  top: 10px;
+  right: 85px;
+  color: white;
+  font-weight: bold;
+  border: 1px solid #96015b;
+  background: #e3195a;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 5;
 }
 
 .btn-lock {
-    float: right;
-    position: absolute;
-    bottom: 10px;
-    right: 140px;
-    display: flex;
-    font-size: 24px;
-    color: white;
-    padding: 5px 10px;
-    background: #555555;
-    border-radius: 4px;
-    border-right: 1px solid var(--border-color);
-    z-index: 5;
-    cursor: pointer;
+  float: right;
+  position: absolute;
+  bottom: 10px;
+  right: 140px;
+  display: flex;
+  font-size: 24px;
+  color: white;
+  padding: 5px 10px;
+  background: #555555;
+  border-radius: 4px;
+  border-right: 1px solid var(--border-color);
+  z-index: 5;
+  cursor: pointer;
 }
 
 .bar-zoom {
-    float: right;
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
-    display: flex;
-    font-size: 24px;
-    color: white;
-    padding: 5px 10px;
-    background: #555555;
-    border-radius: 4px;
-    border-right: 1px solid var(--border-color);
-    z-index: 5;
+  float: right;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  display: flex;
+  font-size: 24px;
+  color: white;
+  padding: 5px 10px;
+  background: #555555;
+  border-radius: 4px;
+  border-right: 1px solid var(--border-color);
+  z-index: 5;
 }
 
 .bar-zoom svg {
-    cursor: pointer;
-    padding-left: 20px;
+  cursor: pointer;
+  padding-left: 20px;
 }
 
 .bar-zoom svg:nth-child(1) {
-    padding-left: 20px;
+  padding-left: 20px;
 }
 
-.response_headers td{
-    padding: 1px !important;
+.response_headers td {
+  padding: 1px !important;
 }
+
 .api_request_info {
-    display: flex;
-    flex-direction: row;
-    width: 100%; /* Makes the div take the full width of its parent */
+  display: flex;
+  flex-direction: row;
+  width: 100%; /* Makes the div take the full width of its parent */
 }
 
 .editableInput {
-    white-space: normal;
-    overflow: hidden;
+  white-space: normal;
+  overflow: hidden;
 }
 
 .form-floating.editableInput {
-    flex-grow: 1; /* This allows the editableInput to grow and take up remaining space */
-    display: flex; /* This will align the contenteditable div and the hidden input inside it */
-    max-width: calc(100vw - 840px);
+  flex-grow: 1; /* This allows the editableInput to grow and take up remaining space */
+  display: flex; /* This will align the contenteditable div and the hidden input inside it */
+  max-width: calc(100vw - 840px);
 }
 
 .editableInputContent {
-    white-space: normal;
-    flex-grow: 1;
-    overflow: hidden; /* Add scrollbars when content overflows */
-    word-break: break-word; /* Breaks long words to prevent overflow */
-    /*max-width: 100%; !* Optional, depending on layout *!*/
+  white-space: normal;
+  flex-grow: 1;
+  overflow: hidden; /* Add scrollbars when content overflows */
+  word-break: break-word; /* Breaks long words to prevent overflow */
+  /*max-width: 100%; !* Optional, depending on layout *!*/
 }
 
-.path.editableInput .editableInputContent{
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+.path.editableInput .editableInputContent {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
 }
 
 .editableInputContent:focus {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 .send, .save {
-    flex-grow: 0; /* Prevent buttons from growing */
+  flex-grow: 0; /* Prevent buttons from growing */
 }
 
 .editableInputContent .variable {
-    color: red;
+  color: red;
 }
 
 /* Property Table*/
 .prop-table {
-    /*display: flex;*/
-    /*flex-direction: column;*/
-    /*width: 100%;*/
-    display: table;
-    width: 100%;
-    table-layout: fixed;
+  /*display: flex;*/
+  /*flex-direction: column;*/
+  /*width: 100%;*/
+  display: table;
+  width: 100%;
+  table-layout: fixed;
 }
 
 .prop-table-row {
-    display: table-row;
+  display: table-row;
 }
 
 .prop-table-cell {
-    /*padding: 10px;*/
-    /*border: 1px solid #ddd;*/
-    display: table-cell;
-    padding: 10px;
-    border: 1px solid #ddd;
-    overflow: hidden; /* Hide overflow */
-    text-overflow: ellipsis; /* Show ellipsis for overflow */
-    white-space: nowrap;
+  /*padding: 10px;*/
+  /*border: 1px solid #ddd;*/
+  display: table-cell;
+  padding: 10px;
+  border: 1px solid #ddd;
+  overflow: hidden; /* Hide overflow */
+  text-overflow: ellipsis; /* Show ellipsis for overflow */
+  white-space: nowrap;
 }
 
 .prop-table-header {
-    background-color: #f4f4f4;
-    font-weight: bold;
+  background-color: #f4f4f4;
+  font-weight: bold;
 }
 
 .variable_popper {
-    min-width: 100px;
-    max-width: 300px;
-    background: white;
-    border: 1px solid #ddd;
-    border-radius: 2px;
-    margin: 5px;
-    padding: 5px;
-    overflow: hidden;
+  min-width: 100px;
+  max-width: 300px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  margin: 5px;
+  padding: 5px;
+  overflow: hidden;
 }
 
 .query_params .prop-table {
-    width: calc(100vw - 240px);
+  width: calc(100vw - 240px);
 }
 
 
 .layout_table {
-    width: 1500px;
+  width: auto;
+}
+
+.layout_tree_grid_indent {
+  width: 16px;
+  display: inline-block;
+  position: relative;
 }
 
 .api_request_info .show {
-    display: block;
+  display: block;
 }
 
 .api_request_info .hide {
-    display: none;
+  display: none;
+}
+
+
+.treegrid-indent {
+  width: 16px;
+  display: inline-block;
+  position: relative;
+}
+
+.treegrid-expander {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
 }