@dialpad/dialtone 9.123.1 → 9.124.0

package/dist/css/dialtone.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 {
@@ -14900,6 +14905,9 @@ body {
 .d-bar0 {
   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;
 }
@@ -14910,7 +14918,7 @@ body {
   border-radius: var(--dt-size-radius-400) !important;
 }
 .d-bar12 {
-  border-radius: var(--dt-size-450) !important;
+  border-radius: var(--dt-size-radius-450) !important;
 }
 .d-bar16 {
   border-radius: var(--dt-size-radius-500) !important;
@@ -14925,6 +14933,10 @@ body {
   border-top-left-radius: var(--dt-size-radius-0) !important;
   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;
@@ -14938,8 +14950,8 @@ body {
   border-top-right-radius: var(--dt-size-radius-400) !important;
 }
 .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 {
   border-top-left-radius: var(--dt-size-radius-500) !important;
@@ -14957,6 +14969,10 @@ body {
   border-top-right-radius: var(--dt-size-radius-0) !important;
   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;
@@ -14970,8 +14986,8 @@ body {
   border-bottom-right-radius: var(--dt-size-radius-400) !important;
 }
 .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 {
   border-top-right-radius: var(--dt-size-radius-500) !important;
@@ -14989,6 +15005,10 @@ body {
   border-bottom-left-radius: var(--dt-size-radius-0) !important;
   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;
@@ -15002,8 +15022,8 @@ body {
   border-bottom-right-radius: var(--dt-size-radius-400) !important;
 }
 .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 {
   border-bottom-left-radius: var(--dt-size-radius-500) !important;
@@ -15021,6 +15041,10 @@ body {
   border-top-left-radius: var(--dt-size-radius-0) !important;
   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;
@@ -15034,8 +15058,8 @@ body {
   border-bottom-left-radius: var(--dt-size-radius-400) !important;
 }
 .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 {
   border-top-left-radius: var(--dt-size-radius-500) !important;
@@ -15073,6 +15097,9 @@ body {
 .d-g16 {
   gap: var(--dt-space-500) !important;
 }
+.d-g20 {
+  gap: var(--dt-space-525) !important;
+}
 .d-g24 {
   gap: var(--dt-space-550) !important;
 }
@@ -15109,6 +15136,9 @@ body {
 .d-rg16 {
   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;
 }
@@ -15161,6 +15191,11 @@ body {
      -moz-column-gap: var(--dt-space-500) !important;
           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;
@@ -15213,6 +15248,10 @@ body {
   --fl-gap: var(--dt-space-500);
   margin: unset;
 }
+.d-g20 > * {
+  --fl-gap: var(--dt-space-525);
+  margin: unset;
+}
 .d-g24 > * {
   --fl-gap: var(--dt-space-550);
   margin: unset;
@@ -15261,6 +15300,10 @@ body {
   --fl-gap: var(--dt-space-500);
   margin: unset;
 }
+.d-cg20 > * {
+  --fl-gap: var(--dt-space-525);
+  margin: unset;
+}
 .d-cg24 > * {
   --fl-gap: var(--dt-space-550);
   margin: unset;
@@ -15589,6 +15632,9 @@ body {
 .d-gg16 {
   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;
 }
@@ -15625,6 +15671,9 @@ body {
 .d-gcg16 {
   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;
 }
@@ -15661,6 +15710,9 @@ body {
 .d-grg16 {
   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;
 }
@@ -15721,6 +15773,12 @@ body {
   bottom: var(--dt-space-500) !important;
   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;
@@ -15891,6 +15949,10 @@ body {
   right: var(--dt-space-500) !important;
   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;
@@ -16015,6 +16077,10 @@ body {
   top: var(--dt-space-500) !important;
   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;
@@ -16131,6 +16197,9 @@ body {
 .d-t16 {
   top: var(--dt-space-500) !important;
 }
+.d-t20 {
+  top: var(--dt-space-525) !important;
+}
 .d-t24 {
   top: var(--dt-space-550) !important;
 }
@@ -16224,6 +16293,9 @@ body {
 .d-r16 {
   right: var(--dt-space-500) !important;
 }
+.d-r20 {
+  right: var(--dt-space-525) !important;
+}
 .d-r24 {
   right: var(--dt-space-550) !important;
 }
@@ -16317,6 +16389,9 @@ body {
 .d-b16 {
   bottom: var(--dt-space-500) !important;
 }
+.d-b20 {
+  bottom: var(--dt-space-525) !important;
+}
 .d-b24 {
   bottom: var(--dt-space-550) !important;
 }
@@ -16410,6 +16485,9 @@ body {
 .d-l16 {
   left: var(--dt-space-500) !important;
 }
+.d-l20 {
+  left: var(--dt-space-525) !important;
+}
 .d-l24 {
   left: var(--dt-space-550) !important;
 }
@@ -16503,6 +16581,9 @@ body {
 .d-h16 {
   height: var(--dt-size-500) !important;
 }
+.d-h20 {
+  height: var(--dt-size-525) !important;
+}
 .d-h24 {
   height: var(--dt-size-550) !important;
 }
@@ -16602,6 +16683,9 @@ body {
 .d-hmx16 {
   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;
 }
@@ -16701,6 +16785,9 @@ body {
 .d-hmn16 {
   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;
 }
@@ -16800,6 +16887,9 @@ body {
 .d-w16 {
   width: var(--dt-size-500) !important;
 }
+.d-w20 {
+  width: var(--dt-size-525) !important;
+}
 .d-w24 {
   width: var(--dt-size-550) !important;
 }
@@ -16899,6 +16989,9 @@ body {
 .d-wmn16 {
   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;
 }
@@ -16998,6 +17091,9 @@ body {
 .d-wmx16 {
   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;
 }
@@ -17097,6 +17193,9 @@ body {
 .d-m16 {
   margin: var(--dt-space-500) !important;
 }
+.d-m20 {
+  margin: var(--dt-space-525) !important;
+}
 .d-m24 {
   margin: var(--dt-space-550) !important;
 }
@@ -17186,6 +17285,10 @@ body {
   margin-left: var(--dt-space-500) !important;
   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;
@@ -17294,6 +17397,10 @@ body {
   margin-top: var(--dt-space-500) !important;
   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;
@@ -17394,6 +17501,9 @@ body {
 .d-mt16 {
   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;
 }
@@ -17475,6 +17585,9 @@ body {
 .d-mr16 {
   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;
 }
@@ -17556,6 +17669,9 @@ body {
 .d-mb16 {
   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;
 }
@@ -17637,6 +17753,9 @@ body {
 .d-ml16 {
   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;
 }
@@ -17718,6 +17837,9 @@ body {
 .d-p16 {
   padding: var(--dt-space-500) !important;
 }
+.d-p20 {
+  padding: var(--dt-space-525) !important;
+}
 .d-p24 {
   padding: var(--dt-space-550) !important;
 }
@@ -17768,6 +17890,10 @@ body {
   padding-left: var(--dt-space-500) !important;
   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;
@@ -17824,6 +17950,10 @@ body {
   padding-top: var(--dt-space-500) !important;
   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;
@@ -17872,6 +18002,9 @@ body {
 .d-pt16 {
   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;
 }
@@ -17914,6 +18047,9 @@ body {
 .d-pr16 {
   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;
 }
@@ -17956,6 +18092,9 @@ body {
 .d-pb16 {
   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;
 }
@@ -17998,6 +18137,9 @@ body {
 .d-pl16 {
   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;
 }