npm - @sc-360-v2/storefront-cms-library - Versions diffs - 0.4.49 → 0.4.50 - Mend

@sc-360-v2/storefront-cms-library 0.4.49 → 0.4.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (183) hide show

package/dist/add-existing-form.scss +66 -66
package/dist/add-order.scss +377 -377
package/dist/add-products-tab copy.scss +1132 -1132
package/dist/add-products-tab-details.scss +3818 -0
package/dist/add-products-tab.scss +142 -3052
package/dist/allocationDetails.scss +2247 -2247
package/dist/allocations.scss +1603 -1603
package/dist/amount-estimator.scss +1083 -1083
package/dist/animation-control.scss +23 -23
package/dist/badge.scss +388 -388
package/dist/brand-basic-elements.scss +292 -292
package/dist/brand.scss +93 -93
package/dist/breadcrumbs.scss +802 -802
package/dist/builder.js +1 -1
package/dist/bulk-order-pad.scss +677 -677
package/dist/bulk-variant-picker copy.scss +1121 -1121
package/dist/bulk-variant-picker.scss +3294 -3294
package/dist/bundle copy.scss +2805 -2805
package/dist/bundle.scss +2383 -2383
package/dist/bundleDetails copy.scss +1431 -1431
package/dist/bundleDetails.scss +3320 -3285
package/dist/button copy.scss +271 -271
package/dist/button.scss +292 -292
package/dist/buy-for-tab-container.scss +90 -90
package/dist/buy-for-tab.scss +3 -4
package/dist/buy-for-tabs-container-item.scss +80 -80
package/dist/buyForHeaders.scss +6718 -6718
package/dist/buyForPopup.scss +70 -52
package/dist/cart-details.scss +3207 -3207
package/dist/cart-products-sidebar.scss +211 -211
package/dist/cart-summary.scss +2728 -2728
package/dist/cart-wrapper.scss +127 -127
package/dist/cart.scss +269 -269
package/dist/cartAttributes.scss +935 -935
package/dist/cartDropdownOverlay.scss +513 -237
package/dist/cartGrouping.scss +89 -89
package/dist/category-groups-element.scss +138 -138
package/dist/category.scss +73 -73
package/dist/categoryDetails.scss +61 -61
package/dist/categoryWidget.scss +34 -34
package/dist/checkbox-radio.scss +124 -124
package/dist/checkout.scss +6460 -6569
package/dist/code-temp.scss +58 -58
package/dist/colorpicker_v2.scss +52 -52
package/dist/common-element.scss +35 -35
package/dist/confirm-modal.scss +351 -351
package/dist/confirmationModal.scss +139 -139
package/dist/contact-us.scss +105 -105
package/dist/container.scss +114 -114
package/dist/countdown.scss +751 -751
package/dist/coupon.scss +1254 -1254
package/dist/custom-fonts.scss +100 -100
package/dist/customization-tree.scss +160 -160
package/dist/default-dropdown.scss +240 -240
package/dist/dropdownTemplate.scss +57 -43
package/dist/editCartItem.scss +111 -111
package/dist/embed-temp.scss +72 -72
package/dist/embroider-preview-element.scss +94 -94
package/dist/embroider-template-1-v2.scss +937 -937
package/dist/embroider-template-1.scss +482 -482
package/dist/embroidery.scss +213 -213
package/dist/employee-bulk-order.scss +4057 -4057
package/dist/emtpy-templates.scss +165 -165
package/dist/faq.scss +564 -564
package/dist/fb-dropdown.scss +125 -125
package/dist/filter-results.scss +323 -323
package/dist/filters.scss +2418 -2418
package/dist/flex-text-editor.scss +271 -271
package/dist/form-preview.scss +290 -290
package/dist/form-zindex-module.scss +24 -24
package/dist/gallery-slider-temp.scss +1234 -1234
package/dist/global-styles.scss +86 -86
package/dist/grid.scss +119 -119
package/dist/hotspot.scss +397 -397
package/dist/icon-library.scss +74 -74
package/dist/icon-list.scss +268 -268
package/dist/image-for-product.scss +21 -21
package/dist/image-temp.scss +168 -168
package/dist/item-stock.scss +87 -87
package/dist/language-selector.scss +528 -528
package/dist/layouter-item.scss +89 -89
package/dist/layouter-pro-item.scss +80 -80
package/dist/layouter-pro.scss +88 -88
package/dist/layouter.scss +294 -294
package/dist/light-box-v2.scss +105 -105
package/dist/lightbox.scss +78 -78
package/dist/line.scss +166 -166
package/dist/loader.scss +37 -37
package/dist/login.scss +1473 -1473
package/dist/map.scss +962 -962
package/dist/marchandiserSets.scss +60 -60
package/dist/mega-menu-container.scss +99 -99
package/dist/mega-menu.scss +838 -838
package/dist/menu-item.scss +19 -19
package/dist/menu-v2.scss +730 -730
package/dist/menu.scss +162 -162
package/dist/modal.scss +2267 -2267
package/dist/multi-select-dropdown.scss +282 -279
package/dist/my-templates.scss +463 -463
package/dist/my-wishlist.scss +17 -17
package/dist/option-bar.scss +845 -845
package/dist/order-processing.scss +61 -61
package/dist/order-status.scss +1856 -1856
package/dist/overflow-module.scss +63 -63
package/dist/past-orders.scss +975 -975
package/dist/payment-methods.scss +289 -289
package/dist/pickup-locations.scss +1167 -1167
package/dist/position-module.scss +95 -95
package/dist/prefix-list.scss +86 -86
package/dist/product-actions copy.scss +2765 -2765
package/dist/product-actions.scss +2286 -2286
package/dist/product-basic-elements.scss +770 -770
package/dist/product-customizations.scss +149 -149
package/dist/product-highlights copy.scss +217 -217
package/dist/product-highlights.scss +311 -311
package/dist/product-image copy.scss +787 -787
package/dist/product-image-bundles.scss +1512 -0
package/dist/product-image.scss +1 -1
package/dist/product-inventory.scss +1378 -1378
package/dist/product-options.scss +1144 -1144
package/dist/product-price.scss +2598 -2598
package/dist/product-promotions.scss +2759 -2759
package/dist/product-sizechart.scss +1826 -1826
package/dist/product.scss +97 -97
package/dist/productDetails.scss +70 -70
package/dist/profile.scss +3 -2
package/dist/quantity-selector.scss +3 -2
package/dist/quick-links.scss +552 -552
package/dist/quick-order-pad.scss +237 -237
package/dist/quota-details.scss +263 -263
package/dist/quotes.scss +737 -737
package/dist/repeater copy.scss +635 -635
package/dist/repeater-embla-controls.scss +6 -3
package/dist/repeater-grid-toggle.scss +58 -58
package/dist/repeater-item.scss +90 -90
package/dist/repeater.scss +915 -915
package/dist/request-for-quotes.scss +746 -746
package/dist/responsive-behaviour.scss +29 -29
package/dist/rfqs.scss +736 -736
package/dist/scroll.scss +222 -222
package/dist/search-results-heading.scss +279 -279
package/dist/search.scss +296 -296
package/dist/section.scss +209 -209
package/dist/shareCartSideBar.scss +254 -254
package/dist/shipping-estimator.scss +41 -41
package/dist/shipping-payments.scss +2467 -2467
package/dist/simple-list.scss +259 -259
package/dist/skeleton.scss +74 -74
package/dist/social.scss +276 -276
package/dist/sort.scss +89 -89
package/dist/spotlight.scss +1663 -1663
package/dist/stack.scss +129 -129
package/dist/static-global.scss +167 -0
package/dist/static-text.scss +52 -52
package/dist/stockStatus.scss +64 -64
package/dist/store-locations.scss +1398 -1398
package/dist/sub-category.scss +74 -74
package/dist/submit-quote.scss +275 -275
package/dist/tab-container-item.scss +80 -80
package/dist/tab-container.scss +89 -89
package/dist/tab-v2.scss +583 -583
package/dist/table-common.scss +506 -506
package/dist/table.scss +685 -685
package/dist/tabs.scss +395 -395
package/dist/text-temp-v2.scss +139 -139
package/dist/text-temp.scss +109 -109
package/dist/theme-classes.scss +296 -296
package/dist/toaster.scss +350 -350
package/dist/toggle-button.scss +32 -32
package/dist/transform-properties-module.scss +20 -20
package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +1790 -441
package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +9 -0
package/dist/uom-selector.scss +1169 -1169
package/dist/user-elements copy.scss +1437 -1437
package/dist/user-elements.scss +2471 -2471
package/dist/variant-picker.scss +2384 -2384
package/dist/video.scss +476 -476
package/dist/volume-pricing copy 2.scss +1468 -1468
package/dist/volume-pricing copy.scss +1077 -1077
package/dist/volume-pricing.scss +1175 -1175
package/dist/widget.scss +148 -148
package/dist/wishlist-overlay.scss +48 -48
package/package.json +1 -1

package/dist/login.scss CHANGED Viewed

@@ -1,1473 +1,1473 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-[data-div-type="element"] {
-  &[data-element-type="login"],
-  &[data-element-type="resetPassword"],
-  &[data-element-type="forgotPassword"] {
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% *
-          var(
-            --_ctm-mob-ele-nw-wh-vl,
-            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-          )
-      )
-    );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    position: relative;
-    & > .wrapper {
-      // display: flex;
-      // align-items: center;
-      // justify-content: center;
-      width: 100%;
-      height: 100%;
-    }
-    // & form {
-    //   width: 100%;
-    //   height: 100%;
-    // }
-    &[data-widget-border="true"] {
-      .search-wrapper {
-        border-color: var(--_ctm-dn-sh-br-br-cr, var(--_tst-dn-sh-br-br-cr));
-        border-style: var(--_ctm-dn-sh-br-br-se, var(--_tst-dn-sh-br-br-se));
-        border-width: var(--_ctm-dn-sh-br-br-wh, var(--_tst-dn-sh-br-br-wh));
-      }
-    }
-    &[data-widget-shadow="false"] {
-      --_show-shadow: none;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    .auth-container {
-      .logn__main__div {
-        height: var(--_height-100-dvh);
-        max-height: var(--_height-100-dvh);
-        overflow: clip;
-        width: 100%;
-        position: var(--_p-relative);
-        & > div {
-          &.loader {
-            position: var(--_p-absolute);
-            z-index: var(--_higher-zIndex);
-            background: var(--_base-white);
-            border-radius: 50%;
-            display: var(--_d-flex);
-            align-items: center;
-            justify-content: center;
-            --_sf-in-sz: 1.2;
-            width: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
-            height: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
-            --_sf-img-sz: 80px;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            overflow: clip;
-            &::before {
-              animation: shine 1.5s infinite;
-              background: linear-gradient(
-                to right,
-                rgba(255, 255, 255, 0) 0%,
-                rgba(255, 255, 255, 0.8) 100%
-              );
-              content: "";
-              display: block;
-              height: 90px;
-              left: -80%;
-              position: absolute;
-              top: 0px;
-              transform: skewX(-45deg);
-              width: 70%;
-              z-index: 2;
-            }
-            & > img {
-              // z-index: 3;
-              width: var(--_sf-img-sz);
-              height: var(--_sf-img-sz);
-            }
-          }
-          &.wrapper {
-            display: var(--_d-grid);
-            --_col-count: 2;
-            --_col-gap: 0px;
-            grid-template-columns: getRepeatColWidth(--_col-count, --_col-gap);
-            & > div {
-              width: 100%;
-              &.left__div {
-                display: var(--_d-flex);
-                background: var(--_sf-bg-img) no-repeat 0 0 / cover var(--_gray-900);
-                background-size: 75%;
-                height: 100%;
-                align-items: center;
-                img {
-                  width: 100%;
-                  object-fit: cover;
-                }
-                & > div {
-                  &.left__box__parent {
-                    max-width: 65%;
-                    margin-inline: auto;
-                    display: var(--_d-flex);
-                    flex-direction: column;
-                    --_sf-gp: var(--_gap-24);
-                    gap: calc(var(--_sf-gp) * 1.25);
-                    & > div {
-                      &.box {
-                        display: var(--_d-flex);
-                        color: var(--_base-white);
-                        --_sf-img-size: 50px;
-                        // --_sf-gp: var(--_gap-24);
-                        gap: var(--_sf-gp);
-                        &::before {
-                          content: "";
-                          background: var(--_sf-img) no-repeat center center / cover;
-                          width: var(--_sf-img-size);
-                          height: var(--_sf-img-size);
-                        }
-                        & > div {
-                          display: var(--_d-flex);
-                          flex-direction: column;
-                          row-gap: calc(var(--_sf-gp) * 0.5);
-                          align-items: flex-start;
-                          flex: 0 0 calc(100% - var(--_sf-img-size) - var(--_sf-gp));
-                          & > p {
-                            color: var(--_base-white);
-                            margin: 0;
-                            &.title {
-                              font-weight: var(--_fw-400);
-                              font-size: var(--_fs-24);
-                            }
-                            &.desc {
-                              font-size: var(--_fs-16);
-                              line-height: 1.6;
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      // General Container Styles
-      .loginContainer {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        // margin: var(--_ctm-lt-mn);
-        padding: var(--_ctm-lt-pg);
-      }
-      // Login Box
-      .loginBox {
-        width: 100%;
-        // background-color: var(
-        //   --_ctm-mob-dn-wt-bd-cr,
-        //   var(--_ctm-tab-dn-wt-bd-cr, var(--_ctm-dn-wt-bd-cr))
-        // );
-        gap: var(--_ctm-mob-dn-wt-im-gp, var(--_ctm-tab-dn-wt-im-gp, var(--_ctm-dn-wt-im-gp)));
-        display: flex;
-        flex-direction: column;
-        background-color: var(
-          --_ctm-mob-dn-wt-bd-cr,
-          var(--_ctm-tab-dn-wt-bd-cr, var(--_ctm-dn-wt-bd-cr))
-        );
-        padding: var(--_ctm-mob-dn-wt-pg, var(--_ctm-tab-dn-wt-pg, var(--_ctm-dn-wt-pg)));
-      }
-      // Title Styles
-      .title {
-        font-family: var(
-          --_ctm-mob-dn-te-ft-fy,
-          var(--_ctm-tab-dn-te-ft-fy, var(--_ctm-dn-te-ft-fy))
-        );
-        color: var(--_ctm-mob-dn-te-cr, var(--_ctm-tab-dn-te-cr, var(--_ctm-dn-te-cr)));
-        font-weight: var(
-          --_ctm-mob-dn-te-ft-wt,
-          var(--_ctm-tab-dn-te-ft-wt, var(--_ctm-dn-te-ft-wt))
-        );
-        font-size: var(
-          --_ctm-mob-dn-te-ft-se,
-          var(--_ctm-tab-dn-te-ft-se, var(--_ctm-dn-te-ft-se))
-        );
-        text-decoration: var(--_ctm-mob-dn-te-ue, var(--_ctm-tab-dn-te-ue, var(--_ctm-dn-te-ue,)));
-        letter-spacing: var(
-          --_ctm-mob-dn-te-lr-sg,
-          var(--_ctm-tab-dn-te-lr-sg, var(--_ctm-dn-te-lr-sg))
-        );
-        line-height: var(
-          --_ctm-mob-dn-te-le-ht,
-          var(--_ctm-tab-dn-te-le-ht, var(--_ctm-dn-te-le-ht))
-        );
-        font-style: var(
-          --_ctm-mob-dn-te-ft-se-ic,
-          var(--_ctm-tab-dn-te-ft-se-ic, var(--_ctm-dn-te-ft-se-ic))
-        );
-        text-align: var(
-          --_ctm-mob-dn-te-tt-an,
-          var(--_ctm-tab-dn-te-tt-an, var(--_ctm-dn-te-tt-an))
-        );
-      }
-      .desc {
-        font-family: var(
-          --_ctm-mob-dn-dn-ft-fy,
-          var(--_ctm-tab-dn-dn-ft-fy, var(--_ctm-dn-dn-ft-fy))
-        );
-        color: var(--_ctm-mob-dn-dn-cr, var(--_ctm-tab-dn-dn-cr, var(--_ctm-dn-dn-cr)));
-        font-weight: var(
-          --_ctm-mob-dn-dn-ft-wt,
-          var(--_ctm-tab-dn-dn-ft-wt, var(--_ctm-dn-dn-ft-wt))
-        );
-        font-size: var(
-          --_ctm-mob-dn-dn-ft-se,
-          var(--_ctm-tab-dn-dn-ft-se, var(--_ctm-dn-dn-ft-se))
-        );
-        text-decoration: var(--_ctm-mob-dn-dn-ue, var(--_ctm-tab-dn-dn-ue, var(--_ctm-dn-dn-ue,)));
-        letter-spacing: var(
-          --_ctm-mob-dn-dn-lr-sg,
-          var(--_ctm-tab-dn-dn-lr-sg, var(--_ctm-dn-dn-lr-sg))
-        );
-        line-height: var(
-          --_ctm-mob-dn-dn-le-ht,
-          var(--_ctm-tab-dn-dn-le-ht, var(--_ctm-dn-dn-le-ht))
-        );
-        font-style: var(
-          --_ctm-mob-dn-dn-ft-se-ic,
-          var(--_ctm-tab-dn-dn-ft-se-ic, var(--_ctm-dn-dn-ft-se-ic))
-        );
-        text-align: var(
-          --_ctm-mob-dn-dn-tt-an,
-          var(--_ctm-tab-dn-dn-tt-an, var(--_ctm-dn-dn-tt-an))
-        );
-      }
-      .sso_verify {
-        border: 1px solid red;
-      }
-      .form_fields {
-        // margin-top: 36px;
-        gap: var(
-          --_ctm-mob-dn-ln-wt-im-gp,
-          var(--_ctm-tab-dn-ln-wt-im-gp, var(--_ctm-dn-ln-wt-im-gp))
-        );
-        display: flex;
-        flex-direction: column;
-        .btn__with__text[data-btn-name="resetButton"] {
-          width: 100%;
-          &[data-show-shadow="false"] {
-            --_show-shadow: none;
-          }
-          &[data-icon-position="left"] {
-            --_sf-fd-bn: row;
-          }
-          &[data-icon-position="right"] {
-            --_sf-fd-bn: row-reverse;
-          }
-          &[data-icon-position="center"] {
-            --_sf-fd-bn: row;
-          }
-          &:hover {
-            --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-bd-cr)};
-            --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-cr)};
-            --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-se)};
-            --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-wh)};
-            --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-rs)};
-            --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-at)};
-            --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-gp)};
-            // for shadow
-            --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-ae)};
-            --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-br)};
-            --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-hr)};
-            --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-as-rt-bn-hr-se-sw-cr)};
-            // for font
-            --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-cr)};
-            --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-fy)};
-            --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-se)};
-            --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-wt)};
-            --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-se-ic)};
-            --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-tt-an)};
-            --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-lr-sg)};
-            --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-le-ht)};
-            --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-se)};
-            --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-se)};
-            --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-c1)};
-            --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ue)};
-            // for pading and width
-            --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-pg)};
-            --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-wh)};
-            &[data-hover-show-shadow="false"] {
-              --_hover-show-shadow: none;
-            }
-            &[data-hover-show-icon="false"] {
-              --_hover-show-icon: none;
-            }
-          }
-          background-color: var(
-            --_sf-hr-bd-cr,
-            prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-bd-cr)
-          );
-          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-pg));
-          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wh));
-          display: flex;
-          flex-direction: var(--_sf-fd-bn);
-          align-items: center;
-          justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-at));
-          gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-gp));
-          border-radius: var(
-            --_sf-hr-br-rs,
-            prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-rs)
-          );
-          box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-ae))
-            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-br))
-            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-sd))
-            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-cr));
-          &[data-show-border="true"] {
-            width: 100%;
-            border-color: var(
-              --_sf-hr-br-cr,
-              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-cr)
-            );
-            border-style: var(
-              --_sf-hr-br-se,
-              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-se)
-            );
-            border-width: var(
-              --_sf-hr-br-wh,
-              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-wh)
-            );
-          }
-          .txt {
-            display: flex;
-            color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-cr));
-            font-family:
-              var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-fy)),
-              sans-serif;
-            font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se));
-            font-weight: var(
-              --_sf-hr-ft-wt,
-              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-wt)
-            );
-            font-style: var(
-              --_sf-hr-ft-se-ic,
-              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se-ic)
-            );
-            text-align: var(
-              --_sf-hr-tt-an,
-              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-tt-an)
-            );
-            letter-spacing: var(
-              --_sf-hr-lr-sg,
-              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-lr-sg)
-            );
-            line-height: var(
-              --_sf-hr-le-ht,
-              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-le-ht)
-            );
-            text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
-          }
-          .icon {
-            display: var(--_hover-show-icon, var(--_show-icon, flex));
-            svg {
-              width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-se));
-              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-se));
-              path {
-                stroke: var(
-                  --_sf-hr-in-c1,
-                  prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-c1)
-                );
-              }
-            }
-          }
-          [data-element-style="Text"] {
-            display: inline-block;
-            width: 100%;
-          }
-          .icon--hover {
-            // position: absolute;
-            // inset: 0;
-            // opacity: 0;
-            display: none;
-            transition: opacity 0.2s ease;
-          }
-          &:hover .icon--hover {
-            // opacity: 1;
-            display: flex;
-          }
-          &:hover .icon--default {
-            // opacity: 0;
-            display: none;
-          }
-        }
-      }
-      // Form Group (For Email and Password)
-      .field__group {
-        // margin-bottom: 16px;
-        position: relative;
-        gap: var(
-          --_ctm-mob-dn-fm-fd-is-im-gp,
-          var(--_ctm-tab-dn-fm-fd-is-im-gp, var(--_ctm-dn-fm-fd-is-im-gp))
-        );
-        display: flex;
-        flex-direction: column;
-        .input__label {
-          display: flex;
-          align-items: center;
-          font-family: var(
-            --_ctm-mob-dn-fm-ll-ft-fy,
-            var(--_ctm-tab-dn-fm-ll-ft-fy, var(--_ctm-dn-fm-ll-ft-fy))
-          );
-          color: var(--_ctm-mob-dn-fm-ll-cr, var(--_ctm-tab-dn-fm-ll-cr, var(--_ctm-dn-fm-ll-cr)));
-          font-weight: var(
-            --_ctm-mob-dn-fm-ll-ft-wt,
-            var(--_ctm-tab-dn-fm-ll-ft-wt, var(--_ctm-dn-fm-ll-ft-wt))
-          );
-          font-size: var(
-            --_ctm-mob-dn-fm-ll-ft-se,
-            var(--_ctm-tab-dn-fm-ll-ft-se, var(--_ctm-dn-fm-ll-ft-se))
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-fm-ll-ue,
-            var(--_ctm-tab-dn-fm-ll-ue, var(--_ctm-dn-fm-ll-ue))
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-fm-ll-lr-sg,
-            var(--_ctm-tab-dn-fm-ll-lr-sg, var(--_ctm-dn-fm-ll-lr-sg))
-          );
-          line-height: var(
-            --_ctm-mob-dn-fm-ll-le-ht,
-            var(--_ctm-tab-dn-fm-ll-le-ht, var(--_ctm-dn-fm-ll-le-ht))
-          );
-          font-style: var(
-            --_ctm-mob-dn-fm-ll-ft-se-ic,
-            var(--_ctm-tab-dn-fm-ll-ft-se-ic, var(--_ctm-dn-fm-ll-ft-se-ic))
-          );
-          text-align: var(
-            --_ctm-mob-dn-fm-ll-tt-an,
-            var(--_ctm-tab-dn-fm-ll-tt-an, var(--_ctm-dn-fm-ll-tt-an))
-          );
-          // gap: 4px;
-          // margin-bottom: 4px;
-          // font-size: 16px;
-          // font-weight: 500;
-        }
-        .input__field {
-          position: relative;
-          svg {
-            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
-            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
-            path {
-              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
-            }
-          }
-          .placeholder_icon_start_login {
-            position: absolute;
-            z-index: 10;
-            top: 9px;
-            left: 10px;
-            svg {
-              width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
-              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
-              path {
-                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
-              }
-            }
-          }
-          .placeholder_icon_start {
-            position: absolute;
-            z-index: 10;
-            top: 9px;
-            left: 10px;
-            svg {
-              width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-fd-in-in-se));
-              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-fd-in-in-se));
-              path {
-                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-fd-in-in-c1));
-              }
-            }
-          }
-          .placeholder_icon_end {
-            position: absolute;
-            right: 10px;
-            z-index: 10;
-            top: 50%;
-            transform: translateY(-50%);
-          }
-          input {
-            padding-left: 38px;
-            font-family: var(
-              --_ctm-mob-dn-fm-it-ft-fy,
-              var(--_ctm-tab-dn-fm-it-ft-fy, var(--_ctm-dn-fm-it-ft-fy))
-            );
-            color: var(
-              --_ctm-mob-dn-fm-it-cr,
-              var(--_ctm-tab-dn-fm-it-cr, var(--_ctm-dn-fm-it-cr))
-            );
-            font-weight: var(
-              --_ctm-mob-dn-fm-it-ft-wt,
-              var(--_ctm-tab-dn-fm-it-ft-wt, var(--_ctm-dn-fm-it-ft-wt))
-            );
-            font-size: var(
-              --_ctm-mob-dn-fm-it-ft-se,
-              var(--_ctm-tab-dn-fm-it-ft-se, var(--_ctm-dn-fm-it-ft-se))
-            );
-            text-decoration: var(
-              --_ctm-mob-dn-fm-it-ue,
-              var(--_ctm-tab-dn-fm-it-ue, var(--_ctm-dn-fm-it-ue))
-            );
-            letter-spacing: var(
-              --_ctm-mob-dn-fm-it-lr-sg,
-              var(--_ctm-tab-dn-fm-it-lr-sg, var(--_ctm-dn-fm-it-lr-sg))
-            );
-            line-height: var(
-              --_ctm-mob-dn-fm-it-le-ht,
-              var(--_ctm-tab-dn-fm-it-le-ht, var(--_ctm-dn-fm-it-le-ht))
-            );
-            font-style: var(
-              --_ctm-mob-dn-fm-it-ft-se-ic,
-              var(--_ctm-tab-dn-fm-it-ft-se-ic, var(--_ctm-dn-fm-it-ft-se-ic))
-            );
-            text-align: var(
-              --_ctm-mob-dn-fm-it-tt-an,
-              var(--_ctm-tab-dn-fm-it-tt-an, var(--_ctm-dn-fm-it-tt-an))
-            );
-            border-color: var(
-              --_ctm-mob-dn-fm-it-br-cr,
-              var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr))
-            );
-            border-radius: var(
-              --_ctm-mob-dn-fm-it-br-rs,
-              var(--_ctm-tab-dn-fm-it-br-rs, var(--_ctm-dn-fm-it-br-rs))
-            );
-            border-style: var(
-              --_ctm-mob-dn-fm-it-br-se,
-              var(--_ctm-tab-dn-fm-it-br-se, var(--_ctm-dn-fm-it-br-se))
-            );
-            border-width: var(
-              --_ctm-mob-dn-fm-it-br-wh,
-              var(--_ctm-tab-dn-fm-it-br-wh, var(--_ctm-dn-fm-it-br-wh))
-            );
-            box-shadow: var(
-                --_ctm-mob-dn-fm-it-sw-ae,
-                var(--_ctm-tab-dn-fm-it-sw-ae, var(--_ctm-dn-fm-it-sw-ae))
-              )
-              var(
-                --_ctm-mob-dn-fm-it-sw-br,
-                var(--_ctm-tab-dn-fm-it-sw-br, var(--_ctm-dn-fm-it-sw-br))
-              )
-              var(
-                --_ctm-mob-dn-fm-it-sw-sd,
-                var(--_ctm-tab-dn-fm-it-sw-sd, var(--_ctm-dn-fm-it-sw-sd))
-              )
-              var(
-                --_ctm-mob-dn-fm-it-sw-cr,
-                var(--_ctm-tab-dn-fm-it-sw-cr, var(--_ctm-dn-fm-it-sw-cr))
-              );
-            &::placeholder {
-              background-color: var(
-                --_ctm-mob-dn-fm-it-bd-cr,
-                var(--_ctm-tab-dn-fm-it-bd-cr, var(--_ctm-dn-fm-it-bd-cr))
-              );
-            }
-          }
-        }
-        .view__icon {
-          position: absolute;
-          z-index: 10;
-          top: 39px;
-          right: 10px;
-          svg {
-            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
-            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
-            path {
-              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
-            }
-          }
-        }
-      }
-      // Input Field Styles
-      .inputField {
-        width: 100%;
-        padding: var(--_ctm-mob-dn-fm-it-pg, var(--_ctm-tab-dn-fm-it-pg, var(--_ctm-dn-fm-it-pg)));
-        // padding: 10px;
-        border-radius: 6px;
-        border: 1px solid var(--_gray-300) !important;
-        font-size: 14px;
-        transition:
-          background-color 0.2s,
-          color 0.2s,
-          border-color 0.2s,
-          box-shadow 0.2s;
-        &:focus {
-          box-shadow:
-            0px 1px 2px rgba(16, 24, 40, 0.02),
-            0px 0px 0px 2px var(--_primary-100) !important;
-          border: 1px solid var(--_primary-300) !important;
-        }
-        ::placeholder {
-          color: var(--_thm-ty-h2-tt-cr);
-        }
-      }
-      // Invalid Input Field
-      .invalid {
-        border-color: var(--_error-300) !important;
-        outline: 2px solid #fee4e2;
-      }
-      // Error Text Styles
-      .errorText {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        font-size: 12px;
-        color: red;
-        svg {
-          display: flex;
-          width: 13px;
-          height: 13px;
-          path {
-            stroke: var(--_error-500);
-          }
-        }
-      }
-      // Submit Button
-      .btn__with__text[data-btn-name="Login"] {
-        width: 100%;
-        &[data-show-shadow="false"] {
-          --_show-shadow: none;
-        }
-        &[data-icon-position="left"] {
-          --_sf-fd-bn: row;
-        }
-        &[data-icon-position="right"] {
-          --_sf-fd-bn: row-reverse;
-        }
-        &[data-icon-position="center"] {
-          --_sf-fd-bn: row;
-        }
-        &:hover {
-          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-bd-cr)};
-          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-cr)};
-          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-se)};
-          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-wh)};
-          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-rs)};
-          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-at)};
-          --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-gp)};
-          // for shadow
-          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-ae)};
-          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-br)};
-          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-hr)};
-          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-bn-hr-se-sw-cr)};
-          // for font
-          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-cr)};
-          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-fy)};
-          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-se)};
-          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-wt)};
-          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-se-ic)};
-          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-tt-an)};
-          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-lr-sg)};
-          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-le-ht)};
-          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-se)};
-          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-se)};
-          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-c1)};
-          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-ue)};
-          // for pading and width
-          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-pg)};
-          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-wh)};
-          &[data-hover-show-shadow="false"] {
-            --_hover-show-shadow: none;
-          }
-          &[data-hover-show-icon="false"] {
-            --_hover-show-icon: none;
-          }
-        }
-        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-bd-cr));
-        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-pg));
-        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-wh));
-        display: flex;
-        flex-direction: var(--_sf-fd-bn);
-        align-items: center;
-        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-at));
-        gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-gp));
-        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-rs));
-        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-ae))
-          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-br))
-          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-sd))
-          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-cr));
-        &[data-show-border="true"] {
-          width: 100%;
-          border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-cr));
-          border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-se));
-          border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-wh));
-        }
-        .txt {
-          display: flex;
-          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-cr));
-          font-family:
-            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-fy)), sans-serif;
-          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-se));
-          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-wt));
-          font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-se-ic));
-          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-tt-an));
-          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-lr-sg));
-          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-le-ht));
-          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
-        }
-        .icon {
-          display: var(--_hover-show-icon, var(--_show-icon, flex));
-          svg {
-            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-se));
-            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-se));
-            path {
-              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-c1));
-            }
-          }
-        }
-        [data-element-style="Text"] {
-          display: inline-block;
-          width: 100%;
-        }
-        .icon--hover {
-          // position: absolute;
-          // inset: 0;
-          // opacity: 0;
-          display: none;
-          transition: opacity 0.2s ease;
-        }
-        &:hover .icon--hover {
-          // opacity: 1;
-          display: flex;
-        }
-        &:hover .icon--default {
-          // opacity: 0;
-          display: none;
-        }
-      }
-      // .submitButton {
-      //   width: 100%;
-      //   // padding: 12px;
-      //   // background-color: var(--_primary-500);
-      //   // color: #fff;
-      //   //  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
-      //   // border-radius: 6px;
-      //   // border: none;
-      //   // margin-top: 16px;
-      //   cursor: pointer;
-      //   display: flex;
-      //   align-items: center;
-      //   justify-content: center;
-      //   background-color: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-bd-cr,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-bd-cr, var(--_ctm-dn-fm-bn-dt-se-bd-cr))
-      //   );
-      //   border-color: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-br-cr,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-cr, var(--_ctm-dn-fm-bn-dt-se-br-cr))
-      //   );
-      //   border-radius: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-br-rs,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-rs, var(--_ctm-dn-fm-bn-dt-se-br-rs))
-      //   );
-      //   border-style: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-br-se,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-se, var(--_ctm-dn-fm-bn-dt-se-br-se))
-      //   );
-      //   border-width: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-br-wh,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-wh, var(--_ctm-dn-fm-bn-dt-se-br-wh))
-      //   );
-      //   color: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-cr,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-cr, var(--_ctm-dn-fm-bn-dt-se-cr))
-      //   );
-      //   font-family: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-ft-fy,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-fy, var(--_ctm-dn-fm-bn-dt-se-ft-fy))
-      //   );
-      //   font-size: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-ft-se,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-se, var(--_ctm-dn-fm-bn-dt-se-ft-se))
-      //   );
-      //   font-style: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-ft-se-ic,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-se-ic, var(--_ctm-dn-fm-bn-dt-se-ft-se-ic))
-      //   );
-      //   font-weight: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-ft-wt,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-wt, var(--_ctm-dn-fm-bn-dt-se-ft-wt))
-      //   );
-      //   line-height: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-le-ht,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-le-ht, var(--_ctm-dn-fm-bn-dt-se-le-ht))
-      //   );
-      //   letter-spacing: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-lr-sg,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-lr-sg, var(--_ctm-dn-fm-bn-dt-se-lr-sg))
-      //   );
-      //   box-shadow: var(
-      //       --_ctm-mob-dn-fm-bn-dt-se-sw-ae,
-      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-ae, var(--_ctm-dn-fm-bn-dt-se-sw-ae))
-      //     )
-      //     var(
-      //       --_ctm-mob-dn-fm-bn-dt-se-sw-br,
-      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-br, var(--_ctm-dn-fm-bn-dt-se-sw-br))
-      //     )
-      //     var(
-      //       --_ctm-mob-dn-fm-bn-dt-se-sw-sd,
-      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-sd, var(--_ctm-dn-fm-bn-dt-se-sw-sd))
-      //     )
-      //     var(
-      //       --_ctm-mob-dn-fm-bn-dt-se-sw-cr,
-      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-cr, var(--_ctm-dn-fm-bn-dt-se-sw-cr))
-      //     );
-      //   text-decoration: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-ue,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-ue, var(--_ctm-dn-fm-bn-dt-se-ue))
-      //   );
-      //   padding: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-pg,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-pg, var(--_ctm-dn-fm-bn-dt-se-pg))
-      //   );
-      //   text-align: var(
-      //     --_ctm-mob-dn-fm-bn-dt-se-tt-an,
-      //     var(--_ctm-tab-dn-fm-bn-dt-se-tt-an, var(--_ctm-dn-fm-bn-dt-se-tt-an))
-      //   );
-      //   &:hover {
-      //     background-color: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-bd-cr,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-bd-cr, var(--_ctm-dn-fm-bn-hr-se-bd-cr))
-      //     );
-      //     border-color: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-br-cr,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-cr, var(--_ctm-dn-fm-bn-hr-se-br-cr))
-      //     );
-      //     border-radius: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-br-rs,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-rs, var(--_ctm-dn-fm-bn-hr-se-br-rs))
-      //     );
-      //     border-style: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-br-se,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-se, var(--_ctm-dn-fm-bn-hr-se-br-se))
-      //     );
-      //     border-width: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-br-wh,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-wh, var(--_ctm-dn-fm-bn-hr-se-br-wh))
-      //     );
-      //     color: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-cr,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-cr, var(--_ctm-dn-fm-bn-hr-se-cr))
-      //     );
-      //     font-family: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-ft-fy,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-fy, var(--_ctm-dn-fm-bn-hr-se-ft-fy))
-      //     );
-      //     font-size: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-ft-se,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-se, var(--_ctm-dn-fm-bn-hr-se-ft-se))
-      //     );
-      //     font-style: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-ft-se-ic,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-se-ic, var(--_ctm-dn-fm-bn-hr-se-ft-se-ic))
-      //     );
-      //     font-weight: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-ft-wt,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-wt, var(--_ctm-dn-fm-bn-hr-se-ft-wt))
-      //     );
-      //     line-height: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-le-ht,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-le-ht, var(--_ctm-dn-fm-bn-hr-se-le-ht))
-      //     );
-      //     letter-spacing: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-lr-sg,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-lr-sg, var(--_ctm-dn-fm-bn-hr-se-lr-sg))
-      //     );
-      //     box-shadow: var(
-      //         --_ctm-mob-dn-fm-bn-hr-se-sw-ae,
-      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-ae, var(--_ctm-dn-fm-bn-hr-se-sw-ae))
-      //       )
-      //       var(
-      //         --_ctm-mob-dn-fm-bn-hr-se-sw-br,
-      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-br, var(--_ctm-dn-fm-bn-hr-se-sw-br))
-      //       )
-      //       var(
-      //         --_ctm-mob-dn-fm-bn-hr-se-sw-sd,
-      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-sd, var(--_ctm-dn-fm-bn-hr-se-sw-sd))
-      //       )
-      //       var(
-      //         --_ctm-mob-dn-fm-bn-hr-se-sw-cr,
-      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-cr, var(--_ctm-dn-fm-bn-hr-se-sw-cr))
-      //       );
-      //     text-decoration: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-ue,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-ue, var(--_ctm-dn-fm-bn-hr-se-ue))
-      //     );
-      //     padding: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-pg,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-pg, var(--_ctm-dn-fm-bn-hr-se-pg))
-      //     );
-      //     text-align: var(
-      //       --_ctm-mob-dn-fm-bn-hr-se-tt-an,
-      //       var(--_ctm-tab-dn-fm-bn-hr-se-tt-an, var(--_ctm-dn-fm-bn-hr-se-tt-an))
-      //     );
-      //   }
-      //   &:has(svg) {
-      //     gap: 8px;
-      //   }
-      //   svg {
-      //     display: flex;
-      //     path {
-      //       stroke: var(--_base-white);
-      //     }
-      //   }
-      //   &:disabled {
-      //     background-color: var(--_primary-100);
-      //     cursor: not-allowed;
-      //   }
-      // }
-      .mt__32 {
-        margin-top: 32px !important;
-      }
-      .mt__48 {
-        margin-top: 48px !important;
-      }
-      // Loading Icon
-      .loadingIcon {
-        margin-left: 8px;
-      }
-      // Forgot Password Section
-      .forgotPassword {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: var(
-          --_ctm-mob-dn-fm-ft-pd-ll-pg,
-          var(--_ctm-tab-dn-fm-ft-pd-ll-pg, var(--_ctm-dn-fm-ft-pd-ll-pg))
-        );
-        // margin-top: 20px;
-        .remember_block {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-        }
-      }
-      // .flex_center {
-      //   display: flex;
-      //   justify-content: center;
-      //   align-items: center;
-      //   gap: 8px;
-      //   font-weight: 600;
-      //   margin-top: 20px;
-      //   width: 100%;
-      //   color: var(--_thm-cs-tt-ls-as);
-      //   svg {
-      //     display: flex;
-      //     path {
-      //       stroke: var(--_thm-cs-tt-ls-as);
-      //     }
-      //   }
-      // }
-      .btn__with__text[data-btn-name="goToBackLoginButton"] {
-        width: 100%;
-        &[data-show-shadow="false"] {
-          --_show-shadow: none;
-        }
-        &[data-icon-position="left"] {
-          --_sf-fd-bn: row;
-        }
-        &[data-icon-position="right"] {
-          --_sf-fd-bn: row-reverse;
-        }
-        &[data-icon-position="center"] {
-          --_sf-fd-bn: row;
-        }
-        &:hover {
-          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-bd-cr)};
-          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-cr)};
-          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-se)};
-          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-wh)};
-          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-rs)};
-          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-at)};
-          --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-gp)};
-          // for shadow
-          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-ae)};
-          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-br)};
-          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-hr)};
-          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-cr)};
-          // for font
-          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-cr)};
-          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-fy)};
-          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-se)};
-          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-wt)};
-          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-se-ic)};
-          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-tt-an)};
-          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-lr-sg)};
-          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-le-ht)};
-          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-in-se)};
-          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-in-se)};
-          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-in-c1)};
-          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ue)};
-          // for pading and width
-          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-pg)};
-          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-wh)};
-          &[data-hover-show-shadow="false"] {
-            --_hover-show-shadow: none;
-          }
-          &[data-hover-show-icon="false"] {
-            --_hover-show-icon: none;
-          }
-        }
-        background-color: var(
-          --_sf-hr-bd-cr,
-          prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-bd-cr)
-        );
-        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-pg));
-        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-wh));
-        display: flex;
-        flex-direction: var(--_sf-fd-bn);
-        align-items: center;
-        justify-content: var(
-          --_sf-hr-at,
-          prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-at)
-        );
-        gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-gp));
-        border-radius: var(
-          --_sf-hr-br-rs,
-          prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-rs)
-        );
-        box-shadow: var(
-            --_sf-hr-sw-ae,
-            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-ae)
-          )
-          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-br))
-          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-sd))
-          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-cr));
-        &[data-show-border="true"] {
-          width: 100%;
-          border-color: var(
-            --_sf-hr-br-cr,
-            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-cr)
-          );
-          border-style: var(
-            --_sf-hr-br-se,
-            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-se)
-          );
-          border-width: var(
-            --_sf-hr-br-wh,
-            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-wh)
-          );
-        }
-        .txt {
-          display: flex;
-          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-cr));
-          font-family:
-            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-fy)),
-            sans-serif;
-          font-size: var(
-            --_sf-hr-ft-se,
-            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-se)
-          );
-          font-weight: var(
-            --_sf-hr-ft-wt,
-            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-wt)
-          );
-          font-style: var(
-            --_sf-hr-ft-se-ic,
-            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-se-ic)
-          );
-          text-align: var(
-            --_sf-hr-tt-an,
-            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-tt-an)
-          );
-          letter-spacing: var(
-            --_sf-hr-lr-sg,
-            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-lr-sg)
-          );
-          line-height: var(
-            --_sf-hr-le-ht,
-            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-le-ht)
-          );
-          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
-        }
-        .icon {
-          display: var(--_hover-show-icon, var(--_show-icon, flex));
-          svg {
-            width: var(
-              --_sf-hr-in-se,
-              prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-in-se)
-            );
-            height: var(
-              --_sf-hr-in-se,
-              prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-in-se)
-            );
-            path {
-              stroke: var(
-                --_sf-hr-in-c1,
-                prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-in-c1)
-              );
-            }
-          }
-        }
-        [data-element-style="Text"] {
-          display: inline-block;
-          width: 100%;
-        }
-        .icon--hover {
-          // position: absolute;
-          // inset: 0;
-          // opacity: 0;
-          display: none;
-          transition: opacity 0.2s ease;
-        }
-        &:hover .icon--hover {
-          // opacity: 1;
-          display: flex;
-        }
-        &:hover .icon--default {
-          // opacity: 0;
-          display: none;
-        }
-      }
-      .psw__contain {
-        margin-bottom: 24px;
-        margin-top: 8px;
-        .psw_status {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          gap: 10px;
-          .step {
-            // width: 20%;1
-            height: 3px;
-            border-radius: 4px;
-            background-color: var(--_gray-300);
-            flex-grow: 1;
-            &.active {
-              background-color: var(--_success-600);
-            }
-          }
-        }
-        .psw_content {
-          background-color: var(--_gray-50);
-          padding: 16px;
-          border-radius: 6px !important;
-          // height: 100px;
-          max-height: 160px;
-          overflow-y: auto;
-          // margin-top: 20px;
-          margin-top: 5px;
-          .title {
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--_gray-700);
-            margin-bottom: 16px;
-          }
-          ul {
-            li {
-              color: var(--_gray-700);
-              font-size: 14px;
-              & > span {
-                display: inline-flex;
-              }
-              &:not(:last-child) {
-                margin-bottom: 8px;
-              }
-            }
-          }
-        }
-      }
-      // password reset successfully
-      .reset_password_success {
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        align-items: center;
-        // .rounded_icon {
-        //   @extend .element__center;
-        //   width: 40px;
-        //   height: 40px;
-        //   background-color: var(--_gray-200);
-        //   border-radius: 50%;
-        //   margin-bottom: 24px;
-        // }
-      }
-      // Forgot Password Button
-      .forgotPasswordButton {
-        background: none;
-        border: none;
-        cursor: pointer;
-        font-family: var(
-          --_ctm-mob-dn-fm-ft-pd-ll-ft-fy,
-          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-fy, var(--_ctm-dn-fm-ft-pd-ll-ft-fy))
-        );
-        color: var(
-          --_ctm-mob-dn-fm-ft-pd-ll-cr,
-          var(--_ctm-tab-dn-fm-ft-pd-ll-cr, var(--_ctm-dn-fm-ft-pd-ll-cr))
-        );
-        font-weight: var(
-          --_ctm-mob-dn-fm-ft-pd-ll-ft-wt,
-          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-wt, var(--_ctm-dn-fm-ft-pd-ll-ft-wt))
-        );
-        font-size: var(
-          --_ctm-mob-dn-fm-ft-pd-ll-ft-se,
-          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-se, var(--_ctm-dn-fm-ft-pd-ll-ft-se))
-        );
-        text-decoration: var(
-          --_ctm-mob-dn-fm-ft-pd-ll-ue,
-          var(--_ctm-tab-dn-fm-ft-pd-ll-ue, var(--_ctm-dn-fm-ft-pd-ll-ue))
-        );
-        letter-spacing: var(
-          --_ctm-mob-dn-fm-ft-pd-ll-lr-sg,
-          var(--_ctm-tab-dn-fm-ft-pd-ll-lr-sg, var(--_ctm-dn-fm-ft-pd-ll-lr-sg))
-        );
-        line-height: var(
-          --_ctm-mob-dn-fm-ft-pd-ll-le-ht,
-          var(--_ctm-tab-dn-fm-ft-pd-ll-le-ht, var(--_ctm-dn-fm-ft-pd-ll-le-ht))
-        );
-        font-style: var(
-          --_ctm-mob-dn-fm-ft-pd-ll-ft-se-ic,
-          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-se-ic, var(--_ctm-dn-fm-ft-pd-ll-ft-se-ic))
-        );
-        text-align: var(
-          --_ctm-mob-dn-fm-ft-pd-ll-tt-an,
-          var(--_ctm-tab-dn-fm-ft-pd-ll-tt-an, var(--_ctm-dn-fm-ft-pd-ll-tt-an))
-        );
-        // color: var(--_thm-cs-tt-ls-as);
-        // font-weight: 600;
-        // font-size: 14px;
-        // padding: 8px 0px;
-        // border-radius: 6px;
-        // &:hover {
-        //   background-color: var(--_primary-25);
-        //   color: var(--_thm-cs-tt-ls-as);
-        // }
-      }
-      @keyframes shine {
-        100% {
-          left: 125%;
-        }
-      }
-      .reset_password {
-        form {
-          label {
-            display: block;
-            margin-bottom: 4px;
-          }
-          .formGroup {
-            &:not(:last-child) {
-              margin-bottom: 16px;
-            }
-          }
-          .to_be_filled {
-            display: grid;
-            grid-template-columns: 50% 50%;
-            gap: 4px;
-            margin-top: 10px;
-            margin-bottom: 16px;
-            li {
-              padding: 4px 10px;
-              background-color: var(--_gray-100);
-              color: var(--_gray-700);
-              border-radius: 40px;
-              display: flex;
-              align-items: center;
-              gap: 5px;
-              font-size: 12px;
-              &.active {
-                background-color: var(--_success-50);
-                color: var(--_success-700);
-                svg {
-                  path {
-                    stroke: var(--_success-700);
-                  }
-                }
-              }
-              button {
-                svg {
-                  path {
-                    stroke: var(--_gray-500);
-                  }
-                }
-              }
-            }
-          }
-        }
-        .to_be_filled {
-          display: flex;
-        }
-        .error {
-          color: var(--_error-500);
-          &::first-letter {
-            text-transform: uppercase;
-          }
-        }
-      }
-      // common styles
-      .btn__primary {
-        border-radius: 6px;
-        width: 100%;
-        height: 48px;
-        font-weight: 600;
-        color: var(--_base-white);
-        background-color: var(--_primary-500);
-        margin-top: 48px;
-        font-size: 16px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 8px;
-        & > span {
-          display: flex;
-          svg {
-            path {
-              stroke: var(--_base-white);
-            }
-          }
-        }
-      }
-      .section__title {
-        font-size: 24px;
-        font-weight: 600;
-        margin-bottom: 8px;
-        color: var(--_gray-900);
-      }
-      .section__desc {
-        font-size: 14px;
-        color: var(--_gray-500);
-      }
-      .text__center {
-        text-align: center;
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+[data-div-type="element"] {
+  &[data-element-type="login"],
+  &[data-element-type="resetPassword"],
+  &[data-element-type="forgotPassword"] {
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    position: relative;
+    & > .wrapper {
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+    // & form {
+    //   width: 100%;
+    //   height: 100%;
+    // }
+    &[data-widget-border="true"] {
+      .search-wrapper {
+        border-color: var(--_ctm-dn-sh-br-br-cr, var(--_tst-dn-sh-br-br-cr));
+        border-style: var(--_ctm-dn-sh-br-br-se, var(--_tst-dn-sh-br-br-se));
+        border-width: var(--_ctm-dn-sh-br-br-wh, var(--_tst-dn-sh-br-br-wh));
+      }
+    }
+    &[data-widget-shadow="false"] {
+      --_show-shadow: none;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    .auth-container {
+      .logn__main__div {
+        height: var(--_height-100-dvh);
+        max-height: var(--_height-100-dvh);
+        overflow: clip;
+        width: 100%;
+        position: var(--_p-relative);
+        & > div {
+          &.loader {
+            position: var(--_p-absolute);
+            z-index: var(--_higher-zIndex);
+            background: var(--_base-white);
+            border-radius: 50%;
+            display: var(--_d-flex);
+            align-items: center;
+            justify-content: center;
+            --_sf-in-sz: 1.2;
+            width: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
+            height: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
+            --_sf-img-sz: 80px;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            overflow: clip;
+            &::before {
+              animation: shine 1.5s infinite;
+              background: linear-gradient(
+                to right,
+                rgba(255, 255, 255, 0) 0%,
+                rgba(255, 255, 255, 0.8) 100%
+              );
+              content: "";
+              display: block;
+              height: 90px;
+              left: -80%;
+              position: absolute;
+              top: 0px;
+              transform: skewX(-45deg);
+              width: 70%;
+              z-index: 2;
+            }
+            & > img {
+              // z-index: 3;
+              width: var(--_sf-img-sz);
+              height: var(--_sf-img-sz);
+            }
+          }
+          &.wrapper {
+            display: var(--_d-grid);
+            --_col-count: 2;
+            --_col-gap: 0px;
+            grid-template-columns: getRepeatColWidth(--_col-count, --_col-gap);
+            & > div {
+              width: 100%;
+              &.left__div {
+                display: var(--_d-flex);
+                background: var(--_sf-bg-img) no-repeat 0 0 / cover var(--_gray-900);
+                background-size: 75%;
+                height: 100%;
+                align-items: center;
+                img {
+                  width: 100%;
+                  object-fit: cover;
+                }
+                & > div {
+                  &.left__box__parent {
+                    max-width: 65%;
+                    margin-inline: auto;
+                    display: var(--_d-flex);
+                    flex-direction: column;
+                    --_sf-gp: var(--_gap-24);
+                    gap: calc(var(--_sf-gp) * 1.25);
+                    & > div {
+                      &.box {
+                        display: var(--_d-flex);
+                        color: var(--_base-white);
+                        --_sf-img-size: 50px;
+                        // --_sf-gp: var(--_gap-24);
+                        gap: var(--_sf-gp);
+                        &::before {
+                          content: "";
+                          background: var(--_sf-img) no-repeat center center / cover;
+                          width: var(--_sf-img-size);
+                          height: var(--_sf-img-size);
+                        }
+                        & > div {
+                          display: var(--_d-flex);
+                          flex-direction: column;
+                          row-gap: calc(var(--_sf-gp) * 0.5);
+                          align-items: flex-start;
+                          flex: 0 0 calc(100% - var(--_sf-img-size) - var(--_sf-gp));
+                          & > p {
+                            color: var(--_base-white);
+                            margin: 0;
+                            &.title {
+                              font-weight: var(--_fw-400);
+                              font-size: var(--_fs-24);
+                            }
+                            &.desc {
+                              font-size: var(--_fs-16);
+                              line-height: 1.6;
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      // General Container Styles
+      .loginContainer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        // margin: var(--_ctm-lt-mn);
+        padding: var(--_ctm-lt-pg);
+      }
+      // Login Box
+      .loginBox {
+        width: 100%;
+        // background-color: var(
+        //   --_ctm-mob-dn-wt-bd-cr,
+        //   var(--_ctm-tab-dn-wt-bd-cr, var(--_ctm-dn-wt-bd-cr))
+        // );
+        gap: var(--_ctm-mob-dn-wt-im-gp, var(--_ctm-tab-dn-wt-im-gp, var(--_ctm-dn-wt-im-gp)));
+        display: flex;
+        flex-direction: column;
+        background-color: var(
+          --_ctm-mob-dn-wt-bd-cr,
+          var(--_ctm-tab-dn-wt-bd-cr, var(--_ctm-dn-wt-bd-cr))
+        );
+        padding: var(--_ctm-mob-dn-wt-pg, var(--_ctm-tab-dn-wt-pg, var(--_ctm-dn-wt-pg)));
+      }
+      // Title Styles
+      .title {
+        font-family: var(
+          --_ctm-mob-dn-te-ft-fy,
+          var(--_ctm-tab-dn-te-ft-fy, var(--_ctm-dn-te-ft-fy))
+        );
+        color: var(--_ctm-mob-dn-te-cr, var(--_ctm-tab-dn-te-cr, var(--_ctm-dn-te-cr)));
+        font-weight: var(
+          --_ctm-mob-dn-te-ft-wt,
+          var(--_ctm-tab-dn-te-ft-wt, var(--_ctm-dn-te-ft-wt))
+        );
+        font-size: var(
+          --_ctm-mob-dn-te-ft-se,
+          var(--_ctm-tab-dn-te-ft-se, var(--_ctm-dn-te-ft-se))
+        );
+        text-decoration: var(--_ctm-mob-dn-te-ue, var(--_ctm-tab-dn-te-ue, var(--_ctm-dn-te-ue,)));
+        letter-spacing: var(
+          --_ctm-mob-dn-te-lr-sg,
+          var(--_ctm-tab-dn-te-lr-sg, var(--_ctm-dn-te-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-te-le-ht,
+          var(--_ctm-tab-dn-te-le-ht, var(--_ctm-dn-te-le-ht))
+        );
+        font-style: var(
+          --_ctm-mob-dn-te-ft-se-ic,
+          var(--_ctm-tab-dn-te-ft-se-ic, var(--_ctm-dn-te-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-te-tt-an,
+          var(--_ctm-tab-dn-te-tt-an, var(--_ctm-dn-te-tt-an))
+        );
+      }
+      .desc {
+        font-family: var(
+          --_ctm-mob-dn-dn-ft-fy,
+          var(--_ctm-tab-dn-dn-ft-fy, var(--_ctm-dn-dn-ft-fy))
+        );
+        color: var(--_ctm-mob-dn-dn-cr, var(--_ctm-tab-dn-dn-cr, var(--_ctm-dn-dn-cr)));
+        font-weight: var(
+          --_ctm-mob-dn-dn-ft-wt,
+          var(--_ctm-tab-dn-dn-ft-wt, var(--_ctm-dn-dn-ft-wt))
+        );
+        font-size: var(
+          --_ctm-mob-dn-dn-ft-se,
+          var(--_ctm-tab-dn-dn-ft-se, var(--_ctm-dn-dn-ft-se))
+        );
+        text-decoration: var(--_ctm-mob-dn-dn-ue, var(--_ctm-tab-dn-dn-ue, var(--_ctm-dn-dn-ue,)));
+        letter-spacing: var(
+          --_ctm-mob-dn-dn-lr-sg,
+          var(--_ctm-tab-dn-dn-lr-sg, var(--_ctm-dn-dn-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-dn-le-ht,
+          var(--_ctm-tab-dn-dn-le-ht, var(--_ctm-dn-dn-le-ht))
+        );
+        font-style: var(
+          --_ctm-mob-dn-dn-ft-se-ic,
+          var(--_ctm-tab-dn-dn-ft-se-ic, var(--_ctm-dn-dn-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-dn-tt-an,
+          var(--_ctm-tab-dn-dn-tt-an, var(--_ctm-dn-dn-tt-an))
+        );
+      }
+      .sso_verify {
+        border: 1px solid red;
+      }
+      .form_fields {
+        // margin-top: 36px;
+        gap: var(
+          --_ctm-mob-dn-ln-wt-im-gp,
+          var(--_ctm-tab-dn-ln-wt-im-gp, var(--_ctm-dn-ln-wt-im-gp))
+        );
+        display: flex;
+        flex-direction: column;
+        .btn__with__text[data-btn-name="resetButton"] {
+          width: 100%;
+          &[data-show-shadow="false"] {
+            --_show-shadow: none;
+          }
+          &[data-icon-position="left"] {
+            --_sf-fd-bn: row;
+          }
+          &[data-icon-position="right"] {
+            --_sf-fd-bn: row-reverse;
+          }
+          &[data-icon-position="center"] {
+            --_sf-fd-bn: row;
+          }
+          &:hover {
+            --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-bd-cr)};
+            --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-cr)};
+            --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-se)};
+            --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-wh)};
+            --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-rs)};
+            --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-at)};
+            --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-gp)};
+            // for shadow
+            --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-ae)};
+            --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-br)};
+            --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-hr)};
+            --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-as-rt-bn-hr-se-sw-cr)};
+            // for font
+            --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-cr)};
+            --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-fy)};
+            --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-se)};
+            --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-wt)};
+            --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-se-ic)};
+            --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-tt-an)};
+            --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-lr-sg)};
+            --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-le-ht)};
+            --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-se)};
+            --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-se)};
+            --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-c1)};
+            --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ue)};
+            // for pading and width
+            --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-pg)};
+            --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-wh)};
+            &[data-hover-show-shadow="false"] {
+              --_hover-show-shadow: none;
+            }
+            &[data-hover-show-icon="false"] {
+              --_hover-show-icon: none;
+            }
+          }
+          background-color: var(
+            --_sf-hr-bd-cr,
+            prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-bd-cr)
+          );
+          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-pg));
+          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wh));
+          display: flex;
+          flex-direction: var(--_sf-fd-bn);
+          align-items: center;
+          justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-at));
+          gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-gp));
+          border-radius: var(
+            --_sf-hr-br-rs,
+            prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-rs)
+          );
+          box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-ae))
+            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-br))
+            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-sd))
+            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-cr));
+          &[data-show-border="true"] {
+            width: 100%;
+            border-color: var(
+              --_sf-hr-br-cr,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-cr)
+            );
+            border-style: var(
+              --_sf-hr-br-se,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-se)
+            );
+            border-width: var(
+              --_sf-hr-br-wh,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-wh)
+            );
+          }
+          .txt {
+            display: flex;
+            color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-cr));
+            font-family:
+              var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-fy)),
+              sans-serif;
+            font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se));
+            font-weight: var(
+              --_sf-hr-ft-wt,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-wt)
+            );
+            font-style: var(
+              --_sf-hr-ft-se-ic,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se-ic)
+            );
+            text-align: var(
+              --_sf-hr-tt-an,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-tt-an)
+            );
+            letter-spacing: var(
+              --_sf-hr-lr-sg,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-lr-sg)
+            );
+            line-height: var(
+              --_sf-hr-le-ht,
+              prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-le-ht)
+            );
+            text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+          }
+          .icon {
+            display: var(--_hover-show-icon, var(--_show-icon, flex));
+            svg {
+              width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-se));
+              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-se));
+              path {
+                stroke: var(
+                  --_sf-hr-in-c1,
+                  prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-c1)
+                );
+              }
+            }
+          }
+          [data-element-style="Text"] {
+            display: inline-block;
+            width: 100%;
+          }
+          .icon--hover {
+            // position: absolute;
+            // inset: 0;
+            // opacity: 0;
+            display: none;
+            transition: opacity 0.2s ease;
+          }
+          &:hover .icon--hover {
+            // opacity: 1;
+            display: flex;
+          }
+          &:hover .icon--default {
+            // opacity: 0;
+            display: none;
+          }
+        }
+      }
+      // Form Group (For Email and Password)
+      .field__group {
+        // margin-bottom: 16px;
+        position: relative;
+        gap: var(
+          --_ctm-mob-dn-fm-fd-is-im-gp,
+          var(--_ctm-tab-dn-fm-fd-is-im-gp, var(--_ctm-dn-fm-fd-is-im-gp))
+        );
+        display: flex;
+        flex-direction: column;
+        .input__label {
+          display: flex;
+          align-items: center;
+          font-family: var(
+            --_ctm-mob-dn-fm-ll-ft-fy,
+            var(--_ctm-tab-dn-fm-ll-ft-fy, var(--_ctm-dn-fm-ll-ft-fy))
+          );
+          color: var(--_ctm-mob-dn-fm-ll-cr, var(--_ctm-tab-dn-fm-ll-cr, var(--_ctm-dn-fm-ll-cr)));
+          font-weight: var(
+            --_ctm-mob-dn-fm-ll-ft-wt,
+            var(--_ctm-tab-dn-fm-ll-ft-wt, var(--_ctm-dn-fm-ll-ft-wt))
+          );
+          font-size: var(
+            --_ctm-mob-dn-fm-ll-ft-se,
+            var(--_ctm-tab-dn-fm-ll-ft-se, var(--_ctm-dn-fm-ll-ft-se))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-fm-ll-ue,
+            var(--_ctm-tab-dn-fm-ll-ue, var(--_ctm-dn-fm-ll-ue))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-fm-ll-lr-sg,
+            var(--_ctm-tab-dn-fm-ll-lr-sg, var(--_ctm-dn-fm-ll-lr-sg))
+          );
+          line-height: var(
+            --_ctm-mob-dn-fm-ll-le-ht,
+            var(--_ctm-tab-dn-fm-ll-le-ht, var(--_ctm-dn-fm-ll-le-ht))
+          );
+          font-style: var(
+            --_ctm-mob-dn-fm-ll-ft-se-ic,
+            var(--_ctm-tab-dn-fm-ll-ft-se-ic, var(--_ctm-dn-fm-ll-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-fm-ll-tt-an,
+            var(--_ctm-tab-dn-fm-ll-tt-an, var(--_ctm-dn-fm-ll-tt-an))
+          );
+          // gap: 4px;
+          // margin-bottom: 4px;
+          // font-size: 16px;
+          // font-weight: 500;
+        }
+        .input__field {
+          position: relative;
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
+            }
+          }
+          .placeholder_icon_start_login {
+            position: absolute;
+            z-index: 10;
+            top: 9px;
+            left: 10px;
+            svg {
+              width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+              path {
+                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
+              }
+            }
+          }
+          .placeholder_icon_start {
+            position: absolute;
+            z-index: 10;
+            top: 9px;
+            left: 10px;
+            svg {
+              width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-fd-in-in-se));
+              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-fd-in-in-se));
+              path {
+                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-fd-in-in-c1));
+              }
+            }
+          }
+          .placeholder_icon_end {
+            position: absolute;
+            right: 10px;
+            z-index: 10;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+          input {
+            padding-left: 38px;
+            font-family: var(
+              --_ctm-mob-dn-fm-it-ft-fy,
+              var(--_ctm-tab-dn-fm-it-ft-fy, var(--_ctm-dn-fm-it-ft-fy))
+            );
+            color: var(
+              --_ctm-mob-dn-fm-it-cr,
+              var(--_ctm-tab-dn-fm-it-cr, var(--_ctm-dn-fm-it-cr))
+            );
+            font-weight: var(
+              --_ctm-mob-dn-fm-it-ft-wt,
+              var(--_ctm-tab-dn-fm-it-ft-wt, var(--_ctm-dn-fm-it-ft-wt))
+            );
+            font-size: var(
+              --_ctm-mob-dn-fm-it-ft-se,
+              var(--_ctm-tab-dn-fm-it-ft-se, var(--_ctm-dn-fm-it-ft-se))
+            );
+            text-decoration: var(
+              --_ctm-mob-dn-fm-it-ue,
+              var(--_ctm-tab-dn-fm-it-ue, var(--_ctm-dn-fm-it-ue))
+            );
+            letter-spacing: var(
+              --_ctm-mob-dn-fm-it-lr-sg,
+              var(--_ctm-tab-dn-fm-it-lr-sg, var(--_ctm-dn-fm-it-lr-sg))
+            );
+            line-height: var(
+              --_ctm-mob-dn-fm-it-le-ht,
+              var(--_ctm-tab-dn-fm-it-le-ht, var(--_ctm-dn-fm-it-le-ht))
+            );
+            font-style: var(
+              --_ctm-mob-dn-fm-it-ft-se-ic,
+              var(--_ctm-tab-dn-fm-it-ft-se-ic, var(--_ctm-dn-fm-it-ft-se-ic))
+            );
+            text-align: var(
+              --_ctm-mob-dn-fm-it-tt-an,
+              var(--_ctm-tab-dn-fm-it-tt-an, var(--_ctm-dn-fm-it-tt-an))
+            );
+            border-color: var(
+              --_ctm-mob-dn-fm-it-br-cr,
+              var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr))
+            );
+            border-radius: var(
+              --_ctm-mob-dn-fm-it-br-rs,
+              var(--_ctm-tab-dn-fm-it-br-rs, var(--_ctm-dn-fm-it-br-rs))
+            );
+            border-style: var(
+              --_ctm-mob-dn-fm-it-br-se,
+              var(--_ctm-tab-dn-fm-it-br-se, var(--_ctm-dn-fm-it-br-se))
+            );
+            border-width: var(
+              --_ctm-mob-dn-fm-it-br-wh,
+              var(--_ctm-tab-dn-fm-it-br-wh, var(--_ctm-dn-fm-it-br-wh))
+            );
+            box-shadow: var(
+                --_ctm-mob-dn-fm-it-sw-ae,
+                var(--_ctm-tab-dn-fm-it-sw-ae, var(--_ctm-dn-fm-it-sw-ae))
+              )
+              var(
+                --_ctm-mob-dn-fm-it-sw-br,
+                var(--_ctm-tab-dn-fm-it-sw-br, var(--_ctm-dn-fm-it-sw-br))
+              )
+              var(
+                --_ctm-mob-dn-fm-it-sw-sd,
+                var(--_ctm-tab-dn-fm-it-sw-sd, var(--_ctm-dn-fm-it-sw-sd))
+              )
+              var(
+                --_ctm-mob-dn-fm-it-sw-cr,
+                var(--_ctm-tab-dn-fm-it-sw-cr, var(--_ctm-dn-fm-it-sw-cr))
+              );
+            &::placeholder {
+              background-color: var(
+                --_ctm-mob-dn-fm-it-bd-cr,
+                var(--_ctm-tab-dn-fm-it-bd-cr, var(--_ctm-dn-fm-it-bd-cr))
+              );
+            }
+          }
+        }
+        .view__icon {
+          position: absolute;
+          z-index: 10;
+          top: 39px;
+          right: 10px;
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se));
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1));
+            }
+          }
+        }
+      }
+      // Input Field Styles
+      .inputField {
+        width: 100%;
+        padding: var(--_ctm-mob-dn-fm-it-pg, var(--_ctm-tab-dn-fm-it-pg, var(--_ctm-dn-fm-it-pg)));
+        // padding: 10px;
+        border-radius: 6px;
+        border: 1px solid var(--_gray-300) !important;
+        font-size: 14px;
+        transition:
+          background-color 0.2s,
+          color 0.2s,
+          border-color 0.2s,
+          box-shadow 0.2s;
+        &:focus {
+          box-shadow:
+            0px 1px 2px rgba(16, 24, 40, 0.02),
+            0px 0px 0px 2px var(--_primary-100) !important;
+          border: 1px solid var(--_primary-300) !important;
+        }
+        ::placeholder {
+          color: var(--_thm-ty-h2-tt-cr);
+        }
+      }
+      // Invalid Input Field
+      .invalid {
+        border-color: var(--_error-300) !important;
+        outline: 2px solid #fee4e2;
+      }
+      // Error Text Styles
+      .errorText {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 12px;
+        color: red;
+        svg {
+          display: flex;
+          width: 13px;
+          height: 13px;
+          path {
+            stroke: var(--_error-500);
+          }
+        }
+      }
+      // Submit Button
+      .btn__with__text[data-btn-name="Login"] {
+        width: 100%;
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+        &:hover {
+          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-bd-cr)};
+          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-cr)};
+          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-se)};
+          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-wh)};
+          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-rs)};
+          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-at)};
+          --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-gp)};
+          // for shadow
+          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-ae)};
+          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-br)};
+          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-hr)};
+          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-bn-hr-se-sw-cr)};
+          // for font
+          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-cr)};
+          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-fy)};
+          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-se)};
+          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-wt)};
+          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-se-ic)};
+          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-tt-an)};
+          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-lr-sg)};
+          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-le-ht)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-se)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-se)};
+          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-c1)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-ue)};
+          // for pading and width
+          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-pg)};
+          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-wh)};
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-bd-cr));
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-pg));
+        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-wh));
+        display: flex;
+        flex-direction: var(--_sf-fd-bn);
+        align-items: center;
+        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-at));
+        gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-gp));
+        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-rs));
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-cr));
+        &[data-show-border="true"] {
+          width: 100%;
+          border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-cr));
+          border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-se));
+          border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-wh));
+        }
+        .txt {
+          display: flex;
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-cr));
+          font-family:
+            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-fy)), sans-serif;
+          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-se));
+          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-wt));
+          font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-se-ic));
+          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-tt-an));
+          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-lr-sg));
+          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-le-ht));
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+        }
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-se));
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-c1));
+            }
+          }
+        }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
+        .icon--hover {
+          // position: absolute;
+          // inset: 0;
+          // opacity: 0;
+          display: none;
+          transition: opacity 0.2s ease;
+        }
+        &:hover .icon--hover {
+          // opacity: 1;
+          display: flex;
+        }
+        &:hover .icon--default {
+          // opacity: 0;
+          display: none;
+        }
+      }
+      // .submitButton {
+      //   width: 100%;
+      //   // padding: 12px;
+      //   // background-color: var(--_primary-500);
+      //   // color: #fff;
+      //   //  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
+      //   // border-radius: 6px;
+      //   // border: none;
+      //   // margin-top: 16px;
+      //   cursor: pointer;
+      //   display: flex;
+      //   align-items: center;
+      //   justify-content: center;
+      //   background-color: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-bd-cr,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-bd-cr, var(--_ctm-dn-fm-bn-dt-se-bd-cr))
+      //   );
+      //   border-color: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-br-cr,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-cr, var(--_ctm-dn-fm-bn-dt-se-br-cr))
+      //   );
+      //   border-radius: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-br-rs,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-rs, var(--_ctm-dn-fm-bn-dt-se-br-rs))
+      //   );
+      //   border-style: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-br-se,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-se, var(--_ctm-dn-fm-bn-dt-se-br-se))
+      //   );
+      //   border-width: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-br-wh,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-br-wh, var(--_ctm-dn-fm-bn-dt-se-br-wh))
+      //   );
+      //   color: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-cr,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-cr, var(--_ctm-dn-fm-bn-dt-se-cr))
+      //   );
+      //   font-family: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-ft-fy,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-fy, var(--_ctm-dn-fm-bn-dt-se-ft-fy))
+      //   );
+      //   font-size: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-ft-se,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-se, var(--_ctm-dn-fm-bn-dt-se-ft-se))
+      //   );
+      //   font-style: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-ft-se-ic,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-se-ic, var(--_ctm-dn-fm-bn-dt-se-ft-se-ic))
+      //   );
+      //   font-weight: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-ft-wt,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-ft-wt, var(--_ctm-dn-fm-bn-dt-se-ft-wt))
+      //   );
+      //   line-height: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-le-ht,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-le-ht, var(--_ctm-dn-fm-bn-dt-se-le-ht))
+      //   );
+      //   letter-spacing: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-lr-sg,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-lr-sg, var(--_ctm-dn-fm-bn-dt-se-lr-sg))
+      //   );
+      //   box-shadow: var(
+      //       --_ctm-mob-dn-fm-bn-dt-se-sw-ae,
+      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-ae, var(--_ctm-dn-fm-bn-dt-se-sw-ae))
+      //     )
+      //     var(
+      //       --_ctm-mob-dn-fm-bn-dt-se-sw-br,
+      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-br, var(--_ctm-dn-fm-bn-dt-se-sw-br))
+      //     )
+      //     var(
+      //       --_ctm-mob-dn-fm-bn-dt-se-sw-sd,
+      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-sd, var(--_ctm-dn-fm-bn-dt-se-sw-sd))
+      //     )
+      //     var(
+      //       --_ctm-mob-dn-fm-bn-dt-se-sw-cr,
+      //       var(--_ctm-tab-dn-fm-bn-dt-se-sw-cr, var(--_ctm-dn-fm-bn-dt-se-sw-cr))
+      //     );
+      //   text-decoration: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-ue,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-ue, var(--_ctm-dn-fm-bn-dt-se-ue))
+      //   );
+      //   padding: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-pg,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-pg, var(--_ctm-dn-fm-bn-dt-se-pg))
+      //   );
+      //   text-align: var(
+      //     --_ctm-mob-dn-fm-bn-dt-se-tt-an,
+      //     var(--_ctm-tab-dn-fm-bn-dt-se-tt-an, var(--_ctm-dn-fm-bn-dt-se-tt-an))
+      //   );
+      //   &:hover {
+      //     background-color: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-bd-cr,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-bd-cr, var(--_ctm-dn-fm-bn-hr-se-bd-cr))
+      //     );
+      //     border-color: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-br-cr,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-cr, var(--_ctm-dn-fm-bn-hr-se-br-cr))
+      //     );
+      //     border-radius: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-br-rs,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-rs, var(--_ctm-dn-fm-bn-hr-se-br-rs))
+      //     );
+      //     border-style: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-br-se,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-se, var(--_ctm-dn-fm-bn-hr-se-br-se))
+      //     );
+      //     border-width: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-br-wh,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-br-wh, var(--_ctm-dn-fm-bn-hr-se-br-wh))
+      //     );
+      //     color: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-cr,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-cr, var(--_ctm-dn-fm-bn-hr-se-cr))
+      //     );
+      //     font-family: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-ft-fy,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-fy, var(--_ctm-dn-fm-bn-hr-se-ft-fy))
+      //     );
+      //     font-size: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-ft-se,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-se, var(--_ctm-dn-fm-bn-hr-se-ft-se))
+      //     );
+      //     font-style: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-ft-se-ic,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-se-ic, var(--_ctm-dn-fm-bn-hr-se-ft-se-ic))
+      //     );
+      //     font-weight: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-ft-wt,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-ft-wt, var(--_ctm-dn-fm-bn-hr-se-ft-wt))
+      //     );
+      //     line-height: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-le-ht,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-le-ht, var(--_ctm-dn-fm-bn-hr-se-le-ht))
+      //     );
+      //     letter-spacing: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-lr-sg,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-lr-sg, var(--_ctm-dn-fm-bn-hr-se-lr-sg))
+      //     );
+      //     box-shadow: var(
+      //         --_ctm-mob-dn-fm-bn-hr-se-sw-ae,
+      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-ae, var(--_ctm-dn-fm-bn-hr-se-sw-ae))
+      //       )
+      //       var(
+      //         --_ctm-mob-dn-fm-bn-hr-se-sw-br,
+      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-br, var(--_ctm-dn-fm-bn-hr-se-sw-br))
+      //       )
+      //       var(
+      //         --_ctm-mob-dn-fm-bn-hr-se-sw-sd,
+      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-sd, var(--_ctm-dn-fm-bn-hr-se-sw-sd))
+      //       )
+      //       var(
+      //         --_ctm-mob-dn-fm-bn-hr-se-sw-cr,
+      //         var(--_ctm-tab-dn-fm-bn-hr-se-sw-cr, var(--_ctm-dn-fm-bn-hr-se-sw-cr))
+      //       );
+      //     text-decoration: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-ue,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-ue, var(--_ctm-dn-fm-bn-hr-se-ue))
+      //     );
+      //     padding: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-pg,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-pg, var(--_ctm-dn-fm-bn-hr-se-pg))
+      //     );
+      //     text-align: var(
+      //       --_ctm-mob-dn-fm-bn-hr-se-tt-an,
+      //       var(--_ctm-tab-dn-fm-bn-hr-se-tt-an, var(--_ctm-dn-fm-bn-hr-se-tt-an))
+      //     );
+      //   }
+      //   &:has(svg) {
+      //     gap: 8px;
+      //   }
+      //   svg {
+      //     display: flex;
+      //     path {
+      //       stroke: var(--_base-white);
+      //     }
+      //   }
+      //   &:disabled {
+      //     background-color: var(--_primary-100);
+      //     cursor: not-allowed;
+      //   }
+      // }
+      .mt__32 {
+        margin-top: 32px !important;
+      }
+      .mt__48 {
+        margin-top: 48px !important;
+      }
+      // Loading Icon
+      .loadingIcon {
+        margin-left: 8px;
+      }
+      // Forgot Password Section
+      .forgotPassword {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-pg,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-pg, var(--_ctm-dn-fm-ft-pd-ll-pg))
+        );
+        // margin-top: 20px;
+        .remember_block {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+      }
+      // .flex_center {
+      //   display: flex;
+      //   justify-content: center;
+      //   align-items: center;
+      //   gap: 8px;
+      //   font-weight: 600;
+      //   margin-top: 20px;
+      //   width: 100%;
+      //   color: var(--_thm-cs-tt-ls-as);
+      //   svg {
+      //     display: flex;
+      //     path {
+      //       stroke: var(--_thm-cs-tt-ls-as);
+      //     }
+      //   }
+      // }
+      .btn__with__text[data-btn-name="goToBackLoginButton"] {
+        width: 100%;
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+        &:hover {
+          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-bd-cr)};
+          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-cr)};
+          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-se)};
+          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-wh)};
+          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-br-rs)};
+          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-at)};
+          --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-gp)};
+          // for shadow
+          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-ae)};
+          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-br)};
+          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-hr)};
+          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-sw-cr)};
+          // for font
+          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-cr)};
+          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-fy)};
+          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-se)};
+          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-wt)};
+          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ft-se-ic)};
+          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-tt-an)};
+          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-lr-sg)};
+          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-le-ht)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-in-se)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-in-se)};
+          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-in-c1)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-ue)};
+          // for pading and width
+          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-pg)};
+          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-hr-se-wh)};
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+        background-color: var(
+          --_sf-hr-bd-cr,
+          prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-bd-cr)
+        );
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-pg));
+        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-wh));
+        display: flex;
+        flex-direction: var(--_sf-fd-bn);
+        align-items: center;
+        justify-content: var(
+          --_sf-hr-at,
+          prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-at)
+        );
+        gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-gp));
+        border-radius: var(
+          --_sf-hr-br-rs,
+          prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-rs)
+        );
+        box-shadow: var(
+            --_sf-hr-sw-ae,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-ae)
+          )
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-sw-cr));
+        &[data-show-border="true"] {
+          width: 100%;
+          border-color: var(
+            --_sf-hr-br-cr,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-cr)
+          );
+          border-style: var(
+            --_sf-hr-br-se,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-se)
+          );
+          border-width: var(
+            --_sf-hr-br-wh,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-br-wh)
+          );
+        }
+        .txt {
+          display: flex;
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-cr));
+          font-family:
+            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-fy)),
+            sans-serif;
+          font-size: var(
+            --_sf-hr-ft-se,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-se)
+          );
+          font-weight: var(
+            --_sf-hr-ft-wt,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-wt)
+          );
+          font-style: var(
+            --_sf-hr-ft-se-ic,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-ft-se-ic)
+          );
+          text-align: var(
+            --_sf-hr-tt-an,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-tt-an)
+          );
+          letter-spacing: var(
+            --_sf-hr-lr-sg,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-lr-sg)
+          );
+          line-height: var(
+            --_sf-hr-le-ht,
+            prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-le-ht)
+          );
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+        }
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(
+              --_sf-hr-in-se,
+              prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-in-se)
+            );
+            height: var(
+              --_sf-hr-in-se,
+              prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-in-se)
+            );
+            path {
+              stroke: var(
+                --_sf-hr-in-c1,
+                prepareMediaVariable(--_ctm-dn-fm-as-go-to-bk-ln-bn-dt-se-in-c1)
+              );
+            }
+          }
+        }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
+        .icon--hover {
+          // position: absolute;
+          // inset: 0;
+          // opacity: 0;
+          display: none;
+          transition: opacity 0.2s ease;
+        }
+        &:hover .icon--hover {
+          // opacity: 1;
+          display: flex;
+        }
+        &:hover .icon--default {
+          // opacity: 0;
+          display: none;
+        }
+      }
+      .psw__contain {
+        margin-bottom: 24px;
+        margin-top: 8px;
+        .psw_status {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 10px;
+          .step {
+            // width: 20%;1
+            height: 3px;
+            border-radius: 4px;
+            background-color: var(--_gray-300);
+            flex-grow: 1;
+            &.active {
+              background-color: var(--_success-600);
+            }
+          }
+        }
+        .psw_content {
+          background-color: var(--_gray-50);
+          padding: 16px;
+          border-radius: 6px !important;
+          // height: 100px;
+          max-height: 160px;
+          overflow-y: auto;
+          // margin-top: 20px;
+          margin-top: 5px;
+          .title {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--_gray-700);
+            margin-bottom: 16px;
+          }
+          ul {
+            li {
+              color: var(--_gray-700);
+              font-size: 14px;
+              & > span {
+                display: inline-flex;
+              }
+              &:not(:last-child) {
+                margin-bottom: 8px;
+              }
+            }
+          }
+        }
+      }
+      // password reset successfully
+      .reset_password_success {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        // .rounded_icon {
+        //   @extend .element__center;
+        //   width: 40px;
+        //   height: 40px;
+        //   background-color: var(--_gray-200);
+        //   border-radius: 50%;
+        //   margin-bottom: 24px;
+        // }
+      }
+      // Forgot Password Button
+      .forgotPasswordButton {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-family: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-ft-fy,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-fy, var(--_ctm-dn-fm-ft-pd-ll-ft-fy))
+        );
+        color: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-cr,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-cr, var(--_ctm-dn-fm-ft-pd-ll-cr))
+        );
+        font-weight: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-ft-wt,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-wt, var(--_ctm-dn-fm-ft-pd-ll-ft-wt))
+        );
+        font-size: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-ft-se,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-se, var(--_ctm-dn-fm-ft-pd-ll-ft-se))
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-ue,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-ue, var(--_ctm-dn-fm-ft-pd-ll-ue))
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-lr-sg,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-lr-sg, var(--_ctm-dn-fm-ft-pd-ll-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-le-ht,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-le-ht, var(--_ctm-dn-fm-ft-pd-ll-le-ht))
+        );
+        font-style: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-ft-se-ic,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-ft-se-ic, var(--_ctm-dn-fm-ft-pd-ll-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-fm-ft-pd-ll-tt-an,
+          var(--_ctm-tab-dn-fm-ft-pd-ll-tt-an, var(--_ctm-dn-fm-ft-pd-ll-tt-an))
+        );
+        // color: var(--_thm-cs-tt-ls-as);
+        // font-weight: 600;
+        // font-size: 14px;
+        // padding: 8px 0px;
+        // border-radius: 6px;
+        // &:hover {
+        //   background-color: var(--_primary-25);
+        //   color: var(--_thm-cs-tt-ls-as);
+        // }
+      }
+      @keyframes shine {
+        100% {
+          left: 125%;
+        }
+      }
+      .reset_password {
+        form {
+          label {
+            display: block;
+            margin-bottom: 4px;
+          }
+          .formGroup {
+            &:not(:last-child) {
+              margin-bottom: 16px;
+            }
+          }
+          .to_be_filled {
+            display: grid;
+            grid-template-columns: 50% 50%;
+            gap: 4px;
+            margin-top: 10px;
+            margin-bottom: 16px;
+            li {
+              padding: 4px 10px;
+              background-color: var(--_gray-100);
+              color: var(--_gray-700);
+              border-radius: 40px;
+              display: flex;
+              align-items: center;
+              gap: 5px;
+              font-size: 12px;
+              &.active {
+                background-color: var(--_success-50);
+                color: var(--_success-700);
+                svg {
+                  path {
+                    stroke: var(--_success-700);
+                  }
+                }
+              }
+              button {
+                svg {
+                  path {
+                    stroke: var(--_gray-500);
+                  }
+                }
+              }
+            }
+          }
+        }
+        .to_be_filled {
+          display: flex;
+        }
+        .error {
+          color: var(--_error-500);
+          &::first-letter {
+            text-transform: uppercase;
+          }
+        }
+      }
+      // common styles
+      .btn__primary {
+        border-radius: 6px;
+        width: 100%;
+        height: 48px;
+        font-weight: 600;
+        color: var(--_base-white);
+        background-color: var(--_primary-500);
+        margin-top: 48px;
+        font-size: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        & > span {
+          display: flex;
+          svg {
+            path {
+              stroke: var(--_base-white);
+            }
+          }
+        }
+      }
+      .section__title {
+        font-size: 24px;
+        font-weight: 600;
+        margin-bottom: 8px;
+        color: var(--_gray-900);
+      }
+      .section__desc {
+        font-size: 14px;
+        color: var(--_gray-500);
+      }
+      .text__center {
+        text-align: center;
+      }
+    }
+  }
+}