.cuz-navbar {
 position: sticky;
 left: 0%;
 top: 0%;
 right: 0%;
 bottom: auto;
 z-index: 997;
 display: flex;
 width: 100%;
 height: 70px;
 max-width: 1080px;
 margin-right: auto;
 margin-left: auto;
 border-right-style: solid;
 border-right-width: 1px;
 border-right-color: @swatch_17a75a60;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 border-bottom-color: @swatch_17a75a60;
 border-left-style: solid;
 border-left-width: 1px;
 border-left-color: @swatch_17a75a60;
 background-color: hsla(0, 0.00%, 100.00%, 1.00);
}.cuz-navbar:small {
 height: 60px;
}.cuz-navbar:tiny {
 height: 50px;
}

.cuz-logo-link {
 display: flex;
 width: 80px;
 justify-content: center;
 align-items: center;
 font-weight: 700;
}.cuz-logo-link:tiny_current {
 width: 60px;
}.cuz-logo-link:small {
 width: 60px;
}

.cuz-navlink {
 position: relative;
 display: flex;
 padding-right: 20px;
 padding-left: 20px;
 align-items: center;
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
 color: hsla(0, 0.00%, 27.45%, 1.00);
 line-height: 145%;
 font-weight: 700;
}.cuz-navlink:main_current {
 background-color: hsla(0, 0.00%, 97.25%, 1.00);
 opacity: 1;
}.cuz-navlink:main_hover {
 background-color: hsla(0, 0.00%, 97.25%, 1.00);
 opacity: 1;
 color: hsla(0, 0.00%, 27.45%, 1.00);
}.cuz-navlink:main_active {
 background-color: hsla(0, 0.00%, 92.94%, 1.00);
}.cuz-navlink:main_focus {
 background-color: hsla(0, 0.00%, 97.25%, 1.00);
 color: hsla(0, 0.00%, 27.45%, 1.00);
}.cuz-navlink:tiny {
 padding-right: 15px;
 padding-left: 15px;
 flex-direction: column;
 justify-content: center;
 font-size: 9px;
 text-align: center;
}.cuz-navlink:small {
 font-size: 12px;
}

.cuz-navlink-icon {
 width: 25px;
 margin-right: 5px;
}.cuz-navlink-icon:tiny {
 width: 20px;
 margin-bottom: 4px;
}.cuz-navlink-icon:small {
 width: 20px;
}

.cuz-navlink {
 position: relative;
 display: flex;
 padding-right: 20px;
 padding-left: 20px;
 align-items: center;
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
 color: hsla(0, 0.00%, 27.45%, 1.00);
 line-height: 145%;
 font-weight: 700;
}.cuz-navlink:main_current {
 background-color: hsla(0, 0.00%, 97.25%, 1.00);
 opacity: 1;
}.cuz-navlink:main_hover {
 background-color: hsla(0, 0.00%, 97.25%, 1.00);
 opacity: 1;
 color: hsla(0, 0.00%, 27.45%, 1.00);
}.cuz-navlink:main_active {
 background-color: hsla(0, 0.00%, 92.94%, 1.00);
}.cuz-navlink:main_focus {
 background-color: hsla(0, 0.00%, 97.25%, 1.00);
 color: hsla(0, 0.00%, 27.45%, 1.00);
}.cuz-navlink:tiny {
 padding-right: 15px;
 padding-left: 15px;
 flex-direction: column;
 justify-content: center;
 font-size: 9px;
 text-align: center;
}.cuz-navlink:small {
 font-size: 12px;
}.cuz-navlink.profile {
 margin-left: auto;
}

.cuz-navlink-pp {
 width: 36px;
 margin-right: 5px;
 border-top-style: solid;
 border-top-width: 1px;
 border-top-color: @swatch_17a75a60;
 border-right-style: solid;
 border-right-width: 1px;
 border-right-color: @swatch_17a75a60;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 border-bottom-color: @swatch_17a75a60;
 border-left-style: solid;
 border-left-width: 1px;
 border-left-color: @swatch_17a75a60;
 border-top-left-radius: 50px;
 border-top-right-radius: 50px;
 border-bottom-left-radius: 50px;
 border-bottom-right-radius: 50px;
}.cuz-navlink-pp:tiny {
 width: 20px;
 margin-bottom: 4px;
}.cuz-navlink-pp:small {
 width: 20px;
}

<div class="cuz-navbar"><a href="#" class="cuz-logo-link"><img src="logo.svg" width="31" alt="cuz translation"></a><a href="/components" aria-current="page" class="cuz-navlink"><img src="projects.svg" width="24" alt="projects" class="cuz-navlink-icon"><div>Projects</div></a><a href="#" class="cuz-navlink"><img src="notification.svg" width="24" alt="notifications" class="cuz-navlink-icon"><div>Notifications</div></a><a href="#" class="cuz-navlink profile w-inline-block"><img src="profile-pic.jpeg" width="24" srcset="profile-pic-p-500.jpeg 500w, profile-pic-p-800.jpeg 800w, profile-pic.jpeg 1024w" sizes="(max-width: 767px) 20px, 36px" alt="" class="cuz-navlink-pp"><div>Jane Doe</div></a></div>

.cuz-footer {
 position: fixed;
 left: 0%;
 top: auto;
 right: 0%;
 bottom: 0%;
 width: 100%;
 max-width: 1080px;
 margin-right: auto;
 margin-left: auto;
 padding-right: 30px;
 padding-left: 30px;
 border-top-style: solid;
 border-top-width: 1px;
 border-top-color: @swatch_17a75a60;
 border-right-style: solid;
 border-right-width: 1px;
 border-right-color: @swatch_17a75a60;
 border-left-style: solid;
 border-left-width: 1px;
 border-left-color: @swatch_17a75a60;
 background-color: @swatch_ef977dd6;
}.cuz-footer:medium {
 padding-right: 30px;
 padding-left: 30px;
}.cuz-footer:small {
 padding-right: 20px;
 padding-left: 20px;
 border-right-style: none;
 border-left-style: none;
}
.cuz-loading-bar {
 position: absolute;
 left: 0%;
 top: -5px;
 right: 0%;
 bottom: auto;
 width: 20%;
 height: 5px;
 background-color: hsla(213.33333333333331, 92.13%, 49.80%, 1.00);
}
.cuz-footer-wrapper {
 display: grid;
 padding-top: 15px;
 padding-bottom: 15px;
 justify-content: space-between;
 align-items: center;
 grid-auto-columns: 1fr;
 grid-column-gap: 30px;
 grid-row-gap: 30px;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: auto;
}.cuz-footer-wrapper:small {
 padding-top: 5px;
 padding-bottom: 5px;
}.cuz-footer-wrapper:tiny {
 flex-direction: column;
 align-items: flex-start;
 grid-column-gap: 5px;
 grid-row-gap: 5px;
 grid-template-columns: 1fr;
}

.cuz-footer-loader {
 display: flex;
 align-items: center;
 font-size: 12px;
}

.cuz-footer-icon {
 width: 14px;
 height: 14px;
 margin-right: 3px;
}

.cuz-footer-wrap {
 display: flex;
 justify-content: flex-end;
 align-items: center;
 font-size: 12px;
}.cuz-footer-wrap:tiny {
 justify-content: flex-start;
}

.cuz-footer-link {
 display: flex;
 margin-right: 0px;
 margin-left: 10px;
 align-items: center;
}

<div class="cuz-footer">
             <div class="cuz-footer-wrapper">
               <div class="cuz-footer-loader"><img src="square_loader.gif" class="cuz-footer-icon">
                 <div>Loading...</div>
               </div>
               <div class="cuz-footer-wrap"><a href="#" class="cuz-footer-link w-inline-block"><img src="copy.svg" class="cuz-footer-icon"> <div>footer-link</div></a></div>
             </div>
             <div class="cuz-loading-bar"></div>
           </div>

‍

.cuz-stepper-container {
 display: flex;
 align-items: center;
}.cuz-stepper-container:small {
 flex-direction: column;
 align-items: flex-end;
}.cuz-stepper-wrapper {
 display: flex;
 width: 100%;
 align-items: center;
}.cuz-stepper-wrapper:small {
 margin-top: 20px;
 margin-bottom: 15px;
}.cuz-stepper {
 position: relative;
 display: flex;
 width: 100%;
 height: 6px;
 justify-content: space-between;
 align-items: center;
 border-top-left-radius: 10px;
 border-bottom-left-radius: 10px;
 background-color: @swatch_7f785cdc;
}.cuz-stepper-fill {
 position: absolute;
 left: 0%;
 top: 0%;
 right: auto;
 bottom: 0%;
 z-index: -1;
 width: 43%;
 border-top-left-radius: 10px;
 border-bottom-left-radius: 10px;
 background-color: @swatch_b27eec10;
}.cuz-step {
 position: relative;
 width: 18px;
 height: 18px;
 border-top-style: solid;
 border-top-width: 2px;
 border-top-color: @swatch_b27eec10;
 border-right-style: solid;
 border-right-width: 2px;
 border-right-color: @swatch_b27eec10;
 border-bottom-style: solid;
 border-bottom-width: 2px;
 border-bottom-color: @swatch_b27eec10;
 border-left-style: solid;
 border-left-width: 2px;
 border-left-color: @swatch_b27eec10;
 border-top-left-radius: 50%;
 border-top-right-radius: 50%;
 border-bottom-left-radius: 50%;
 border-bottom-right-radius: 50%;
 background-color: @swatch_ef977dd6;
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
 cursor: pointer;
}.cuz-step:main_hover {
 background-color: @swatch_b27eec10;
 box-shadow: 0 4px 6px 0 @swatch_a50c6f75;
}.cuz-step:small {
 width: 16px;
 height: 16px;
}.cuz-step:tiny {
 width: 14px;
 height: 14px;
}.cuz-step.cuz-active-step {
 background-color: @swatch_b27eec10;
}.cuz-step.cuz-active-step:main_hover {
 background-color: hsla(213.33333333333331, 100.00%, 62.05%, 1.00);
}.cuz-stepper-card {
 position: absolute;
 left: 0%;
 top: auto;
 right: auto;
 bottom: 200%;
 z-index: 999;
 display: none;
 width: 260px;
 padding-top: 10px;
 padding-right: 15px;
 padding-bottom: 15px;
 padding-left: 15px;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 background-color: @swatch_b27eec10;
 box-shadow: 0 15px 20px -2px @swatch_a50c6f75;
 color: @swatch_ef977dd6;
 font-size: 12px;
 line-height: 145%;
}.cuz-stepper-head {
 display: flex;
 margin-bottom: 5px;
 justify-content: space-between;
 font-size: 10px;
 font-weight: 700;
}.cuz-stepper-details-wrapper {
 display: flex;
 margin-right: -10px;
 padding-left: 20px;
 align-items: center;
 flex-grow: 0;
 flex-shrink: 0;
 flex-basis: auto;
}.cuz-stepper-details-wrapper:tiny {
 margin-right: 0px;
}.cuz-stepper-details-wrapper:small {
 padding-left: 0px;
}.cuz-stepper-price-wrapper {
 display: flex;
 margin-right: 20px;
 align-items: center;
}.cuz-stepper-price-wrapper:small {
 margin-right: 10px;
 margin-left: 0px;
}.cuz-price-card-trigger {
 position: relative;
 justify-content: center;
 align-items: center;
 flex-grow: 0;
 flex-shrink: 0;
 flex-basis: auto;
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
 cursor: help;
}.cuz-price-card-trigger:main_hover {
 opacity: 1;
}.cuz-price-card {
 position: absolute;
 left: auto;
 top: auto;
 right: 0%;
 bottom: 100%;
 z-index: 999;
 display: none;
 width: 260px;
 padding-top: 15px;
 padding-right: 15px;
 padding-bottom: 15px;
 padding-left: 15px;
 grid-auto-columns: 1fr;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: auto;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 background-color: @swatch_ef977dd6;
 box-shadow: 0 15px 20px -2px @swatch_a50c6f75;
 color: @swatch_9fdfd7a1;
 line-height: 145%;
}.cuz-price-card:tiny {
 left: auto;
 top: 120%;
 right: 0%;
 bottom: auto;
}.cuz-price-card-grid {
 padding-top: 3px;
 padding-bottom: 3px;
 justify-items: end;
 grid-column-gap: 5px;
 grid-row-gap: 5px;
 grid-template-columns: 1fr 0.75fr;
 grid-template-rows: auto;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 border-bottom-color: @swatch_aeb749f0;
 text-align: right;
}

<div class="cuz-footer">
             <div class="cuz-stepper-container">
               <div class="cuz-stepper-wrapper">
                 <div class="cuz-stepper">
                   <div class="cuz-stepper-fill"></div>
                   <div class="cuz-step cuz-active-step">
                     <div style="opacity: 0; display: none;" class="cuz-stepper-card">
                       <div class="cuz-stepper-head">
                         <div>Step 1</div>
                       </div>
                       <div><strong>Document Details<br></strong>Click here to go back to this step.</div>
                     </div>
                   </div>
                   <div class="cuz-step cuz-active-step">
                     <div style="opacity: 0; display: none;" class="cuz-stepper-card">
                       <div class="cuz-stepper-head">
                         <div>Step 1</div>
                       </div>
                       <div><strong>Document Details<br></strong>Click here to go back to this step.</div>
                     </div>
                   </div>
                   <div class="cuz-step cuz-active-step">
                     <div style="opacity: 0; display: none;" class="cuz-stepper-card">
                       <div class="cuz-stepper-head">
                         <div>Step 1</div>
                       </div>
                       <div><strong>Document Details<br></strong>Click here to go back to this step.</div>
                     </div>
                   </div>
                   <div class="cuz-step cuz-active-step">
                     <div style="opacity: 0; display: none;" class="cuz-stepper-card">
                       <div class="cuz-stepper-head">
                         <div>Step 1</div>
                       </div>
                       <div><strong>Document Details<br></strong>Click here to go back to this step.</div>
                     </div>
                   </div>
                   <div class="cuz-step">
                     <div style="opacity: 0; display: none;" class="cuz-stepper-card">
                       <div class="cuz-stepper-head">
                         <div>Step 1</div>
                       </div>
                       <div><strong>Document Details<br></strong>Click here to go back to this step.</div>
                     </div>
                   </div>
                   <div class="cuz-step">
                     <div style="opacity: 0; display: none;" class="cuz-stepper-card">
                       <div class="cuz-stepper-head">
                         <div>Step 1</div>
                       </div>
                       <div><strong>Document Details<br></strong>Click here to go back to this step.</div>
                     </div>
                   </div>
                   <div class="cuz-step">
                     <div style="opacity: 0; display: none;" class="cuz-stepper-card">
                       <div class="cuz-stepper-head">
                         <div>Step 1</div>
                       </div>
                       <div><strong>Document Details<br></strong>Click here to go back to this step.</div>
                     </div>
                   </div>
                   <div class="cuz-stepper-final"><img src="checkmark_b.svg" loading="lazy" alt="" class="cuz-stepper-final-icon"></div>
                 </div>
               </div>
               <div class="cuz-stepper-details-wrapper">
                 <div class="cuz-stepper-price-wrapper">
                   <div>Subtotal:&nbsp;<strong>456 CAD</strong></div><a href="#" class="cuz-price-card-trigger"><img src="info.svg" class="cuz-tooltip-icon"><div style="opacity: 0; display: none;" class="cuz-price-card"><div class="cuz-price-card-grid"><div>Total Payable:</div><div><strong>1035.56 CAD</strong></div></div><div class="cuz-price-card-grid"><div>Total Word Count:</div><div>456</div></div><div class="cuz-price-card-grid"><div>Project Cost:</div><div>254.56 CAD</div></div><div class="cuz-price-card-grid"><div>Tax:</div><div>254.56 CAD</div></div></div></a></div><a href="#" class="cuz-button">CONTINUE</a></div>
             </div>
             <div class="cuz-footer-wrapper">
               <div class="cuz-footer-loader"><img src="square_loader.gif" alt="" class="cuz-footer-icon">
                 <div>Loading...</div>
               </div>
               <div class="cuz-footer-wrap"><a href="#" class="cuz-footer-link"><img src="copy.svg" alt="" class="cuz-footer-icon"><div>footer-link</div></a></div>
             </div>
             <div class="cuz-loading-bar"></div>
           </div>

.cuz-breadcrumb-tray {
 margin-top: 20px;
 margin-bottom: 30px;
}
.cuz-breadcrumb-link {
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
 color: @swatch_87ba6762;
 font-size: 11px;
}.cuz-breadcrumb-link:main_current {
 color: @swatch_e621c2b6;
}.cuz-breadcrumb-link:main_hover {
 color: @swatch_e621c2b6;
}.cuz-breadcrumb-link:tiny {
 font-size: 9px;
}.cuz-breadcrumb-link:small {
 font-size: 10px;
}
.cuz-seperator {
 display: inline-block;
 margin-right: 8px;
 margin-left: 8px;
 color: @swatch_87ba6762;
 font-size: 10px;
}.cuz-seperator:tiny {
 margin-right: 3px;
 margin-left: 3px;
}

<div class="cuz-breadcrumb-tray"><a href="#" class="cuz-breadcrumb-link">Level 1</a>
               <div class="cuz-seperator">/</div><a href="#" class="cuz-breadcrumb-link">Level 2</a>
               <div class="cuz-seperator">/</div><a href="#" class="cuz-breadcrumb-link">Level 3</a></div>

.cuz-titlebar {
 display: flex;
 margin-top: 20px;
 margin-bottom: 30px;
 align-items: center;
}
.cuz-title {
 display: inline-block;
 margin-top: 0px;
 margin-bottom: 0px;
 font-size: 30px;
 line-height: 145%;
}.cuz-title:medium {}

.cuz-titlebar-link {
 display: flex;
 margin-right: 20px;
 padding-top: 12px;
 padding-right: 12px;
 padding-bottom: 12px;
 padding-left: 12px;
 align-items: center;
 flex-grow: 0;
 flex-shrink: 0;
 flex-basis: auto;
 border-right-style: solid;
 border-right-width: 1px;
 border-right-color: @swatch_17a75a60;
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
}.cuz-titlebar-link:main_hover {
 background-color: @swatch_aeb749f0;
}

<div class="cuz-titlebar"><a href="#" class="cuz-titlebar-link"><img src="left_arrow.svg" class="cuz-title-icon"></a>
               <h1 class="cuz-title">Heading</h1>
               <div class="cuz-titlebar-right-wrapper"><a href="#" class="cuz-titlebar-link-right"><img src="icon.svg" class="cuz-title-icon"></a><a href="#" class="cuz-titlebar-link-right"><img src="icon.svg" class="cuz-title-icon"></a></div>
             </div>

.cuz-container.cuz-tabbar {
 padding-top: 0px;
 padding-bottom: 0px;
 border-right-color: @swatch_17a75a60;
 border-left-color: @swatch_17a75a60;
}

.cuz-tab-tray {
 padding-top: 10px;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 border-bottom-color: @swatch_17a75a60;
}

.cuz-tab {
 display: inline-block;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 10px;
 align-items: center;
 border-bottom-style: solid;
 border-bottom-width: 3px;
 border-bottom-color: @swatch_ef977dd6;
 background-color: transparent;
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
 color: @swatch_e621c2b6;
 font-weight: 700;
}.cuz-tab:main_current {
 border-bottom-color: @swatch_9fdfd7a1;
 background-color: transparent;
 color: @swatch_9fdfd7a1;
}.cuz-tab:main_hover {
 border-bottom-color: @swatch_e621c2b6;
}.cuz-tab:main_focus {
 border-bottom-color: @swatch_9fdfd7a1;
 color: @swatch_9fdfd7a1;
}.cuz-tab:small {
 flex-grow: 0;
 flex-shrink: 0;
 flex-basis: auto;
 border-bottom-width: 2px;
 font-size: 10px;
}.cuz-tab:tiny {
 padding-top: 3px;
 padding-bottom: 3px;
}

<div class="cuz-container cuz-tabbar">
             <div class="cuz-tab-tray"><a href="/elements" class="cuz-tab">Text</a><a href="/components" aria-current="page" class="cuz-tab disabled">Text</a><a href="#" class="cuz-tab">Text</a><a href="#" class="cuz-tab">Text</a><a href="#" class="cuz-tab">Text</a><a href="#" class="cuz-tab">Text</a><a href="#" class="cuz-tab">Text</a></div>
           </div>

.cuz-alert-wrapper {
 display: flex;
 margin-top: 20px;
 margin-bottom: 20px;
 padding-top: 20px;
 padding-right: 20px;
 padding-bottom: 20px;
 padding-left: 20px;
 align-items: center;
 border-top-left-radius: 30px;
 border-top-right-radius: 30px;
 border-bottom-left-radius: 30px;
 border-bottom-right-radius: 30px;
 background-color: @swatch_5ea9028e;
 color: @swatch_9fdfd7a1;
}.cuz-alert-wrapper:small {
 padding-top: 15px;
 padding-right: 15px;
 padding-bottom: 15px;
 padding-left: 15px;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 font-size: 12px;
 line-height: 145%;
}.cuz-alert-wrapper:tiny {
 flex-direction: column;
 align-items: flex-start;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 font-size: 10px;
 line-height: 145%;
}
‍
.cuz-alert-wrapper.cuz-notice {
 background-color: @swatch_5216bbb1;
}

.cuz-alert-wrapper.cuz-success {
 background-color: @swatch_f2f5468d;
}

.cuz-alert-wrapper.cuz-waiting {
 background-color: @swatch_7f785cdc;
}

.cuz-alert-icon {
 width: 50px;
 margin-right: 20px;
 margin-left: 10px;
}.cuz-alert-icon:small {
 width: 35px;
 margin-right: 10px;
}.cuz-alert-icon:tiny {
 width: 20px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 0px;
}

.cuz-alert-text {
 flex-grow: 1;
 flex-shrink: 1;
 flex-basis: 0%;
}

<div class="cuz-alert-wrapper"><img src="problem.svg" class="cuz-alert-icon">
             <div class="cuz-alert-text"><strong>Lorem ipsum dolor sit amet<br></strong>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div>
           </div>

.cuz-temp-alert-wrapper {
 position: absolute;
 left: 0%;
 top: auto;
 right: 0%;
 bottom: 150%;
 border-top-left-radius: 30px;
 border-top-right-radius: 30px;
 border-bottom-left-radius: 30px;
 border-bottom-right-radius: 30px;
 background-color: @swatch_ef977dd6;
 box-shadow: 0 6px 10px 0 @swatch_a50c6f75;
}.cuz-temp-alert-wrapper:small {
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
}.cuz-temp-alert-wrapper:medium {
 margin-right: 20px;
 margin-left: 20px;
}.cuz-temp-alert-wrapper:tiny {
 margin-right: 10px;
 margin-bottom: -10px;
 margin-left: 10px;
}
‍
}.cuz-alert-wrapper.cuz-temp-alert {
 margin-top: 0px;
 margin-bottom: 0px;
}

.cuz-alert-btn-wrapper {
 display: flex;
 margin-left: 20px;
 flex-grow: 0;
 flex-shrink: 0;
 flex-basis: auto;
}.cuz-alert-btn-wrapper:tiny {
 margin-bottom: -10px;
 align-self: flex-end;
}

<div style="display: block; opacity: 1; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;" class="cuz-temp-alert-wrapper">
               <div class="cuz-alert-wrapper cuz-temp-alert"><img src="problem.svg" class="cuz-alert-icon">
                 <div class="cuz-alert-text"><strong>Wrong Password<br></strong>Sconsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
                 <div class="cuz-alert-btn-wrapper"><a data-w-id="27d08cc0-bc5c-99ab-53f2-bd2f383e35e5" href="#" class="cuz-button cuz-alert w-button">Close</a></div>
               </div>
             </div>

.cuz-tooltip-trigger {
 position: relative;
 padding-top: 8px;
 justify-content: center;
 align-items: center;
 flex-grow: 0;
 flex-shrink: 0;
 flex-basis: auto;
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
}.cuz-tooltip-trigger:main_hover {
 opacity: 1;
}.cuz-tooltip-trigger:tiny {
 padding-top: 6px;
}

.cuz-tooltip-icon {
 width: 20px;
 margin-left: 15px;
 opacity: 0.25;
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
}.cuz-tooltip-icon:tiny {
 width: 16px;
}.cuz-tooltip-icon:small {
 width: 18px;
 margin-left: 10px;
}.cuz-tooltip-icon:main_hover {
 opacity: 1;
}

.cuz-tooltip-card {
 position: absolute;
 left: auto;
 top: 0%;
 right: 100%;
 bottom: auto;
 display: none;
 width: 260px;
 padding-top: 10px;
 padding-right: 15px;
 padding-bottom: 15px;
 padding-left: 15px;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 background-color: @swatch_b27eec10;
 box-shadow: 0 15px 20px -2px @swatch_a50c6f75;
 color: @swatch_ef977dd6;
 font-size: 12px;
 line-height: 145%;
}.cuz-tooltip-card:tiny {
 left: auto;
 top: 120%;
 right: 0%;
 bottom: auto;
}

.cuz-tooltip-head {
 display: flex;
 margin-bottom: 5px;
 justify-content: space-between;
 font-size: 10px;
 font-weight: 700;
}

.cuz-tooltip-close {
 width: 20px;
 margin-left: 15px;
 opacity: 0.25;
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
}.cuz-tooltip-close:small {
 margin-left: 10px;
}.cuz-tooltip-close:main_hover {
 opacity: 1;
}

<a data-w-id="d4837e44-cd22-fe32-1094-2c1f4a39543b" href="#" class="cuz-tooltip-trigger w-inline-block"><img src="info.svg" alt="tooltip" class="cuz-tooltip-icon"><div style="opacity: 1; display: block;" class="cuz-tooltip-card"><div class="cuz-tooltip-head"><div>Required</div><img src="close.svg" data-w-id="d4837e44-cd22-fe32-1094-2c1f4a395441" alt="close" class="cuz-tooltip-close"></div><div><strong>Lorem ipsum dolor sit amet<br></strong>Consectetur adipiscing elit. Integer condimentum ornare dignissim. Ut at sem eget eros iaculis sagittis in eu leo. Phasellus sagittis mauris justo, sed tempus odio eleifend in.</div></div></a>

‍

‍

‍

‍

‍

‍

‍

‍