@sc-360-v2/storefront-cms-library 0.5.49 → 0.5.51

package/dist/user-elements copy.scss

@@ -1,1437 +0,0 @@
-@use "sass:map";
-@use "sass:list";
-
-$resizerId: "[data-cms-tool='cms-element-resizer']";
-$resizeActive: '[data-cms-element-resizer="true"]';
-[data-div-type="element"] {
-  &[data-element-type="userElements"] {
-    // width: var(
-    //   --_sf-mob-el-wh-st-mx,
-    //   var(
-    //     --_sf-tab-el-wh-st-mx,
-    //     var(
-    //       --_sf-el-wh-st-mx,
-    //       calc(
-    //         1% *
-    //           var(
-    //             --_ctm-mob-bun-ele-nw-wh-vl,
-    //             var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
-    //           )
-    //       )
-    //     )
-    //   )
-    // );
-
-    height: auto;
-
-    margin: var(
-      --_ctm-mob-bun-lt-mn,
-      var(
-        --_ctm-tab-bun-lt-mn,
-        var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
-      )
-    );
-
-    background-color: var(
-      --_ctm-mob-bun-dn-bd-cr,
-      var(--_ctm-tab-bun-dn-bd-cr, var(--_ctm-bun-dn-bd-cr))
-    );
-    background-image: var(
-      --_ctm-mob-bun-dn-bd-ie,
-      var(--_ctm-tab-bun-dn-bd-ie, var(--_ctm-bun-dn-bd-ie))
-    );
-    background-attachment: var(
-      --_ctm-mob-bun-dn-bd-at,
-      var(--_ctm-tab-bun-dn-bd-at, var(--_ctm-bun-dn-bd-at))
-    );
-    background-position: var(
-      --_ctm-mob-bun-dn-bd-pn,
-      var(--_ctm-tab-bun-dn-bd-pn, var(--_ctm-bun-dn-bd-pn))
-    );
-    background-repeat: var(
-      --_ctm-mob-bun-dn-bd-rt,
-      var(--_ctm-tab-bun-dn-bd-rt, var(--_ctm-bun-dn-bd-rt))
-    );
-    background-size: var(
-      --_ctm-mob-bun-dn-bd-se,
-      var(--_ctm-tab-bun-dn-bd-se, var(--_ctm-bun-dn-bd-se))
-    );
-    padding: var(--_ctm-mob-bun-lt-pg, var(--_ctm-tab-bun-lt-pg, var(--_ctm-bun-lt-pg)));
-
-    border-color: var(
-      --_ctm-mob-bun-dn-br-cr,
-      var(--_ctm-tab-bun-dn-br-cr, var(--_ctm-bun-dn-br-cr))
-    );
-
-    border-style: var(
-      --_ctm-mob-bun-dn-br-se,
-      var(--_ctm-tab-bun-dn-br-se, var(--_ctm-bun-dn-br-se))
-    );
-
-    border-width: var(
-      --_ctm-mob-bun-dn-br-wh,
-      var(--_ctm-tab-bun-dn-br-wh, var(--_ctm-bun-dn-br-wh))
-    );
-
-    border-radius: var(
-      --_ctm-mob-bun-dn-br-rs,
-      var(--_ctm-tab-bun-dn-br-rs, var(--_ctm-bun-dn-br-rs))
-    );
-
-    box-shadow: var(
-      --_show-shadow,
-      var(--_ctm-mob-bun-dn-sw-ae, var(--_ctm-tab-bun-dn-sw-ae, var(--_ctm-bun-dn-sw-ae)))
-        var(--_ctm-mob-bun-dn-sw-br, var(--_ctm-tab-bun-dn-sw-br, var(--_ctm-bun-dn-sw-br)))
-        var(--_ctm-mob-bun-dn-sw-sd, var(--_ctm-tab-bun-dn-sw-sd, var(--_ctm-bun-dn-sw-sd)))
-        var(--_ctm-mob-bun-dn-sw-cr, var(--_ctm-tab-bun-dn-sw-cr, var(--_ctm-bun-dn-sw-cr)))
-    );
-
-    & > div {
-      &.wrapper {
-        width: 100%;
-      }
-    }
-
-    .embla {
-      width: 90%;
-      height: 100%;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      // overflow: hidden;
-
-      .embla__viewport {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-
-        overflow: hidden;
-
-        .embla__container {
-          width: 100%;
-          height: 100%;
-          display: grid;
-          grid-template-rows: 100%;
-
-          grid-template-columns: repeat(
-            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
-            calc(
-              100% /
-                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
-            )
-          );
-
-          grid-auto-flow: column;
-          gap: var(--_ctm-lt-qa-im-sg);
-
-          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-dn-pn-as-aw-se,
-                      var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-                    ) +
-                    10px
-                )
-            );
-          }
-
-          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-dn-pn-le-le-ht,
-                      var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
-                    ) +
-                    20px
-                )
-            );
-          }
-
-          &[data-control-type="Bottom"][data-slider-control="Dots"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-dn-pn-ds-dt-se,
-                      var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-                    ) +
-                    20px
-                )
-            );
-          }
-
-          .embla__slide {
-            width: 100%;
-            height: 100%;
-            white-space: nowrap;
-          }
-        }
-      }
-      &:not([data-display-style="Column"]) {
-        .embla__container {
-          grid-auto-columns: calc(
-            100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
-          );
-        }
-      }
-
-      &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
-        // overflow: unset;
-
-        .embla__viewport {
-          overflow: unset;
-          height: 80%;
-          flex-grow: 1;
-          &:not([data-is-builder-type="true"]) {
-            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
-          }
-
-          .embla__container {
-            overflow: unset;
-            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
-            // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
-
-            grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
-            grid-template-rows: unset;
-
-            grid-auto-flow: row;
-
-            &[data-overflow-hidden="true"] {
-              overflow: hidden;
-            }
-          }
-        }
-      }
-
-      &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
-        .embla__viewport {
-          .embla__container {
-            grid-template-rows: repeat(
-              var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
-              calc(
-                100% /
-                  var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
-              )
-            );
-          }
-        }
-      }
-
-      &[data-display-style="Rows"] {
-        // overflow: unset;
-
-        .embla__viewport {
-          overflow: unset;
-          height: 80%;
-          flex-grow: 1;
-
-          &:not([data-is-builder-type="true"]) {
-            height: var(--_ctm-height);
-          }
-
-          .embla__container {
-            overflow: hidden;
-            height: var(--_ctm-height);
-            // min-height: var(--_ctm-height);
-
-            grid-template-columns: repeat(
-              var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
-              1fr
-            );
-            grid-template-rows: unset;
-            grid-auto-flow: row;
-          }
-        }
-      }
-
-      &[data-display-style="Column"] {
-        // overflow: unset;
-
-        .embla__viewport {
-          .embla__container {
-            display: flex;
-            .embla__slide {
-              width: unset;
-              height: 100%;
-              aspect-ratio: 1 / 2;
-            }
-          }
-        }
-      }
-      &[data-display-style="Masonry"] {
-        // overflow: unset;
-
-        .embla__viewport {
-          overflow: hidden;
-          height: 80%;
-          flex-grow: 1;
-
-          &:not([data-is-builder-type="true"]) {
-            height: var(--_ctm-height);
-          }
-
-          .embla__container {
-            overflow: unset;
-            display: block;
-
-            column-count: var(
-              --_ctm-mob-lt-is-pr-rw,
-              var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
-            );
-            gap: unset;
-
-            column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
-
-            height: auto;
-
-            .embla__slide {
-              margin-bottom: var(
-                --_ctm-mob-lt-im-gp,
-                var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
-              );
-              height: unset;
-
-              .gallery__slide {
-                height: unset;
-              }
-            }
-          }
-        }
-      }
-
-      .arrow-navigation {
-        display: flex;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 100%;
-        justify-content: space-between;
-        transform: translate(-50%, -50%);
-        //   padding-left: 20px;
-        &[data-control-type="Side"] {
-          .left-button,
-          .right-button {
-            background-color: transparent;
-          }
-        }
-        &[data-background-shape="Round"] {
-          .left-button,
-          .right-button {
-            background-color: #f2f5f5;
-            box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
-          }
-        }
-        &[data-control-type="Bottom-Overflow"] {
-          transform: translateX(-50%);
-          width: 100%;
-          justify-content: center;
-          gap: 12px;
-          top: unset;
-          bottom: 6px;
-        }
-        &[data-control-type="Bottom"] {
-          transform: unset;
-          position: static;
-          width: 100%;
-          justify-content: center;
-          gap: 12px;
-          margin-top: 10px;
-        }
-        .left-button {
-          padding: 10px;
-          border-radius: 50%;
-          border: none;
-          width: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
-
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          outline: none;
-          margin-left: 12px;
-          &:disabled {
-            & svg {
-              path {
-                stroke: rgb(192, 192, 192);
-              }
-            }
-          }
-        }
-        .right-button {
-          border-radius: 50%;
-          border: none;
-          width: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-as-aw-se,
-            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-          );
-
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          outline: none;
-          margin-right: 12px;
-          padding: 10px;
-
-          &:disabled {
-            & svg {
-              path {
-                stroke: rgb(192, 192, 192);
-              }
-            }
-          }
-        }
-        .icon {
-          display: flex;
-
-          svg {
-            width: calc(
-              var(
-                  --_ctm-mob-dn-pn-as-aw-se,
-                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-                ) *
-                0.5
-            );
-            height: calc(
-              var(
-                  --_ctm-mob-dn-pn-as-aw-se,
-                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-                ) *
-                0.5
-            );
-
-            path {
-              stroke: var(
-                --_ctm-mob-dn-pn-as-aw-cr,
-                var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
-              );
-            }
-          }
-        }
-      }
-
-      &[data-control-type="Side"] {
-        .embla__viewport {
-          width: calc(100% - 120px);
-          margin-inline: auto;
-        }
-        .left-button {
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-        .right-button {
-          position: absolute;
-
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-
-      &[data-thumbnail-placement="top"] {
-        flex-direction: column-reverse;
-      }
-      &[data-thumbnail-placement="bottom"] {
-        flex-direction: column;
-      }
-      &[data-thumbnail-placement="left"] {
-        flex-direction: row-reverse;
-
-        .embla__thumbs {
-          width: var(--_ctm-lt-tl-se);
-          height: 100%;
-
-          & .embla__thumbs__container {
-            flex-direction: column;
-            height: 100%;
-          }
-        }
-      }
-      &[data-thumbnail-placement="right"] {
-        flex-direction: row;
-        .embla__thumbs {
-          width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-          height: 100%;
-
-          & .embla__thumbs__container {
-            flex-direction: column;
-            height: 100%;
-          }
-        }
-      }
-      .embla__dots {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
-        gap: 6px;
-        margin-top: 16px;
-
-        &[data-control-type="Bottom-Overflow"] {
-          position: absolute;
-          bottom: 10px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 75%;
-        }
-        .embla__dot {
-          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-          -webkit-appearance: none;
-          appearance: none;
-          background-color: var(
-            --_ctm-mob-dn-pn-ds-or-dt-cr,
-            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
-          );
-
-          touch-action: manipulation;
-          display: inline-flex;
-          text-decoration: none;
-          cursor: pointer;
-          border: 0;
-          padding: 0;
-          margin: 0;
-          // width: 0.6rem;
-          // height: 0.6rem;
-          width: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 50%;
-        }
-        .embla__dot:after {
-          // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
-          width: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          content: "";
-        }
-        .embla__dot--selected:after {
-          box-shadow: inset 0 0 0 1px var(--text-body);
-          background-color: var(
-            --_ctm-mob-dn-pn-ds-ct-dt-cr,
-            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
-          );
-        }
-        &[data-slider-control="Pagination Line"] {
-          .embla__dot {
-            width: var(
-              --_ctm-mob-dn-pn-le-le-wh,
-              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
-            );
-            height: var(
-              --_ctm-mob-dn-pn-le-le-ht,
-              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
-            );
-            background-color: var(
-              --_ctm-mob-dn-pn-le-or-le-cr,
-              var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
-            );
-            border-radius: 6px;
-          }
-
-          .embla__dot--selected:after {
-            box-shadow: inset 0 0 0 1px var(--text-body);
-            border-radius: 6px;
-            width: var(
-              --_ctm-mob-dn-pn-le-le-wh,
-              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
-            );
-            height: var(
-              --_ctm-mob-dn-pn-le-le-ht,
-              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
-            );
-            background-color: var(
-              --_ctm-mob-dn-pn-le-ct-le-cr,
-              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
-            );
-          }
-        }
-      }
-
-      .embla__thumbs {
-        width: 100%;
-        height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-        position: relative;
-        display: grid;
-        grid-template-columns: 1fr;
-        overflow: hidden;
-        // margin: 10px;
-        padding: 10px;
-
-        .embla__thumbs__viewport {
-          width: 100%;
-          height: 100%;
-          position: relative;
-          display: flex;
-          flex-direction: column;
-
-          overflow: hidden;
-        }
-        .embla__thumbs__container {
-          display: flex;
-          flex-direction: row;
-          margin-left: calc(var(--thumbs-slide-spacing) * -1);
-          gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
-
-          width: 100%;
-          // justify-content: center;
-          // height: 200px;
-
-          .embla__thumbs__slide {
-            min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-            max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-            height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
-
-            & img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-        }
-      }
-    }
-
-    .user_elements_horizontal_container {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-
-      // padding: 24px;
-      gap: 16px;
-
-      background-color: var(
-        --_ctm-mob-dn-wt-se-bd-cr,
-        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
-      );
-
-      border-color: var(
-        --_ctm-mob-dn-wt-se-br-cr,
-        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
-      );
-
-      border-style: var(
-        --_ctm-mob-dn-wt-se-br-se,
-        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
-      );
-
-      border-width: var(
-        --_ctm-mob-dn-wt-se-br-wh,
-        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
-      );
-
-      border-radius: var(
-        --_ctm-mob-dn-wt-se-br-rs,
-        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
-      );
-
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
-          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
-          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
-          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
-      );
-
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      &.vertical {
-        flex-direction: row;
-
-        &[data-content-alignment="Vertical"] {
-          flex-direction: column;
-          // max-width: 350px;
-        }
-
-        .user_elements_user_info_wrapper {
-          flex-direction: column;
-          justify-content: normal;
-          padding: 16px;
-          height: max-content;
-          gap: 16px;
-          background-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-bd-cr);
-          border-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-cr);
-          border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
-          border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
-          border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
-          box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
-            var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
-
-          .user_elements_user_data_wrapper {
-            flex-direction: column;
-            white-space: nowrap;
-            align-items: flex-start;
-            gap: 16px;
-          }
-        }
-
-        .user_elements_quota_wrapper {
-          flex-direction: column;
-          align-items: flex-start;
-          height: fit-content;
-          background-color: var(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr);
-          border-color: var(--_ctm-dn-qa-dn-fl-ad-oy-br-cr);
-          border-radius: var(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
-          border-style: var(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
-          border-width: var(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
-          box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
-            var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
-
-          .quote_vertical_scroll_wrapper {
-            overflow-y: auto;
-            gap: var(--_ctm-lt-qa-im-sg);
-            display: flex;
-            width: 100%;
-            // max-height: 250px;
-            flex-direction: column;
-
-            .quote_item_wrapper {
-              flex-direction: column;
-              position: relative;
-
-              .quote_info_wrapper {
-                justify-content: space-between;
-              }
-
-              .quota_divider {
-                width: 100%;
-                height: 1px;
-              }
-            }
-          }
-          &[data-show-divider="true"] {
-            .quote_item_wrapper:not(:last-child)::before {
-              content: "";
-              position: absolute;
-              left: 0;
-              right: 0;
-              bottom: calc(
-                -1 *
-                  (
-                    var(
-                        --_ctm-mob-lt-qa-im-sg,
-                        var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
-                      ) /
-                      2
-                  )
-              );
-              height: 2px;
-              background-color: gray;
-              // height: var(
-              //   --_ctm-mob-dn-wt-se-dr-wt,
-              //   var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
-              // );
-              // background-color: var(
-              //   --_ctm-mob-dn-wt-se-dr-cr,
-              //   var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
-              // );
-            }
-          }
-
-          .quote_vertical_scroll_wrap {
-            height: auto;
-            display: flex;
-            width: 100%;
-            flex-direction: column;
-            gap: 16px;
-
-            .quote_item_wrapper {
-              justify-content: space-between;
-              width: 100%;
-              align-items: center;
-              gap: 16px;
-              align-items: flex-start;
-              flex-direction: column;
-
-              .quota_divider {
-                height: 1px;
-                width: 100%;
-              }
-
-              .quote_info_wrapper {
-                width: 100%;
-                justify-content: space-between;
-              }
-            }
-          }
-        }
-
-        .user_elements_allowance_wrapper {
-          flex-direction: column;
-          align-items: flex-start;
-          background-color: var(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr);
-          border-color: var(--_ctm-dn-ae-dn-fl-ad-oy-br-cr);
-          border-radius: var(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
-          border-style: var(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
-          border-width: var(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
-          box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
-            var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
-
-          .allowance_vertical_scroll_wrapper {
-            overflow-y: scroll;
-            gap: var(--_ctm-lt-qa-im-sg);
-            display: flex;
-            width: 100%;
-            max-height: 250px;
-            flex-direction: column;
-
-            .allowance_item_wrapper {
-              flex-direction: column;
-
-              .allowance_info_wrapper {
-                justify-content: space-between;
-              }
-
-              .allowance_divider {
-                width: 100%;
-                height: 1px;
-              }
-            }
-          }
-
-          .allowance_vertical_scroll_wrap {
-            gap: var(--_ctm-lt-qa-im-sg);
-            display: flex;
-            width: 100%;
-            flex-direction: column;
-
-            .allowance_item_wrapper {
-              flex-direction: column;
-
-              .allowance_info_wrapper {
-                justify-content: space-between;
-              }
-
-              .allowance_divider {
-                width: 100%;
-                height: 1px;
-              }
-            }
-          }
-        }
-
-        .user_elements_user_info_secondary_wrapper {
-          flex-direction: column;
-          align-items: flex-start;
-          height: max-content;
-          background-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr);
-          border-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr);
-          border-radius: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
-          border-style: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
-          border-width: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
-          box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
-            var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
-            var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
-
-          .overview_text {
-            color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-cr);
-            font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-fy);
-            font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se);
-            font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se-ic);
-            font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-wt);
-            line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-le-ht);
-            letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
-            text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
-            text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue);
-          }
-
-          .shipping_address_wrapper {
-            flex-direction: row;
-            gap: 6px;
-          }
-
-          .secondary_info_divider {
-            height: 1px;
-            width: 100%;
-          }
-
-          .active_orders_wrapper {
-            flex-direction: row;
-            justify-content: space-between;
-          }
-
-          .payment_methods_wrapper {
-            flex-direction: row;
-            justify-content: space-between;
-          }
-
-          .my_cart_wrapper {
-            flex-direction: row;
-            align-items: center;
-          }
-        }
-      }
-
-      .user_elements_user_info_wrapper {
-        display: flex;
-        justify-content: space-between;
-        background-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-bd-cr);
-        border-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-cr);
-        border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
-        border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
-        border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
-        box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
-          var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
-
-        .user_elements_user_name_wrapper {
-          display: flex;
-          gap: 6px;
-          align-items: center;
-
-          .user_elements_user_name {
-            display: flex;
-            flex: 1 0 0;
-            color: var(--_ctm-dn-ur-io-dn-ur-ne-dn-cr);
-            font-family: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-fy);
-            font-size: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se);
-            font-style: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se-ic);
-            font-weight: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-wt);
-            line-height: var(--_ctm-dn-ur-io-dn-ur-ne-dn-le-ht);
-            letter-spacing: var(--_ctm-dn-ur-io-dn-ur-ne-dn-lr-sg);
-            text-align: var(--_ctm-dn-ur-io-dn-ur-ne-dn-tt-an);
-            text-decoration: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ue);
-          }
-
-          .icon {
-            cursor: pointer;
-            svg {
-              width: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
-              height: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
-              path {
-                stroke: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-c1);
-              }
-            }
-          }
-        }
-
-        .user_elements_user_data_wrapper {
-          display: flex;
-          align-items: center;
-          gap: 12px;
-
-          .user_elements_user_data {
-            display: flex;
-
-            .user_elements_user_id {
-              display: flex;
-              flex: 1 0 0;
-              gap: 6px;
-              align-items: center;
-              color: var(--_ctm-dn-ur-io-dn-ur-id-dn-cr);
-              font-family: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-fy);
-              font-size: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se);
-              font-style: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se-ic);
-              font-weight: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-wt);
-              line-height: var(--_ctm-dn-ur-io-dn-ur-id-dn-le-ht);
-              letter-spacing: var(--_ctm-dn-ur-io-dn-ur-id-dn-lr-sg);
-              text-align: var(--_ctm-dn-ur-io-dn-ur-id-dn-tt-an);
-              text-decoration: var(--_ctm-dn-ur-io-dn-ur-id-dn-ue);
-
-              .icon {
-                cursor: pointer;
-                svg {
-                  width: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
-                  height: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
-                  path {
-                    stroke: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-c1);
-                  }
-                }
-              }
-            }
-
-            .user_elements_user_email {
-              display: flex;
-              flex: 1 0 0;
-              gap: 6px;
-              align-items: center;
-              color: var(--_ctm-dn-ur-io-dn-ur-el-dn-cr);
-              font-family: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-fy);
-              font-size: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se);
-              font-style: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se-ic);
-              font-weight: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-wt);
-              line-height: var(--_ctm-dn-ur-io-dn-ur-el-dn-le-ht);
-              letter-spacing: var(--_ctm-dn-ur-io-dn-ur-el-dn-lr-sg);
-              text-align: var(--_ctm-dn-ur-io-dn-ur-el-dn-tt-an);
-              text-decoration: var(--_ctm-dn-ur-io-dn-ur-el-dn-ue);
-
-              .icon {
-                cursor: pointer;
-                svg {
-                  width: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
-                  height: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
-                  path {
-                    stroke: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-c1);
-                  }
-                }
-              }
-            }
-
-            .user_elements_user_phone {
-              display: flex;
-              flex: 1 0 0;
-              gap: 6px;
-              align-items: center;
-              color: var(--_ctm-dn-ur-io-dn-ur-pe-dn-cr);
-              font-family: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-fy);
-              font-size: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se);
-              font-style: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se-ic);
-              font-weight: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-wt);
-              line-height: var(--_ctm-dn-ur-io-dn-ur-pe-dn-le-ht);
-              letter-spacing: var(--_ctm-dn-ur-io-dn-ur-pe-dn-lr-sg);
-              text-align: var(--_ctm-dn-ur-io-dn-ur-pe-dn-tt-an);
-              text-decoration: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ue);
-
-              .icon {
-                cursor: pointer;
-                svg {
-                  width: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
-                  height: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
-                  path {
-                    stroke: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-c1);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      .user_elements_quota_wrapper {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        align-items: center;
-        gap: 16px;
-        background-color: var(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr);
-        border-color: var(--_ctm-dn-qa-dn-fl-ad-oy-br-cr);
-        border-radius: var(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
-        border-style: var(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
-        border-width: var(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
-        box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
-          var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
-
-        .quota_label_wrapper {
-          display: flex;
-          flex: 1 0 0;
-          min-width: 109px;
-
-          .quota_label {
-            display: flex;
-            flex: 1 0 0;
-            color: var(--_ctm-dn-qa-dn-qa-hg-dn-cr);
-            font-family: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-fy);
-            font-size: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-se);
-            font-style: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-se-ic);
-            font-weight: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-wt);
-            line-height: var(--_ctm-dn-qa-dn-qa-hg-dn-le-ht);
-            letter-spacing: var(--_ctm-dn-qa-dn-qa-hg-dn-lr-sg);
-            text-align: var(--_ctm-dn-qa-dn-qa-hg-dn-tt-an);
-            text-decoration: var(--_ctm-dn-qa-dn-qa-hg-dn-ue);
-          }
-        }
-
-        .quota_upfront_wrapper {
-          display: flex;
-          gap: var(--_ctm-lt-qa-im-sg);
-          flex-wrap: wrap;
-        }
-
-        .quote_item_wrapper {
-          display: flex;
-          flex-direction: row;
-          gap: var(--_ctm-lt-qa-im-sg);
-
-          .quote_info_wrapper {
-            display: flex;
-            gap: 12px;
-            .quota_name_wrapper {
-              display: flex;
-              flex-direction: column;
-              gap: 6px;
-
-              .quota_name {
-                display: flex;
-                flex: 1 0 0;
-                color: var(--_ctm-dn-qa-dn-qa-ne-dn-cr);
-                font-family: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-fy);
-                font-size: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
-                font-style: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic);
-                font-weight: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt);
-                line-height: var(--_ctm-dn-qa-dn-qa-ne-dn-le-ht);
-                letter-spacing: var(--_ctm-dn-qa-dn-qa-ne-dn-lr-sg);
-                text-align: var(--_ctm-dn-qa-dn-qa-ne-dn-tt-an);
-                text-decoration: var(--_ctm-dn-qa-dn-qa-ne-dn-ue);
-              }
-
-              .quota_expiry {
-                display: flex;
-                flex: 1 0 0;
-                color: var(--_ctm-dn-qa-dn-qa-ey-dn-cr);
-                font-family: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-fy);
-                font-size: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-se);
-                font-style: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-se-ic);
-                font-weight: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-wt);
-                line-height: var(--_ctm-dn-qa-dn-qa-ey-dn-le-ht);
-                letter-spacing: var(--_ctm-dn-qa-dn-qa-ey-dn-lr-sg);
-                text-align: var(--_ctm-dn-qa-dn-qa-ey-dn-tt-an);
-                text-decoration: var(--_ctm-dn-qa-dn-qa-ey-dn-ue);
-              }
-            }
-
-            .quota_inventory {
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              color: var(--_ctm-dn-qa-dn-qa-iy-dn-cr);
-              font-family: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-fy);
-              font-size: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-se);
-              font-style: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-se-ic);
-              font-weight: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-wt);
-              line-height: var(--_ctm-dn-qa-dn-qa-iy-dn-le-ht);
-              letter-spacing: var(--_ctm-dn-qa-dn-qa-iy-dn-lr-sg);
-              text-align: var(--_ctm-dn-qa-dn-qa-iy-dn-tt-an);
-              text-decoration: var(--_ctm-dn-qa-dn-qa-iy-dn-ue);
-            }
-          }
-
-          .quota_divider {
-            content: "";
-            height: auto;
-            width: 1px;
-            background-color: #d0d5dd;
-          }
-        }
-      }
-
-      .user_elements_allowance_wrapper {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        align-items: center;
-        gap: 16px;
-        background-color: var(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr);
-        border-color: var(--_ctm-dn-ae-dn-fl-ad-oy-br-cr);
-        border-radius: var(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
-        border-style: var(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
-        border-width: var(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
-        box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
-          var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
-
-        .allowance_label_wrapper {
-          display: flex;
-          flex: 1 0 0;
-          min-width: 109px;
-
-          .allowance_label {
-            display: flex;
-            flex: 1 0 0;
-            white-space: nowrap;
-            color: var(--_ctm-dn-ae-dn-ae-hg-dn-cr);
-            font-family: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-fy);
-            font-size: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-se);
-            font-style: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-se-ic);
-            font-weight: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-wt);
-            line-height: var(--_ctm-dn-ae-dn-ae-hg-dn-le-ht);
-            letter-spacing: var(--_ctm-dn-ae-dn-hg-ne-dn-lr-sg);
-            text-align: var(--_ctm-dn-ae-dn-ae-hg-dn-tt-an);
-            text-decoration: var(--_ctm-dn-ae-dn-ae-hg-dn-ue);
-          }
-        }
-
-        .allowance_upfront_wrapper {
-          display: flex;
-          gap: var(--_ctm-lt-qa-im-sg);
-          flex-wrap: wrap;
-        }
-
-        .allowance_item_wrapper {
-          display: flex;
-          flex-direction: row;
-          gap: var(--_ctm-lt-qa-im-sg);
-
-          .allowance_info_wrapper {
-            display: flex;
-            gap: 12px;
-            .allowance_name_wrapper {
-              display: flex;
-              flex-direction: column;
-              gap: 6px;
-
-              .allowance_name {
-                display: flex;
-                flex: 1 0 0;
-                color: var(--_ctm-dn-ae-dn-ae-ne-dn-cr);
-                font-family: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-fy);
-                font-size: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
-                font-style: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic);
-                font-weight: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt);
-                line-height: var(--_ctm-dn-ae-dn-ae-ne-dn-le-ht);
-                letter-spacing: var(--_ctm-dn-ae-dn-ae-ne-dn-lr-sg);
-                text-align: var(--_ctm-dn-ae-dn-ae-ne-dn-tt-an);
-                text-decoration: var(--_ctm-dn-ae-dn-ae-ne-dn-ue);
-              }
-
-              .allowance_expiry {
-                display: flex;
-                flex: 1 0 0;
-                color: var(--_ctm-dn-ae-dn-ae-ey-dn-cr);
-                font-family: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-fy);
-                font-size: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-se);
-                font-style: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-se-ic);
-                font-weight: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-wt);
-                line-height: var(--_ctm-dn-ae-dn-ae-ey-dn-le-ht);
-                letter-spacing: var(--_ctm-dn-ae-dn-ae-ey-dn-lr-sg);
-                text-align: var(--_ctm-dn-ae-dn-ae-ey-dn-tt-an);
-                text-decoration: var(--_ctm-dn-ae-dn-ae-ey-dn-ue);
-              }
-            }
-
-            .allowance_inventory {
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              color: var(--_ctm-dn-ae-dn-ae-ey-dn-cr);
-              font-family: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-fy);
-              font-size: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-se);
-              font-style: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-se-ic);
-              font-weight: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-wt);
-              line-height: var(--_ctm-dn-ae-dn-ae-iy-dn-le-ht);
-              letter-spacing: var(--_ctm-dn-ae-dn-ae-iy-dn-lr-sg);
-              text-align: var(--_ctm-dn-ae-dn-ae-iy-dn-tt-an);
-              text-decoration: var(--_ctm-dn-ae-dn-ae-iy-dn-ue);
-            }
-          }
-
-          .allowance_divider {
-            content: "";
-            height: auto;
-            width: 1px;
-            background-color: #d0d5dd;
-          }
-        }
-      }
-
-      .user_elements_user_info_secondary_wrapper {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        gap: 16px;
-        background-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr);
-        border-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr);
-        border-radius: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
-        border-style: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
-        border-width: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
-        box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
-          var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
-          var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
-
-        .shipping_address_wrapper {
-          display: flex;
-          flex-direction: column;
-          gap: 4px;
-          flex: 1 0 0;
-          align-self: stretch;
-          justify-content: flex-start;
-
-          .shipping_address_label {
-            color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
-            font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
-            font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
-            font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
-            font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
-            line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
-            letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
-            text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
-            text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
-          }
-
-          .shipping_address {
-            color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
-            font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
-            font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
-            font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
-            font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
-            line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
-            letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
-            text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
-            text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
-          }
-        }
-
-        .secondary_info_divider {
-          content: "";
-          height: 3rem;
-          width: 1px;
-          background-color: #d0d5dd;
-        }
-
-        .active_orders_wrapper {
-          display: flex;
-          flex-direction: column;
-          gap: 4px;
-          flex: 1 0 0;
-          align-self: stretch;
-          justify-content: flex-start;
-
-          .active_order_label {
-            color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
-            font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
-            font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
-            font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
-            font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
-            line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
-            letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
-            text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
-            text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
-          }
-
-          .order_wrapper {
-            display: flex;
-            gap: 6px;
-            .remaining_order {
-              color: #243dc6;
-              font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
-              font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
-              font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
-              font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
-              line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
-              letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
-              text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
-              text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
-            }
-            .active_orders {
-              color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
-              font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
-              font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
-              font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
-              font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
-              line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
-              letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
-              text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
-              text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
-            }
-          }
-        }
-
-        .payment_methods_wrapper {
-          display: flex;
-          flex-direction: column;
-          gap: 4px;
-          flex: 1 0 0;
-          align-self: stretch;
-          justify-content: flex-start;
-
-          .payment_methods_label {
-            color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
-            font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
-            font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
-            font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
-            font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
-            line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
-            letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
-            text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
-            text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
-          }
-
-          .payment_wrapper {
-            display: flex;
-            gap: 6px;
-            .remaining_payment {
-              color: #243dc6;
-              font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
-              font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
-              font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
-              font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
-              line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
-              letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
-              text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
-              text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
-            }
-            .active_payment {
-              color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
-              font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
-              font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
-              font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
-              font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
-              line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
-              letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
-              text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
-              text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
-            }
-          }
-        }
-
-        .my_cart_wrapper {
-          display: flex;
-          flex-direction: row;
-          gap: 16px;
-          align-items: center;
-
-          .my_cart_info_wrapper {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            white-space: nowrap;
-
-            .my_cart_label {
-              color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
-              font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
-              font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
-              font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
-              font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
-              line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
-              letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
-              text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
-              text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
-            }
-
-            .my_cart_value {
-              color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
-              font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
-              font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
-              font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
-              font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
-              line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
-              letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
-              text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
-              text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
-            }
-          }
-        }
-      }
-    }
-  }
-}