@policystudio/policy-studio-ui-vue 1.0.22 → 1.0.23

package/dist/css/psui_styles.css

@@ -1344,6 +1344,10 @@ video {
   border-color: rgba(146, 120, 201, var(--divide-opacity));
 }
 
+.psui-divide-transparent > :not(template) ~ :not(template){
+  border-color: transparent;
+}
+
 .psui-divide-solid > :not(template) ~ :not(template){
   border-style: solid;
 }
@@ -1685,6 +1689,10 @@ video {
   background-color: rgba(146, 120, 201, var(--bg-opacity));
 }
 
+.psui-bg-transparent{
+  background-color: transparent;
+}
+
 .hover\:psui-bg-white:hover{
   background-color: #ffffff !important;
 }
@@ -1893,6 +1901,10 @@ video {
   background-color: rgba(146, 120, 201, var(--bg-opacity));
 }
 
+.hover\:psui-bg-transparent:hover{
+  background-color: transparent;
+}
+
 .active\:psui-bg-white:active{
   background-color: #ffffff !important;
 }
@@ -2101,6 +2113,10 @@ video {
   background-color: rgba(146, 120, 201, var(--bg-opacity));
 }
 
+.active\:psui-bg-transparent:active{
+  background-color: transparent;
+}
+
 .focus\:psui-bg-white:focus{
   background-color: #ffffff !important;
 }
@@ -2309,6 +2325,10 @@ video {
   background-color: rgba(146, 120, 201, var(--bg-opacity));
 }
 
+.focus\:psui-bg-transparent:focus{
+  background-color: transparent;
+}
+
 .psui-group:hover .group-hover\:psui-bg-white{
   background-color: #ffffff !important;
 }
@@ -2517,6 +2537,10 @@ video {
   background-color: rgba(146, 120, 201, var(--bg-opacity));
 }
 
+.psui-group:hover .group-hover\:psui-bg-transparent{
+  background-color: transparent;
+}
+
 .even\:psui-bg-white:nth-child(even){
   background-color: #ffffff !important;
 }
@@ -2725,6 +2749,10 @@ video {
   background-color: rgba(146, 120, 201, var(--bg-opacity));
 }
 
+.even\:psui-bg-transparent:nth-child(even){
+  background-color: transparent;
+}
+
 .first\:psui-bg-white:first-child{
   background-color: #ffffff !important;
 }
@@ -2933,6 +2961,10 @@ video {
   background-color: rgba(146, 120, 201, var(--bg-opacity));
 }
 
+.first\:psui-bg-transparent:first-child{
+  background-color: transparent;
+}
+
 .disabled\:psui-bg-white:disabled{
   background-color: #ffffff !important;
 }
@@ -3141,6 +3173,10 @@ video {
   background-color: rgba(146, 120, 201, var(--bg-opacity));
 }
 
+.disabled\:psui-bg-transparent:disabled{
+  background-color: transparent;
+}
+
 .psui-bg-none{
   background-image: none;
 }
@@ -3352,6 +3388,11 @@ video {
   --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
 }
 
+.psui-from-transparent{
+  --gradient-from-color: transparent;
+  --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+}
+
 .psui-via-white{
   --gradient-via-color: #ffffff !important;
   --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -3527,6 +3568,11 @@ video {
   --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
 }
 
+.psui-via-transparent{
+  --gradient-via-color: transparent;
+  --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+}
+
 .psui-to-white{
   --gradient-to-color: #ffffff !important;
 }
@@ -3667,6 +3713,10 @@ video {
   --gradient-to-color: #9278C9;
 }
 
+.psui-to-transparent{
+  --gradient-to-color: transparent;
+}
+
 .hover\:psui-from-white:hover{
   --gradient-from-color: #ffffff !important;
   --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -3842,6 +3892,11 @@ video {
   --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
 }
 
+.hover\:psui-from-transparent:hover{
+  --gradient-from-color: transparent;
+  --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+}
+
 .hover\:psui-via-white:hover{
   --gradient-via-color: #ffffff !important;
   --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -4017,6 +4072,11 @@ video {
   --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
 }
 
+.hover\:psui-via-transparent:hover{
+  --gradient-via-color: transparent;
+  --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+}
+
 .hover\:psui-to-white:hover{
   --gradient-to-color: #ffffff !important;
 }
@@ -4157,6 +4217,10 @@ video {
   --gradient-to-color: #9278C9;
 }
 
+.hover\:psui-to-transparent:hover{
+  --gradient-to-color: transparent;
+}
+
 .focus\:psui-from-white:focus{
   --gradient-from-color: #ffffff !important;
   --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -4332,6 +4396,11 @@ video {
   --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
 }
 
+.focus\:psui-from-transparent:focus{
+  --gradient-from-color: transparent;
+  --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+}
+
 .focus\:psui-via-white:focus{
   --gradient-via-color: #ffffff !important;
   --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -4507,6 +4576,11 @@ video {
   --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
 }
 
+.focus\:psui-via-transparent:focus{
+  --gradient-via-color: transparent;
+  --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+}
+
 .focus\:psui-to-white:focus{
   --gradient-to-color: #ffffff !important;
 }
@@ -4647,6 +4721,10 @@ video {
   --gradient-to-color: #9278C9;
 }
 
+.focus\:psui-to-transparent:focus{
+  --gradient-to-color: transparent;
+}
+
 .psui-bg-opacity-0{
   --bg-opacity: 0;
 }
@@ -4995,6 +5073,10 @@ video {
   border-color: rgba(146, 120, 201, var(--border-opacity));
 }
 
+.psui-border-transparent{
+  border-color: transparent;
+}
+
 .psui-border-DEFAULT{
   --border-opacity: 1;
   border-color: #00465F;
@@ -5209,6 +5291,10 @@ video {
   border-color: rgba(146, 120, 201, var(--border-opacity));
 }
 
+.disabled\:psui-border-transparent:disabled{
+  border-color: transparent;
+}
+
 .disabled\:psui-border-DEFAULT:disabled{
   --border-opacity: 1;
   border-color: #00465F;
@@ -9954,6 +10040,18 @@ video {
   color: rgba(146, 120, 201, var(--placeholder-opacity));
 }
 
+.psui-placeholder-transparent::-moz-placeholder{
+  color: transparent;
+}
+
+.psui-placeholder-transparent:-ms-input-placeholder{
+  color: transparent;
+}
+
+.psui-placeholder-transparent::placeholder{
+  color: transparent;
+}
+
 .focus\:psui-placeholder-white:focus::-moz-placeholder{
   color: #ffffff !important;
 }
@@ -10578,6 +10676,18 @@ video {
   color: rgba(146, 120, 201, var(--placeholder-opacity));
 }
 
+.focus\:psui-placeholder-transparent:focus::-moz-placeholder{
+  color: transparent;
+}
+
+.focus\:psui-placeholder-transparent:focus:-ms-input-placeholder{
+  color: transparent;
+}
+
+.focus\:psui-placeholder-transparent:focus::placeholder{
+  color: transparent;
+}
+
 .psui-placeholder-opacity-0::-moz-placeholder{
   --placeholder-opacity: 0;
 }
@@ -11165,6 +11275,10 @@ video {
   color: rgba(146, 120, 201, var(--text-opacity));
 }
 
+.psui-text-transparent{
+  color: transparent;
+}
+
 .hover\:psui-text-white:hover{
   color: #ffffff !important;
 }
@@ -11373,6 +11487,10 @@ video {
   color: rgba(146, 120, 201, var(--text-opacity));
 }
 
+.hover\:psui-text-transparent:hover{
+  color: transparent;
+}
+
 .active\:psui-text-white:active{
   color: #ffffff !important;
 }
@@ -11581,6 +11699,10 @@ video {
   color: rgba(146, 120, 201, var(--text-opacity));
 }
 
+.active\:psui-text-transparent:active{
+  color: transparent;
+}
+
 .focus\:psui-text-white:focus{
   color: #ffffff !important;
 }
@@ -11789,6 +11911,10 @@ video {
   color: rgba(146, 120, 201, var(--text-opacity));
 }
 
+.focus\:psui-text-transparent:focus{
+  color: transparent;
+}
+
 .psui-group:hover .group-hover\:psui-text-white{
   color: #ffffff !important;
 }
@@ -11997,6 +12123,10 @@ video {
   color: rgba(146, 120, 201, var(--text-opacity));
 }
 
+.psui-group:hover .group-hover\:psui-text-transparent{
+  color: transparent;
+}
+
 .first\:psui-text-white:first-child{
   color: #ffffff !important;
 }
@@ -12205,6 +12335,10 @@ video {
   color: rgba(146, 120, 201, var(--text-opacity));
 }
 
+.first\:psui-text-transparent:first-child{
+  color: transparent;
+}
+
 .disabled\:psui-text-white:disabled{
   color: #ffffff !important;
 }
@@ -12413,6 +12547,10 @@ video {
   color: rgba(146, 120, 201, var(--text-opacity));
 }
 
+.disabled\:psui-text-transparent:disabled{
+  color: transparent;
+}
+
 .psui-text-opacity-0{
   --text-opacity: 0;
 }
@@ -15934,6 +16072,73 @@ video {
           animation: bounce 1s infinite;
 }
 
+*:focus {
+  outline: none;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.psui-el-accordion-item {
+    border-bottom: 1px solid #e6ecf2;
+  }
+
+.psui-el-accordion-item-header {
+      display: flex;
+      cursor: pointer;
+      transition-property: all;
+      justify-content: space-between;
+      transition: cubic-bezier(.17,.67,.83,.67) 250ms;
+      padding-top: 16px;
+      padding-bottom: 16px;
+    }
+
+.psui-el-accordion-item-header:hover {
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+      }
+
+.psui-el-accordion-item-content {
+      padding-bottom: 24px;
+    }
+
+.psui-el-accordion-item-icon {
+      font-size: 20px;
+      width: 20px;
+    }
+
+.psui-el-accordion.layout-big .psui-el-accordion-item-header, .psui-el-accordion.layout-big .psui-el-accordion-item-content {
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+
+.psui-el-accordion.layout-big .psui-el-accordion-item-title {
+        font-size: 18px;
+        line-height: 120%;
+        font-weight: 700;
+      }
+
+.psui-el-accordion.layout-big .psui-el-accordion-item-icon {
+        --text-opacity: 1;
+        color: #D6DDE5;
+        color: rgba(214, 221, 229, var(--text-opacity))
+      }
+
+.psui-el-accordion.layout-medium .psui-el-accordion-item-title {
+        font-size: 14px;
+        line-height: 130%;
+        font-weight: 700;
+      }
+
+.psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-icon, .psui-el-accordion .psui-el-accordion-item-header:hover .psui-el-accordion-item-icon {
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+      }
+
 .psui-el-input {
   /* Layout Default */
   /* ----------------------------------------- Layout Default */
@@ -15941,21 +16146,7 @@ video {
   /* ----------------------------------------- Layout Mini */
 }
 
-.psui-el-input input {
-    width: 100%;
-    border-width: 1px;
-    --border-opacity: 1;
-    border-color: #D6DDE5;
-    border-color: rgba(214, 221, 229, var(--border-opacity));
-    border-radius: 0.375rem;
-    display: block
-  }
-
 .psui-el-input-prepend {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
     padding-left: 0.5rem;
     display: flex;
     align-items: center;
@@ -15963,10 +16154,6 @@ video {
   }
 
 .psui-el-input-append {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
     padding-right: 0.5rem;
     display: flex;
     align-items: center
@@ -15977,19 +16164,23 @@ video {
     color: #798490;
     color: rgba(121, 132, 144, var(--text-opacity));
     font-size: 12px;
-    line-height: 130%
+    line-height: 130%;
+    margin-top: 0.25rem
   }
 
 .psui-el-input-wrapper {
     position: relative;
+    width: 100%;
+    border-width: 1px;
+    --border-opacity: 1;
+    border-color: #D6DDE5;
+    border-color: rgba(214, 221, 229, var(--border-opacity));
+    border-radius: 0.375rem;
+    background-color: #ffffff;
+    display: flex;
+    transition: cubic-bezier(.17,.67,.83,.67) 250ms
   }
 
-.psui-el-input-wrapper.hover input {
-      --border-opacity: 1;
-      border-color: #64B5CE;
-      border-color: rgba(100, 181, 206, var(--border-opacity))
-    }
-
 .psui-el-input label {
     font-weight: 700;
     --text-opacity: 1;
@@ -16001,9 +16192,47 @@ video {
     background-color: #ffffff;
     --text-opacity: 1;
     color: #515E6A;
-    color: rgba(81, 94, 106, var(--text-opacity))
+    color: rgba(81, 94, 106, var(--text-opacity));
+    width: 100%;
+    border-radius: 0.375rem
   }
 
+.psui-el-input.status-error .psui-el-input-wrapper {
+      --border-opacity: 1;
+      border-color: #D65C5A;
+      border-color: rgba(214, 92, 90, var(--border-opacity))
+    }
+
+.psui-el-input.status-error .psui-el-input-hint  {
+      --text-opacity: 1;
+      color: #D65C5A;
+      color: rgba(214, 92, 90, var(--text-opacity))
+    }
+
+.psui-el-input.status-disabled .psui-el-input-wrapper {
+      --bg-opacity: 1;
+      background-color: #E6ECF2;
+      background-color: rgba(230, 236, 242, var(--bg-opacity));
+      --border-opacity: 1;
+      border-color: #E6ECF2;
+      border-color: rgba(230, 236, 242, var(--border-opacity))
+    }
+
+.psui-el-input.status-disabled input {
+      --bg-opacity: 1;
+      background-color: #E6ECF2;
+      background-color: rgba(230, 236, 242, var(--bg-opacity));
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity))
+    }
+
+.psui-el-input.status-disabled label {
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity))
+    }
+
 /* ----------------------------------------- */
 
 .psui-el-input.layout-default input {
@@ -16012,57 +16241,256 @@ video {
       padding: 11.5px 16px;
     }
 
-.psui-el-input.layout-default.status-active input {
+.psui-el-input.layout-default.status-resting .psui-el-input-wrapper.hover {
+        --border-opacity: 1;
+        border-color: #64B5CE;
+        border-color: rgba(100, 181, 206, var(--border-opacity))
+      }
+
+.psui-el-input.layout-default.status-active .psui-el-input-wrapper {
         --border-opacity: 1;
         border-color: #318FAC;
         border-color: rgba(49, 143, 172, var(--border-opacity))
       }
 
-.psui-el-input.layout-default.status-error input {
+/* ----------------------------------------- */
+
+.psui-el-input.layout-mini input {
+      font-size: 14px;
+      line-height: 130%;
+      padding: 7px 8px;
+    }
+
+.psui-el-input.layout-mini.status-resting .psui-el-input-wrapper.hover {
         --border-opacity: 1;
-        border-color: #D65C5A;
-        border-color: rgba(214, 92, 90, var(--border-opacity))
+        border-color: #5DB883;
+        border-color: rgba(93, 184, 131, var(--border-opacity))
       }
 
-.psui-el-input.layout-default.status-error-hint  {
-        --text-opacity: 1;
-        color: #D65C5A;
-        color: rgba(214, 92, 90, var(--text-opacity))
+.psui-el-input.layout-mini.status-active .psui-el-input-wrapper {
+        --border-opacity: 1;
+        border-color: #5DB883;
+        border-color: rgba(93, 184, 131, var(--border-opacity));
       }
 
-.psui-el-input.layout-default.status-disabled input {
-        --bg-opacity: 1;
-        background-color: #E6ECF2;
-        background-color: rgba(230, 236, 242, var(--bg-opacity));
-        --border-opacity: 1;
-        border-color: #E6ECF2;
-        border-color: rgba(230, 236, 242, var(--border-opacity));
-        --text-opacity: 1;
-        color: #A2ACB7;
-        color: rgba(162, 172, 183, var(--text-opacity))
+.psui-el-input.layout-mini.status-active .psui-el-input-wrapper input {
+          --text-opacity: 1;
+          color: #5DB883;
+          color: rgba(93, 184, 131, var(--text-opacity));
+        }
+
+.psui-el-input.layout-mini.status-active .psui-el-input-wrapper input.focus {
+            --text-opacity: 1;
+            color: #515E6A;
+            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: cubic-bezier(.17,.67,.83,.67) 250ms;
+}
+
+.psui-el-button span {
+    font-weight: 700;
+    line-height: 130%;
+    font-family: inherit;
+    text-align: right;
+  }
+
+.psui-el-button:focus {
+    outline: none;
+  }
+
+.psui-el-button.right {
+    flex-direction: row-reverse;
+  }
+
+.psui-el-button.big {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    padding: 9.5px 16px;
+    font-size: 16px;
+  }
+
+.psui-el-button.big.left i {
+      font-size: 24px;
+      margin-right: 8px;
+    }
+
+.psui-el-button.big.right i {
+      font-size: 24px;
+      margin-left: 8px;
+    }
+
+.psui-el-button.medium {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    padding: 7px 16px;
+    font-size: 14px;
+  }
+
+.psui-el-button.medium.left i {
+      font-size: 18px;
+      margin-right: 4px;
+    }
+
+.psui-el-button.medium.right i {
+      font-size: 18px;
+      margin-left: 4px;
+    }
+
+.psui-el-button.small {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    padding: 4px 8px;
+    font-size: 14px;
+  }
+
+.psui-el-button.small.active {
+      --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.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.small.left i {
+        font-size: 18px;
+        margin-right: 4px;
       }
 
-.psui-el-input.layout-default.status-disabled label {
-        --text-opacity: 1;
-        color: #A2ACB7;
-        color: rgba(162, 172, 183, var(--text-opacity))
+.psui-el-button.small.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-input.layout-mini input {
-      font-size: 14px;
-      line-height: 130%;
-      padding: 7px 8px;
+.psui-el-button.layout-solid.hover {
+      --bg-opacity: 1;
+      background-color: #64B5CE;
+      background-color: rgba(100, 181, 206, var(--bg-opacity));
+      color: #ffffff;
     }
 
-*:focus {
-  outline: none;
-}
+.psui-el-button.layout-solid.active {
+      --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);
+    }
 
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.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,
+            .psui-el-button.layout-ghost.active {
+      --bg-opacity: 1;
+      background-color: #ECF7FB;
+      background-color: rgba(236, 247, 251, var(--bg-opacity))
+    }
+
+.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))
+    }
+
+.transition-default {
+  transition: cubic-bezier(.17,.67,.83,.67) 250ms;
 }
 
 @media (min-width: 640px){
@@ -16822,6 +17250,10 @@ html {
     border-color: rgba(146, 120, 201, var(--divide-opacity));
   }
 
+  .sm\:psui-divide-transparent > :not(template) ~ :not(template){
+    border-color: transparent;
+  }
+
   .sm\:psui-divide-solid > :not(template) ~ :not(template){
     border-style: solid;
   }
@@ -17163,6 +17595,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .sm\:psui-bg-transparent{
+    background-color: transparent;
+  }
+
   .sm\:hover\:psui-bg-white:hover{
     background-color: #ffffff !important;
   }
@@ -17371,6 +17807,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .sm\:hover\:psui-bg-transparent:hover{
+    background-color: transparent;
+  }
+
   .sm\:active\:psui-bg-white:active{
     background-color: #ffffff !important;
   }
@@ -17579,6 +18019,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .sm\:active\:psui-bg-transparent:active{
+    background-color: transparent;
+  }
+
   .sm\:focus\:psui-bg-white:focus{
     background-color: #ffffff !important;
   }
@@ -17787,6 +18231,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .sm\:focus\:psui-bg-transparent:focus{
+    background-color: transparent;
+  }
+
   .psui-group:hover .sm\:group-hover\:psui-bg-white{
     background-color: #ffffff !important;
   }
@@ -17995,6 +18443,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .psui-group:hover .sm\:group-hover\:psui-bg-transparent{
+    background-color: transparent;
+  }
+
   .sm\:even\:psui-bg-white:nth-child(even){
     background-color: #ffffff !important;
   }
@@ -18203,6 +18655,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .sm\:even\:psui-bg-transparent:nth-child(even){
+    background-color: transparent;
+  }
+
   .sm\:first\:psui-bg-white:first-child{
     background-color: #ffffff !important;
   }
@@ -18411,6 +18867,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .sm\:first\:psui-bg-transparent:first-child{
+    background-color: transparent;
+  }
+
   .sm\:disabled\:psui-bg-white:disabled{
     background-color: #ffffff !important;
   }
@@ -18619,6 +19079,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .sm\:disabled\:psui-bg-transparent:disabled{
+    background-color: transparent;
+  }
+
   .sm\:psui-bg-none{
     background-image: none;
   }
@@ -18830,6 +19294,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .sm\:psui-from-transparent{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .sm\:psui-via-white{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -19005,6 +19474,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .sm\:psui-via-transparent{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .sm\:psui-to-white{
     --gradient-to-color: #ffffff !important;
   }
@@ -19145,6 +19619,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .sm\:psui-to-transparent{
+    --gradient-to-color: transparent;
+  }
+
   .sm\:hover\:psui-from-white:hover{
     --gradient-from-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -19320,6 +19798,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .sm\:hover\:psui-from-transparent:hover{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .sm\:hover\:psui-via-white:hover{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -19495,6 +19978,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .sm\:hover\:psui-via-transparent:hover{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .sm\:hover\:psui-to-white:hover{
     --gradient-to-color: #ffffff !important;
   }
@@ -19635,6 +20123,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .sm\:hover\:psui-to-transparent:hover{
+    --gradient-to-color: transparent;
+  }
+
   .sm\:focus\:psui-from-white:focus{
     --gradient-from-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -19810,6 +20302,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .sm\:focus\:psui-from-transparent:focus{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .sm\:focus\:psui-via-white:focus{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -19985,6 +20482,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .sm\:focus\:psui-via-transparent:focus{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .sm\:focus\:psui-to-white:focus{
     --gradient-to-color: #ffffff !important;
   }
@@ -20125,6 +20627,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .sm\:focus\:psui-to-transparent:focus{
+    --gradient-to-color: transparent;
+  }
+
   .sm\:psui-bg-opacity-0{
     --bg-opacity: 0;
   }
@@ -23924,6 +24430,18 @@ html {
     color: rgba(146, 120, 201, var(--placeholder-opacity));
   }
 
+  .sm\:psui-placeholder-transparent::-moz-placeholder{
+    color: transparent;
+  }
+
+  .sm\:psui-placeholder-transparent:-ms-input-placeholder{
+    color: transparent;
+  }
+
+  .sm\:psui-placeholder-transparent::placeholder{
+    color: transparent;
+  }
+
   .sm\:focus\:psui-placeholder-white:focus::-moz-placeholder{
     color: #ffffff !important;
   }
@@ -24548,6 +25066,18 @@ html {
     color: rgba(146, 120, 201, var(--placeholder-opacity));
   }
 
+  .sm\:focus\:psui-placeholder-transparent:focus::-moz-placeholder{
+    color: transparent;
+  }
+
+  .sm\:focus\:psui-placeholder-transparent:focus:-ms-input-placeholder{
+    color: transparent;
+  }
+
+  .sm\:focus\:psui-placeholder-transparent:focus::placeholder{
+    color: transparent;
+  }
+
   .sm\:psui-placeholder-opacity-0::-moz-placeholder{
     --placeholder-opacity: 0;
   }
@@ -25031,6 +25561,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .sm\:psui-text-transparent{
+    color: transparent;
+  }
+
   .sm\:hover\:psui-text-white:hover{
     color: #ffffff !important;
   }
@@ -25239,6 +25773,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .sm\:hover\:psui-text-transparent:hover{
+    color: transparent;
+  }
+
   .sm\:active\:psui-text-white:active{
     color: #ffffff !important;
   }
@@ -25447,6 +25985,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .sm\:active\:psui-text-transparent:active{
+    color: transparent;
+  }
+
   .sm\:focus\:psui-text-white:focus{
     color: #ffffff !important;
   }
@@ -25655,6 +26197,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .sm\:focus\:psui-text-transparent:focus{
+    color: transparent;
+  }
+
   .psui-group:hover .sm\:group-hover\:psui-text-white{
     color: #ffffff !important;
   }
@@ -25863,6 +26409,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .psui-group:hover .sm\:group-hover\:psui-text-transparent{
+    color: transparent;
+  }
+
   .sm\:first\:psui-text-white:first-child{
     color: #ffffff !important;
   }
@@ -26071,6 +26621,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .sm\:first\:psui-text-transparent:first-child{
+    color: transparent;
+  }
+
   .sm\:disabled\:psui-text-white:disabled{
     color: #ffffff !important;
   }
@@ -26279,6 +26833,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .sm\:disabled\:psui-text-transparent:disabled{
+    color: transparent;
+  }
+
   .sm\:psui-text-opacity-0{
     --text-opacity: 0;
   }
@@ -30492,6 +31050,10 @@ html {
     border-color: rgba(146, 120, 201, var(--divide-opacity));
   }
 
+  .md\:psui-divide-transparent > :not(template) ~ :not(template){
+    border-color: transparent;
+  }
+
   .md\:psui-divide-solid > :not(template) ~ :not(template){
     border-style: solid;
   }
@@ -30833,6 +31395,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .md\:psui-bg-transparent{
+    background-color: transparent;
+  }
+
   .md\:hover\:psui-bg-white:hover{
     background-color: #ffffff !important;
   }
@@ -31041,6 +31607,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .md\:hover\:psui-bg-transparent:hover{
+    background-color: transparent;
+  }
+
   .md\:active\:psui-bg-white:active{
     background-color: #ffffff !important;
   }
@@ -31249,6 +31819,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .md\:active\:psui-bg-transparent:active{
+    background-color: transparent;
+  }
+
   .md\:focus\:psui-bg-white:focus{
     background-color: #ffffff !important;
   }
@@ -31457,6 +32031,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .md\:focus\:psui-bg-transparent:focus{
+    background-color: transparent;
+  }
+
   .psui-group:hover .md\:group-hover\:psui-bg-white{
     background-color: #ffffff !important;
   }
@@ -31665,6 +32243,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .psui-group:hover .md\:group-hover\:psui-bg-transparent{
+    background-color: transparent;
+  }
+
   .md\:even\:psui-bg-white:nth-child(even){
     background-color: #ffffff !important;
   }
@@ -31873,6 +32455,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .md\:even\:psui-bg-transparent:nth-child(even){
+    background-color: transparent;
+  }
+
   .md\:first\:psui-bg-white:first-child{
     background-color: #ffffff !important;
   }
@@ -32081,6 +32667,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .md\:first\:psui-bg-transparent:first-child{
+    background-color: transparent;
+  }
+
   .md\:disabled\:psui-bg-white:disabled{
     background-color: #ffffff !important;
   }
@@ -32289,6 +32879,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .md\:disabled\:psui-bg-transparent:disabled{
+    background-color: transparent;
+  }
+
   .md\:psui-bg-none{
     background-image: none;
   }
@@ -32500,6 +33094,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .md\:psui-from-transparent{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .md\:psui-via-white{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -32675,6 +33274,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .md\:psui-via-transparent{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .md\:psui-to-white{
     --gradient-to-color: #ffffff !important;
   }
@@ -32815,6 +33419,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .md\:psui-to-transparent{
+    --gradient-to-color: transparent;
+  }
+
   .md\:hover\:psui-from-white:hover{
     --gradient-from-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -32990,6 +33598,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .md\:hover\:psui-from-transparent:hover{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .md\:hover\:psui-via-white:hover{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -33165,6 +33778,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .md\:hover\:psui-via-transparent:hover{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .md\:hover\:psui-to-white:hover{
     --gradient-to-color: #ffffff !important;
   }
@@ -33305,6 +33923,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .md\:hover\:psui-to-transparent:hover{
+    --gradient-to-color: transparent;
+  }
+
   .md\:focus\:psui-from-white:focus{
     --gradient-from-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -33480,6 +34102,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .md\:focus\:psui-from-transparent:focus{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .md\:focus\:psui-via-white:focus{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -33655,6 +34282,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .md\:focus\:psui-via-transparent:focus{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .md\:focus\:psui-to-white:focus{
     --gradient-to-color: #ffffff !important;
   }
@@ -33795,6 +34427,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .md\:focus\:psui-to-transparent:focus{
+    --gradient-to-color: transparent;
+  }
+
   .md\:psui-bg-opacity-0{
     --bg-opacity: 0;
   }
@@ -37594,6 +38230,18 @@ html {
     color: rgba(146, 120, 201, var(--placeholder-opacity));
   }
 
+  .md\:psui-placeholder-transparent::-moz-placeholder{
+    color: transparent;
+  }
+
+  .md\:psui-placeholder-transparent:-ms-input-placeholder{
+    color: transparent;
+  }
+
+  .md\:psui-placeholder-transparent::placeholder{
+    color: transparent;
+  }
+
   .md\:focus\:psui-placeholder-white:focus::-moz-placeholder{
     color: #ffffff !important;
   }
@@ -38218,6 +38866,18 @@ html {
     color: rgba(146, 120, 201, var(--placeholder-opacity));
   }
 
+  .md\:focus\:psui-placeholder-transparent:focus::-moz-placeholder{
+    color: transparent;
+  }
+
+  .md\:focus\:psui-placeholder-transparent:focus:-ms-input-placeholder{
+    color: transparent;
+  }
+
+  .md\:focus\:psui-placeholder-transparent:focus::placeholder{
+    color: transparent;
+  }
+
   .md\:psui-placeholder-opacity-0::-moz-placeholder{
     --placeholder-opacity: 0;
   }
@@ -38701,6 +39361,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .md\:psui-text-transparent{
+    color: transparent;
+  }
+
   .md\:hover\:psui-text-white:hover{
     color: #ffffff !important;
   }
@@ -38909,6 +39573,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .md\:hover\:psui-text-transparent:hover{
+    color: transparent;
+  }
+
   .md\:active\:psui-text-white:active{
     color: #ffffff !important;
   }
@@ -39117,6 +39785,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .md\:active\:psui-text-transparent:active{
+    color: transparent;
+  }
+
   .md\:focus\:psui-text-white:focus{
     color: #ffffff !important;
   }
@@ -39325,6 +39997,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .md\:focus\:psui-text-transparent:focus{
+    color: transparent;
+  }
+
   .psui-group:hover .md\:group-hover\:psui-text-white{
     color: #ffffff !important;
   }
@@ -39533,6 +40209,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .psui-group:hover .md\:group-hover\:psui-text-transparent{
+    color: transparent;
+  }
+
   .md\:first\:psui-text-white:first-child{
     color: #ffffff !important;
   }
@@ -39741,6 +40421,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .md\:first\:psui-text-transparent:first-child{
+    color: transparent;
+  }
+
   .md\:disabled\:psui-text-white:disabled{
     color: #ffffff !important;
   }
@@ -39949,6 +40633,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .md\:disabled\:psui-text-transparent:disabled{
+    color: transparent;
+  }
+
   .md\:psui-text-opacity-0{
     --text-opacity: 0;
   }
@@ -44162,6 +44850,10 @@ html {
     border-color: rgba(146, 120, 201, var(--divide-opacity));
   }
 
+  .lg\:psui-divide-transparent > :not(template) ~ :not(template){
+    border-color: transparent;
+  }
+
   .lg\:psui-divide-solid > :not(template) ~ :not(template){
     border-style: solid;
   }
@@ -44503,6 +45195,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .lg\:psui-bg-transparent{
+    background-color: transparent;
+  }
+
   .lg\:hover\:psui-bg-white:hover{
     background-color: #ffffff !important;
   }
@@ -44711,6 +45407,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .lg\:hover\:psui-bg-transparent:hover{
+    background-color: transparent;
+  }
+
   .lg\:active\:psui-bg-white:active{
     background-color: #ffffff !important;
   }
@@ -44919,6 +45619,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .lg\:active\:psui-bg-transparent:active{
+    background-color: transparent;
+  }
+
   .lg\:focus\:psui-bg-white:focus{
     background-color: #ffffff !important;
   }
@@ -45127,6 +45831,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .lg\:focus\:psui-bg-transparent:focus{
+    background-color: transparent;
+  }
+
   .psui-group:hover .lg\:group-hover\:psui-bg-white{
     background-color: #ffffff !important;
   }
@@ -45335,6 +46043,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .psui-group:hover .lg\:group-hover\:psui-bg-transparent{
+    background-color: transparent;
+  }
+
   .lg\:even\:psui-bg-white:nth-child(even){
     background-color: #ffffff !important;
   }
@@ -45543,6 +46255,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .lg\:even\:psui-bg-transparent:nth-child(even){
+    background-color: transparent;
+  }
+
   .lg\:first\:psui-bg-white:first-child{
     background-color: #ffffff !important;
   }
@@ -45751,6 +46467,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .lg\:first\:psui-bg-transparent:first-child{
+    background-color: transparent;
+  }
+
   .lg\:disabled\:psui-bg-white:disabled{
     background-color: #ffffff !important;
   }
@@ -45959,6 +46679,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .lg\:disabled\:psui-bg-transparent:disabled{
+    background-color: transparent;
+  }
+
   .lg\:psui-bg-none{
     background-image: none;
   }
@@ -46170,6 +46894,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .lg\:psui-from-transparent{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .lg\:psui-via-white{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -46345,6 +47074,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .lg\:psui-via-transparent{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .lg\:psui-to-white{
     --gradient-to-color: #ffffff !important;
   }
@@ -46485,6 +47219,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .lg\:psui-to-transparent{
+    --gradient-to-color: transparent;
+  }
+
   .lg\:hover\:psui-from-white:hover{
     --gradient-from-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -46660,6 +47398,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .lg\:hover\:psui-from-transparent:hover{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .lg\:hover\:psui-via-white:hover{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -46835,6 +47578,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .lg\:hover\:psui-via-transparent:hover{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .lg\:hover\:psui-to-white:hover{
     --gradient-to-color: #ffffff !important;
   }
@@ -46975,6 +47723,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .lg\:hover\:psui-to-transparent:hover{
+    --gradient-to-color: transparent;
+  }
+
   .lg\:focus\:psui-from-white:focus{
     --gradient-from-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -47150,6 +47902,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .lg\:focus\:psui-from-transparent:focus{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .lg\:focus\:psui-via-white:focus{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -47325,6 +48082,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .lg\:focus\:psui-via-transparent:focus{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .lg\:focus\:psui-to-white:focus{
     --gradient-to-color: #ffffff !important;
   }
@@ -47465,6 +48227,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .lg\:focus\:psui-to-transparent:focus{
+    --gradient-to-color: transparent;
+  }
+
   .lg\:psui-bg-opacity-0{
     --bg-opacity: 0;
   }
@@ -51264,6 +52030,18 @@ html {
     color: rgba(146, 120, 201, var(--placeholder-opacity));
   }
 
+  .lg\:psui-placeholder-transparent::-moz-placeholder{
+    color: transparent;
+  }
+
+  .lg\:psui-placeholder-transparent:-ms-input-placeholder{
+    color: transparent;
+  }
+
+  .lg\:psui-placeholder-transparent::placeholder{
+    color: transparent;
+  }
+
   .lg\:focus\:psui-placeholder-white:focus::-moz-placeholder{
     color: #ffffff !important;
   }
@@ -51888,6 +52666,18 @@ html {
     color: rgba(146, 120, 201, var(--placeholder-opacity));
   }
 
+  .lg\:focus\:psui-placeholder-transparent:focus::-moz-placeholder{
+    color: transparent;
+  }
+
+  .lg\:focus\:psui-placeholder-transparent:focus:-ms-input-placeholder{
+    color: transparent;
+  }
+
+  .lg\:focus\:psui-placeholder-transparent:focus::placeholder{
+    color: transparent;
+  }
+
   .lg\:psui-placeholder-opacity-0::-moz-placeholder{
     --placeholder-opacity: 0;
   }
@@ -52371,6 +53161,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .lg\:psui-text-transparent{
+    color: transparent;
+  }
+
   .lg\:hover\:psui-text-white:hover{
     color: #ffffff !important;
   }
@@ -52579,6 +53373,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .lg\:hover\:psui-text-transparent:hover{
+    color: transparent;
+  }
+
   .lg\:active\:psui-text-white:active{
     color: #ffffff !important;
   }
@@ -52787,6 +53585,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .lg\:active\:psui-text-transparent:active{
+    color: transparent;
+  }
+
   .lg\:focus\:psui-text-white:focus{
     color: #ffffff !important;
   }
@@ -52995,6 +53797,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .lg\:focus\:psui-text-transparent:focus{
+    color: transparent;
+  }
+
   .psui-group:hover .lg\:group-hover\:psui-text-white{
     color: #ffffff !important;
   }
@@ -53203,6 +54009,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .psui-group:hover .lg\:group-hover\:psui-text-transparent{
+    color: transparent;
+  }
+
   .lg\:first\:psui-text-white:first-child{
     color: #ffffff !important;
   }
@@ -53411,6 +54221,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .lg\:first\:psui-text-transparent:first-child{
+    color: transparent;
+  }
+
   .lg\:disabled\:psui-text-white:disabled{
     color: #ffffff !important;
   }
@@ -53619,6 +54433,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .lg\:disabled\:psui-text-transparent:disabled{
+    color: transparent;
+  }
+
   .lg\:psui-text-opacity-0{
     --text-opacity: 0;
   }
@@ -57832,6 +58650,10 @@ html {
     border-color: rgba(146, 120, 201, var(--divide-opacity));
   }
 
+  .xl\:psui-divide-transparent > :not(template) ~ :not(template){
+    border-color: transparent;
+  }
+
   .xl\:psui-divide-solid > :not(template) ~ :not(template){
     border-style: solid;
   }
@@ -58173,6 +58995,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .xl\:psui-bg-transparent{
+    background-color: transparent;
+  }
+
   .xl\:hover\:psui-bg-white:hover{
     background-color: #ffffff !important;
   }
@@ -58381,6 +59207,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .xl\:hover\:psui-bg-transparent:hover{
+    background-color: transparent;
+  }
+
   .xl\:active\:psui-bg-white:active{
     background-color: #ffffff !important;
   }
@@ -58589,6 +59419,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .xl\:active\:psui-bg-transparent:active{
+    background-color: transparent;
+  }
+
   .xl\:focus\:psui-bg-white:focus{
     background-color: #ffffff !important;
   }
@@ -58797,6 +59631,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .xl\:focus\:psui-bg-transparent:focus{
+    background-color: transparent;
+  }
+
   .psui-group:hover .xl\:group-hover\:psui-bg-white{
     background-color: #ffffff !important;
   }
@@ -59005,6 +59843,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .psui-group:hover .xl\:group-hover\:psui-bg-transparent{
+    background-color: transparent;
+  }
+
   .xl\:even\:psui-bg-white:nth-child(even){
     background-color: #ffffff !important;
   }
@@ -59213,6 +60055,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .xl\:even\:psui-bg-transparent:nth-child(even){
+    background-color: transparent;
+  }
+
   .xl\:first\:psui-bg-white:first-child{
     background-color: #ffffff !important;
   }
@@ -59421,6 +60267,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .xl\:first\:psui-bg-transparent:first-child{
+    background-color: transparent;
+  }
+
   .xl\:disabled\:psui-bg-white:disabled{
     background-color: #ffffff !important;
   }
@@ -59629,6 +60479,10 @@ html {
     background-color: rgba(146, 120, 201, var(--bg-opacity));
   }
 
+  .xl\:disabled\:psui-bg-transparent:disabled{
+    background-color: transparent;
+  }
+
   .xl\:psui-bg-none{
     background-image: none;
   }
@@ -59840,6 +60694,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .xl\:psui-from-transparent{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .xl\:psui-via-white{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -60015,6 +60874,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .xl\:psui-via-transparent{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .xl\:psui-to-white{
     --gradient-to-color: #ffffff !important;
   }
@@ -60155,6 +61019,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .xl\:psui-to-transparent{
+    --gradient-to-color: transparent;
+  }
+
   .xl\:hover\:psui-from-white:hover{
     --gradient-from-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -60330,6 +61198,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .xl\:hover\:psui-from-transparent:hover{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .xl\:hover\:psui-via-white:hover{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -60505,6 +61378,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .xl\:hover\:psui-via-transparent:hover{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .xl\:hover\:psui-to-white:hover{
     --gradient-to-color: #ffffff !important;
   }
@@ -60645,6 +61523,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .xl\:hover\:psui-to-transparent:hover{
+    --gradient-to-color: transparent;
+  }
+
   .xl\:focus\:psui-from-white:focus{
     --gradient-from-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -60820,6 +61702,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .xl\:focus\:psui-from-transparent:focus{
+    --gradient-from-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .xl\:focus\:psui-via-white:focus{
     --gradient-via-color: #ffffff !important;
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0));
@@ -60995,6 +61882,11 @@ html {
     --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(146, 120, 201, 0));
   }
 
+  .xl\:focus\:psui-via-transparent:focus{
+    --gradient-via-color: transparent;
+    --gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(0, 0, 0, 0));
+  }
+
   .xl\:focus\:psui-to-white:focus{
     --gradient-to-color: #ffffff !important;
   }
@@ -61135,6 +62027,10 @@ html {
     --gradient-to-color: #9278C9;
   }
 
+  .xl\:focus\:psui-to-transparent:focus{
+    --gradient-to-color: transparent;
+  }
+
   .xl\:psui-bg-opacity-0{
     --bg-opacity: 0;
   }
@@ -64934,6 +65830,18 @@ html {
     color: rgba(146, 120, 201, var(--placeholder-opacity));
   }
 
+  .xl\:psui-placeholder-transparent::-moz-placeholder{
+    color: transparent;
+  }
+
+  .xl\:psui-placeholder-transparent:-ms-input-placeholder{
+    color: transparent;
+  }
+
+  .xl\:psui-placeholder-transparent::placeholder{
+    color: transparent;
+  }
+
   .xl\:focus\:psui-placeholder-white:focus::-moz-placeholder{
     color: #ffffff !important;
   }
@@ -65558,6 +66466,18 @@ html {
     color: rgba(146, 120, 201, var(--placeholder-opacity));
   }
 
+  .xl\:focus\:psui-placeholder-transparent:focus::-moz-placeholder{
+    color: transparent;
+  }
+
+  .xl\:focus\:psui-placeholder-transparent:focus:-ms-input-placeholder{
+    color: transparent;
+  }
+
+  .xl\:focus\:psui-placeholder-transparent:focus::placeholder{
+    color: transparent;
+  }
+
   .xl\:psui-placeholder-opacity-0::-moz-placeholder{
     --placeholder-opacity: 0;
   }
@@ -66041,6 +66961,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .xl\:psui-text-transparent{
+    color: transparent;
+  }
+
   .xl\:hover\:psui-text-white:hover{
     color: #ffffff !important;
   }
@@ -66249,6 +67173,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .xl\:hover\:psui-text-transparent:hover{
+    color: transparent;
+  }
+
   .xl\:active\:psui-text-white:active{
     color: #ffffff !important;
   }
@@ -66457,6 +67385,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .xl\:active\:psui-text-transparent:active{
+    color: transparent;
+  }
+
   .xl\:focus\:psui-text-white:focus{
     color: #ffffff !important;
   }
@@ -66665,6 +67597,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .xl\:focus\:psui-text-transparent:focus{
+    color: transparent;
+  }
+
   .psui-group:hover .xl\:group-hover\:psui-text-white{
     color: #ffffff !important;
   }
@@ -66873,6 +67809,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .psui-group:hover .xl\:group-hover\:psui-text-transparent{
+    color: transparent;
+  }
+
   .xl\:first\:psui-text-white:first-child{
     color: #ffffff !important;
   }
@@ -67081,6 +68021,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .xl\:first\:psui-text-transparent:first-child{
+    color: transparent;
+  }
+
   .xl\:disabled\:psui-text-white:disabled{
     color: #ffffff !important;
   }
@@ -67289,6 +68233,10 @@ html {
     color: rgba(146, 120, 201, var(--text-opacity));
   }
 
+  .xl\:disabled\:psui-text-transparent:disabled{
+    color: transparent;
+  }
+
   .xl\:psui-text-opacity-0{
     --text-opacity: 0;
   }
@@ -70743,4 +71691,4 @@ html {
     -webkit-animation: bounce 1s infinite;
             animation: bounce 1s infinite;
   }
-}
+}