@policystudio/policy-studio-ui-vue 1.0.68 → 1.0.70

package/dist/css/psui_styles.css

@@ -13645,6 +13645,10 @@ video {
   z-index: 10;
 }
 
+.psui-z-15{
+  z-index: 15;
+}
+
 .psui-z-20{
   z-index: 20;
 }
@@ -16695,6 +16699,43 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
+.psui-card {
+  width: 100%;
+  background-color: #ffffff ;
+  border-radius: 0.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.psui-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+
+.psui-card-header h4 {
+      font-size: 17px;
+      line-height: 120%;
+      font-weight: 700;
+      --text-opacity: 1;
+      color: #28323B;
+      color: rgba(40, 50, 59, var(--text-opacity));
+    }
+
+.psui-show-childrens-on-hover:hover * {
+      opacity: 1 !important;
+    }
+
+.psui-transition {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .psui-el-badge-with-icon {
   display: flex;
   align-items: center;
@@ -17886,14 +17927,23 @@ html {
       width: 100%;
     }
 
-.psui-el-simple-progress-bar {
+.psui-el-progress-bar {
   position: relative;
   height: 0.5rem;
+  border-radius: 9999px;
+  --bg-opacity: 1;
+  background-color: #FCEBEB;
+  background-color: rgba(252, 235, 235, var(--bg-opacity));
   width: 100px;
-  border-radius: 15px;
 }
 
-.psui-el-simple-progress-bar-percentage {
+.psui-el-progress-bar.is-breakeven {
+    --bg-opacity: 1;
+    background-color: #E0EFF6;
+    background-color: rgba(224, 239, 246, var(--bg-opacity));
+  }
+
+.psui-el-progress-bar-percentage {
     position: absolute;
     display: block;
     height: 100%;
@@ -17905,6 +17955,23 @@ html {
             animation: animate-stripes 3s linear infinite;
   }
 
+.psui-el-progress-bar-divider {
+    position: absolute;
+    border-radius: 9999px;
+    z-index: auto;
+    --bg-opacity: 1;
+    background-color: #D6DDE5;
+    background-color: rgba(214, 221, 229, var(--bg-opacity));
+    width: 2px; height: 14px;
+    top: -3px;
+  }
+
+.psui-el-progress-bar-value {
+    height: 0.5rem;
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
 @-webkit-keyframes animate-stripes {
     0% {
       background-position: 0 0;
@@ -18460,6 +18527,145 @@ html {
         font-size: 24px;
       }
 
+.psui-el-table-results {
+  position: relative;
+  vertical-align: top;
+  width: 100%;
+  max-width: 100%;
+  font-size: 16px;
+  line-height: 130%;
+}
+
+.psui-el-table-results thead {
+    background-color: #ffffff ;
+    align-items: flex-start;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08);
+    position: sticky;
+    top: 0;
+    z-index: 15;
+  }
+
+.psui-el-table-results thead tr .title {
+        font-size: 14px;
+        line-height: 130%;
+        font-weight: 700;
+        line-height: 1rem;
+        --text-opacity: 1;
+        color: #28323B;
+        color: rgba(40, 50, 59, var(--text-opacity));
+      }
+
+.psui-el-table-results thead tr th {
+        padding-left: 2rem;
+        --text-opacity: 1;
+        color: #798490;
+        color: rgba(121, 132, 144, var(--text-opacity));
+        text-align: right;
+        width: auto;
+        vertical-align: top;
+        padding-top: 13px;
+        padding-bottom: 13px;
+      }
+
+.psui-el-table-results thead tr th .description {
+          font-size: 12px;
+          line-height: 130%;
+          font-weight: 400;
+          line-height: 110%;
+        }
+
+.psui-el-table-results thead tr th:first-child {
+          padding-left: 0;
+          padding-right: 2rem;
+          text-align: left;
+          background-color: #ffffff ;
+          position: sticky;
+          z-index: 10;
+          left: 0;
+          box-shadow: inset -1px 0px 0px #EBEEF0;
+          min-width: 300px;
+        }
+
+.psui-el-table-results thead tr th:first-child > div {
+            padding-left: 0;
+          }
+
+.psui-el-table-results thead tr:first-of-type th {
+          text-align: left;
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+
+.psui-el-table-results thead tr:first-of-type th > div {
+            display: flex;
+            flex-direction: row;
+            border-bottom-width: 1px;
+            --border-opacity: 1;
+            border-color: #D6DDE5;
+            border-color: rgba(214, 221, 229, var(--border-opacity));
+            padding-top: 11px;
+            padding-bottom: 11px;
+          }
+
+.psui-el-table-results thead tr:first-of-type p {
+          font-size: 16px;
+          line-height: 130%;
+          line-height: 18px;
+        }
+
+.psui-el-table-results tbody tr {
+      border-bottom-width: 1px;
+      --border-opacity: 1;
+      border-color: #E6ECF2;
+      border-color: rgba(230, 236, 242, var(--border-opacity));
+    }
+
+.psui-el-table-results tbody tr td {
+        padding-left: 2rem;
+        --text-opacity: 1;
+        color: #28323B;
+        color: rgba(40, 50, 59, var(--text-opacity));
+        height: 2.5rem;
+        text-align: right;
+        font-size: 14px;
+        line-height: 130%;
+        padding-top: 11px;
+        padding-bottom: 11px;
+      }
+
+.psui-el-table-results tbody tr td > div {
+          display: flex;
+          align-items: center;
+        }
+
+.psui-el-table-results tbody tr td .actions {
+          display: flex;
+          align-items: center;
+          height: 100%;
+          position: relative;
+        }
+
+.psui-el-table-results tbody tr td:not(:first-child) > div {
+            justify-content: flex-end;
+          }
+
+.psui-el-table-results tbody tr td:first-child {
+          padding-left: 0;
+          padding-right: 2rem;
+          text-align: left;
+          display: block;
+          background-color: #ffffff ;
+          position: sticky;
+          z-index: 10;
+          left: 0;
+          box-shadow: inset -1px 0px 0px #EBEEF0;
+          padding-top: 8px;
+          padding-bottom: 8px;
+        }
+
+.psui-el-table-results tfoot tr td {
+      }
+
 .psui-el-table {
   width: 100%;
   table-layout: fixed;
@@ -18678,345 +18884,6 @@ html {
     margin-bottom: 3.5px;
   }
 
-.psui-el-chart-legend {
-  display: flex;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-.psui-el-chart-legend-dot {
-    --bg-opacity: 1;
-    background-color: #57C0BA;
-    background-color: rgba(87, 192, 186, var(--bg-opacity));
-    border-radius: 9999px;
-    width: 14px; height: 14px;
-    margin-right: 6px;
-  }
-
-.psui-el-chart-legend-text {
-    font-size: 12px;
-    line-height: 130%;
-    --text-opacity: 1;
-    color: #798490;
-    color: rgba(121, 132, 144, var(--text-opacity));
-    font-weight: 700;
-  }
-
-.psui-el-chart-legend-total {
-    font-size: 16px;
-    line-height: 130%;
-    --text-opacity: 1;
-    color: #28323B;
-    color: rgba(40, 50, 59, var(--text-opacity));
-    margin-top: 0.25rem;
-  }
-
-.psui-el-chart-legend-percentage {
-    --text-opacity: 1;
-    color: #798490;
-    color: rgba(121, 132, 144, var(--text-opacity));
-  }
-
-.psui-el-card-infos {
-  border-width: 1px;
-  --border-opacity: 1;
-  border-color: #E6ECF2;
-  border-color: rgba(230, 236, 242, var(--border-opacity));
-  border-radius: 0.375rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  cursor: pointer;
-}
-
-.psui-el-card-infos-title {
-    font-size: 12px;
-    line-height: 130%;
-    font-weight: 700;
-    --text-opacity: 1;
-    color: #A2ACB7;
-    color: rgba(162, 172, 183, var(--text-opacity));
-    margin-bottom: 0.25rem;
-  }
-
-.psui-el-card-infos-content {
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    font-size: 16px;
-    line-height: 130%;
-  }
-
-.psui-el-card-infos-icon {
-    --text-opacity: 1;
-    color: #64B5CE;
-    color: rgba(100, 181, 206, var(--text-opacity));
-    margin-right: 0.25rem;
-    font-size: 17px;
-  }
-
-.psui-el-card-infos:hover .psui-el-card-infos-icon {
-      --text-opacity: 1;
-      color: #318FAC;
-      color: rgba(49, 143, 172, var(--text-opacity));
-    }
-
-.psui-el-button {
-  font-weight: 700;
-  align-items: center;
-  display: flex;
-  align-content: center;
-  border-radius: 0.375rem;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 130ms;
-}
-
-.psui-el-button span {
-    font-weight: 700;
-    flex-shrink: 0;
-    line-height: 130%;
-    font-family: inherit;
-    text-align: right;
-  }
-
-.psui-el-button:focus {
-    outline: none;
-  }
-
-.psui-el-button.icon-right {
-    flex-direction: row-reverse;
-  }
-
-.psui-el-button.size-big {
-    display: flex;
-    align-items: center;
-    align-content: center;
-    padding: 9.5px 16px;
-  }
-
-.psui-el-button.size-big.icon-left {
-      padding: 8px 16px;
-    }
-
-.psui-el-button.size-big.icon-left i {
-        font-size: 24px;
-        margin-right: 8px;
-      }
-
-.psui-el-button.size-big.icon-right {
-      padding: 8px 16px;
-    }
-
-.psui-el-button.size-big.icon-right i {
-        font-size: 24px;
-        margin-left: 8px;
-      }
-
-.psui-el-button.size-medium {
-    display: flex;
-    align-items: center;
-    align-content: center;
-    padding: 7px 13px;
-    font-size: 14px;
-  }
-
-.psui-el-button.size-medium.icon-left i {
-      font-size: 18px;
-      margin-right: 4px;
-    }
-
-.psui-el-button.size-medium.icon-right i {
-      font-size: 18px;
-      margin-left: 4px;
-    }
-
-.psui-el-button.size-small {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.25rem;
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    font-size: 14px;
-  }
-
-.psui-el-button.size-small.layout-onlytext:active:not(.disabled) {
-        --bg-opacity: 1;
-        background-color: #E0EFF6;
-        background-color: rgba(224, 239, 246, var(--bg-opacity));
-        --text-opacity: 1;
-        color: #318FAC;
-        color: rgba(49, 143, 172, var(--text-opacity));
-        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
-      }
-
-.psui-el-button.size-small.hover.layout-onlytext {
-      --text-opacity: 1 !important;
-      color: #318FAC !important;
-      color: rgba(49, 143, 172, var(--text-opacity)) !important;
-      --bg-opacity: 1 !important;
-      background-color: #E0EFF6 !important;
-      background-color: rgba(224, 239, 246, var(--bg-opacity)) !important;
-    }
-
-.psui-el-button.size-small.icon-left i {
-        font-size: 18px;
-        margin-right: 4px;
-      }
-
-.psui-el-button.size-small.icon-right i {
-        font-size: 18px;
-        margin-left: 4px;
-      }
-
-.psui-el-button.layout-solid {
-    --bg-opacity: 1;
-    background-color: #318FAC;
-    background-color: rgba(49, 143, 172, var(--bg-opacity));
-    color: #ffffff ;
-  }
-
-.psui-el-button.layout-solid.hover {
-      --bg-opacity: 1;
-      background-color: #64B5CE;
-      background-color: rgba(100, 181, 206, var(--bg-opacity));
-      color: #ffffff ;
-    }
-
-.psui-el-button.layout-solid:active:not(.disabled) {
-      --bg-opacity: 1;
-      background-color: #64B5CE;
-      background-color: rgba(100, 181, 206, var(--bg-opacity));
-      color: #ffffff ;
-      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
-    }
-
-.psui-el-button.layout-solid.disabled {
-      --text-opacity: 1;
-      color: #A2ACB7;
-      color: rgba(162, 172, 183, var(--text-opacity));
-      --bg-opacity: 1;
-      background-color: #E6ECF2;
-      background-color: rgba(230, 236, 242, var(--bg-opacity));
-      cursor: default
-    }
-
-.psui-el-button.layout-outline {
-    --text-opacity: 1;
-    color: #318FAC;
-    color: rgba(49, 143, 172, var(--text-opacity));
-    border-width: 1px;
-    --border-opacity: 1;
-    border-color: #64B5CE;
-    border-color: rgba(100, 181, 206, var(--border-opacity));
-    background: transparent;
-  }
-
-.psui-el-button.layout-outline.hover,
-      .psui-el-button.layout-outline:active {
-      border-width: 1px;
-      --border-opacity: 1;
-      border-color: #318FAC;
-      border-color: rgba(49, 143, 172, var(--border-opacity))
-    }
-
-.psui-el-button.layout-outline.disabled {
-      --text-opacity: 1;
-      color: #A2ACB7;
-      color: rgba(162, 172, 183, var(--text-opacity));
-      --border-opacity: 1;
-      border-color: #D6DDE5;
-      border-color: rgba(214, 221, 229, var(--border-opacity));
-      cursor: default;
-    }
-
-.psui-el-button.layout-ghost {
-    --bg-opacity: 1;
-    background-color: #E0EFF6;
-    background-color: rgba(224, 239, 246, var(--bg-opacity));
-    --text-opacity: 1;
-    color: #318FAC;
-    color: rgba(49, 143, 172, var(--text-opacity));
-  }
-
-.psui-el-button.layout-ghost.hover {
-      --bg-opacity: 1;
-      background-color: #ECF7FB;
-      background-color: rgba(236, 247, 251, var(--bg-opacity))
-    }
-
-.psui-el-button.layout-ghost:active:not(.disabled) {
-      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05)
-    }
-
-.psui-el-button.layout-ghost.disabled {
-      --text-opacity: 1;
-      color: #A2ACB7;
-      color: rgba(162, 172, 183, var(--text-opacity));
-      --bg-opacity: 1;
-      background-color: #E6ECF2;
-      background-color: rgba(230, 236, 242, var(--bg-opacity));
-      cursor: default
-    }
-
-.psui-el-button.layout-onlytext {
-    background-color: #ffffff ;
-    --text-opacity: 1;
-    color: #318FAC;
-    color: rgba(49, 143, 172, var(--text-opacity));
-  }
-
-.psui-el-button.layout-onlytext.disabled {
-      --text-opacity: 1;
-      color: #A2ACB7;
-      color: rgba(162, 172, 183, var(--text-opacity));
-      cursor: default
-    }
-
-.psui-el-button.layout-onlytext.hover {
-      --text-opacity: 1;
-      color: #64B5CE;
-      color: rgba(100, 181, 206, var(--text-opacity))
-    }
-
-.psui-el-button.layout-caution {
-    --bg-opacity: 1;
-    background-color: #FCEBEB;
-    background-color: rgba(252, 235, 235, var(--bg-opacity));
-    --text-opacity: 1;
-    color: #D65C5A;
-    color: rgba(214, 92, 90, var(--text-opacity));
-  }
-
-.psui-el-button.layout-caution.hover, 
-      .psui-el-button.layout-caution:active:not(.disabled) {
-      --bg-opacity: 1;
-      background-color: #FCEBEB;
-      background-color: rgba(252, 235, 235, var(--bg-opacity));
-      --text-opacity: 1;
-      color: #AA3937;
-      color: rgba(170, 57, 55, var(--text-opacity));
-    }
-
-.psui-el-button.layout-caution.disabled {
-      --text-opacity: 1;
-      color: #A2ACB7;
-      color: rgba(162, 172, 183, var(--text-opacity));
-      --bg-opacity: 1;
-      background-color: #E6ECF2;
-      background-color: rgba(230, 236, 242, var(--bg-opacity));
-      cursor: default
-    }
-
 .psui-el-chips {
   display: inline-flex;
   position: relative;
@@ -19764,6 +19631,345 @@ html {
             color: rgba(81, 94, 106, var(--text-opacity))
           }
 
+.psui-el-button {
+  font-weight: 700;
+  align-items: center;
+  display: flex;
+  align-content: center;
+  border-radius: 0.375rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 130ms;
+}
+
+.psui-el-button span {
+    font-weight: 700;
+    flex-shrink: 0;
+    line-height: 130%;
+    font-family: inherit;
+    text-align: right;
+  }
+
+.psui-el-button:focus {
+    outline: none;
+  }
+
+.psui-el-button.icon-right {
+    flex-direction: row-reverse;
+  }
+
+.psui-el-button.size-big {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    padding: 9.5px 16px;
+  }
+
+.psui-el-button.size-big.icon-left {
+      padding: 8px 16px;
+    }
+
+.psui-el-button.size-big.icon-left i {
+        font-size: 24px;
+        margin-right: 8px;
+      }
+
+.psui-el-button.size-big.icon-right {
+      padding: 8px 16px;
+    }
+
+.psui-el-button.size-big.icon-right i {
+        font-size: 24px;
+        margin-left: 8px;
+      }
+
+.psui-el-button.size-medium {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    padding: 7px 13px;
+    font-size: 14px;
+  }
+
+.psui-el-button.size-medium.icon-left i {
+      font-size: 18px;
+      margin-right: 4px;
+    }
+
+.psui-el-button.size-medium.icon-right i {
+      font-size: 18px;
+      margin-left: 4px;
+    }
+
+.psui-el-button.size-small {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    font-size: 14px;
+  }
+
+.psui-el-button.size-small.layout-onlytext:active:not(.disabled) {
+        --bg-opacity: 1;
+        background-color: #E0EFF6;
+        background-color: rgba(224, 239, 246, var(--bg-opacity));
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
+      }
+
+.psui-el-button.size-small.hover.layout-onlytext {
+      --text-opacity: 1 !important;
+      color: #318FAC !important;
+      color: rgba(49, 143, 172, var(--text-opacity)) !important;
+      --bg-opacity: 1 !important;
+      background-color: #E0EFF6 !important;
+      background-color: rgba(224, 239, 246, var(--bg-opacity)) !important;
+    }
+
+.psui-el-button.size-small.icon-left i {
+        font-size: 18px;
+        margin-right: 4px;
+      }
+
+.psui-el-button.size-small.icon-right i {
+        font-size: 18px;
+        margin-left: 4px;
+      }
+
+.psui-el-button.layout-solid {
+    --bg-opacity: 1;
+    background-color: #318FAC;
+    background-color: rgba(49, 143, 172, var(--bg-opacity));
+    color: #ffffff ;
+  }
+
+.psui-el-button.layout-solid.hover {
+      --bg-opacity: 1;
+      background-color: #64B5CE;
+      background-color: rgba(100, 181, 206, var(--bg-opacity));
+      color: #ffffff ;
+    }
+
+.psui-el-button.layout-solid:active:not(.disabled) {
+      --bg-opacity: 1;
+      background-color: #64B5CE;
+      background-color: rgba(100, 181, 206, var(--bg-opacity));
+      color: #ffffff ;
+      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
+    }
+
+.psui-el-button.layout-solid.disabled {
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity));
+      --bg-opacity: 1;
+      background-color: #E6ECF2;
+      background-color: rgba(230, 236, 242, var(--bg-opacity));
+      cursor: default
+    }
+
+.psui-el-button.layout-outline {
+    --text-opacity: 1;
+    color: #318FAC;
+    color: rgba(49, 143, 172, var(--text-opacity));
+    border-width: 1px;
+    --border-opacity: 1;
+    border-color: #64B5CE;
+    border-color: rgba(100, 181, 206, var(--border-opacity));
+    background: transparent;
+  }
+
+.psui-el-button.layout-outline.hover,
+      .psui-el-button.layout-outline:active {
+      border-width: 1px;
+      --border-opacity: 1;
+      border-color: #318FAC;
+      border-color: rgba(49, 143, 172, var(--border-opacity))
+    }
+
+.psui-el-button.layout-outline.disabled {
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity));
+      --border-opacity: 1;
+      border-color: #D6DDE5;
+      border-color: rgba(214, 221, 229, var(--border-opacity));
+      cursor: default;
+    }
+
+.psui-el-button.layout-ghost {
+    --bg-opacity: 1;
+    background-color: #E0EFF6;
+    background-color: rgba(224, 239, 246, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #318FAC;
+    color: rgba(49, 143, 172, var(--text-opacity));
+  }
+
+.psui-el-button.layout-ghost.hover {
+      --bg-opacity: 1;
+      background-color: #ECF7FB;
+      background-color: rgba(236, 247, 251, var(--bg-opacity))
+    }
+
+.psui-el-button.layout-ghost:active:not(.disabled) {
+      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05)
+    }
+
+.psui-el-button.layout-ghost.disabled {
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity));
+      --bg-opacity: 1;
+      background-color: #E6ECF2;
+      background-color: rgba(230, 236, 242, var(--bg-opacity));
+      cursor: default
+    }
+
+.psui-el-button.layout-onlytext {
+    background-color: #ffffff ;
+    --text-opacity: 1;
+    color: #318FAC;
+    color: rgba(49, 143, 172, var(--text-opacity));
+  }
+
+.psui-el-button.layout-onlytext.disabled {
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity));
+      cursor: default
+    }
+
+.psui-el-button.layout-onlytext.hover {
+      --text-opacity: 1;
+      color: #64B5CE;
+      color: rgba(100, 181, 206, var(--text-opacity))
+    }
+
+.psui-el-button.layout-caution {
+    --bg-opacity: 1;
+    background-color: #FCEBEB;
+    background-color: rgba(252, 235, 235, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #D65C5A;
+    color: rgba(214, 92, 90, var(--text-opacity));
+  }
+
+.psui-el-button.layout-caution.hover, 
+      .psui-el-button.layout-caution:active:not(.disabled) {
+      --bg-opacity: 1;
+      background-color: #FCEBEB;
+      background-color: rgba(252, 235, 235, var(--bg-opacity));
+      --text-opacity: 1;
+      color: #AA3937;
+      color: rgba(170, 57, 55, var(--text-opacity));
+    }
+
+.psui-el-button.layout-caution.disabled {
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity));
+      --bg-opacity: 1;
+      background-color: #E6ECF2;
+      background-color: rgba(230, 236, 242, var(--bg-opacity));
+      cursor: default
+    }
+
+.psui-el-card-infos {
+  border-width: 1px;
+  --border-opacity: 1;
+  border-color: #E6ECF2;
+  border-color: rgba(230, 236, 242, var(--border-opacity));
+  border-radius: 0.375rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  cursor: pointer;
+}
+
+.psui-el-card-infos-title {
+    font-size: 12px;
+    line-height: 130%;
+    font-weight: 700;
+    --text-opacity: 1;
+    color: #A2ACB7;
+    color: rgba(162, 172, 183, var(--text-opacity));
+    margin-bottom: 0.25rem;
+  }
+
+.psui-el-card-infos-content {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    font-size: 16px;
+    line-height: 130%;
+  }
+
+.psui-el-card-infos-icon {
+    --text-opacity: 1;
+    color: #64B5CE;
+    color: rgba(100, 181, 206, var(--text-opacity));
+    margin-right: 0.25rem;
+    font-size: 17px;
+  }
+
+.psui-el-card-infos:hover .psui-el-card-infos-icon {
+      --text-opacity: 1;
+      color: #318FAC;
+      color: rgba(49, 143, 172, var(--text-opacity));
+    }
+
+.psui-el-chart-legend {
+  display: flex;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.psui-el-chart-legend-dot {
+    --bg-opacity: 1;
+    background-color: #57C0BA;
+    background-color: rgba(87, 192, 186, var(--bg-opacity));
+    border-radius: 9999px;
+    width: 14px; height: 14px;
+    margin-right: 6px;
+  }
+
+.psui-el-chart-legend-text {
+    font-size: 12px;
+    line-height: 130%;
+    --text-opacity: 1;
+    color: #798490;
+    color: rgba(121, 132, 144, var(--text-opacity));
+    font-weight: 700;
+  }
+
+.psui-el-chart-legend-total {
+    font-size: 16px;
+    line-height: 130%;
+    --text-opacity: 1;
+    color: #28323B;
+    color: rgba(40, 50, 59, var(--text-opacity));
+    margin-top: 0.25rem;
+  }
+
+.psui-el-chart-legend-percentage {
+    --text-opacity: 1;
+    color: #798490;
+    color: rgba(121, 132, 144, var(--text-opacity));
+  }
+
 @media (min-width: 640px){
   .sm\:psui-container{
     width: 100%;
@@ -30746,6 +30952,10 @@ html {
     z-index: 10;
   }
 
+  .sm\:psui-z-15{
+    z-index: 15;
+  }
+
   .sm\:psui-z-20{
     z-index: 20;
   }
@@ -44684,6 +44894,10 @@ html {
     z-index: 10;
   }
 
+  .md\:psui-z-15{
+    z-index: 15;
+  }
+
   .md\:psui-z-20{
     z-index: 20;
   }
@@ -58622,6 +58836,10 @@ html {
     z-index: 10;
   }
 
+  .lg\:psui-z-15{
+    z-index: 15;
+  }
+
   .lg\:psui-z-20{
     z-index: 20;
   }
@@ -72560,6 +72778,10 @@ html {
     z-index: 10;
   }
 
+  .xl\:psui-z-15{
+    z-index: 15;
+  }
+
   .xl\:psui-z-20{
     z-index: 20;
   }
@@ -75514,4 +75736,4 @@ html {
     -webkit-animation: bounce 1s infinite;
             animation: bounce 1s infinite;
   }
-}
+}