/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/theme/variables.scss?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined);
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/global.scss?ngGlobalStyle ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/global.scss?ngGlobalStyle (1) ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/global.scss?ngGlobalStyle (2) ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/theme/variables.scss?ngGlobalStyle (1) ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/** Ionic CSS Variables **/
:root {
  /** primary **/
  --ion-color-primary: #123456;
  --ion-color-primary-dark: #007436;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;
  /** secondary **/
  --ion-color-secondary: #123454;
  --ion-color-secondary-dark: #a12117;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;
  /** tertiary **/
  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;
  /** success **/
  --ion-color-success: #1b763a;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;
  /** warning **/
  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;
  /** danger **/
  --ion-color-danger: #eb445a;
  --ion-color-danger-rgb: 235, 68, 90;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cf3c4f;
  --ion-color-danger-tint: #ed576b;
  /** dark **/
  --ion-color-dark: #a7a7a7;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;
  /** medium **/
  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;
  /** light **/
  --ion-color-light: #f7f7f7;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
  --ion-color-text: #123452;
  --ion-color-title: #123452;
  --ion-color-danger: #f53d3d;
  --ion-color-gray: #a9a6a6;
  --ion-color-lightGray: #eeeeee;
  --ion-color-dark-gray: #737373;
  --ion-color-white: #fff;
  --ion-color-gold: #ffcd07;
  --ion-color-transparent: transparent;
  --ion-color-facebook: #3b5999;
  --ion-font-family: "Poppins", "Segoe UI", sans-serif;
  --avaris-font-family-md: "Poppins", "Helvetica Neue", sans-serif;
  --avaris-text-font-weight-md: "400";
  --avaris-title-font-weight-md: "500";
  --avaris-base-font-size-md: 14px;
  --avaris-font-family-ios: "Poppins", "Helvetica Neue", sans-serif;
  --avaris-text-font-weight-ios: "ios-text-fontweight";
  --avaris-title-font-weight-ios: "ios-title-fontweight";
  --avaris-base-font-size-ios: 14px;
  --grid-gap-small: 15px;
  --grid-gap-large: 20px;
}
@media screen and (min-width: 768px) {
  :root {
    --grid-gap-small: 30px;
    --grid-gap-large: 40px;
  }
}

:host {
  --ion-color-step-50: white;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/core.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
html.ios{--ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif}html.md{--ion-default-font: "Roboto", "Helvetica Neue", sans-serif}html{--ion-default-dynamic-font: -apple-system-body;--ion-font-family: var(--ion-default-font)}body{background:var(--ion-background-color)}body.backdrop-no-scroll{overflow:hidden}html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,html.ios ion-modal ion-footer ion-toolbar:first-of-type{padding-top:6px}html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type{padding-bottom:6px}html.ios ion-modal ion-toolbar{padding-right:calc(var(--ion-safe-area-right) + 8px);padding-left:calc(var(--ion-safe-area-left) + 8px)}@media screen and (min-width: 768px){html.ios ion-modal.modal-card:first-of-type{--backdrop-opacity: 0.18}}ion-modal.modal-default.show-modal~ion-modal.modal-default{--backdrop-opacity: 0;--box-shadow: none}html.ios ion-modal.modal-card .ion-page{border-top-left-radius:var(--border-radius)}.ion-color-primary{--ion-color-base: var(--ion-color-primary, #3880ff) !important;--ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;--ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;--ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important}.ion-color-secondary{--ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;--ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;--ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;--ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important}.ion-color-tertiary{--ion-color-base: var(--ion-color-tertiary, #5260ff) !important;--ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;--ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;--ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important}.ion-color-success{--ion-color-base: var(--ion-color-success, #2dd36f) !important;--ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;--ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;--ion-color-tint: var(--ion-color-success-tint, #42d77d) !important}.ion-color-warning{--ion-color-base: var(--ion-color-warning, #ffc409) !important;--ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;--ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;--ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;--ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;--ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important}.ion-color-danger{--ion-color-base: var(--ion-color-danger, #eb445a) !important;--ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;--ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;--ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important}.ion-color-light{--ion-color-base: var(--ion-color-light, #f4f5f8) !important;--ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;--ion-color-contrast: var(--ion-color-light-contrast, #000) !important;--ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;--ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;--ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important}.ion-color-medium{--ion-color-base: var(--ion-color-medium, #92949c) !important;--ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;--ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-medium-shade, #808289) !important;--ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important}.ion-color-dark{--ion-color-base: var(--ion-color-dark, #222428) !important;--ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;--ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;--ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important}.ion-page{left:0;right:0;top:0;bottom:0;display:flex;position:absolute;flex-direction:column;justify-content:space-between;contain:layout size style;z-index:0}ion-modal>.ion-page{position:relative;contain:layout style;height:100%}.split-pane-visible>.ion-page.split-pane-main{position:relative}ion-route,ion-route-redirect,ion-router,ion-select-option,ion-nav-controller,ion-menu-controller,ion-action-sheet-controller,ion-alert-controller,ion-loading-controller,ion-modal-controller,ion-picker-controller,ion-popover-controller,ion-toast-controller,.ion-page-hidden{display:none !important}.ion-page-invisible{opacity:0}.can-go-back>ion-header ion-back-button{display:block}html.plt-ios.plt-hybrid,html.plt-ios.plt-pwa{--ion-statusbar-padding: 20px}@supports(padding-top: 20px){html{--ion-safe-area-top: var(--ion-statusbar-padding)}}@supports(padding-top: env(safe-area-inset-top)){html{--ion-safe-area-top: env(safe-area-inset-top);--ion-safe-area-bottom: env(safe-area-inset-bottom);--ion-safe-area-left: env(safe-area-inset-left);--ion-safe-area-right: env(safe-area-inset-right)}}ion-card.ion-color .ion-inherit-color,ion-card-header.ion-color .ion-inherit-color{color:inherit}.menu-content{transform:translate3d(0,  0,  0)}.menu-content-open{cursor:pointer;touch-action:manipulation;pointer-events:none;overflow-y:hidden}.menu-content-open ion-content{--overflow: hidden}.menu-content-open .ion-content-scroll-host{overflow:hidden}.ios .menu-content-reveal{box-shadow:-8px 0 42px rgba(0,0,0,.08)}[dir=rtl].ios .menu-content-reveal{box-shadow:8px 0 42px rgba(0,0,0,.08)}.md .menu-content-reveal{box-shadow:4px 0px 16px rgba(0,0,0,.18)}.md .menu-content-push{box-shadow:4px 0px 16px rgba(0,0,0,.18)}ion-accordion-group.accordion-group-expand-inset>ion-accordion:first-of-type{border-top-left-radius:8px;border-top-right-radius:8px}ion-accordion-group.accordion-group-expand-inset>ion-accordion:last-of-type{border-bottom-left-radius:8px;border-bottom-right-radius:8px}ion-accordion-group>ion-accordion:last-of-type ion-item[slot=header]{--border-width: 0px}ion-accordion.accordion-animated>[slot=header] .ion-accordion-toggle-icon{transition:300ms transform cubic-bezier(0.25, 0.8, 0.5, 1)}@media(prefers-reduced-motion: reduce){ion-accordion .ion-accordion-toggle-icon{transition:none !important}}ion-accordion.accordion-expanding>[slot=header] .ion-accordion-toggle-icon,ion-accordion.accordion-expanded>[slot=header] .ion-accordion-toggle-icon{transform:rotate(180deg)}ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-previous ion-item[slot=header]{--border-width: 0px;--inner-border-width: 0px}ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-expanding:first-of-type,ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-expanded:first-of-type{margin-top:0}ion-input input::-webkit-date-and-time-value{text-align:start}.ion-datetime-button-overlay{--width: fit-content;--height: fit-content}.ion-datetime-button-overlay ion-datetime.datetime-grid{width:320px;min-height:320px}.popover-viewport:has(>ion-content){overflow:hidden}@supports not selector(:has(> ion-content)){.popover-viewport{overflow:hidden}}/*# sourceMappingURL=core.css.map */

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/normalize.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
audio,canvas,progress,video{vertical-align:baseline}audio:not([controls]){display:none;height:0}b,strong{font-weight:bold}img{max-width:100%}hr{height:1px;border-width:0;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}label,input,select,textarea{font-family:inherit;line-height:normal}textarea{overflow:auto;height:auto;font:inherit;color:inherit}textarea::placeholder{padding-left:2px}form,input,optgroup,select{margin:0;font:inherit;color:inherit}html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}a,a div,a span,a ion-icon,a ion-label,button,button div,button span,button ion-icon,button ion-label,.ion-tappable,[tappable],[tappable] div,[tappable] span,[tappable] ion-icon,[tappable] ion-label,input,textarea{touch-action:manipulation}a ion-label,button ion-label{pointer-events:none}button{padding:0;border:0;border-radius:0;font-family:inherit;font-style:inherit;font-variant:inherit;line-height:1;text-transform:none;cursor:pointer;-webkit-appearance:button}[tappable]{cursor:pointer}a[disabled],button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}/*# sourceMappingURL=normalize.css.map */

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/structure.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html{width:100%;height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}html:not(.hydrated) body{display:none}html.ion-ce body{display:block}html.plt-pwa{height:100vh}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:fixed;width:100%;max-width:100%;height:100%;max-height:100%;transform:translateZ(0);text-rendering:optimizeLegibility;overflow:hidden;touch-action:manipulation;-webkit-user-drag:none;-ms-content-zooming:none;word-wrap:break-word;overscroll-behavior-y:none;-webkit-text-size-adjust:none;text-size-adjust:none}/*# sourceMappingURL=structure.css.map */

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/typography.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
html{font-family:var(--ion-font-family)}@supports(-webkit-touch-callout: none){html{font:var(--ion-dynamic-font, 16px var(--ion-font-family))}}a{background-color:transparent;color:var(--ion-color-primary, #3880ff)}h1,h2,h3,h4,h5,h6{margin-top:16px;margin-bottom:10px;font-weight:500;line-height:1.2}h1{margin-top:20px;font-size:1.625rem}h2{margin-top:18px;font-size:1.5rem}h3{font-size:1.375rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}/*# sourceMappingURL=typography.css.map */

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/display.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
.ion-hide{display:none !important}.ion-hide-up{display:none !important}.ion-hide-down{display:none !important}@media(min-width: 576px){.ion-hide-sm-up{display:none !important}}@media(max-width: 575.98px){.ion-hide-sm-down{display:none !important}}@media(min-width: 768px){.ion-hide-md-up{display:none !important}}@media(max-width: 767.98px){.ion-hide-md-down{display:none !important}}@media(min-width: 992px){.ion-hide-lg-up{display:none !important}}@media(max-width: 991.98px){.ion-hide-lg-down{display:none !important}}@media(min-width: 1200px){.ion-hide-xl-up{display:none !important}}@media(max-width: 1199.98px){.ion-hide-xl-down{display:none !important}}/*# sourceMappingURL=display.css.map */

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/padding.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
.ion-no-padding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.ion-padding{--padding-start: var(--ion-padding, 16px);--padding-end: var(--ion-padding, 16px);--padding-top: var(--ion-padding, 16px);--padding-bottom: var(--ion-padding, 16px);padding-inline-start:var(--ion-padding, 16px);padding-inline-end:var(--ion-padding, 16px);padding-top:var(--ion-padding, 16px);padding-bottom:var(--ion-padding, 16px)}.ion-padding-top{--padding-top: var(--ion-padding, 16px);padding-top:var(--ion-padding, 16px)}.ion-padding-start{--padding-start: var(--ion-padding, 16px);padding-inline-start:var(--ion-padding, 16px)}.ion-padding-end{--padding-end: var(--ion-padding, 16px);padding-inline-end:var(--ion-padding, 16px)}.ion-padding-bottom{--padding-bottom: var(--ion-padding, 16px);padding-bottom:var(--ion-padding, 16px)}.ion-padding-vertical{--padding-top: var(--ion-padding, 16px);--padding-bottom: var(--ion-padding, 16px);padding-top:var(--ion-padding, 16px);padding-bottom:var(--ion-padding, 16px)}.ion-padding-horizontal{--padding-start: var(--ion-padding, 16px);--padding-end: var(--ion-padding, 16px);padding-inline-start:var(--ion-padding, 16px);padding-inline-end:var(--ion-padding, 16px)}.ion-no-margin{--margin-start: 0;--margin-end: 0;--margin-top: 0;--margin-bottom: 0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.ion-margin{--margin-start: var(--ion-margin, 16px);--margin-end: var(--ion-margin, 16px);--margin-top: var(--ion-margin, 16px);--margin-bottom: var(--ion-margin, 16px);margin-inline-start:var(--ion-margin, 16px);margin-inline-end:var(--ion-margin, 16px);margin-top:var(--ion-margin, 16px);margin-bottom:var(--ion-margin, 16px)}.ion-margin-top{--margin-top: var(--ion-margin, 16px);margin-top:var(--ion-margin, 16px)}.ion-margin-start{--margin-start: var(--ion-margin, 16px);margin-inline-start:var(--ion-margin, 16px)}.ion-margin-end{--margin-end: var(--ion-margin, 16px);margin-inline-end:var(--ion-margin, 16px)}.ion-margin-bottom{--margin-bottom: var(--ion-margin, 16px);margin-bottom:var(--ion-margin, 16px)}.ion-margin-vertical{--margin-top: var(--ion-margin, 16px);--margin-bottom: var(--ion-margin, 16px);margin-top:var(--ion-margin, 16px);margin-bottom:var(--ion-margin, 16px)}.ion-margin-horizontal{--margin-start: var(--ion-margin, 16px);--margin-end: var(--ion-margin, 16px);margin-inline-start:var(--ion-margin, 16px);margin-inline-end:var(--ion-margin, 16px)}/*# sourceMappingURL=padding.css.map */

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/float-elements.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.ion-float-left{float:left !important}.ion-float-right{float:right !important}.ion-float-start{float:left !important}:host-context([dir=rtl]) .ion-float-start{float:right !important}[dir=rtl] .ion-float-start{float:right !important}@supports selector(:dir(rtl)){.ion-float-start:dir(rtl){float:right !important}}.ion-float-end{float:right !important}:host-context([dir=rtl]) .ion-float-end{float:left !important}[dir=rtl] .ion-float-end{float:left !important}@supports selector(:dir(rtl)){.ion-float-end:dir(rtl){float:left !important}}@media(min-width: 576px){.ion-float-sm-left{float:left !important}.ion-float-sm-right{float:right !important}.ion-float-sm-start{float:left !important}:host-context([dir=rtl]) .ion-float-sm-start{float:right !important}[dir=rtl] .ion-float-sm-start{float:right !important}@supports selector(:dir(rtl)){.ion-float-sm-start:dir(rtl){float:right !important}}.ion-float-sm-end{float:right !important}:host-context([dir=rtl]) .ion-float-sm-end{float:left !important}[dir=rtl] .ion-float-sm-end{float:left !important}@supports selector(:dir(rtl)){.ion-float-sm-end:dir(rtl){float:left !important}}}@media(min-width: 768px){.ion-float-md-left{float:left !important}.ion-float-md-right{float:right !important}.ion-float-md-start{float:left !important}:host-context([dir=rtl]) .ion-float-md-start{float:right !important}[dir=rtl] .ion-float-md-start{float:right !important}@supports selector(:dir(rtl)){.ion-float-md-start:dir(rtl){float:right !important}}.ion-float-md-end{float:right !important}:host-context([dir=rtl]) .ion-float-md-end{float:left !important}[dir=rtl] .ion-float-md-end{float:left !important}@supports selector(:dir(rtl)){.ion-float-md-end:dir(rtl){float:left !important}}}@media(min-width: 992px){.ion-float-lg-left{float:left !important}.ion-float-lg-right{float:right !important}.ion-float-lg-start{float:left !important}:host-context([dir=rtl]) .ion-float-lg-start{float:right !important}[dir=rtl] .ion-float-lg-start{float:right !important}@supports selector(:dir(rtl)){.ion-float-lg-start:dir(rtl){float:right !important}}.ion-float-lg-end{float:right !important}:host-context([dir=rtl]) .ion-float-lg-end{float:left !important}[dir=rtl] .ion-float-lg-end{float:left !important}@supports selector(:dir(rtl)){.ion-float-lg-end:dir(rtl){float:left !important}}}@media(min-width: 1200px){.ion-float-xl-left{float:left !important}.ion-float-xl-right{float:right !important}.ion-float-xl-start{float:left !important}:host-context([dir=rtl]) .ion-float-xl-start{float:right !important}[dir=rtl] .ion-float-xl-start{float:right !important}@supports selector(:dir(rtl)){.ion-float-xl-start:dir(rtl){float:right !important}}.ion-float-xl-end{float:right !important}:host-context([dir=rtl]) .ion-float-xl-end{float:left !important}[dir=rtl] .ion-float-xl-end{float:left !important}@supports selector(:dir(rtl)){.ion-float-xl-end:dir(rtl){float:left !important}}}/*# sourceMappingURL=float-elements.css.map */

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/text-alignment.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.ion-text-center{text-align:center !important}.ion-text-justify{text-align:justify !important}.ion-text-start{text-align:start !important}.ion-text-end{text-align:end !important}.ion-text-left{text-align:left !important}.ion-text-right{text-align:right !important}.ion-text-nowrap{white-space:nowrap !important}.ion-text-wrap{white-space:normal !important}@media(min-width: 576px){.ion-text-sm-center{text-align:center !important}.ion-text-sm-justify{text-align:justify !important}.ion-text-sm-start{text-align:start !important}.ion-text-sm-end{text-align:end !important}.ion-text-sm-left{text-align:left !important}.ion-text-sm-right{text-align:right !important}.ion-text-sm-nowrap{white-space:nowrap !important}.ion-text-sm-wrap{white-space:normal !important}}@media(min-width: 768px){.ion-text-md-center{text-align:center !important}.ion-text-md-justify{text-align:justify !important}.ion-text-md-start{text-align:start !important}.ion-text-md-end{text-align:end !important}.ion-text-md-left{text-align:left !important}.ion-text-md-right{text-align:right !important}.ion-text-md-nowrap{white-space:nowrap !important}.ion-text-md-wrap{white-space:normal !important}}@media(min-width: 992px){.ion-text-lg-center{text-align:center !important}.ion-text-lg-justify{text-align:justify !important}.ion-text-lg-start{text-align:start !important}.ion-text-lg-end{text-align:end !important}.ion-text-lg-left{text-align:left !important}.ion-text-lg-right{text-align:right !important}.ion-text-lg-nowrap{white-space:nowrap !important}.ion-text-lg-wrap{white-space:normal !important}}@media(min-width: 1200px){.ion-text-xl-center{text-align:center !important}.ion-text-xl-justify{text-align:justify !important}.ion-text-xl-start{text-align:start !important}.ion-text-xl-end{text-align:end !important}.ion-text-xl-left{text-align:left !important}.ion-text-xl-right{text-align:right !important}.ion-text-xl-nowrap{white-space:nowrap !important}.ion-text-xl-wrap{white-space:normal !important}}/*# sourceMappingURL=text-alignment.css.map */

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/text-transformation.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.ion-text-uppercase{text-transform:uppercase !important}.ion-text-lowercase{text-transform:lowercase !important}.ion-text-capitalize{text-transform:capitalize !important}@media(min-width: 576px){.ion-text-sm-uppercase{text-transform:uppercase !important}.ion-text-sm-lowercase{text-transform:lowercase !important}.ion-text-sm-capitalize{text-transform:capitalize !important}}@media(min-width: 768px){.ion-text-md-uppercase{text-transform:uppercase !important}.ion-text-md-lowercase{text-transform:lowercase !important}.ion-text-md-capitalize{text-transform:capitalize !important}}@media(min-width: 992px){.ion-text-lg-uppercase{text-transform:uppercase !important}.ion-text-lg-lowercase{text-transform:lowercase !important}.ion-text-lg-capitalize{text-transform:capitalize !important}}@media(min-width: 1200px){.ion-text-xl-uppercase{text-transform:uppercase !important}.ion-text-xl-lowercase{text-transform:lowercase !important}.ion-text-xl-capitalize{text-transform:capitalize !important}}/*# sourceMappingURL=text-transformation.css.map */

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/flex-utils.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
.ion-align-self-start{align-self:flex-start !important}.ion-align-self-end{align-self:flex-end !important}.ion-align-self-center{align-self:center !important}.ion-align-self-stretch{align-self:stretch !important}.ion-align-self-baseline{align-self:baseline !important}.ion-align-self-auto{align-self:auto !important}.ion-wrap{flex-wrap:wrap !important}.ion-nowrap{flex-wrap:nowrap !important}.ion-wrap-reverse{flex-wrap:wrap-reverse !important}.ion-justify-content-start{justify-content:flex-start !important}.ion-justify-content-center{justify-content:center !important}.ion-justify-content-end{justify-content:flex-end !important}.ion-justify-content-around{justify-content:space-around !important}.ion-justify-content-between{justify-content:space-between !important}.ion-justify-content-evenly{justify-content:space-evenly !important}.ion-align-items-start{align-items:flex-start !important}.ion-align-items-center{align-items:center !important}.ion-align-items-end{align-items:flex-end !important}.ion-align-items-stretch{align-items:stretch !important}.ion-align-items-baseline{align-items:baseline !important}/*# sourceMappingURL=flex-utils.css.map */

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/global.scss?ngGlobalStyle (3) ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */
/* Core CSS required for Ionic components to work properly */
/* Basic CSS for apps built with Ionic */
/* Optional CSS utils that can be commented out */
/* mixins scss */
.regular2XL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.regularXL {
  font-family: var(--ion-font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}

.regularL {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.regularM {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.regularS {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.regularXs {
  font-family: var(--ion-font-family);
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
}

.medium2XL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.mediumXL {
  font-family: var(--ion-font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}

.mediumL {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.mediumM {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.mediumS {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.mediumXs {
  font-family: var(--ion-font-family);
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
}

.semibold2XL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

.semiboldXL {
  font-family: var(--ion-font-family);
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
}

.semiboldL {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.semiboldM {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

.semiboldS {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.semiboldXs {
  font-family: var(--ion-font-family);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
}

.heading2XL {
  font-family: var(--ion-font-family);
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
}

.headingXL {
  font-family: var(--ion-font-family);
  font-size: 26px;
  font-weight: 700;
  line-height: 39px;
}

.headingL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}

.headingM {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.headingS {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
}

.headingXs {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.color-box {
  height: 50px; /* Adjust the height as needed */
  margin: 5px; /* Add margin for spacing */
}

.color-box.primary {
  background-color: #7257ff;
}

.color-box.primary-50 {
  background-color: rgba(114, 87, 255, 0.5019607843);
}

.color-box.primary-25 {
  background-color: rgba(114, 87, 255, 0.2509803922);
}

.color-box.primary-15 {
  background-color: rgba(114, 87, 255, 0.1490196078);
}

.color-box.dark {
  background-color: #343832;
}

.color-box.dark-50 {
  background-color: rgba(52, 56, 50, 0.5019607843);
}

.color-box.dark-25 {
  background-color: rgba(52, 56, 50, 0.2509803922);
}

.color-box.dark-15 {
  background-color: rgba(52, 56, 50, 0.1490196078);
}

.color-box.dark-10 {
  background-color: rgba(52, 56, 50, 0.1019607843);
}

.SmallButton {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  padding: 5px 10px;
  width: auto;
}
.SmallButton span {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.MediumButton {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  padding: 8px 30px;
  width: 70%;
}
.MediumButton span {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.LargeButton {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding: 8px 30px;
  width: 100%;
}
.LargeButton span {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.SmallButton span,
.MediumButton span,
.LargeButton span {
  align-items: center;
  display: flex;
  font-family: "Material Icons";
  justify-content: center;
  padding: 0 5px;
}

.primaryButton {
  border: none !important;
}

.secondaryButton {
  background-color: #ffffff !important;
}

.tertiaryButton {
  opacity: 0.5;
  border: none !important;
}

.hyperlinkButton {
  background-color: transparent !important;
  border: none !important;
}

.icon div ion-icon {
  margin: 0 5px;
}

.color-box {
  height: 50px; /* Adjust the height as needed */
  margin: 5px; /* Add margin for spacing */
}

.color-box.primary {
  background-color: #7257ff;
}

.color-box.primary-50 {
  background-color: rgba(114, 87, 255, 0.5019607843);
}

.color-box.primary-25 {
  background-color: rgba(114, 87, 255, 0.2509803922);
}

.color-box.primary-15 {
  background-color: rgba(114, 87, 255, 0.1490196078);
}

.color-box.dark {
  background-color: #343832;
}

.color-box.dark-50 {
  background-color: rgba(52, 56, 50, 0.5019607843);
}

.color-box.dark-25 {
  background-color: rgba(52, 56, 50, 0.2509803922);
}

.color-box.dark-15 {
  background-color: rgba(52, 56, 50, 0.1490196078);
}

.color-box.dark-10 {
  background-color: rgba(52, 56, 50, 0.1019607843);
}

.square-check {
  border: 2px solid rgba(9, 4, 32, 0.2509803922);
  height: 30px;
  position: relative;
  width: 30px;
}
.square-check:before {
  background-color: white;
  border-radius: 50%;
  display: none;
  height: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
}
.square-check:checked {
  background-color: #56c06d;
}
.square-check:checked:before {
  align-items: center;
  color: white;
  display: flex;
  justify-content: center;
}

.circle-check {
  border: 2px solid rgba(9, 4, 32, 0.2509803922);
  height: 30px;
  position: relative;
  width: 30px;
  border-radius: 50%;
}
.circle-check:before {
  background-color: white;
  border-radius: 50%;
  display: none;
  height: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
}
.circle-check:checked {
  background-color: #56c06d;
}
.circle-check:checked:before {
  align-items: center;
  color: white;
  display: flex;
  justify-content: center;
}

/* Style for the toggle switch */
.toggle-container {
  display: block;
  height: 20px;
  position: relative;
  width: 40px;
}

.toggle-input {
  display: none;
}

.toggle-slider {
  background-color: rgba(9, 4, 32, 0.2509803922);
  border-radius: 34px;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.toggle-slider:before {
  background-color: white;
  border-radius: 50%;
  bottom: 0px;
  content: "";
  height: 16px;
  left: 0px;
  position: absolute;
  right: 0;
  top: 2px;
  transition: 0.4s;
  width: 16px;
}

.toggle-input:checked + .toggle-slider {
  background-color: #7257ff;
}

.toggle-input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.checkbox-container label,
.toggle-container label {
  display: block;
}

.special-form {
  display: flex;
  flex-direction: column;
}
.special-form .special-label {
  font-family: var(--ion-font-family);
  margin-bottom: 5px;
}
.special-form .special-radio {
  height: 30px;
  width: 30px;
}

.color-box {
  height: 50px; /* Adjust the height as needed */
  margin: 5px; /* Add margin for spacing */
}

.color-box.primary {
  background-color: #7257ff;
}

.color-box.primary-50 {
  background-color: rgba(114, 87, 255, 0.5019607843);
}

.color-box.primary-25 {
  background-color: rgba(114, 87, 255, 0.2509803922);
}

.color-box.primary-15 {
  background-color: rgba(114, 87, 255, 0.1490196078);
}

.color-box.dark {
  background-color: #343832;
}

.color-box.dark-50 {
  background-color: rgba(52, 56, 50, 0.5019607843);
}

.color-box.dark-25 {
  background-color: rgba(52, 56, 50, 0.2509803922);
}

.color-box.dark-15 {
  background-color: rgba(52, 56, 50, 0.1490196078);
}

.color-box.dark-10 {
  background-color: rgba(52, 56, 50, 0.1019607843);
}

.color-box {
  height: 50px; /* Adjust the height as needed */
  margin: 5px; /* Add margin for spacing */
}

.color-box.primary {
  background-color: #7257ff;
}

.color-box.primary-50 {
  background-color: rgba(114, 87, 255, 0.5019607843);
}

.color-box.primary-25 {
  background-color: rgba(114, 87, 255, 0.2509803922);
}

.color-box.primary-15 {
  background-color: rgba(114, 87, 255, 0.1490196078);
}

.color-box.dark {
  background-color: #343832;
}

.color-box.dark-50 {
  background-color: rgba(52, 56, 50, 0.5019607843);
}

.color-box.dark-25 {
  background-color: rgba(52, 56, 50, 0.2509803922);
}

.color-box.dark-15 {
  background-color: rgba(52, 56, 50, 0.1490196078);
}

.color-box.dark-10 {
  background-color: rgba(52, 56, 50, 0.1019607843);
}

.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-input {
  border-radius: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 10px;
  width: 200px;
}

.dropdown-content {
  background-color: #fff;
  border-top: none;
  border: 1px solid #ccc;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.dropdown-item {
  color: #7257ff;
  display: block;
  padding: 10px;
  text-decoration: none;
}

.dropdown-item:hover:hover {
  background: rgba(114, 87, 255, 0.1490196078);
}

.regular2XL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.regularXL {
  font-family: var(--ion-font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}

.regularL {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.regularM {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.regularS {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.regularXs {
  font-family: var(--ion-font-family);
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
}

.medium2XL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.mediumXL {
  font-family: var(--ion-font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}

.mediumL {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.mediumM {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.mediumS {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.mediumXs {
  font-family: var(--ion-font-family);
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
}

.semibold2XL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

.semiboldXL {
  font-family: var(--ion-font-family);
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
}

.semiboldL {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.semiboldM {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

.semiboldS {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.semiboldXs {
  font-family: var(--ion-font-family);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
}

.heading2XL {
  font-family: var(--ion-font-family);
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
}

.headingXL {
  font-family: var(--ion-font-family);
  font-size: 26px;
  font-weight: 700;
  line-height: 39px;
}

.headingL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}

.headingM {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.headingS {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
}

.headingXs {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

footer {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  left: 0;
  right: 0;
}

#block-footer {
  min-height: 60px;
}
#block-footer .previewFooter {
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  width: 100%;
}
#block-footer .previewFooter img {
  width: 100%;
}
#block-footer .menuLinker {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
#block-footer .menuLinker li {
  margin-bottom: 0;
}

.footerWrapper {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: space-around;
  position: relative;
  margin: 0 10px;
  transition: height 0.2s ease-out;
  z-index: 3;
}
.footerWrapper.expandFooterWrapper, .footerWrapper.circleFooterWrapper {
  margin: 5px;
}
.footerWrapper.inactive {
  background-color: grey !important;
  height: 5px;
  overflow: hidden;
}
.footerWrapper ul {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
.footerWrapper ul li {
  align-items: center;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 15px;
}
.footerWrapper ul li p {
  color: var(--ion-color-primary) !important;
  font-size: 12px;
  margin: 0;
}
.footerWrapper ul li span {
  color: var(--ion-color-primary) !important;
  padding: 5px;
}
.footerWrapper li:active {
  background: var(--primary-primary-15, rgba(114, 87, 255, 0.15));
}

.globalColors i,
.globalColors p,
.globalColors .nav-item.activeMenuItem {
  color: var(--ion-color-primary) !important;
}

.footerPlaceholder {
  height: 70px;
  width: 100%;
}

.toolbar .searchbar {
  padding: 10px 20px !important;
  position: relative;
  top: 5px;
  transform: translateZ(598px);
  transition: 0.3s ease;
  width: 100%;
  z-index: 598;
}
.toolbar .searchbar-ios {
  background: transparent;
  background: var(--ion-color-primary);
}
.toolbar .searchbar-ios .searchbar-input {
  color: #000 !important;
}

.searchbar-search-icon.sc-ion-searchbar-md {
  height: 24px;
  left: 8px;
  top: 4px;
  width: 20px;
  color: var(--ion-color-primary) !important;
}

.searchbarExpand .searchbar-search-icon.sc-ion-searchbar-md {
  left: 16px;
  top: 11px;
  width: 21px;
  height: 21px;
}

.toolbar-ios-primary .searchbar-ios .searchbar-search-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2013%2013'><path%20fill='rgba(0,%200,%200,%200.5)'%20d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1%20M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0%20L5,0z'/><line%20stroke='rgba(0,%200,%200,%200.5)'%20stroke-miterlimit='10'%20x1='12.6'%20y1='12.6'%20x2='8.2'%20y2='8.2'/></svg>") !important;
  margin-left: 0 !important;
  margin-top: 5px;
}

.toolbar-ios-primary .searchbar-ios .searchbar-clear-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='rgba(0,%200,%200,%200.5)'%20d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z%20M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>") !important;
}

#searchField {
  background: white;
  display: flex;
  justify-content: center;
  position: relative;
}
#searchField form {
  width: 100%;
  margin: 0 10px 0;
}
#searchField .searchbar-input {
  background: #f7f8fc;
  border-radius: 5px;
  border: 1px solid #e4e7ef;
  box-shadow: none;
  padding: 5px 35px;
  width: 100%;
}

.searchbar-input {
  max-height: 40px;
}

.rightHeaderBtns {
  flex: 1 1 50%;
  justify-content: flex-end;
  margin-right: 15px;
}
.rightHeaderBtns .material-icons-outlined {
  background: #ece8ff;
  border-radius: 5px;
  color: var(--ion-color-primary) !important;
}

.leftHeaderBtns {
  color: var(--ion-color-primary) !important;
  flex: 1 1 50%;
  justify-content: start;
  margin-left: 15px;
}
.leftHeaderBtns .backarrow {
  background: #ece8ff;
  border-radius: 5px;
  color: var(--ion-color-primary) !important;
  height: 0;
}
.leftHeaderBtns .material-icons-outlined {
  background: #ece8ff;
  border-radius: 5px;
  color: var(--ion-color-primary) !important;
}

button[menutoggle-ios] span.button-inner {
  align-items: left;
  justify-content: left;
}

ion-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  --background: transparent;
}

ion-searchbar {
  margin: 10px 0;
}

.back-button {
  font-size: 2rem;
  margin: 0 !important;
  top: 30px;
}

ion-toolbar ion-title {
  left: 0;
  padding: 0;
}

[dir=rtl] header ion-buttons {
  left: 15px;
  right: auto;
}

[dir=ltr] .toolbar .searchbar-ios .searchbar-ios-cancel {
  left: 0px;
}

[dir=rtl] .toolbar .searchbar-ios .searchbar-ios-cancel {
  right: 0px;
}

.toolbar .points__counter {
  background: #fff !important;
  border-radius: 50px;
  padding: 0 0.938;
}
.toolbar .points__counter .button-inner {
  flex-direction: column;
}
.toolbar .points__counter + button {
  margin-right: 5px;
}

.toolbar .cart__counter ion-badge {
  border-radius: 50%;
  font-size: 0.5rem;
  height: 1.125rem;
  line-height: 1.125rem;
  padding: 0;
  position: absolute;
  right: -0.25rem;
  text-align: center;
  top: -0.25rem;
  width: 1.125rem;
}

.tabs-md[tabsPlacement=top] > .tabbar::after,
.footer-md::before,
.tabs-md[tabsPlacement=bottom] > .tabbar::before {
  background-image: none !important;
  height: 0 !important;
}

.toolbar-background {
  background: none !important;
}

.back-button-text-ios {
  display: none;
}

.back-button-icon-ios {
  font-size: 2.4rem;
  margin-top: 10px !important;
}

button {
  background: transparent;
}

.headerButtonsWrapper {
  display: flex;
  flex: 1 0 100%;
}

.profilePic {
  border-radius: 75px;
  width: 40px !important;
  height: auto;
  margin-left: 15px;
  padding: 3px;
}

.withHeaderShadow {
  border-radius: 10px;
  border: 1px solid rgba(86, 126, 220, 0.1);
  box-shadow: 0px 3px 10px 0px rgba(86, 126, 220, 0.1);
  margin: 10px;
}

header {
  padding: 0;
}
header .previewHeader {
  display: flex;
}
header .previewHeader img {
  width: 100%;
}
header .menuLinker {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
header .menuLinker li {
  margin-bottom: 0;
}
header .singleMenuSettings {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  margin-left: -25px;
}
header .menuItemData,
header .gHeaderBannerData {
  padding-left: 25px;
}
header .menuItemData .colorLabel,
header .gHeaderBannerData .colorLabel {
  margin: 20px auto;
  float: left;
}
header .menuItemData .mat-form-field,
header .gHeaderBannerData .mat-form-field {
  margin-top: 10px;
  margin-left: 10px;
}
header .deleteMenuItem,
header .deleteGBannerItem {
  color: #cb2120;
  border: none;
  font-size: 19px;
  height: 30px;
  margin-left: 10px;
  background-color: white;
  cursor: pointer;
  align-self: flex-start;
}
header #headerMainAreaWrapper {
  height: 50px;
}

.previewFields ul {
  margin-bottom: 50px;
}
.previewFields ul li {
  margin-bottom: 20px;
}

.fileUpload {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 2px 12px 40px rgba(0, 0, 0, 0.1607843137);
  border-radius: 5px;
  padding: 15px 10px;
  font: normal normal normal 15px/23px Poppins;
  color: #7694e1;
  cursor: pointer;
  margin-bottom: 20px;
}
.fileUpload input {
  display: none;
}

.fileUploadTitle {
  font: 400 16px/28px Roboto, "Helvetica Neue", sans-serif;
  letter-spacing: normal;
  margin: 0 0 30px;
  float: left;
  margin-right: 30px;
}
@media screen and (max-width: 1170px) {
  .fileUploadTitle {
    width: 100%;
    display: block;
  }
}

.cart__counter {
  position: relative;
}

.quantitySearch {
  left: -5px;
  position: absolute;
  top: 18px;
}

.quantityNoSearch {
  right: 0;
  position: absolute;
  top: 18px;
}

.headerActionBtns {
  flex: 1 0 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
}
.headerActionBtns.activeAdMobHeader {
  top: 60px;
}
.headerActionBtns .seachActive {
  max-width: 100%;
}
.headerActionBtns .seachActive button {
  margin-left: 5px;
}
.headerActionBtns .headerRightBtns {
  display: flex;
}
.headerActionBtns .headerRightBtns > button span {
  margin-left: 10px;
}

ion-toolbar .sc-ion-searchbar-ios-h {
  align-items: center;
  display: flex;
  padding: 5px 10px 0 0;
}

#searchField {
  background: none;
  width: 100%;
}
#searchField input {
  background: #f7f8fc;
  border-radius: 5px;
  border: 1px solid #e4e7ef;
  display: flex;
  width: auto;
  justify-content: center;
  align-items: center;
  height: 30px;
}

.searchOpened {
  position: relative;
}
.searchOpened input {
  max-width: 80px;
}
.searchOpened span {
  position: absolute;
  left: 0;
  background: transparent !important;
}

.squareIconBG span {
  border-radius: 5px;
  padding: 5px;
  font-size: 20px;
}

.circleIconBG span {
  border-radius: 20px;
  padding: 5px;
  font-size: 20px;
}

.squareIconBG span,
.circleIconBG span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.globalColors.squareIconBG .headerActionBtns span, .globalColors.circleIconBG .headerActionBtns span {
  background: var(--ion-color-primary-opacity) !important;
}
.globalColors.noIconBG span {
  padding: 0 !important;
}

.noIconBG .headerActionBtns span {
  background: transparent !important;
}

.disable_header {
  background: #cacaca !important;
}

.headerLeftBtns,
.headerRightBtns {
  display: flex;
}
.headerLeftBtns span,
.headerRightBtns span {
  height: 24px;
  padding: 15px;
  width: 24px;
  font-size: 20px;
  display: flex;
  align-items: center;
}

.arrowBack {
  border-radius: 5px; /* Optional styling */
  min-height: 32px;
  width: 30px;
  height: 33px;
  display: flex;
}
.arrowBack span.button-inner {
  height: 24px;
  padding: 15px;
  width: 24px;
  font-size: 20px;
  display: flex;
  align-items: center;
}

.noIconBG .headerActionBtns .headerRightBtns > button {
  margin-left: 0;
}

.globalColors span {
  color: var(--ion-color-primary) !important;
}

.backgroundImageHeader {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#searchField mat-icon {
  background: transparent !important;
}

.color-box {
  height: 50px; /* Adjust the height as needed */
  margin: 5px; /* Add margin for spacing */
}

.color-box.primary {
  background-color: #7257ff;
}

.color-box.primary-50 {
  background-color: rgba(114, 87, 255, 0.5019607843);
}

.color-box.primary-25 {
  background-color: rgba(114, 87, 255, 0.2509803922);
}

.color-box.primary-15 {
  background-color: rgba(114, 87, 255, 0.1490196078);
}

.color-box.dark {
  background-color: #343832;
}

.color-box.dark-50 {
  background-color: rgba(52, 56, 50, 0.5019607843);
}

.color-box.dark-25 {
  background-color: rgba(52, 56, 50, 0.2509803922);
}

.color-box.dark-15 {
  background-color: rgba(52, 56, 50, 0.1490196078);
}

.color-box.dark-10 {
  background-color: rgba(52, 56, 50, 0.1019607843);
}

.input {
  display: block;
  margin: 10px;
  border-radius: 10px;
  gap: 10px;
  padding: 14px 15px;
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.input.input-active {
  states: "active";
  show-label: true;
  show-icon: true;
  error-message: true;
  border: 1.5px solid rgba(9, 4, 32, 0.1490196078);
}
.input.input-disabled {
  states: "disabled";
  show-label: true;
  show-icon: true;
  error-message: true;
  background: rgba(9, 4, 32, 0.1490196078);
  border: 1.5px solid rgba(9, 4, 32, 0.1490196078);
}
.input.input-error {
  states: "error";
  show-label: true;
  show-icon: true;
  error-message: true;
  background: #ffe1e1;
  border: 1.5px solid #ff3535;
}

.input.input-active {
  states: "active";
  show-label: true;
  show-icon: true;
  error-message: true;
  border: 1.5px solid rgba(9, 4, 32, 0.1490196078);
}
.input.input-active:focus {
  box-shadow: 0px 1px 8px 0px #7257ff;
  border-color: #7257ff;
  color: #7257ff;
}

.input.input-disabled {
  states: "disabled";
  show-label: true;
  show-icon: true;
  error-message: true;
  background: rgba(9, 4, 32, 0.1490196078);
  border: 1.5px solid rgba(9, 4, 32, 0.1490196078);
}

.input.input-error {
  states: "error";
  show-label: true;
  show-icon: true;
  error-message: true;
  background: #ffe1e1;
  border: 1.5px solid #ff3535;
}
.input.input-error:focus {
  box-shadow: 0px 1px 8px 0px #ff3535;
  border-color: #ff3535;
}

.rtl_lang .expand-nav-item.activeMenuItem p {
  padding: 0 0 0 10px;
}

.navbar {
  align-items: center;
  display: flex;
  border-radius: 0px;
  border-top: 1px solid rgba(114, 87, 255, 0.15);
  box-shadow: 0px -1px 10px 10px rgba(52, 56, 50, 0.1019607843);
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
}
.navbar .material-icons-outlined {
  font-size: 20px;
}

.navbarHeight {
  align-items: center;
  display: flex;
  border-top: 1px solid rgba(114, 87, 255, 0.15);
  box-shadow: 0px -1px 10px 10px rgba(52, 56, 50, 0.1019607843);
  flex-wrap: wrap;
  height: auto;
  justify-content: space-evenly;
}

.nav-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  justify-content: center;
  padding: 10px;
  opacity: 0.5;
  text-align: center;
  transition: border 0.3s ease, color 0.3s ease;
}

.nav-item.activeMenuItem {
  border-top: 3px solid var(--ion-color-primary);
  opacity: 1;
  padding-top: 7px;
}

.nav-item p {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  margin: 5px 0;
  font-size: 10px;
}

/* Additional styles for the expand-navbar */
.expandHeight {
  align-items: center;
  display: flex;
  border-radius: 10px;
  box-shadow: 0px -2px 5px 0px rgba(52, 56, 50, 0.05);
  flex-wrap: wrap;
  height: auto;
  justify-content: space-evenly;
}

.expand-navbar {
  align-items: center;
  display: flex;
  border-radius: 10px;
  border: 1px solid rgba(114, 87, 255, 0.15);
  box-shadow: 0px -2px 5px 0px rgba(52, 56, 50, 0.05);
  justify-content: space-evenly;
  width: 100%;
}

.expand-nav-item {
  border-collapse: collapse;
  border-spacing: 0;
  opacity: 0.5;
  text-align: center;
  transition: border 0.3s ease, color 0.3s ease;
  margin: 13px 7px;
}

.expand-nav-item p {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  display: none;
  opacity: 0;
  position: relative;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  vertical-align: middle;
  visibility: hidden;
}

.expand-nav-item.activeMenuItem {
  background: var(--ion-color-primary-opacity);
  border-radius: 10px;
  opacity: 1;
  height: 70%;
}

.expand-nav-item.activeMenuItem p {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  display: table-cell;
  opacity: 1;
  padding-right: 10px;
  visibility: visible;
}

.expand-nav-item.activeMenuItem i,
.expand-nav-item i {
  display: table-cell;
  height: 40px;
  padding: 0 10px;
  position: relative;
  vertical-align: middle;
}

/* Additional styles for the CircleNavbar */
.CircleNavbarHeight {
  align-items: center;
  display: flex;
  background-color: transparent;
  border-radius: 7px;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 0;
  height: auto;
  width: 100%;
}

.CircleNavbar {
  align-items: center;
  display: flex;
  background-color: transparent;
  border-radius: 7px;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 0;
  height: 80px;
  width: 100%;
}

.CircleNavItem {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 10px;
  position: relative;
  opacity: 1;
}

.CircleNavItem p {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  display: block;
  margin-top: 5px;
  text-align: center;
  transition: opacity 0.3s ease;
}

.CircleNavItem i {
  display: block;
  margin-bottom: 5px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.special-icon .shopping-bag-wrapper {
  background-color: var(--ion-color-primary);
  border-radius: 40px;
  box-shadow: 0px 5px 0px 5px rgba(52, 56, 50, 0.1019607843);
  padding: 15px;
  position: relative;
  top: -40px;
  z-index: 1;
}

.special-icon i {
  color: #ffffff !important;
}

.color-box {
  height: 50px; /* Adjust the height as needed */
  margin: 5px; /* Add margin for spacing */
}

.color-box.primary {
  background-color: #7257ff;
}

.color-box.primary-50 {
  background-color: rgba(114, 87, 255, 0.5019607843);
}

.color-box.primary-25 {
  background-color: rgba(114, 87, 255, 0.2509803922);
}

.color-box.primary-15 {
  background-color: rgba(114, 87, 255, 0.1490196078);
}

.color-box.dark {
  background-color: #343832;
}

.color-box.dark-50 {
  background-color: rgba(52, 56, 50, 0.5019607843);
}

.color-box.dark-25 {
  background-color: rgba(52, 56, 50, 0.2509803922);
}

.color-box.dark-15 {
  background-color: rgba(52, 56, 50, 0.1490196078);
}

.color-box.dark-10 {
  background-color: rgba(52, 56, 50, 0.1019607843);
}

.phone-contN {
  align-items: center;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  margin: 10px;
  padding: 14px 15px;
}
.phone-contN .phone-input-number-flag {
  margin-right: 5px;
}
.phone-contN .phone-input-number-input {
  border: 1px solid #ccc;
  color: #333;
  font-family: "Poppins";
  align-items: center;
  border-radius: 10px;
  gap: 10px;
  margin: 10px;
  padding: 14px 15px;
}
.phone-contN .phone-input-number-input:focus {
  border: 2px solid #00f;
  color: #00f;
  font-family: "Poppins";
}
.phone-contN .phone-input-number-input:disabled {
  border: 1px dashed #aaa;
  color: #aaa;
  font-family: "Poppins";
}

.regular2XL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.regularXL {
  font-family: var(--ion-font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}

.regularL {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.regularM {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.regularS {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.regularXs {
  font-family: var(--ion-font-family);
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
}

.medium2XL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.mediumXL {
  font-family: var(--ion-font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}

.mediumL {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.mediumM {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.mediumS {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.mediumXs {
  font-family: var(--ion-font-family);
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
}

.semibold2XL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

.semiboldXL {
  font-family: var(--ion-font-family);
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
}

.semiboldL {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.semiboldM {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

.semiboldS {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.semiboldXs {
  font-family: var(--ion-font-family);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
}

.heading2XL {
  font-family: var(--ion-font-family);
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
}

.headingXL {
  font-family: var(--ion-font-family);
  font-size: 26px;
  font-weight: 700;
  line-height: 39px;
}

.headingL {
  font-family: var(--ion-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}

.headingM {
  font-family: var(--ion-font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.headingS {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
}

.headingXs {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.horizontal-slider-container.listStyle .roundedStyle .sale {
  left: 70px;
}
.horizontal-slider-container.listStyle .horizonal-slider {
  display: flex;
  overflow-x: auto;
  justify-content: space-between;
  padding-bottom: 10px !important;
}
.horizontal-slider-container.listStyle .horizonal-slider.oneColumn {
  margin-left: 10px;
  padding: 0;
}
.horizontal-slider-container.listStyle .horizonal-slider.oneColumn .fade {
  padding: 10px 0px 0 10px;
}
.horizontal-slider-container.listStyle .horizonal-slider.oneColumn .flex-container {
  flex-direction: row;
  height: 100%;
}
.horizontal-slider-container.listStyle .horizonal-slider.oneColumn .flex-container .picture-container {
  max-width: unset;
  height: auto;
}
.horizontal-slider-container.listStyle .horizonal-slider.twoColumns .flex-container {
  width: 150px;
}
.horizontal-slider-container.listStyle .horizonal-slider.threeColumns .flex-container {
  width: 115px;
}
.horizontal-slider-container ion-spinner {
  align-self: center;
}
.horizontal-slider-container .roundedLoader {
  display: flex;
  float: right;
  align-self: center;
}
.horizontal-slider-container .mainPrice .option {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}
.horizontal-slider-container .mainPrice .option li {
  display: flex;
  flex-direction: column;
}
.horizontal-slider-container .mainPrice .centered {
  justify-content: center;
}
.horizontal-slider-container button {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  align-content: center;
  align-items: center;
  align-self: center;
  background-color: var(--ion-color-primary);
  border: none !important;
  color: #fff;
  display: flex;
  justify-content: center;
  padding: 5px 10px;
  width: auto;
}
.horizontal-slider-container button mat-icon {
  font-size: 18px;
  height: auto;
  width: auto;
}
.horizontal-slider-container img {
  border-radius: 10px;
  height: auto;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}
.horizontal-slider-container .sale {
  font-family: var(--ion-font-family);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  background: #ff3535;
  border-radius: 5px;
  box-shadow: none;
  color: #fff;
  position: absolute;
  text-align: center;
}
.horizontal-slider-container .flex-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.horizontal-slider-container .picture-container {
  border-radius: 10px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
  display: flex;
  height: 100%;
  justify-content: center;
  margin-bottom: 10px;
  max-height: 150px;
  max-width: 100%;
  position: relative;
}
.horizontal-slider-container .outContainer {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.horizontal-slider-container .outofstock {
  font-family: var(--ion-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: red;
  display: flex;
  text-align: center;
  padding-block-end: 1px;
  white-space: nowrap;
}
.horizontal-slider-container .horizonal-slider {
  display: grid;
  grid-gap: var(--grid-gap-small);
  list-style: none;
  margin: 0;
  padding: 15px 0;
}
.horizontal-slider-container .heading {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  display: -webkit-box;
  overflow: hidden;
  padding-top: 5px;
  text-overflow: ellipsis;
}
.horizontal-slider-container .price {
  font-family: var(--ion-font-family);
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  color: var(--ion-color-primary);
}
.horizontal-slider-container .strike {
  align-self: flex-start;
  color: var(--ion-color-primary);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 4px;
  text-decoration: line-through;
}
.horizontal-slider-container .mainPrice {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  color: black;
}
.horizontal-slider-container .mainPrice .fromText {
  color: #7c7c7c;
  font-size: 14px;
  font-weight: 400;
}
.horizontal-slider-container .pricesMainWrapper {
  display: flex;
  flex-direction: row;
}
.horizontal-slider-container .currency-symbol {
  padding-inline: 2px !important;
}

.oneColumn .pricesMainWrapper {
  padding: 0;
}
.oneColumn .heading {
  padding: 0;
}
.oneColumn .horizonal-slider {
  grid-template-columns: 1fr;
}
.oneColumn .flex-container {
  flex-direction: row;
  height: 100px;
  justify-content: space-between;
  width: 100%;
}
.oneColumn .picture-container {
  display: flex;
  height: auto;
  justify-content: center;
  position: relative;
  width: 55%;
  margin-bottom: 0;
}
.oneColumn .fade {
  align-self: flex-start;
  padding: 1px 10px;
  top: 0 !important;
  width: 100%;
  height: 100px;
}
.oneColumn .fade .description {
  height: 100%;
}
.oneColumn .glassStyle .fade {
  align-self: flex-start;
}
.oneColumn .glassStyle .heading {
  padding: 0px 0 5px;
}
.oneColumn .glassStyle .sale {
  right: 5px;
  padding: 2px;
  bottom: 5px;
  top: auto;
  left: auto;
}
.oneColumn .sharpStyle .pricesMainWrapper {
  padding: 0;
}
.oneColumn .sharpStyle .flex-container .sale {
  left: 3px;
  padding: 2px 5px;
}
.oneColumn .roundedStyle .sale {
  left: 50px;
  padding: 2px;
  top: 8px;
}
.oneColumn .roundedStyle .pricesMainWrapper {
  justify-content: flex-start;
}
.oneColumn .roundedStyle .pricesWrapper {
  flex-direction: column;
  display: flex;
}
.oneColumn .roundedStyle .horizontal-slider-container .strike {
  padding-right: 5px;
  padding-left: 0;
}
.oneColumn .roundedStyle .roundedButton {
  display: flex;
  float: right;
}
.oneColumn .roundedStyle .picture-container {
  clip-path: none;
}
.oneColumn .strike {
  padding: 10px;
}

.twoColumns .horizonal-slider {
  grid-template-columns: 1fr 1fr;
}
.twoColumns .flex-container {
  justify-content: space-between;
}
.twoColumns .description {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 10px;
}

.threeColumns .horizonal-slider {
  grid-template-columns: 1fr 1fr 1fr;
}
.threeColumns .simpleStyle .sale {
  left: 5px;
  padding: 2px;
  top: 5px;
}
.threeColumns .glassStyle .sale {
  left: 5px;
  padding: 2px;
  top: 5px;
}
.threeColumns .sharpStyle .flex-container .sale {
  border-radius: 0 10px 10px 0;
  left: 3px;
  padding: 2px 4px;
  top: 6px;
}
.threeColumns .sharpStyle button {
  padding: 5px;
}
.threeColumns .roundedStyle .sale {
  left: 45px;
  padding: 2px;
}
.threeColumns .roundedStyle button {
  height: 35px;
  width: 35px;
}
.threeColumns .flex-container {
  justify-content: space-between;
}
.threeColumns .description {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.simpleStyle .NoButton {
  min-height: 0 !important;
  justify-content: flex-start !important;
}
.simpleStyle .outofstock {
  padding-right: 5px;
  font-weight: 600;
  font-size: 13px;
  height: 37px;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
}
.simpleStyle .listStyle .oneColumn .item {
  width: 100%;
}
.simpleStyle .listStyle .oneColumn .picture-container {
  max-width: unset;
  width: 190px;
}
.simpleStyle .listStyle .twoColumns .item {
  width: 100%;
}
.simpleStyle .listStyle .twoColumns .picture-container {
  max-width: unset;
  width: 150px;
}
.simpleStyle .listStyle .gridStyle .threeColumns button mat-icon {
  display: none !important;
}
.simpleStyle .pricesMainWrapper {
  flex-direction: column;
}
.simpleStyle .sale {
  left: 10px;
  padding: 5px 8px;
  top: 10px;
}
.simpleStyle .pricesWrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  padding-bottom: 5px;
  align-items: center;
}
.simpleStyle .price {
  align-self: center;
}
.simpleStyle .strike {
  padding: 3px 5px;
}
.simpleStyle button {
  text-align: end;
  border-radius: 7px;
  padding: 5px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.simpleStyle button mat-icon {
  align-items: center;
  display: flex;
  font-size: 20px;
  padding-bottom: 1%;
}
.simpleStyle .pricesMiniWrapper {
  display: flex;
  flex-direction: row;
}
.simpleStyle .oneColumn .sale {
  padding: 2px;
}
.simpleStyle .twoColumns .description {
  min-height: 100px;
}
.simpleStyle .threeColumns .picture-container {
  margin-bottom: 0px;
}
.simpleStyle .threeColumns .mainPrice {
  font-size: 12px;
}
.simpleStyle .threeColumns .strike {
  font-size: 8px;
  padding: 0;
  align-self: center;
}
.simpleStyle .threeColumns button {
  font-size: 10px;
}
.simpleStyle .threeColumns button mat-icon {
  font-size: 12px;
}
.simpleStyle .threeColumns .outofstock {
  font-size: 12px;
}
.simpleStyle .gridStyle .threeColumns .picture-container {
  height: 100px;
}

.glassStyle .listStyle .twoColumns .flex-container {
  width: 185px !important;
}
.glassStyle .listStyle .twoColumns .picture-container {
  max-width: unset;
  height: auto;
}
.glassStyle .sale {
  left: 10px;
  padding: 5px 8px;
  top: 10px;
}
.glassStyle .oneColumn .fade {
  height: 85px;
  padding-top: 10px;
}
.glassStyle .oneColumn .picture-container {
  height: 85px;
  max-width: 85px;
}
.glassStyle .fade {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  bottom: 85px;
  height: 65px;
  position: relative;
}
.glassStyle .oneColumn .pricesWrapper {
  align-items: start;
}
.glassStyle .oneColumn .pricesWrapper .pricesMiniWrapper {
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
}
.glassStyle .oneColumn .pricesWrapper .strike {
  padding-top: 0;
}
.glassStyle .oneColumn .pricesWrapper .mainPrice {
  line-height: 15px;
}
.glassStyle .pricesWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  align-items: center;
}
.glassStyle .description {
  padding: 3px 8px;
}
.glassStyle .pricesMainWrapper {
  justify-content: space-between;
}
.glassStyle button {
  border-radius: 10px;
  padding: 8px;
}
.glassStyle button .material-icons {
  font-size: 17px;
}
.glassStyle .pricesMiniWrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  align-items: center;
}
.glassStyle .oneColumn .pricesWrapper {
  height: 50px;
}
.glassStyle .oneColumn .flex-container {
  height: 85px;
}
.glassStyle .oneColumn .description {
  justify-content: flex-start;
  padding: 0 5px;
  height: 100%;
}
.glassStyle .oneColumn .sale {
  right: 5px;
  padding: 2px;
  bottom: 5px;
  top: auto;
  left: auto;
}
.glassStyle .oneColumn .outofstock {
  align-self: flex-end;
}
.glassStyle .oneColumn .glassBtn {
  align-self: unset;
}
.glassStyle .twoColumns .heading {
  padding: 0;
}
.glassStyle .twoColumns .flex-container {
  position: relative;
}
.glassStyle .twoColumns .flex-container .fade {
  bottom: 0;
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.glassStyle .twoColumns .description {
  margin: 0;
  height: 100%;
  justify-content: center;
}
.glassStyle .twoColumns .mainPrice {
  line-height: 17px;
  font-size: 12px;
}
.glassStyle .twoColumns button {
  border-radius: 10px;
  padding: 5px;
}
.glassStyle .twoColumns .pricesWrapper {
  align-items: unset;
}
.glassStyle .twoColumns .pricesMiniWrapper {
  align-items: unset;
}
.glassStyle .twoColumns .strike {
  padding: 0 4px;
}
.glassStyle .twoColumns .outofstockPriceWrapper {
  flex-direction: column;
}
.glassStyle .twoColumns .material-icons-outlined {
  font-size: 16px;
}
.glassStyle .threeColumns .heading {
  padding: 0;
}
.glassStyle .threeColumns .flex-container {
  position: relative;
}
.glassStyle .threeColumns .flex-container .fade {
  bottom: 0;
  height: 45%;
  position: absolute;
  width: 100%;
}
.glassStyle .threeColumns .description {
  margin-top: 0px;
  min-height: 0;
}
.glassStyle .threeColumns .mainPrice {
  font-size: 10px;
}
.glassStyle .threeColumns .strike {
  font-size: 8px;
  padding: 4px 0 4px 2px;
}
.glassStyle .threeColumns .picture-container {
  display: flex;
  height: 240px;
  justify-content: center;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.glassStyle .threeColumns .sale {
  left: 5px;
  padding: 2px;
}
.glassStyle .threeColumns .pricesWrapper {
  margin-top: 0;
  flex-direction: column;
  align-items: flex-start;
}
.glassStyle .threeColumns button {
  border-radius: 5px;
  padding: 5px;
  align-self: end;
}
.glassStyle .threeColumns button .material-icons,
.glassStyle .threeColumns button .material-icons-outlined {
  font-size: 12px;
}
.glassStyle .threeColumns .outofstock {
  font-size: 10px;
  margin-left: auto;
}
.glassStyle .threeColumns .pricesMiniWrapper {
  margin-top: -3px;
}
.glassStyle .threeColumns img {
  max-width: unset;
  position: absolute;
}

.sharpStyle .picture-container {
  border-radius: 0;
  box-shadow: none;
}
.sharpStyle .flex-container {
  box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.1607843137);
}
.sharpStyle .sale {
  left: 10px;
  padding: 5px 8px;
  top: 10px;
}
.sharpStyle .listStyle .threeColumns,
.sharpStyle .listStyle .horizonal-slider {
  justify-content: normal;
}
.sharpStyle .listStyle .oneColumn button {
  margin-right: 10px;
}
.sharpStyle .listStyle .oneColumn .description {
  padding: 0;
  justify-content: center;
  height: 100%;
}
.sharpStyle .listStyle .oneColumn .fade {
  padding: 5px !important;
}
.sharpStyle .oneColumn .fade {
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  max-height: 100%;
  padding: 0 15px;
}
.sharpStyle .oneColumn .item {
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1607843137);
}
.sharpStyle .oneColumn .item img {
  border-radius: 0;
  box-sizing: border-box;
  max-width: unset;
  height: 100%;
}
.sharpStyle .oneColumn .picture-container {
  height: 100%;
  max-width: 95px;
  width: 100%;
  overflow: hidden;
}
.sharpStyle .oneColumn mat-icon {
  padding: 3px;
  border-radius: 10px;
}
.sharpStyle .oneColumn button {
  padding: 0;
  align-self: flex-end;
}
.sharpStyle .oneColumn .pricesWrapper {
  margin-top: 0px;
  flex-direction: column;
}
.sharpStyle .oneColumn .pricesWrapper .strike {
  padding: 2px 10px;
}
.sharpStyle .oneColumn .outofstock {
  justify-content: flex-end;
}
.sharpStyle .oneColumn .sale {
  padding: 2px 5px;
}
.sharpStyle .oneColumn .pricesMiniWrapper {
  flex-direction: row;
}
.sharpStyle .oneColumn .outofstockPriceWrapper {
  flex-direction: column;
  height: 45px;
}
.sharpStyle .oneColumn .pricesMiniWrapper {
  flex-direction: row;
  width: 100%;
}
.sharpStyle .oneColumn .heading {
  line-height: 17px;
}
.sharpStyle .twoColumns {
  display: grid;
  list-style: none;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.sharpStyle .twoColumns .flex-container {
  position: relative;
}
.sharpStyle .twoColumns .flex-container .fade {
  bottom: 0;
  height: auto;
  width: 100%;
  background: white;
  border-radius: 0;
}
.sharpStyle .twoColumns .heading {
  padding: 0;
}
.sharpStyle .twoColumns .description {
  margin: 0;
  padding: 5px 10px;
  box-sizing: border-box;
}
.sharpStyle .twoColumns .mainPrice {
  font-size: 12px;
  line-height: 17px;
}
.sharpStyle .twoColumns button {
  padding: 5px;
  align-self: flex-end;
  margin-bottom: 3px;
}
.sharpStyle .twoColumns .picture-container {
  border-radius: 0;
  width: 100%;
  overflow: hidden;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
  height: 100%;
  justify-content: center;
  margin-bottom: 0;
  max-width: 100%;
  position: relative;
  display: flex;
  max-height: 140px;
}
.sharpStyle .twoColumns .picture-container img {
  border-radius: 0;
  box-sizing: border-box;
  height: 100%;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}
.sharpStyle .twoColumns .outofstockPriceWrapper {
  flex-direction: column;
}
.sharpStyle .twoColumns .pricesWrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sharpStyle .twoColumns .pricesMiniWrapper {
  flex-direction: row;
}
.sharpStyle .twoColumns .outofstock {
  font-size: 10px;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.sharpStyle .twoColumns .heading {
  padding: 0;
}
.sharpStyle .threeColumns {
  box-sizing: border-box;
  display: grid;
  list-style: none;
  margin: 0;
  padding: 10px;
  width: 100%;
}
.sharpStyle .threeColumns .flex-container {
  position: relative;
}
.sharpStyle .threeColumns .flex-container .fade {
  bottom: 0;
  height: auto;
  width: 100%;
}
.sharpStyle .threeColumns .fromText {
  font-size: 12px;
}
.sharpStyle .threeColumns .description {
  box-sizing: border-box;
  height: 100%;
  justify-content: flex-start;
}
.sharpStyle .threeColumns .sale {
  border-radius: 0 10px 10px 0;
  left: 5px;
  padding: 2px 4px;
  top: 10px;
}
.sharpStyle .threeColumns .mainPrice {
  font-size: 10px;
}
.sharpStyle .threeColumns .strike {
  font-size: 8px;
  padding: 0;
  align-self: center;
}
.sharpStyle .threeColumns .picture-container {
  display: flex;
  height: 200px;
  justify-content: center;
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 0;
}
.sharpStyle .threeColumns .pricesWrapper {
  margin-top: 3px;
  flex-direction: column;
}
.sharpStyle .threeColumns button {
  margin-top: 5px;
  padding: 5px;
  align-self: end;
}
.sharpStyle .threeColumns .pricesMiniWrapper {
  margin-top: -3px;
  flex-direction: row;
}
.sharpStyle .threeColumns img {
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: unset;
  position: absolute;
}
.sharpStyle .threeColumns .outofstock {
  margin-left: auto;
  font-size: 10px;
}
.sharpStyle .pricesWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.sharpStyle .description {
  padding: 5px;
}
.sharpStyle .pricesMainWrapper {
  justify-content: space-between;
}
.sharpStyle button {
  padding: 8px;
}
.sharpStyle .pricesMiniWrapper {
  display: flex;
  flex-direction: column;
}
.sharpStyle .oneColumn .flex-container {
  height: 90px;
}
.sharpStyle .oneColumn .description {
  padding: 10px 0;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}

.roundedStyle .NoButton {
  margin-top: 10px !important;
  min-height: 0 !important;
}
.roundedStyle .listStyle .twoColumns .item {
  width: 100%;
}
.roundedStyle .listStyle .threeColumns .item {
  width: 100%;
}
.roundedStyle .pricesMiniWrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
.roundedStyle .sale {
  border-radius: 20px;
  left: 70%;
  padding: 2px 5px;
  top: 10px;
}
.roundedStyle .description {
  display: flex;
  flex-direction: column;
}
.roundedStyle .pricesMainWrapper {
  justify-content: center;
  text-align: center;
}
.roundedStyle .heading {
  font-family: var(--ion-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  display: flex;
  flex-direction: column-reverse;
  text-align: center;
}
.roundedStyle .heading .headingName {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roundedStyle .mainPrice {
  padding-right: 5px;
  text-align: center;
}
.roundedStyle button {
  border-radius: 50%;
  border: 4px solid white !important;
  fill: var(--ion-color-primary);
  filter: drop-shadow(0px 4px 25px rgba(0, 0, 0, 0.15));
  flex-shrink: 0;
  float: right;
  height: 40px;
  padding: 0;
  width: 40px;
}
.roundedStyle .oneColumn .description {
  justify-content: flex-start;
  height: auto;
}
.roundedStyle .oneColumn .sale {
  left: 65%;
  padding: 2px;
}
.roundedStyle .oneColumn .pricesMiniWrapper {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: left;
  padding-top: 5px;
}
.roundedStyle .oneColumn .heading {
  text-align: left;
}
.roundedStyle .oneColumn .mainPrice {
  padding-right: 10px;
  text-align: left;
}
.roundedStyle .oneColumn .item {
  padding: 5px;
}
.roundedStyle .oneColumn .outofstock {
  margin-left: auto;
}
.roundedStyle .oneColumn button {
  margin-left: auto;
  margin-top: -20px;
}
.roundedStyle .oneColumn .fade {
  padding: 10px 10px 0;
}
.roundedStyle .twoColumns .flex-container {
  justify-content: flex-start;
}
.roundedStyle .twoColumns .description {
  margin-top: -30px;
}
.roundedStyle .twoColumns .pricesMiniWrapper {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: left;
  margin: 0 auto;
}
.roundedStyle .twoColumns .pricesMiniWrapper .mainPrice {
  margin-right: 5px;
}
.roundedStyle .twoColumns .heading {
  margin-top: -10px;
  text-align: center;
  flex-direction: column-reverse;
}
.roundedStyle .twoColumns .pricesWrapper {
  display: flex;
  flex-direction: column-reverse;
}
.roundedStyle .twoColumns .picture-container {
  min-height: calc(100% - 65px);
  box-shadow: none;
}
.roundedStyle .twoColumns .roundedButton {
  display: flex;
  justify-content: center;
}
.roundedStyle .twoColumns .outofstock {
  justify-content: center;
}
.roundedStyle .twoColumns .outOfStockCart {
  background: grey;
}
.roundedStyle .threeColumns .flex-container {
  justify-content: flex-start;
}
.roundedStyle .threeColumns .sale {
  left: 60%;
  padding: 2px;
}
.roundedStyle .threeColumns .picture-container {
  display: flex;
  height: 200px;
  justify-content: center;
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 0;
}
.roundedStyle .threeColumns .description {
  margin-top: -10px;
  justify-content: flex-start;
}
.roundedStyle .threeColumns .pricesMiniWrapper {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: left;
  margin: 0 auto;
}
.roundedStyle .threeColumns .pricesMiniWrapper .mainPrice {
  margin-right: 0;
  padding-right: 0;
  font-size: 10px;
}
.roundedStyle .threeColumns .mainPrice {
  font-size: 10px;
}
.roundedStyle .threeColumns .strike {
  font-size: 8px;
  align-self: center;
}
.roundedStyle .threeColumns .heading {
  margin-top: -12px;
  text-align: center;
  flex-direction: column-reverse;
}
.roundedStyle .threeColumns .pricesWrapper {
  display: flex;
  flex-direction: column-reverse;
}
.roundedStyle .threeColumns .roundedButton {
  display: flex;
  justify-content: center;
}
.roundedStyle .threeColumns img {
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: unset;
  position: absolute;
}
.roundedStyle .threeColumns .outOfStockCart {
  background: grey;
}
.roundedStyle .threeColumns .outofstock {
  justify-content: center;
}

.cleanStyle .picture-container {
  border-radius: 0;
  box-shadow: none;
}
.cleanStyle .flex-container {
  box-shadow: none;
}
.cleanStyle .sale {
  left: 10px;
  padding: 5px 8px;
  top: 10px;
}
.cleanStyle .threeColumns {
  box-sizing: border-box;
  display: grid;
  list-style: none;
  margin: 0;
  padding: 10px;
  width: 100%;
}
.cleanStyle .threeColumns .flex-container {
  position: relative;
  justify-content: flex-start;
}
.cleanStyle .threeColumns .flex-container .fade {
  bottom: 0;
  height: auto;
  width: 100%;
}
.cleanStyle .threeColumns .fromText {
  font-size: 12px;
}
.cleanStyle .threeColumns .description {
  box-sizing: border-box;
  height: 100%;
  justify-content: flex-start;
  flex-direction: column-reverse;
}
.cleanStyle .threeColumns .sale {
  border-radius: 0 10px 10px 0;
  left: 5px;
  padding: 2px 4px;
  top: 10px;
}
.cleanStyle .threeColumns .mainPrice {
  font-size: 15px;
}
.cleanStyle .threeColumns .strike {
  font-size: 11px;
  padding: 0;
  align-self: center;
  margin-left: 5px;
}
.cleanStyle .threeColumns .picture-container {
  display: flex;
  height: 200px;
  justify-content: center;
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 20px;
}
.cleanStyle .threeColumns .pricesWrapper {
  margin-top: 3px;
  flex-direction: column;
}
.cleanStyle .threeColumns .cleanBtn {
  display: flex;
  justify-content: end;
  position: absolute;
  right: 0px;
  bottom: 39%;
}
.cleanStyle .threeColumns .cleanBtn button {
  margin-top: 5px;
  padding: 5px;
  align-self: end;
  border-radius: 50%;
}
.cleanStyle .threeColumns .cleanBtn button mat-icon {
  font-size: 24px;
}
.cleanStyle .threeColumns .pricesMiniWrapper {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.cleanStyle .threeColumns .currency-symbol {
  display: none;
}
.cleanStyle .threeColumns img {
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: unset;
  position: absolute;
}
.cleanStyle .threeColumns .outofstock {
  margin-left: auto;
  font-size: 10px;
}
.cleanStyle .threeColumns .heading {
  display: block;
}
.cleanStyle .threeColumns .heading .headingName {
  color: var(--ion-color-secondary);
  max-height: 61px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cleanStyle .pricesWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.cleanStyle .description {
  padding: 5px;
}
.cleanStyle .pricesMainWrapper {
  justify-content: space-between;
}
.cleanStyle button {
  padding: 8px;
}
.cleanStyle .pricesMiniWrapper {
  display: flex;
  flex-direction: column;
}

.glassStyle .listStyle .oneColumn .item,
.sharpStyle .listStyle .oneColumn .item,
.roundedStyle .listStyle .oneColumn .item {
  padding: 0;
}
.glassStyle .listStyle .oneColumn .picture-container,
.sharpStyle .listStyle .oneColumn .picture-container,
.roundedStyle .listStyle .oneColumn .picture-container {
  width: 160px !important;
}
.glassStyle .listStyle .oneColumn button,
.sharpStyle .listStyle .oneColumn button,
.roundedStyle .listStyle .oneColumn button {
  margin-right: 10px;
}
.glassStyle .listStyle .oneColumn .description,
.sharpStyle .listStyle .oneColumn .description,
.roundedStyle .listStyle .oneColumn .description {
  padding: 0;
  justify-content: center;
  height: 100%;
}
.glassStyle .listStyle .oneColumn .fade,
.sharpStyle .listStyle .oneColumn .fade,
.roundedStyle .listStyle .oneColumn .fade {
  padding: 5px !important;
}
.glassStyle .listStyle .oneColumn img,
.sharpStyle .listStyle .oneColumn img,
.roundedStyle .listStyle .oneColumn img {
  padding: 5px;
  box-sizing: border-box;
}

.pricesMiniWrapper.variableProductPrices {
  flex-direction: row;
  justify-content: space-between;
  width: auto;
}

.roundedStyle .listStyle .oneColumn .pricesWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.sp-1 {
  padding-inline-start: 2px;
}

.color-box {
  height: 50px; /* Adjust the height as needed */
  margin: 5px; /* Add margin for spacing */
}

.color-box.primary {
  background-color: #7257ff;
}

.color-box.primary-50 {
  background-color: rgba(114, 87, 255, 0.5019607843);
}

.color-box.primary-25 {
  background-color: rgba(114, 87, 255, 0.2509803922);
}

.color-box.primary-15 {
  background-color: rgba(114, 87, 255, 0.1490196078);
}

.color-box.dark {
  background-color: #343832;
}

.color-box.dark-50 {
  background-color: rgba(52, 56, 50, 0.5019607843);
}

.color-box.dark-25 {
  background-color: rgba(52, 56, 50, 0.2509803922);
}

.color-box.dark-15 {
  background-color: rgba(52, 56, 50, 0.1490196078);
}

.color-box.dark-10 {
  background-color: rgba(52, 56, 50, 0.1019607843);
}

.search-bar {
  align-items: center;
  display: flex;
  position: relative;
}

.search-wrapper {
  align-items: center;
  display: flex;
  position: relative;
}

.search-input {
  border-radius: 5px;
  border: 1px solid #ccc;
  color: #7257ff;
  padding: 10px 30px 10px 10px;
  position: relative;
}
.search-input:focus {
  border-color: #7257ff;
}

.search-button {
  background-color: transparent;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  padding: 10px;
  position: absolute;
  right: 10px;
  z-index: 1;
}

.color-box {
  height: 50px; /* Adjust the height as needed */
  margin: 5px; /* Add margin for spacing */
}

.color-box.primary {
  background-color: #7257ff;
}

.color-box.primary-50 {
  background-color: rgba(114, 87, 255, 0.5019607843);
}

.color-box.primary-25 {
  background-color: rgba(114, 87, 255, 0.2509803922);
}

.color-box.primary-15 {
  background-color: rgba(114, 87, 255, 0.1490196078);
}

.color-box.dark {
  background-color: #343832;
}

.color-box.dark-50 {
  background-color: rgba(52, 56, 50, 0.5019607843);
}

.color-box.dark-25 {
  background-color: rgba(52, 56, 50, 0.2509803922);
}

.color-box.dark-15 {
  background-color: rgba(52, 56, 50, 0.1490196078);
}

.color-box.dark-10 {
  background-color: rgba(52, 56, 50, 0.1019607843);
}

.custom-text-area textarea {
  border-radius: 8px;
  border: 1.5px solid rgba(9, 4, 32, 0.1490196078);
  box-sizing: border-box;
  height: 220px;
  margin: 25px;
  outline: none;
  padding: 10px;
  resize: none;
  width: 350;
}

.html-md {
  font-size: var(--avaris-base-font-size-md);
}

.html-ios {
  font-size: var(--avaris-base-font-size-ios);
  margin-top: 0;
  background: white;
}

html {
  background: white;
}

.discount-amount {
  color: red !important;
}

.toast-center {
  --background: #ffffff;
  --color: #000000;
  animation: fadeInUp 2s, fadeOutDown 2s 2.5s;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

input {
  appearance: none;
  box-shadow: none;
  border-radius: 0;
}

.list-ios > .item-block:first-child {
  border-top: 0;
}

.widget {
  max-width: 100%;
}

ion-header {
  position: relative !important;
}
ion-header.stickyHeader {
  position: absolute !important;
}

ion-row {
  margin: 10px 20px 0;
}
ion-row ion-row {
  padding: 0;
  height: 100%;
  margin: 0;
  width: 100%;
}
ion-row ion-row ion-col {
  height: 100%;
  padding: 10px !important;
}
ion-row .widget {
  margin-bottom: 10px;
}

ion-content {
  position: relative !important;
}
ion-content.stickyHeaderContent {
  --offset-top: -60px !important;
}

page-product-single .stickyHeaderContent {
  --offset-top: 0px !important;
}

.fixed-content,
.scroll-content {
  margin: 0 !important;
}

.scroll-content {
  margin-bottom: 60px !important;
}

.loading-content {
  text-transform: capitalize;
}

.segment-md .segment-button {
  text-transform: capitalize;
}

.can-go-back button[menutoggle] {
  display: none;
}

.can-go-back ion-header ion-back-button {
  display: block;
}

builder-blocks {
  width: 100%;
}

text-template .widget p {
  margin: 0;
}

.grid {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

[dir=rtl] product-details ion-card * {
  text-align: right !important;
}
[dir=rtl] product-details .product-details__quantity__button--minus {
  border-radius: 0px 5px 5px 0px;
}
[dir=rtl] product-details .product-details__quantity__button--plus {
  border-radius: 5px 0px 0px 5px;
}
[dir=rtl] product-details .product-details__quantity__input {
  text-align: center !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-transition: background-color 600000s 0s, color 600000s 0s;
  transition: background-color 600000s 0s, color 600000s 0s;
}

.header-md::after {
  background-image: none !important;
}

video-template iframe {
  width: 100%;
}

page-product-single ion-header {
  position: absolute !important;
}
page-product-single ion-header ion-toolbar {
  --background: transparent;
}
page-product-single ion-header ion-back-button {
  --background: var(--ion-color-primary-opacity) !important;
  --border-radius: 10px;
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  --padding-start: 0;
  --padding-end: 0;
  min-width: 38px;
  height: 38px;
}

.header-md,
.footer-md {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.cdk-overlay-pane {
  display: flex;
  margin: 30vw auto;
  border-radius: 8px;
}

/* this is map style */
body, ion-app, ion-content {
  background: transparent;
  --background: transparent;
  height: 100%;
}

ion-content::part(scroll) {
  padding-top: env(safe-area-inset-top);
}

.map-html {
  background: transparent !important;
}

.map-searchbar .searchbar-search-icon.sc-ion-searchbar-md {
  height: 24px;
  left: 17px !important;
  top: 7px !important;
  width: 19px;
  color: grey !important;
}

.map-searchbar .searchbar-input.sc-ion-searchbar-md {
  background-color: white !important;
  --background: white !important;
}

.map-searchbar .searchbar-input {
  background-color: white !important;
  --background: white !important;
}

@media screen and (min-width: 768px) {
  html {
    display: flex;
    margin: 0 auto;
    justify-content: center;
  }
  html body {
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  html body ion-row {
    margin: 10px 0px 0;
  }
  html body ion-popover {
    zoom: 50% !important;
  }
  ion-app {
    zoom: 150%;
  }
}
ion-back-button {
  height: 17px;
  width: 17px;
  font-size: 20px;
  display: flex;
  align-items: center;
}

.products-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  width: 100%;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 8px 12px;
}

.skeleton-card {
  height: 180px;
  border-radius: 14px;
}

/*# sourceMappingURL=styles.css.map*/