@dialpad/dialtone 9.123.1 → 9.124.0

package/dist/css/dialtone-default-theme.css

@@ -4219,6 +4219,28 @@ legend .d-label--md {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.d-mention-suggestion__container {
+  width: 100%;
+}
+.d-mention-suggestion__details-container {
+  width: 90%;
+}
+.d-mention-suggestion__presence {
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  margin-left: var(--dt-space-200);
+}
+.d-mention-suggestion__status {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--dt-color-foreground-tertiary);
+  margin-left: var(--dt-space-100);
+}
+.d-mention-suggestion__divider {
+  color: var(--dt-color-foreground-tertiary);
+}
 .vue-recycle-scroller {
   position: relative;
 }
@@ -5442,16 +5464,16 @@ legend .d-label--md {
 .d-bga-unset {
   background-attachment: unset !important;
 }
-.d-bgclip-border-box {
+.d-bgc-border-box {
   background-clip: border-box !important;
 }
-.d-bgclip-padding-box {
+.d-bgc-padding-box {
   background-clip: padding-box !important;
 }
-.d-bgclip-content-box {
+.d-bgc-content-box {
   background-clip: content-box !important;
 }
-.d-bgclip-text {
+.d-bgc-text {
   color: transparent !important;
   -webkit-background-clip: text !important;
   background-clip: text !important;
@@ -5636,6 +5658,9 @@ legend .d-label--md {
 .d-bgg-pattern-stripe-light {
   --bgg-pattern: var(--bgg-pattern-stripe-light) !important;
 }
+.d-bgc-ai {
+  background-image: var(--dt-color-surface-ai) !important;
+}
 .d-ba {
   border: var(--dt-size-100) solid !important;
 }
@@ -5740,119 +5765,96 @@ legend .d-label--md {
   border-style: unset !important;
 }
 .d-baw0 {
-  border-width: 0 !important;
+  border-width: var(--dt-size-border-0) !important;
 }
 .d-baw1 {
-  border-width: var(--dt-size-100) !important;
+  border-width: var(--dt-size-border-100) !important;
 }
 .d-baw2 {
-  border-width: var(--dt-size-200) !important;
+  border-width: var(--dt-size-border-200) !important;
 }
 .d-baw4 {
-  border-width: var(--dt-size-300) !important;
-}
-.d-baw6 {
-  border-width: var(--dt-size-350) !important;
+  border-width: var(--dt-size-border-300) !important;
 }
 .d-btw0 {
-  border-top-width: 0 !important;
+  border-top-width: var(--dt-size-border-0) !important;
 }
 .d-btw1 {
-  border-top-width: var(--dt-size-100) !important;
+  border-top-width: var(--dt-size-border-100) !important;
 }
 .d-btw2 {
-  border-top-width: var(--dt-size-200) !important;
+  border-top-width: var(--dt-size-border-200) !important;
 }
 .d-btw4 {
-  border-top-width: var(--dt-size-300) !important;
-}
-.d-btw6 {
-  border-top-width: var(--dt-size-350) !important;
+  border-top-width: var(--dt-size-border-300) !important;
 }
 .d-brw0 {
-  border-right-width: 0 !important;
+  border-right-width: var(--dt-size-border-0) !important;
 }
 .d-brw1 {
-  border-right-width: var(--dt-size-100) !important;
+  border-right-width: var(--dt-size-border-100) !important;
 }
 .d-brw2 {
-  border-right-width: var(--dt-size-200) !important;
+  border-right-width: var(--dt-size-border-200) !important;
 }
 .d-brw4 {
-  border-right-width: var(--dt-size-300) !important;
-}
-.d-brw6 {
-  border-right-width: var(--dt-size-350) !important;
+  border-right-width: var(--dt-size-border-300) !important;
 }
 .d-bbw0 {
-  border-bottom-width: 0 !important;
+  border-bottom-width: var(--dt-size-border-0) !important;
 }
 .d-bbw1 {
-  border-bottom-width: var(--dt-size-100) !important;
+  border-bottom-width: var(--dt-size-border-100) !important;
 }
 .d-bbw2 {
-  border-bottom-width: var(--dt-size-200) !important;
+  border-bottom-width: var(--dt-size-border-200) !important;
 }
 .d-bbw4 {
-  border-bottom-width: var(--dt-size-300) !important;
-}
-.d-bbw6 {
-  border-bottom-width: var(--dt-size-350) !important;
+  border-bottom-width: var(--dt-size-border-300) !important;
 }
 .d-blw0 {
-  border-left-width: 0 !important;
+  border-left-width: var(--dt-size-border-0) !important;
 }
 .d-blw1 {
-  border-left-width: var(--dt-size-100) !important;
+  border-left-width: var(--dt-size-border-100) !important;
 }
 .d-blw2 {
-  border-left-width: var(--dt-size-200) !important;
+  border-left-width: var(--dt-size-border-200) !important;
 }
 .d-blw4 {
-  border-left-width: var(--dt-size-300) !important;
-}
-.d-blw6 {
-  border-left-width: var(--dt-size-350) !important;
+  border-left-width: var(--dt-size-border-300) !important;
 }
 .d-bxw0 {
-  border-right-width: 0 !important;
-  border-left-width: 0 !important;
+  border-right-width: var(--dt-size-border-0) !important;
+  border-left-width: var(--dt-size-border-0) !important;
 }
 .d-bxw1 {
-  border-right-width: var(--dt-size-100) !important;
-  border-left-width: var(--dt-size-100) !important;
+  border-right-width: var(--dt-size-border-100) !important;
+  border-left-width: var(--dt-size-border-100) !important;
 }
 .d-bxw2 {
-  border-right-width: var(--dt-size-200) !important;
-  border-left-width: var(--dt-size-200) !important;
+  border-right-width: var(--dt-size-border-200) !important;
+  border-left-width: var(--dt-size-border-200) !important;
 }
 .d-bxw4 {
-  border-right-width: var(--dt-size-300) !important;
-  border-left-width: var(--dt-size-300) !important;
-}
-.d-bxw6 {
-  border-right-width: var(--dt-size-350) !important;
-  border-left-width: var(--dt-size-350) !important;
+  border-right-width: var(--dt-size-border-300) !important;
+  border-left-width: var(--dt-size-border-300) !important;
 }
 .d-byw0 {
-  border-top-width: 0 !important;
-  border-bottom-width: 0 !important;
+  border-top-width: var(--dt-size-border-0) !important;
+  border-bottom-width: var(--dt-size-border-0) !important;
 }
 .d-byw1 {
-  border-top-width: var(--dt-size-100) !important;
-  border-bottom-width: var(--dt-size-100) !important;
+  border-top-width: var(--dt-size-border-100) !important;
+  border-bottom-width: var(--dt-size-border-100) !important;
 }
 .d-byw2 {
-  border-top-width: var(--dt-size-200) !important;
-  border-bottom-width: var(--dt-size-200) !important;
+  border-top-width: var(--dt-size-border-200) !important;
+  border-bottom-width: var(--dt-size-border-200) !important;
 }
 .d-byw4 {
-  border-top-width: var(--dt-size-300) !important;
-  border-bottom-width: var(--dt-size-300) !important;
-}
-.d-byw6 {
-  border-top-width: var(--dt-size-350) !important;
-  border-bottom-width: var(--dt-size-350) !important;
+  border-top-width: var(--dt-size-border-300) !important;
+  border-bottom-width: var(--dt-size-border-300) !important;
 }
 .d-divide-y > * + * {
   --divide-y-reverse: 0;
@@ -5900,6 +5902,14 @@ legend .d-label--md {
 .d-divide-x-reverse > * + * {
   --divide-x-reverse: 1;
 }
+/*
+ * Note: border-image is not compatible with border-radius, but it's the easiest way to get a linear gradient border.
+ * https://dev.to/afif/border-with-gradient-and-radius-387f
+ */
+.d-bc-ai {
+  -o-border-image: var(--dt-color-border-ai) 1 !important;
+     border-image: var(--dt-color-border-ai) 1 !important;
+}
 .d-divide-ai > * + * {
   -o-border-image: var(--dt-color-border-ai) 1 !important;
      border-image: var(--dt-color-border-ai) 1 !important;
@@ -5921,9 +5931,6 @@ legend .d-label--md {
   background-color: unset !important;
   background-image: unset !important;
 }
-.d-bgc-ai {
-  background-image: var(--dt-color-surface-ai) !important;
-}
 .d-bc-transparent, .h\:d-bc-transparent:hover, .f\:d-bc-transparent:focus, .f\:d-bc-transparent:focus-within, .fv\:d-bc-transparent:focus-visible {
   border-color: transparent !important;
 }
@@ -5933,14 +5940,6 @@ legend .d-label--md {
 .d-bc-unset, .h\:d-bc-unset:hover, .f\:d-bc-unset:focus, .f\:d-bc-unset:focus-within, .fv\:d-bc-unset:focus-visible {
   border-color: unset !important;
 }
-/*
- * Note: border-image is not compatible with border-radius, but it's the easiest way to get a linear gradient border.
- * https://dev.to/afif/border-with-gradient-and-radius-387f
- */
-.d-bc-ai {
-  -o-border-image: var(--dt-color-border-ai) 1 !important;
-     border-image: var(--dt-color-border-ai) 1 !important;
-}
 @-webkit-keyframes d-loading-circle {
   from {
     -webkit-transform: rotate(0deg);
@@ -7782,6 +7781,9 @@ legend .d-label--md {
 .d-stack16 > * + * {
   margin-top: var(--dt-space-500) !important;
 }
+.d-stack20 > * + * {
+  margin-top: var(--dt-space-525) !important;
+}
 .d-stack24 > * + * {
   margin-top: var(--dt-space-550) !important;
 }
@@ -7836,6 +7838,9 @@ legend .d-label--md {
 .d-flow16 > * + * {
   margin-left: var(--dt-space-500) !important;
 }
+.d-flow20 > * + * {
+  margin-left: var(--dt-space-525) !important;
+}
 .d-flow24 > * + * {
   margin-left: var(--dt-space-550) !important;
 }
@@ -7946,19 +7951,19 @@ legend .d-label--md {
 .d-g-unset {
   gap: unset !important;
 }
-.d-font-family-custom {
+.d-ff-custom {
   font-family: var(--dt-font-family-body) !important;
 }
-.d-font-family-sans {
+.d-ff-sans {
   font-family: var(--dt-font-family-body) !important;
 }
-.d-font-family-mono {
+.d-ff-mono {
   font-family: var(--dt-font-family-mono) !important;
 }
-.d-font-family-marketing {
+.d-ff-marketing {
   font-family: var(--dt-font-family-expressive) !important;
 }
-.d-font-family-unset {
+.d-ff-unset {
   font-family: unset !important;
 }
 h1,
@@ -8179,28 +8184,28 @@ ul {
 .d-headline54 {
   font: var(--dt-typography-headline-xxl);
 }
-.d-font-style-normal {
+.d-fs-normal {
   font-style: normal !important;
 }
-.d-font-style-italic {
+.d-fs-italic {
   font-style: italic !important;
 }
-.d-font-style-unset {
+.d-fs-unset {
   font-style: unset !important;
 }
-.d-font-weight-normal {
+.d-fw-normal {
   font-weight: var(--dt-font-weight-normal) !important;
 }
-.d-font-weight-medium {
+.d-fw-medium {
   font-weight: var(--dt-font-weight-medium) !important;
 }
-.d-font-weight-semibold {
+.d-fw-semibold {
   font-weight: var(--dt-font-weight-semi-bold) !important;
 }
-.d-font-weight-bold {
+.d-fw-bold {
   font-weight: var(--dt-font-weight-bold) !important;
 }
-.d-font-weight-unset {
+.d-fw-unset {
   font-weight: unset !important;
 }
 .d-lh0 {
@@ -24000,6 +24005,10 @@ body {
   border-radius: var(--dt-size-radius-0) !important;
 }
 
+.d-bar1 {
+  border-radius: var(--dt-size-radius-100) !important;
+}
+
 .d-bar2 {
   border-radius: var(--dt-size-radius-200) !important;
 }
@@ -24013,7 +24022,7 @@ body {
 }
 
 .d-bar12 {
-  border-radius: var(--dt-size-450) !important;
+  border-radius: var(--dt-size-radius-450) !important;
 }
 
 .d-bar16 {
@@ -24032,6 +24041,10 @@ body {
   border-radius: var(--dt-size-radius-0) !important;
 }
 
+.d-bar1 {
+  border-radius: var(--dt-size-radius-100) !important;
+}
+
 .d-bar2 {
   border-radius: var(--dt-size-radius-200) !important;
 }
@@ -24045,7 +24058,7 @@ body {
 }
 
 .d-bar12 {
-  border-radius: var(--dt-size-450) !important;
+  border-radius: var(--dt-size-radius-450) !important;
 }
 
 .d-bar16 {
@@ -24065,6 +24078,11 @@ body {
   border-top-right-radius: var(--dt-size-radius-0) !important;
 }
 
+.d-btr1 {
+  border-top-left-radius: var(--dt-size-radius-100) !important;
+  border-top-right-radius: var(--dt-size-radius-100) !important;
+}
+
 .d-btr2 {
   border-top-left-radius: var(--dt-size-radius-200) !important;
   border-top-right-radius: var(--dt-size-radius-200) !important;
@@ -24081,8 +24099,8 @@ body {
 }
 
 .d-btr12 {
-  border-top-left-radius: var(--dt-size-450) !important;
-  border-top-right-radius: var(--dt-size-450) !important;
+  border-top-left-radius: var(--dt-size-radius-450) !important;
+  border-top-right-radius: var(--dt-size-radius-450) !important;
 }
 
 .d-btr16 {
@@ -24105,6 +24123,11 @@ body {
   border-top-right-radius: var(--dt-size-radius-0) !important;
 }
 
+.d-btr1 {
+  border-top-left-radius: var(--dt-size-radius-100) !important;
+  border-top-right-radius: var(--dt-size-radius-100) !important;
+}
+
 .d-btr2 {
   border-top-left-radius: var(--dt-size-radius-200) !important;
   border-top-right-radius: var(--dt-size-radius-200) !important;
@@ -24121,8 +24144,8 @@ body {
 }
 
 .d-btr12 {
-  border-top-left-radius: var(--dt-size-450) !important;
-  border-top-right-radius: var(--dt-size-450) !important;
+  border-top-left-radius: var(--dt-size-radius-450) !important;
+  border-top-right-radius: var(--dt-size-radius-450) !important;
 }
 
 .d-btr16 {
@@ -24145,6 +24168,11 @@ body {
   border-bottom-right-radius: var(--dt-size-radius-0) !important;
 }
 
+.d-brr1 {
+  border-top-right-radius: var(--dt-size-radius-100) !important;
+  border-bottom-right-radius: var(--dt-size-radius-100) !important;
+}
+
 .d-brr2 {
   border-top-right-radius: var(--dt-size-radius-200) !important;
   border-bottom-right-radius: var(--dt-size-radius-200) !important;
@@ -24161,8 +24189,8 @@ body {
 }
 
 .d-brr12 {
-  border-top-right-radius: var(--dt-size-450) !important;
-  border-bottom-right-radius: var(--dt-size-450) !important;
+  border-top-right-radius: var(--dt-size-radius-450) !important;
+  border-bottom-right-radius: var(--dt-size-radius-450) !important;
 }
 
 .d-brr16 {
@@ -24185,6 +24213,11 @@ body {
   border-bottom-right-radius: var(--dt-size-radius-0) !important;
 }
 
+.d-brr1 {
+  border-top-right-radius: var(--dt-size-radius-100) !important;
+  border-bottom-right-radius: var(--dt-size-radius-100) !important;
+}
+
 .d-brr2 {
   border-top-right-radius: var(--dt-size-radius-200) !important;
   border-bottom-right-radius: var(--dt-size-radius-200) !important;
@@ -24201,8 +24234,8 @@ body {
 }
 
 .d-brr12 {
-  border-top-right-radius: var(--dt-size-450) !important;
-  border-bottom-right-radius: var(--dt-size-450) !important;
+  border-top-right-radius: var(--dt-size-radius-450) !important;
+  border-bottom-right-radius: var(--dt-size-radius-450) !important;
 }
 
 .d-brr16 {
@@ -24225,6 +24258,11 @@ body {
   border-bottom-right-radius: var(--dt-size-radius-0) !important;
 }
 
+.d-bbr1 {
+  border-bottom-left-radius: var(--dt-size-radius-100) !important;
+  border-bottom-right-radius: var(--dt-size-radius-100) !important;
+}
+
 .d-bbr2 {
   border-bottom-left-radius: var(--dt-size-radius-200) !important;
   border-bottom-right-radius: var(--dt-size-radius-200) !important;
@@ -24241,8 +24279,8 @@ body {
 }
 
 .d-bbr12 {
-  border-bottom-left-radius: var(--dt-size-450) !important;
-  border-bottom-right-radius: var(--dt-size-450) !important;
+  border-bottom-left-radius: var(--dt-size-radius-450) !important;
+  border-bottom-right-radius: var(--dt-size-radius-450) !important;
 }
 
 .d-bbr16 {
@@ -24265,6 +24303,11 @@ body {
   border-bottom-right-radius: var(--dt-size-radius-0) !important;
 }
 
+.d-bbr1 {
+  border-bottom-left-radius: var(--dt-size-radius-100) !important;
+  border-bottom-right-radius: var(--dt-size-radius-100) !important;
+}
+
 .d-bbr2 {
   border-bottom-left-radius: var(--dt-size-radius-200) !important;
   border-bottom-right-radius: var(--dt-size-radius-200) !important;
@@ -24281,8 +24324,8 @@ body {
 }
 
 .d-bbr12 {
-  border-bottom-left-radius: var(--dt-size-450) !important;
-  border-bottom-right-radius: var(--dt-size-450) !important;
+  border-bottom-left-radius: var(--dt-size-radius-450) !important;
+  border-bottom-right-radius: var(--dt-size-radius-450) !important;
 }
 
 .d-bbr16 {
@@ -24305,6 +24348,11 @@ body {
   border-bottom-left-radius: var(--dt-size-radius-0) !important;
 }
 
+.d-blr1 {
+  border-top-left-radius: var(--dt-size-radius-100) !important;
+  border-bottom-left-radius: var(--dt-size-radius-100) !important;
+}
+
 .d-blr2 {
   border-top-left-radius: var(--dt-size-radius-200) !important;
   border-bottom-left-radius: var(--dt-size-radius-200) !important;
@@ -24321,8 +24369,8 @@ body {
 }
 
 .d-blr12 {
-  border-top-left-radius: var(--dt-size-450) !important;
-  border-bottom-left-radius: var(--dt-size-450) !important;
+  border-top-left-radius: var(--dt-size-radius-450) !important;
+  border-bottom-left-radius: var(--dt-size-radius-450) !important;
 }
 
 .d-blr16 {
@@ -24345,6 +24393,11 @@ body {
   border-bottom-left-radius: var(--dt-size-radius-0) !important;
 }
 
+.d-blr1 {
+  border-top-left-radius: var(--dt-size-radius-100) !important;
+  border-bottom-left-radius: var(--dt-size-radius-100) !important;
+}
+
 .d-blr2 {
   border-top-left-radius: var(--dt-size-radius-200) !important;
   border-bottom-left-radius: var(--dt-size-radius-200) !important;
@@ -24361,8 +24414,8 @@ body {
 }
 
 .d-blr12 {
-  border-top-left-radius: var(--dt-size-450) !important;
-  border-bottom-left-radius: var(--dt-size-450) !important;
+  border-top-left-radius: var(--dt-size-radius-450) !important;
+  border-bottom-left-radius: var(--dt-size-radius-450) !important;
 }
 
 .d-blr16 {
@@ -24412,6 +24465,10 @@ body {
   gap: var(--dt-space-500) !important;
 }
 
+.d-g20 {
+  gap: var(--dt-space-525) !important;
+}
+
 .d-g24 {
   gap: var(--dt-space-550) !important;
 }
@@ -24460,6 +24517,10 @@ body {
   gap: var(--dt-space-500) !important;
 }
 
+.d-g20 {
+  gap: var(--dt-space-525) !important;
+}
+
 .d-g24 {
   gap: var(--dt-space-550) !important;
 }
@@ -24508,6 +24569,10 @@ body {
   row-gap: var(--dt-space-500) !important;
 }
 
+.d-rg20 {
+  row-gap: var(--dt-space-525) !important;
+}
+
 .d-rg24 {
   row-gap: var(--dt-space-550) !important;
 }
@@ -24556,6 +24621,10 @@ body {
   row-gap: var(--dt-space-500) !important;
 }
 
+.d-rg20 {
+  row-gap: var(--dt-space-525) !important;
+}
+
 .d-rg24 {
   row-gap: var(--dt-space-550) !important;
 }
@@ -24620,6 +24689,12 @@ body {
           column-gap: var(--dt-space-500) !important;
 }
 
+.d-cg20 {
+  -webkit-column-gap: var(--dt-space-525) !important;
+     -moz-column-gap: var(--dt-space-525) !important;
+          column-gap: var(--dt-space-525) !important;
+}
+
 .d-cg24 {
   -webkit-column-gap: var(--dt-space-550) !important;
      -moz-column-gap: var(--dt-space-550) !important;
@@ -24692,6 +24767,12 @@ body {
           column-gap: var(--dt-space-500) !important;
 }
 
+.d-cg20 {
+  -webkit-column-gap: var(--dt-space-525) !important;
+     -moz-column-gap: var(--dt-space-525) !important;
+          column-gap: var(--dt-space-525) !important;
+}
+
 .d-cg24 {
   -webkit-column-gap: var(--dt-space-550) !important;
      -moz-column-gap: var(--dt-space-550) !important;
@@ -24756,6 +24837,11 @@ body {
   margin: unset;
 }
 
+.d-g20 > * {
+  --fl-gap: var(--dt-space-525);
+  margin: unset;
+}
+
 .d-g24 > * {
   --fl-gap: var(--dt-space-550);
   margin: unset;
@@ -24816,6 +24902,11 @@ body {
   margin: unset;
 }
 
+.d-g20 > * {
+  --fl-gap: var(--dt-space-525);
+  margin: unset;
+}
+
 .d-g24 > * {
   --fl-gap: var(--dt-space-550);
   margin: unset;
@@ -24876,6 +24967,11 @@ body {
   margin: unset;
 }
 
+.d-cg20 > * {
+  --fl-gap: var(--dt-space-525);
+  margin: unset;
+}
+
 .d-cg24 > * {
   --fl-gap: var(--dt-space-550);
   margin: unset;
@@ -24936,6 +25032,11 @@ body {
   margin: unset;
 }
 
+.d-cg20 > * {
+  --fl-gap: var(--dt-space-525);
+  margin: unset;
+}
+
 .d-cg24 > * {
   --fl-gap: var(--dt-space-550);
   margin: unset;
@@ -25756,6 +25857,10 @@ body {
   grid-gap: var(--dt-space-500) !important;
 }
 
+.d-gg20 {
+  grid-gap: var(--dt-space-525) !important;
+}
+
 .d-gg24 {
   grid-gap: var(--dt-space-550) !important;
 }
@@ -25804,6 +25909,10 @@ body {
   grid-gap: var(--dt-space-500) !important;
 }
 
+.d-gg20 {
+  grid-gap: var(--dt-space-525) !important;
+}
+
 .d-gg24 {
   grid-gap: var(--dt-space-550) !important;
 }
@@ -25852,6 +25961,10 @@ body {
   grid-column-gap: var(--dt-space-500) !important;
 }
 
+.d-gcg20 {
+  grid-column-gap: var(--dt-space-525) !important;
+}
+
 .d-gcg24 {
   grid-column-gap: var(--dt-space-550) !important;
 }
@@ -25900,6 +26013,10 @@ body {
   grid-column-gap: var(--dt-space-500) !important;
 }
 
+.d-gcg20 {
+  grid-column-gap: var(--dt-space-525) !important;
+}
+
 .d-gcg24 {
   grid-column-gap: var(--dt-space-550) !important;
 }
@@ -25948,6 +26065,10 @@ body {
   grid-row-gap: var(--dt-space-500) !important;
 }
 
+.d-grg20 {
+  grid-row-gap: var(--dt-space-525) !important;
+}
+
 .d-grg24 {
   grid-row-gap: var(--dt-space-550) !important;
 }
@@ -25996,6 +26117,10 @@ body {
   grid-row-gap: var(--dt-space-500) !important;
 }
 
+.d-grg20 {
+  grid-row-gap: var(--dt-space-525) !important;
+}
+
 .d-grg24 {
   grid-row-gap: var(--dt-space-550) !important;
 }
@@ -26068,6 +26193,13 @@ body {
   left: var(--dt-space-500) !important;
 }
 
+.d-all20 {
+  top: var(--dt-space-525) !important;
+  right: var(--dt-space-525) !important;
+  bottom: var(--dt-space-525) !important;
+  left: var(--dt-space-525) !important;
+}
+
 .d-all24 {
   top: var(--dt-space-550) !important;
   right: var(--dt-space-550) !important;
@@ -26285,6 +26417,13 @@ body {
   left: var(--dt-space-500) !important;
 }
 
+.d-all20 {
+  top: var(--dt-space-525) !important;
+  right: var(--dt-space-525) !important;
+  bottom: var(--dt-space-525) !important;
+  left: var(--dt-space-525) !important;
+}
+
 .d-all24 {
   top: var(--dt-space-550) !important;
   right: var(--dt-space-550) !important;
@@ -26486,6 +26625,11 @@ body {
   left: var(--dt-space-500) !important;
 }
 
+.d-x20 {
+  right: var(--dt-space-525) !important;
+  left: var(--dt-space-525) !important;
+}
+
 .d-x24 {
   right: var(--dt-space-550) !important;
   left: var(--dt-space-550) !important;
@@ -26641,6 +26785,11 @@ body {
   left: var(--dt-space-500) !important;
 }
 
+.d-x20 {
+  right: var(--dt-space-525) !important;
+  left: var(--dt-space-525) !important;
+}
+
 .d-x24 {
   right: var(--dt-space-550) !important;
   left: var(--dt-space-550) !important;
@@ -26796,6 +26945,11 @@ body {
   bottom: var(--dt-space-500) !important;
 }
 
+.d-y20 {
+  top: var(--dt-space-525) !important;
+  bottom: var(--dt-space-525) !important;
+}
+
 .d-y24 {
   top: var(--dt-space-550) !important;
   bottom: var(--dt-space-550) !important;
@@ -26951,6 +27105,11 @@ body {
   bottom: var(--dt-space-500) !important;
 }
 
+.d-y20 {
+  top: var(--dt-space-525) !important;
+  bottom: var(--dt-space-525) !important;
+}
+
 .d-y24 {
   top: var(--dt-space-550) !important;
   bottom: var(--dt-space-550) !important;
@@ -27098,6 +27257,10 @@ body {
   top: var(--dt-space-500) !important;
 }
 
+.d-t20 {
+  top: var(--dt-space-525) !important;
+}
+
 .d-t24 {
   top: var(--dt-space-550) !important;
 }
@@ -27222,6 +27385,10 @@ body {
   top: var(--dt-space-500) !important;
 }
 
+.d-t20 {
+  top: var(--dt-space-525) !important;
+}
+
 .d-t24 {
   top: var(--dt-space-550) !important;
 }
@@ -27346,6 +27513,10 @@ body {
   right: var(--dt-space-500) !important;
 }
 
+.d-r20 {
+  right: var(--dt-space-525) !important;
+}
+
 .d-r24 {
   right: var(--dt-space-550) !important;
 }
@@ -27470,6 +27641,10 @@ body {
   right: var(--dt-space-500) !important;
 }
 
+.d-r20 {
+  right: var(--dt-space-525) !important;
+}
+
 .d-r24 {
   right: var(--dt-space-550) !important;
 }
@@ -27594,6 +27769,10 @@ body {
   bottom: var(--dt-space-500) !important;
 }
 
+.d-b20 {
+  bottom: var(--dt-space-525) !important;
+}
+
 .d-b24 {
   bottom: var(--dt-space-550) !important;
 }
@@ -27718,6 +27897,10 @@ body {
   bottom: var(--dt-space-500) !important;
 }
 
+.d-b20 {
+  bottom: var(--dt-space-525) !important;
+}
+
 .d-b24 {
   bottom: var(--dt-space-550) !important;
 }
@@ -27842,6 +28025,10 @@ body {
   left: var(--dt-space-500) !important;
 }
 
+.d-l20 {
+  left: var(--dt-space-525) !important;
+}
+
 .d-l24 {
   left: var(--dt-space-550) !important;
 }
@@ -27966,6 +28153,10 @@ body {
   left: var(--dt-space-500) !important;
 }
 
+.d-l20 {
+  left: var(--dt-space-525) !important;
+}
+
 .d-l24 {
   left: var(--dt-space-550) !important;
 }
@@ -28090,6 +28281,10 @@ body {
   height: var(--dt-size-500) !important;
 }
 
+.d-h20 {
+  height: var(--dt-size-525) !important;
+}
+
 .d-h24 {
   height: var(--dt-size-550) !important;
 }
@@ -28222,6 +28417,10 @@ body {
   height: var(--dt-size-500) !important;
 }
 
+.d-h20 {
+  height: var(--dt-size-525) !important;
+}
+
 .d-h24 {
   height: var(--dt-size-550) !important;
 }
@@ -28354,6 +28553,10 @@ body {
   max-height: var(--dt-size-500) !important;
 }
 
+.d-hmx20 {
+  max-height: var(--dt-size-525) !important;
+}
+
 .d-hmx24 {
   max-height: var(--dt-size-550) !important;
 }
@@ -28486,6 +28689,10 @@ body {
   max-height: var(--dt-size-500) !important;
 }
 
+.d-hmx20 {
+  max-height: var(--dt-size-525) !important;
+}
+
 .d-hmx24 {
   max-height: var(--dt-size-550) !important;
 }
@@ -28618,6 +28825,10 @@ body {
   min-height: var(--dt-size-500) !important;
 }
 
+.d-hmn20 {
+  min-height: var(--dt-size-525) !important;
+}
+
 .d-hmn24 {
   min-height: var(--dt-size-550) !important;
 }
@@ -28750,6 +28961,10 @@ body {
   min-height: var(--dt-size-500) !important;
 }
 
+.d-hmn20 {
+  min-height: var(--dt-size-525) !important;
+}
+
 .d-hmn24 {
   min-height: var(--dt-size-550) !important;
 }
@@ -28882,6 +29097,10 @@ body {
   width: var(--dt-size-500) !important;
 }
 
+.d-w20 {
+  width: var(--dt-size-525) !important;
+}
+
 .d-w24 {
   width: var(--dt-size-550) !important;
 }
@@ -29014,6 +29233,10 @@ body {
   width: var(--dt-size-500) !important;
 }
 
+.d-w20 {
+  width: var(--dt-size-525) !important;
+}
+
 .d-w24 {
   width: var(--dt-size-550) !important;
 }
@@ -29146,6 +29369,10 @@ body {
   min-width: var(--dt-size-500) !important;
 }
 
+.d-wmn20 {
+  min-width: var(--dt-size-525) !important;
+}
+
 .d-wmn24 {
   min-width: var(--dt-size-550) !important;
 }
@@ -29278,6 +29505,10 @@ body {
   min-width: var(--dt-size-500) !important;
 }
 
+.d-wmn20 {
+  min-width: var(--dt-size-525) !important;
+}
+
 .d-wmn24 {
   min-width: var(--dt-size-550) !important;
 }
@@ -29410,6 +29641,10 @@ body {
   max-width: var(--dt-size-500) !important;
 }
 
+.d-wmx20 {
+  max-width: var(--dt-size-525) !important;
+}
+
 .d-wmx24 {
   max-width: var(--dt-size-550) !important;
 }
@@ -29542,6 +29777,10 @@ body {
   max-width: var(--dt-size-500) !important;
 }
 
+.d-wmx20 {
+  max-width: var(--dt-size-525) !important;
+}
+
 .d-wmx24 {
   max-width: var(--dt-size-550) !important;
 }
@@ -29674,6 +29913,10 @@ body {
   margin: var(--dt-space-500) !important;
 }
 
+.d-m20 {
+  margin: var(--dt-space-525) !important;
+}
+
 .d-m24 {
   margin: var(--dt-space-550) !important;
 }
@@ -29782,6 +30025,10 @@ body {
   margin: var(--dt-space-500) !important;
 }
 
+.d-m20 {
+  margin: var(--dt-space-525) !important;
+}
+
 .d-m24 {
   margin: var(--dt-space-550) !important;
 }
@@ -29898,6 +30145,11 @@ body {
   margin-right: var(--dt-space-500) !important;
 }
 
+.d-mx20 {
+  margin-left: var(--dt-space-525) !important;
+  margin-right: var(--dt-space-525) !important;
+}
+
 .d-mx24 {
   margin-left: var(--dt-space-550) !important;
   margin-right: var(--dt-space-550) !important;
@@ -30033,6 +30285,11 @@ body {
   margin-right: var(--dt-space-500) !important;
 }
 
+.d-mx20 {
+  margin-left: var(--dt-space-525) !important;
+  margin-right: var(--dt-space-525) !important;
+}
+
 .d-mx24 {
   margin-left: var(--dt-space-550) !important;
   margin-right: var(--dt-space-550) !important;
@@ -30168,6 +30425,11 @@ body {
   margin-bottom: var(--dt-space-500) !important;
 }
 
+.d-my20 {
+  margin-top: var(--dt-space-525) !important;
+  margin-bottom: var(--dt-space-525) !important;
+}
+
 .d-my24 {
   margin-top: var(--dt-space-550) !important;
   margin-bottom: var(--dt-space-550) !important;
@@ -30303,6 +30565,11 @@ body {
   margin-bottom: var(--dt-space-500) !important;
 }
 
+.d-my20 {
+  margin-top: var(--dt-space-525) !important;
+  margin-bottom: var(--dt-space-525) !important;
+}
+
 .d-my24 {
   margin-top: var(--dt-space-550) !important;
   margin-bottom: var(--dt-space-550) !important;
@@ -30430,6 +30697,10 @@ body {
   margin-top: var(--dt-space-500) !important;
 }
 
+.d-mt20 {
+  margin-top: var(--dt-space-525) !important;
+}
+
 .d-mt24 {
   margin-top: var(--dt-space-550) !important;
 }
@@ -30538,6 +30809,10 @@ body {
   margin-top: var(--dt-space-500) !important;
 }
 
+.d-mt20 {
+  margin-top: var(--dt-space-525) !important;
+}
+
 .d-mt24 {
   margin-top: var(--dt-space-550) !important;
 }
@@ -30646,6 +30921,10 @@ body {
   margin-right: var(--dt-space-500) !important;
 }
 
+.d-mr20 {
+  margin-right: var(--dt-space-525) !important;
+}
+
 .d-mr24 {
   margin-right: var(--dt-space-550) !important;
 }
@@ -30754,6 +31033,10 @@ body {
   margin-right: var(--dt-space-500) !important;
 }
 
+.d-mr20 {
+  margin-right: var(--dt-space-525) !important;
+}
+
 .d-mr24 {
   margin-right: var(--dt-space-550) !important;
 }
@@ -30862,6 +31145,10 @@ body {
   margin-bottom: var(--dt-space-500) !important;
 }
 
+.d-mb20 {
+  margin-bottom: var(--dt-space-525) !important;
+}
+
 .d-mb24 {
   margin-bottom: var(--dt-space-550) !important;
 }
@@ -30970,6 +31257,10 @@ body {
   margin-bottom: var(--dt-space-500) !important;
 }
 
+.d-mb20 {
+  margin-bottom: var(--dt-space-525) !important;
+}
+
 .d-mb24 {
   margin-bottom: var(--dt-space-550) !important;
 }
@@ -31078,6 +31369,10 @@ body {
   margin-left: var(--dt-space-500) !important;
 }
 
+.d-ml20 {
+  margin-left: var(--dt-space-525) !important;
+}
+
 .d-ml24 {
   margin-left: var(--dt-space-550) !important;
 }
@@ -31186,6 +31481,10 @@ body {
   margin-left: var(--dt-space-500) !important;
 }
 
+.d-ml20 {
+  margin-left: var(--dt-space-525) !important;
+}
+
 .d-ml24 {
   margin-left: var(--dt-space-550) !important;
 }
@@ -31294,6 +31593,10 @@ body {
   padding: var(--dt-space-500) !important;
 }
 
+.d-p20 {
+  padding: var(--dt-space-525) !important;
+}
+
 .d-p24 {
   padding: var(--dt-space-550) !important;
 }
@@ -31350,6 +31653,10 @@ body {
   padding: var(--dt-space-500) !important;
 }
 
+.d-p20 {
+  padding: var(--dt-space-525) !important;
+}
+
 .d-p24 {
   padding: var(--dt-space-550) !important;
 }
@@ -31414,6 +31721,11 @@ body {
   padding-right: var(--dt-space-500) !important;
 }
 
+.d-px20 {
+  padding-left: var(--dt-space-525) !important;
+  padding-right: var(--dt-space-525) !important;
+}
+
 .d-px24 {
   padding-left: var(--dt-space-550) !important;
   padding-right: var(--dt-space-550) !important;
@@ -31484,6 +31796,11 @@ body {
   padding-right: var(--dt-space-500) !important;
 }
 
+.d-px20 {
+  padding-left: var(--dt-space-525) !important;
+  padding-right: var(--dt-space-525) !important;
+}
+
 .d-px24 {
   padding-left: var(--dt-space-550) !important;
   padding-right: var(--dt-space-550) !important;
@@ -31554,6 +31871,11 @@ body {
   padding-bottom: var(--dt-space-500) !important;
 }
 
+.d-py20 {
+  padding-top: var(--dt-space-525) !important;
+  padding-bottom: var(--dt-space-525) !important;
+}
+
 .d-py24 {
   padding-top: var(--dt-space-550) !important;
   padding-bottom: var(--dt-space-550) !important;
@@ -31624,6 +31946,11 @@ body {
   padding-bottom: var(--dt-space-500) !important;
 }
 
+.d-py20 {
+  padding-top: var(--dt-space-525) !important;
+  padding-bottom: var(--dt-space-525) !important;
+}
+
 .d-py24 {
   padding-top: var(--dt-space-550) !important;
   padding-bottom: var(--dt-space-550) !important;
@@ -31686,6 +32013,10 @@ body {
   padding-top: var(--dt-space-500) !important;
 }
 
+.d-pt20 {
+  padding-top: var(--dt-space-525) !important;
+}
+
 .d-pt24 {
   padding-top: var(--dt-space-550) !important;
 }
@@ -31742,6 +32073,10 @@ body {
   padding-top: var(--dt-space-500) !important;
 }
 
+.d-pt20 {
+  padding-top: var(--dt-space-525) !important;
+}
+
 .d-pt24 {
   padding-top: var(--dt-space-550) !important;
 }
@@ -31798,6 +32133,10 @@ body {
   padding-right: var(--dt-space-500) !important;
 }
 
+.d-pr20 {
+  padding-right: var(--dt-space-525) !important;
+}
+
 .d-pr24 {
   padding-right: var(--dt-space-550) !important;
 }
@@ -31854,6 +32193,10 @@ body {
   padding-right: var(--dt-space-500) !important;
 }
 
+.d-pr20 {
+  padding-right: var(--dt-space-525) !important;
+}
+
 .d-pr24 {
   padding-right: var(--dt-space-550) !important;
 }
@@ -31910,6 +32253,10 @@ body {
   padding-bottom: var(--dt-space-500) !important;
 }
 
+.d-pb20 {
+  padding-bottom: var(--dt-space-525) !important;
+}
+
 .d-pb24 {
   padding-bottom: var(--dt-space-550) !important;
 }
@@ -31966,6 +32313,10 @@ body {
   padding-bottom: var(--dt-space-500) !important;
 }
 
+.d-pb20 {
+  padding-bottom: var(--dt-space-525) !important;
+}
+
 .d-pb24 {
   padding-bottom: var(--dt-space-550) !important;
 }
@@ -32022,6 +32373,10 @@ body {
   padding-left: var(--dt-space-500) !important;
 }
 
+.d-pl20 {
+  padding-left: var(--dt-space-525) !important;
+}
+
 .d-pl24 {
   padding-left: var(--dt-space-550) !important;
 }
@@ -32078,6 +32433,10 @@ body {
   padding-left: var(--dt-space-500) !important;
 }
 
+.d-pl20 {
+  padding-left: var(--dt-space-525) !important;
+}
+
 .d-pl24 {
   padding-left: var(--dt-space-550) !important;
 }