@openlettermarketing/olc-vue-sdk 0.0.6 → 0.0.8

package/build/index.js

@@ -50371,7 +50371,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ":root{--rt-color-white:#fff;--rt-color
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".basic-typo {\n  width: 100%;\n  margin: 0;\n  font-weight: 500;\n}\n\n.basic-typo h1 {\n  font-size: 50px;\n}\n\n.basic-typo h2 {\n  font-size: 45px;\n}\n\n.basic-typo h3 {\n  font-size: 40px;\n}\n\n.basic-typo h4 {\n  font-size: 35px;\n}\n\n.basic-typo h5 {\n  font-size: 30px;\n}\n\n.basic-typo h6 {\n  font-size: 25px;\n}\n\n.basic-typo p {\n  font-size: 18px;\n}\n\n.basic-button {\n  background-color: var(--primaryColor);\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  max-width: fit-content;\n  height: 100%;\n  padding: 0 10px;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n}\n\n.basic-button.disabled {\n  opacity: .5;\n  cursor: not-allowed;\n}\n\n.select-layout {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 8px;\n  width: 100%;\n  display: flex;\n}\n\n.select-layout label {\n  color: var(--selectTextColor);\n  margin-bottom: 5px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.select-layout .generic-select-container {\n  cursor: pointer;\n  width: 100%;\n  font-size: 16px;\n  line-height: 21px;\n}\n\n.select-layout .generic-select-container .generic-select__control {\n  background-color: var(--selectBgColor);\n  border: .5px solid var(--selectBorderColor);\n  border-radius: 7px;\n  height: 100%;\n  min-height: 55px;\n  padding-left: 10px;\n  font-size: 14px;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__value-container .generic-select__single-value {\n  color: var(--selectTextColor);\n  font-size: 14px;\n}\n\n.select-layout .generic-select-container .generic-select__control:hover {\n  border: .5px solid var(--selectBorderColor);\n}\n\n.select-layout .generic-select-container .generic-select__control::placeholder {\n  opacity: .5;\n}\n\n.select-layout .generic-select-container .generic-select__control.generic-select__control--is-focused {\n  border: .5px solid var(--selectBorderColor);\n  box-shadow: none;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__indicators {\n  transition: all .2s ease-in;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__indicators .generic-select__indicator-separator {\n  display: none !important;\n}\n\n.select-layout .generic-select-container .generic-select__menu {\n  background-color: var(--selectMenuBgColor);\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list {\n  padding: 0 5px;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option {\n  text-align: left;\n  color: var(--selectOptionTextColor);\n  border-bottom: .5px solid var(--selectOptionBorderColor);\n  cursor: pointer;\n  padding: auto 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option:last-child {\n  border: none;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option.generic-select__option--is-focused {\n  background-color: var(--selectOptionFocusedColor);\n  color: var(--selectOptionFocusedTextColor);\n}\n\n.toast-container {\n  width: 100%;\n  max-width: 400px;\n}\n\n.toast-container .basic-toast {\n  background-color: #ef7820;\n}\n\n.toast-container .basic-toast button {\n  opacity: 1;\n}\n\n.toast-container .basic-toast button svg {\n  fill: #fff;\n  width: 20px;\n  height: 20px;\n}\n\n.toast-container .basic-toast .toast-body .toast-content {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 10px;\n  height: 100%;\n  max-height: 50px;\n  display: flex;\n}\n\n.toast-container .basic-toast .toast-body .toast-content p {\n  color: #fff;\n  margin: 0;\n}\n\n.toast-container .basic-toast .toast-body .toast-content p:first-child {\n  font-weight: 600;\n}\n\n.input-layout {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 10px;\n  width: 100%;\n  display: flex;\n}\n\n.input-layout .basic-label {\n  font-size: 14px;\n  font-weight: 400;\n}\n\n.input-layout .input-with-icon {\n  border: .5px solid var(--inputBorderColor);\n  background-color: var(--inputBgColor);\n  border-radius: 7px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-height: 55px;\n  display: flex;\n}\n\n.input-layout .input-with-icon .basic-input {\n  color: var(--inputTextColor);\n  background: none;\n  border: none;\n  border-radius: 7px;\n  width: 100%;\n  padding: 5px 20px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 24px;\n  font-family: Inter !important;\n}\n\n.input-layout .input-with-icon .basic-input:focus {\n  outline: none;\n}\n\n.input-layout .input-with-icon .basic-input::placeholder {\n  opacity: .5;\n  color: var(--inputTextColor);\n}\n\n.input-layout .input-with-icon .search-input-button {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.input-layout .input-with-icon .search-input-button:before {\n  content: \"\";\n  background-color: #303030;\n  width: 1px;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 40px;\n}\n\n.input-layout .input-with-icon .search-input-button svg {\n  cursor: pointer;\n  margin-right: 10px;\n}\n\n.input-layout .input-with-icon .cancel-input-button {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.input-layout .input-with-icon .cancel-input-button svg {\n  cursor: pointer;\n  margin-right: 10px;\n  width: 15px !important;\n}\n\n.input-layout .input-with-icon.errorBorder {\n  border: 1.5px solid var(--red);\n}\n\n.input-layout .focused {\n  background-color: var(--inputSearchAppliedBg);\n}\n\n.basic-divider {\n  border: none;\n  border-top: .5px solid #0000004d;\n  width: 100%;\n  max-width: 1600px;\n  margin: 3px auto;\n}\n\n.createTemplateMaindiv .createTemplateMainBox {\n  height: 100%;\n  position: relative;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper {\n  border-left: none;\n  border-right: none;\n  margin-left: 40px;\n  padding: 20px 0 30px;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioHeading p {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox {\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 25px;\n  margin-top: 20px;\n  margin-bottom: 10px;\n  display: flex;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio {\n  cursor: pointer;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio input:checked {\n  accent-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio input:focus {\n  outline: none !important;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio label {\n  cursor: pointer;\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .error-field {\n  color: var(--red);\n  margin-left: 5px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .createTemplateHeader {\n  margin-left: 40px;\n  padding-bottom: 15px;\n}\n\n.createTemplateMaindiv .createTemplateHeader p {\n  color: var(--primaryColor);\n  margin-bottom: 20px;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateHeader .templateInputWrapper p {\n  color: var(--textColor);\n  margin-bottom: 16px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateHeader .templateInputWrapper .error-field {\n  color: var(--red);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n  margin-top: 10px !important;\n}\n\n.createTemplateMaindiv .templateSelectWrapper {\n  margin: 20px 0 0 40px;\n  padding-bottom: 15px;\n}\n\n.createTemplateMaindiv .templateSelectWrapper p {\n  color: var(--textColor);\n  margin-bottom: 16px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .templateSelectWrapper .error-field {\n  color: var(--red);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n  margin-top: 10px !important;\n}\n\n.createTemplateMaindiv .productTypeWrapper {\n  margin-left: 40px;\n  padding: 20px 0;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productHeading p:first-child {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productHeading p:last-child {\n  color: var(--primaryColor);\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 18px;\n  text-decoration-line: underline;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper {\n  justify-content: flex-start;\n  align-items: center;\n  gap: 25px;\n  margin-top: 20px;\n  display: flex;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard {\n  border: .45px solid var(--borderColor);\n  background: var(--productCardBgColor);\n  cursor: pointer;\n  border-radius: 6.299px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 17px;\n  width: 100%;\n  max-width: 185px;\n  height: 100%;\n  min-height: 135px;\n  transition: all .1s ease-in;\n  display: flex;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard.active, .createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard:hover {\n  background: var(--productCardBackgroundColorActive);\n  border-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard p {\n  color: var(--primaryColor);\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard:last-child img {\n  margin-bottom: 5px !important;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard.error {\n  border: .45px solid var(--red);\n}\n\n.createTemplateMaindiv .productTypeWrapper .error-field {\n  color: var(--red);\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper {\n  margin: 0 0 80px 40px;\n  padding: 20px 0;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardHeading p {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper {\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 25px;\n  margin-top: 20px;\n  display: flex;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard {\n  border: .45px solid var(--borderColor);\n  background: var(--postCardBgColor);\n  cursor: pointer;\n  border-radius: 6.299px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  padding: 13px 20px;\n  transition: all .1s ease-in;\n  display: flex;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg:last-child {\n  margin-bottom: 20px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg path {\n  fill: var(--postCardSVGColor);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover {\n  background: var(--postCardBackgroundColorActive);\n  border-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg:last-child, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg:last-child {\n  margin-bottom: 20px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg path, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg path, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg path:hover, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg path:hover {\n  fill: var(--svgColor);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard p {\n  color: var(--primaryColor);\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-small {\n  width: 100%;\n  max-width: 150px;\n  height: 100%;\n  min-height: 148px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-mid {\n  width: 100%;\n  max-width: 196px;\n  height: 100%;\n  min-height: 182px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-large {\n  width: 100%;\n  max-width: 248px;\n  height: 100%;\n  min-height: 226px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .error-field {\n  color: var(--red);\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .footerBtns {\n  border-top: .5px solid var(--borderColor);\n  background-color: var(--footerBgColor);\n  width: 100%;\n  position: fixed;\n  bottom: 0;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns {\n  justify-content: flex-end;\n  align-items: center;\n  gap: 20px;\n  padding: 14px 95px 14px 35px;\n  display: flex;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button {\n  text-transform: capitalize;\n  border-radius: 3px;\n  width: 100%;\n  max-width: 100px;\n  height: 100%;\n  min-height: 40px;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button:first-child {\n  color: var(--secondaryButtonTextColor);\n  text-align: center;\n  border: .5px solid var(--borderColor);\n  background-color: var(--secondaryButtonBgColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button:last-child {\n  color: var(--primaryButtonTextColor);\n  text-align: center;\n  background-color: var(--primaryButtonBgColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.mb-5 {\n  margin-bottom: 6rem !important;\n}\n\n.error {\n  border: 1.5px solid var(--red);\n}\n\n.basic-progress .loader {\n  aspect-ratio: 1;\n  border-radius: 50%;\n  width: 50px;\n  animation: .8s linear infinite alternate l20-1, 1.6s linear infinite l20-2;\n}\n\n@keyframes l20-1 {\n  0% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);\n  }\n\n  12.5% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);\n  }\n\n  25% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);\n  }\n\n  50% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  62.5% {\n    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  75% {\n    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  100% {\n    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);\n  }\n}\n\n@keyframes l20-2 {\n  0% {\n    transform: scaleY(1)rotate(0);\n  }\n\n  49.99% {\n    transform: scaleY(1)rotate(135deg);\n  }\n\n  50% {\n    transform: scaleY(-1)rotate(0);\n  }\n\n  100% {\n    transform: scaleY(-1)rotate(-135deg);\n  }\n}\n\n.basic-progress .hide-loader .loader {\n  display: none !important;\n}\n\n.modal {\n  z-index: 99999;\n  background-color: #0006;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  overflow: auto;\n}\n\n.modal .modal-content {\n  background-color: var(--dialogModalBgColor);\n  border: 1px solid #888;\n  border-radius: 11px;\n  width: 80%;\n  margin: auto;\n  padding: 0;\n  animation-name: animatetop;\n  animation-duration: .4s;\n  position: relative;\n  box-shadow: 0 4px 8px #0003, 0 6px 20px #00000030;\n}\n\n.modal .modal-content .modal-header {\n  color: var(--dialogModalTextColor);\n  height: 100%;\n  min-height: 20px;\n  position: relative;\n}\n\n.modal .modal-content .modal-header .close {\n  float: right;\n  font-size: 28px;\n  font-weight: bold;\n  position: absolute;\n  top: 0;\n  right: 5px;\n}\n\n.modal .modal-content .modal-header .close:hover, .modal .modal-content .modal-header .close:focus {\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.modal .modal-content .modal-body {\n  color: var(--dialogModalTextColor);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 16px;\n  display: flex;\n}\n\n.modal .modal-content .modal-body .modal-icon svg {\n  fill: var(--dialogModalSVGColor);\n  width: 100%;\n  max-width: 60px;\n  height: 100%;\n  min-height: 70px;\n}\n\n.modal .modal-content .modal-footer {\n  color: var(--dialogModalTextColor);\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  padding: 2px 16px;\n  display: flex;\n  position: absolute;\n  bottom: 10px;\n}\n\n@keyframes animatetop {\n  from {\n    opacity: 0;\n    top: -300px;\n  }\n\n  to {\n    opacity: 1;\n    top: 0;\n  }\n}\n\n.confirmTemplateSaveModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 433px !important;\n  height: 100% !important;\n  max-height: 290px !important;\n  margin: 0 auto !important;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent {\n  flex-direction: column;\n  gap: 20px;\n  padding: 16px 16px 0;\n  display: flex;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .trashIconWrapper {\n  text-align: center;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .trashIconWrapper p {\n  color: #ed5c2f;\n  text-align: center;\n  margin-top: 10px;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText p {\n  color: #000;\n  text-align: center;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText p:last-child {\n  color: #000;\n  text-align: center;\n  letter-spacing: .28px;\n  margin: 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 10px 22px;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:focus, .confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:after, .confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.confirmTemplateSaveModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  margin-bottom: 10px;\n}\n\n.confirmTemplateSaveModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 5px;\n  width: 100%;\n  max-width: 107px;\n  height: 100%;\n  min-height: 41px;\n}\n\n.confirmTemplateSaveModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .actionBtns button:disabled {\n  opacity: .5;\n}\n\n.confirmCancelTemplateLeaveModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 407px !important;\n  height: 100% !important;\n  max-height: 258px !important;\n  margin: 0 auto !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent {\n  flex-direction: column;\n  gap: 10px;\n  display: flex;\n  padding: 16px 16px 0 !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .trashIconWrapper {\n  text-align: center;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .trashIconWrapper p {\n  color: #ed5c2f;\n  text-align: center;\n  margin-top: 12px;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText p {\n  color: #000;\n  text-align: center;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText p:last-child {\n  color: #000;\n  text-align: center;\n  letter-spacing: .28px;\n  margin: 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 10px 22px;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:focus, .confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:after, .confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 11px;\n  margin-bottom: 13px;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 3px !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  min-width: 100px !important;\n  min-height: 40px !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  max-width: 146px !important;\n  min-height: 40px !important;\n}\n\n.editTemplateNameModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 623px !important;\n  height: 100% !important;\n  max-height: 230px !important;\n  margin: 0 auto !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n  padding: 16px 16px 0 !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent {\n  padding: 0 30px !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent p {\n  color: #303030;\n  margin: 10px 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 9.8px 22px;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:focus, .editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:after, .editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.editTemplateNameModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  margin: 20px 0;\n}\n\n.editTemplateNameModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 5px;\n  width: 100%;\n  max-width: 107px;\n  height: 100%;\n  min-height: 41px;\n}\n\n.editTemplateNameModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.editTemplateNameModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.top-navigation-container {\n  background: var(--topbarBgColor);\n  border-bottom: .5px solid var(--borderColor);\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  max-height: 70px;\n  margin: 0;\n  padding: 23px 20px;\n  display: flex;\n  position: absolute;\n  top: 0;\n}\n\n.top-navigation-container .middle {\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  display: flex;\n}\n\n.top-navigation-container .middle p {\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--textColor);\n  margin-bottom: 0;\n  font-size: 16px;\n  font-weight: 400;\n  overflow: hidden;\n}\n\n.top-navigation-container .middle div {\n  cursor: pointer;\n  border-radius: 50%;\n  justify-content: center;\n  align-items: center;\n  padding: 5px;\n  transition: all .1s ease-in-out;\n  display: flex;\n}\n\n.top-navigation-container .middle div:hover {\n  background-color: var(--iconHoverBgColor);\n}\n\n.top-navigation-container .middle div svg {\n  fill: var(--textColor);\n}\n\n.top-navigation-container button {\n  text-transform: capitalize;\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n  max-width: 120px !important;\n}\n\n.top-navigation-container .MuiGrid-item {\n  padding-top: 0 !important;\n}\n\n.top-navigation-container .left {\n  justify-content: flex-start !important;\n}\n\n.top-navigation-container .right {\n  gap: 10px !important;\n}\n\n.top-navigation-container .actionsBtnWrapper {\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n}\n\n.top-navigation-container .templateCreateBtn {\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  display: flex;\n}\n\n.polotno-panel-container {\n  overflow-y: auto;\n}\n\n.polotno-panel-container .custom-template-section {\n  display: \"flex\";\n  flex-wrap: \"wrap\";\n  overflow-y: \"scroll\";\n}\n\n.polotno-panel-container .custom-template-section .title span {\n  color: #ed5c2f;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.polotno-panel-container .custom-template-section .default-design {\n  cursor: pointer;\n  border: .5px solid #303030;\n  border-radius: 3px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 320px;\n  height: 224px;\n  margin: 10px auto;\n  display: flex;\n}\n\n.polotno-panel-container .custom-template-section .default-design p {\n  color: #303030;\n  margin-top: 5px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 14.52px;\n}\n\n.polotno-panel-container .custom-template-section .design-template {\n  cursor: pointer;\n  border: .5px solid #303030;\n  border-radius: 3px;\n  width: 320px;\n  height: 224px;\n  margin: 10px auto;\n}\n\n.polotno-panel-container .custom-template-section .design-template img {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n.dummy-image {\n  padding: 85px;\n  object-fit: fill !important;\n}\n\n.MuiTabs-indicator {\n  background-color: #ed5c2f !important;\n}\n\n.templateTabsWrapper {\n  background-color: var(--sidepanelBgColor) !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root {\n  width: 15px;\n  opacity: 1 !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root:hover svg {\n  color: #ed5c2f !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root .Mui-disabled {\n  opacity: 1 !important;\n}\n\n.noTemplateText {\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  min-height: 200px;\n  display: flex;\n}\n\n.noTemplateText p {\n  color: var(--textColor);\n  font-size: 18px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.searchWrapper {\n  justify-content: flex-start;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  display: flex;\n  position: relative;\n}\n\n.searchWrapper .searchInput {\n  color: #000;\n  background: #fff;\n  border: .5px solid #44424180;\n  border-radius: 3px;\n  width: 514px;\n  max-width: 520px;\n  height: 40px;\n  padding: 5px 20px;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.searchWrapper .searchInput:after, .searchWrapper .searchInput:before {\n  display: none;\n}\n\n.searchWrapper .searchInput .searchIcon {\n  color: #ed5c2f;\n  position: relative;\n}\n\n.searchWrapper .searchInput .searchIcon:before {\n  content: \"\";\n  opacity: .5;\n  background-color: #000;\n  width: 1px;\n  height: 90%;\n  position: absolute;\n  left: -5px;\n}\n\n.searchWrapper .searchApplied {\n  background: #fff8ee;\n}\n\n.searchWrapper .searchApplied input {\n  padding-right: 28px;\n}\n\n.searchWrapper .clearSerach {\n  opacity: .6;\n  cursor: pointer;\n  font-size: 18px;\n  position: absolute;\n  top: 10px;\n  right: 55px;\n}\n\n.basic-tooltip {\n  text-align: center !important;\n  color: #000 !important;\n  opacity: 1 !important;\n  background-color: #fff !important;\n  width: 90% !important;\n  max-width: fit-content !important;\n  box-shadow: 0 0 12px #989595 !important;\n}\n\n.dynamic-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.dynamic-content .dynamic-content__top {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  margin: 8px auto;\n  display: flex;\n}\n\n.dynamic-content .dynamic-content__top .title {\n  color: var(--primaryColor);\n  margin-right: 5px;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 19.36px;\n}\n\n.dynamic-content .dynamic-content__top .icon {\n  cursor: pointer;\n  width: 12px;\n  height: 12px;\n}\n\n.dynamic-content .divider {\n  color: #44424145;\n  margin-top: 10px;\n}\n\n.dynamic-content .contact-element {\n  border: .5px solid var(--customFieldBorderColor);\n  text-align: center;\n  color: var(--customFieldTextColor);\n  border-radius: 3px;\n  width: 100%;\n  height: 35px;\n  margin: 5px auto;\n  line-height: 35px;\n}\n\n.dynamic-content .copy {\n  fill: var(--customFieldCopySVGColor) !important;\n}\n\n@media (width <= 600px) {\n  .polotno-container .builder-wrapper {\n    display: none;\n  }\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container {\n  background-color: var(--sidepanelBgColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab {\n  color: var(--sidepanelTextColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover {\n  background-color: var(--sidepanelOptionHoverColor);\n  opacity: .8;\n  color: var(--sidepanelTextColorHover);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active svg, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover svg {\n  color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active svg path, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover svg path {\n  fill: var(--primaryColor) !important;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container {\n  background-color: var(--mainBackgroundColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container > div > p {\n  display: none;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab-indicator-wrapper .bp5-tab-indicator {\n  background-color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"true\"] {\n  color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"true\"]:focus {\n  outline: none;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"false\"] {\n  color: var(--textColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"false\"]:focus {\n  outline: none;\n}\n\n.polotno-container .builder-wrapper .polotno-workspace-container {\n  background-color: #0000 !important;\n}\n\n.bp5-popover-transition-container {\n  z-index: 2200 !important;\n}\n\n:root {\n  --sb-track-color: #fff8ee;\n  --sb-thumb-color: #ffdfc2;\n  --primaryColor: #ed5c2f;\n  --svgColor: #fdb515;\n  --svgColorSecondary: #ed5c2f;\n  --mainBackgroundColor: #fff;\n  --textColor: #000;\n  --productCardBgColor: #fff;\n  --productCardBackgroundColorActive: #fff8ee;\n  --postCardBgColor: #fff;\n  --postCardBackgroundColorActive: #fff8ee;\n  --postCardSVGColor: #fdecd3;\n  --inputBgColor: #fff;\n  --inputTextColor: #000;\n  --inputBorderColor: #303030;\n  --inputSearchAppliedBg: #fff8ee;\n  --inputSearchIcon: #303030;\n  --selectBgColor: transparent;\n  --selectTextColor: #000;\n  --selectBorderColor: #303030;\n  --selectMenuBgColor: #fff;\n  --selectOptionTextColor: #000;\n  --selectOptionBorderColor: #5454544d;\n  --selectOptionFocusedColor: #fff8ee;\n  --selectOptionFocusedTextColor: #000;\n  --selectOptionSelectedColor: #fff8ee;\n  --selectOptionSelectedTextColor: #000;\n  --selectOptionSelectedBg: #fff8ee;\n  --topbarBgColor: #fff;\n  --sidepanelBgColor: #fff;\n  --sidepanelTextColor: #303030;\n  --sidepanelSVGColor: #303030;\n  --sidepanelSVGColorActive: #ed5c2f;\n  --sidepanelOptionHoverColor: #fff8ee;\n  --sidepanelTextColorHover: #ed5c2f;\n  --customFieldBorderColor: #303030;\n  --customFieldTextColor: #303030;\n  --customFieldCopySVGColor: #303030;\n  --cardBgColor: transparent;\n  --cardTextColor: #000;\n  --dialogModalBgColor: #fff8ee;\n  --dialogModalHeadingColor: #ed5c2f;\n  --dialogModalTextColor: #000;\n  --dialogModalSVGColor: #ed5c2f;\n  --dialogModalCrossIconColor: #000;\n  --borderColor: #00000080;\n  --secondaryButtonBgColor: #fff;\n  --secondaryButtonTextColor: #000;\n  --primaryButtonBgColor: #ed5c2f;\n  --primaryButtonTextColor: #fff;\n  --iconHoverBgColor: #00000013;\n  --footerBgColor: #fff;\n  --red: red;\n}\n\n:root body {\n  margin: 0;\n  padding: 70px 0 0;\n  font-family: Inter !important;\n}\n\n:root body::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body body {\n    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);\n  }\n}\n\n:root body .bp5-navbar {\n  color: var(--textColor);\n  background-color: var(--mainBackgroundColor);\n  z-index: auto !important;\n}\n\n:root body .bp5-navbar .bp5-card {\n  color: var(--cardTextColor);\n  background-color: var(--cardBgColor);\n}\n\n:root body .bp5-navbar .polotno-close-panel .bp5-button-text {\n  color: var(--textColor);\n}\n\n:root body .bp5-navbar > div {\n  border-bottom: 1px solid #1114181a !important;\n}\n\n:root body .go4160152499::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .go4160152499::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .go4160152499::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body .go4160152499 body, :root body .polotno-workspace-inner body, :root body .polotno-panel-container body, :root body .polotno-panel-container > div body, :root body .polotno-panel-container > div > div body, :root body .polotno-panel-container > div > div > div body {\n    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);\n  }\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body .bp5-popover-content > div > div > div body {\n    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);\n  }\n}\n", "",{"version":3,"sources":["webpack://./src/components/TemplateBuilder/index.css"],"names":[],"mappings":"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","sourcesContent":[".basic-typo {\n  width: 100%;\n  margin: 0;\n  font-weight: 500;\n}\n\n.basic-typo h1 {\n  font-size: 50px;\n}\n\n.basic-typo h2 {\n  font-size: 45px;\n}\n\n.basic-typo h3 {\n  font-size: 40px;\n}\n\n.basic-typo h4 {\n  font-size: 35px;\n}\n\n.basic-typo h5 {\n  font-size: 30px;\n}\n\n.basic-typo h6 {\n  font-size: 25px;\n}\n\n.basic-typo p {\n  font-size: 18px;\n}\n\n.basic-button {\n  background-color: var(--primaryColor);\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  max-width: fit-content;\n  height: 100%;\n  padding: 0 10px;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n}\n\n.basic-button.disabled {\n  opacity: .5;\n  cursor: not-allowed;\n}\n\n.select-layout {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 8px;\n  width: 100%;\n  display: flex;\n}\n\n.select-layout label {\n  color: var(--selectTextColor);\n  margin-bottom: 5px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.select-layout .generic-select-container {\n  cursor: pointer;\n  width: 100%;\n  font-size: 16px;\n  line-height: 21px;\n}\n\n.select-layout .generic-select-container .generic-select__control {\n  background-color: var(--selectBgColor);\n  border: .5px solid var(--selectBorderColor);\n  border-radius: 7px;\n  height: 100%;\n  min-height: 55px;\n  padding-left: 10px;\n  font-size: 14px;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__value-container .generic-select__single-value {\n  color: var(--selectTextColor);\n  font-size: 14px;\n}\n\n.select-layout .generic-select-container .generic-select__control:hover {\n  border: .5px solid var(--selectBorderColor);\n}\n\n.select-layout .generic-select-container .generic-select__control::placeholder {\n  opacity: .5;\n}\n\n.select-layout .generic-select-container .generic-select__control.generic-select__control--is-focused {\n  border: .5px solid var(--selectBorderColor);\n  box-shadow: none;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__indicators {\n  transition: all .2s ease-in;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__indicators .generic-select__indicator-separator {\n  display: none !important;\n}\n\n.select-layout .generic-select-container .generic-select__menu {\n  background-color: var(--selectMenuBgColor);\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list {\n  padding: 0 5px;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option {\n  text-align: left;\n  color: var(--selectOptionTextColor);\n  border-bottom: .5px solid var(--selectOptionBorderColor);\n  cursor: pointer;\n  padding: auto 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option:last-child {\n  border: none;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option.generic-select__option--is-focused {\n  background-color: var(--selectOptionFocusedColor);\n  color: var(--selectOptionFocusedTextColor);\n}\n\n.toast-container {\n  width: 100%;\n  max-width: 400px;\n}\n\n.toast-container .basic-toast {\n  background-color: #ef7820;\n}\n\n.toast-container .basic-toast button {\n  opacity: 1;\n}\n\n.toast-container .basic-toast button svg {\n  fill: #fff;\n  width: 20px;\n  height: 20px;\n}\n\n.toast-container .basic-toast .toast-body .toast-content {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 10px;\n  height: 100%;\n  max-height: 50px;\n  display: flex;\n}\n\n.toast-container .basic-toast .toast-body .toast-content p {\n  color: #fff;\n  margin: 0;\n}\n\n.toast-container .basic-toast .toast-body .toast-content p:first-child {\n  font-weight: 600;\n}\n\n.input-layout {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 10px;\n  width: 100%;\n  display: flex;\n}\n\n.input-layout .basic-label {\n  font-size: 14px;\n  font-weight: 400;\n}\n\n.input-layout .input-with-icon {\n  border: .5px solid var(--inputBorderColor);\n  background-color: var(--inputBgColor);\n  border-radius: 7px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-height: 55px;\n  display: flex;\n}\n\n.input-layout .input-with-icon .basic-input {\n  color: var(--inputTextColor);\n  background: none;\n  border: none;\n  border-radius: 7px;\n  width: 100%;\n  padding: 5px 20px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 24px;\n  font-family: Inter !important;\n}\n\n.input-layout .input-with-icon .basic-input:focus {\n  outline: none;\n}\n\n.input-layout .input-with-icon .basic-input::placeholder {\n  opacity: .5;\n  color: var(--inputTextColor);\n}\n\n.input-layout .input-with-icon .search-input-button {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.input-layout .input-with-icon .search-input-button:before {\n  content: \"\";\n  background-color: #303030;\n  width: 1px;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 40px;\n}\n\n.input-layout .input-with-icon .search-input-button svg {\n  cursor: pointer;\n  margin-right: 10px;\n}\n\n.input-layout .input-with-icon .cancel-input-button {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.input-layout .input-with-icon .cancel-input-button svg {\n  cursor: pointer;\n  margin-right: 10px;\n  width: 15px !important;\n}\n\n.input-layout .input-with-icon.errorBorder {\n  border: 1.5px solid var(--red);\n}\n\n.input-layout .focused {\n  background-color: var(--inputSearchAppliedBg);\n}\n\n.basic-divider {\n  border: none;\n  border-top: .5px solid #0000004d;\n  width: 100%;\n  max-width: 1600px;\n  margin: 3px auto;\n}\n\n.createTemplateMaindiv .createTemplateMainBox {\n  height: 100%;\n  position: relative;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper {\n  border-left: none;\n  border-right: none;\n  margin-left: 40px;\n  padding: 20px 0 30px;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioHeading p {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox {\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 25px;\n  margin-top: 20px;\n  margin-bottom: 10px;\n  display: flex;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio {\n  cursor: pointer;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio input:checked {\n  accent-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio input:focus {\n  outline: none !important;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio label {\n  cursor: pointer;\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .error-field {\n  color: var(--red);\n  margin-left: 5px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .createTemplateHeader {\n  margin-left: 40px;\n  padding-bottom: 15px;\n}\n\n.createTemplateMaindiv .createTemplateHeader p {\n  color: var(--primaryColor);\n  margin-bottom: 20px;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateHeader .templateInputWrapper p {\n  color: var(--textColor);\n  margin-bottom: 16px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateHeader .templateInputWrapper .error-field {\n  color: var(--red);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n  margin-top: 10px !important;\n}\n\n.createTemplateMaindiv .templateSelectWrapper {\n  margin: 20px 0 0 40px;\n  padding-bottom: 15px;\n}\n\n.createTemplateMaindiv .templateSelectWrapper p {\n  color: var(--textColor);\n  margin-bottom: 16px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .templateSelectWrapper .error-field {\n  color: var(--red);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n  margin-top: 10px !important;\n}\n\n.createTemplateMaindiv .productTypeWrapper {\n  margin-left: 40px;\n  padding: 20px 0;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productHeading p:first-child {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productHeading p:last-child {\n  color: var(--primaryColor);\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 18px;\n  text-decoration-line: underline;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper {\n  justify-content: flex-start;\n  align-items: center;\n  gap: 25px;\n  margin-top: 20px;\n  display: flex;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard {\n  border: .45px solid var(--borderColor);\n  background: var(--productCardBgColor);\n  cursor: pointer;\n  border-radius: 6.299px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 17px;\n  width: 100%;\n  max-width: 185px;\n  height: 100%;\n  min-height: 135px;\n  transition: all .1s ease-in;\n  display: flex;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard.active, .createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard:hover {\n  background: var(--productCardBackgroundColorActive);\n  border-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard p {\n  color: var(--primaryColor);\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard:last-child img {\n  margin-bottom: 5px !important;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard.error {\n  border: .45px solid var(--red);\n}\n\n.createTemplateMaindiv .productTypeWrapper .error-field {\n  color: var(--red);\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper {\n  margin: 0 0 80px 40px;\n  padding: 20px 0;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardHeading p {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper {\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 25px;\n  margin-top: 20px;\n  display: flex;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard {\n  border: .45px solid var(--borderColor);\n  background: var(--postCardBgColor);\n  cursor: pointer;\n  border-radius: 6.299px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  padding: 13px 20px;\n  transition: all .1s ease-in;\n  display: flex;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg:last-child {\n  margin-bottom: 20px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg path {\n  fill: var(--postCardSVGColor);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover {\n  background: var(--postCardBackgroundColorActive);\n  border-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg:last-child, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg:last-child {\n  margin-bottom: 20px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg path, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg path, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg path:hover, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg path:hover {\n  fill: var(--svgColor);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard p {\n  color: var(--primaryColor);\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-small {\n  width: 100%;\n  max-width: 150px;\n  height: 100%;\n  min-height: 148px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-mid {\n  width: 100%;\n  max-width: 196px;\n  height: 100%;\n  min-height: 182px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-large {\n  width: 100%;\n  max-width: 248px;\n  height: 100%;\n  min-height: 226px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .error-field {\n  color: var(--red);\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .footerBtns {\n  border-top: .5px solid var(--borderColor);\n  background-color: var(--footerBgColor);\n  width: 100%;\n  position: fixed;\n  bottom: 0;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns {\n  justify-content: flex-end;\n  align-items: center;\n  gap: 20px;\n  padding: 14px 95px 14px 35px;\n  display: flex;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button {\n  text-transform: capitalize;\n  border-radius: 3px;\n  width: 100%;\n  max-width: 100px;\n  height: 100%;\n  min-height: 40px;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button:first-child {\n  color: var(--secondaryButtonTextColor);\n  text-align: center;\n  border: .5px solid var(--borderColor);\n  background-color: var(--secondaryButtonBgColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button:last-child {\n  color: var(--primaryButtonTextColor);\n  text-align: center;\n  background-color: var(--primaryButtonBgColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.mb-5 {\n  margin-bottom: 6rem !important;\n}\n\n.error {\n  border: 1.5px solid var(--red);\n}\n\n.basic-progress .loader {\n  aspect-ratio: 1;\n  border-radius: 50%;\n  width: 50px;\n  animation: .8s linear infinite alternate l20-1, 1.6s linear infinite l20-2;\n}\n\n@keyframes l20-1 {\n  0% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);\n  }\n\n  12.5% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);\n  }\n\n  25% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);\n  }\n\n  50% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  62.5% {\n    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  75% {\n    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  100% {\n    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);\n  }\n}\n\n@keyframes l20-2 {\n  0% {\n    transform: scaleY(1)rotate(0);\n  }\n\n  49.99% {\n    transform: scaleY(1)rotate(135deg);\n  }\n\n  50% {\n    transform: scaleY(-1)rotate(0);\n  }\n\n  100% {\n    transform: scaleY(-1)rotate(-135deg);\n  }\n}\n\n.basic-progress .hide-loader .loader {\n  display: none !important;\n}\n\n.modal {\n  z-index: 99999;\n  background-color: #0006;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  overflow: auto;\n}\n\n.modal .modal-content {\n  background-color: var(--dialogModalBgColor);\n  border: 1px solid #888;\n  border-radius: 11px;\n  width: 80%;\n  margin: auto;\n  padding: 0;\n  animation-name: animatetop;\n  animation-duration: .4s;\n  position: relative;\n  box-shadow: 0 4px 8px #0003, 0 6px 20px #00000030;\n}\n\n.modal .modal-content .modal-header {\n  color: var(--dialogModalTextColor);\n  height: 100%;\n  min-height: 20px;\n  position: relative;\n}\n\n.modal .modal-content .modal-header .close {\n  float: right;\n  font-size: 28px;\n  font-weight: bold;\n  position: absolute;\n  top: 0;\n  right: 5px;\n}\n\n.modal .modal-content .modal-header .close:hover, .modal .modal-content .modal-header .close:focus {\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.modal .modal-content .modal-body {\n  color: var(--dialogModalTextColor);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 16px;\n  display: flex;\n}\n\n.modal .modal-content .modal-body .modal-icon svg {\n  fill: var(--dialogModalSVGColor);\n  width: 100%;\n  max-width: 60px;\n  height: 100%;\n  min-height: 70px;\n}\n\n.modal .modal-content .modal-footer {\n  color: var(--dialogModalTextColor);\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  padding: 2px 16px;\n  display: flex;\n  position: absolute;\n  bottom: 10px;\n}\n\n@keyframes animatetop {\n  from {\n    opacity: 0;\n    top: -300px;\n  }\n\n  to {\n    opacity: 1;\n    top: 0;\n  }\n}\n\n.confirmTemplateSaveModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 433px !important;\n  height: 100% !important;\n  max-height: 290px !important;\n  margin: 0 auto !important;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent {\n  flex-direction: column;\n  gap: 20px;\n  padding: 16px 16px 0;\n  display: flex;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .trashIconWrapper {\n  text-align: center;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .trashIconWrapper p {\n  color: #ed5c2f;\n  text-align: center;\n  margin-top: 10px;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText p {\n  color: #000;\n  text-align: center;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText p:last-child {\n  color: #000;\n  text-align: center;\n  letter-spacing: .28px;\n  margin: 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 10px 22px;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:focus, .confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:after, .confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.confirmTemplateSaveModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  margin-bottom: 10px;\n}\n\n.confirmTemplateSaveModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 5px;\n  width: 100%;\n  max-width: 107px;\n  height: 100%;\n  min-height: 41px;\n}\n\n.confirmTemplateSaveModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .actionBtns button:disabled {\n  opacity: .5;\n}\n\n.confirmCancelTemplateLeaveModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 407px !important;\n  height: 100% !important;\n  max-height: 258px !important;\n  margin: 0 auto !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent {\n  flex-direction: column;\n  gap: 10px;\n  display: flex;\n  padding: 16px 16px 0 !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .trashIconWrapper {\n  text-align: center;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .trashIconWrapper p {\n  color: #ed5c2f;\n  text-align: center;\n  margin-top: 12px;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText p {\n  color: #000;\n  text-align: center;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText p:last-child {\n  color: #000;\n  text-align: center;\n  letter-spacing: .28px;\n  margin: 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 10px 22px;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:focus, .confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:after, .confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 11px;\n  margin-bottom: 13px;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 3px !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  min-width: 100px !important;\n  min-height: 40px !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  max-width: 146px !important;\n  min-height: 40px !important;\n}\n\n.editTemplateNameModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 623px !important;\n  height: 100% !important;\n  max-height: 230px !important;\n  margin: 0 auto !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n  padding: 16px 16px 0 !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent {\n  padding: 0 30px !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent p {\n  color: #303030;\n  margin: 10px 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 9.8px 22px;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:focus, .editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:after, .editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.editTemplateNameModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  margin: 20px 0;\n}\n\n.editTemplateNameModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 5px;\n  width: 100%;\n  max-width: 107px;\n  height: 100%;\n  min-height: 41px;\n}\n\n.editTemplateNameModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.editTemplateNameModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.top-navigation-container {\n  background: var(--topbarBgColor);\n  border-bottom: .5px solid var(--borderColor);\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  max-height: 70px;\n  margin: 0;\n  padding: 23px 20px;\n  display: flex;\n  position: absolute;\n  top: 0;\n}\n\n.top-navigation-container .middle {\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  display: flex;\n}\n\n.top-navigation-container .middle p {\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--textColor);\n  margin-bottom: 0;\n  font-size: 16px;\n  font-weight: 400;\n  overflow: hidden;\n}\n\n.top-navigation-container .middle div {\n  cursor: pointer;\n  border-radius: 50%;\n  justify-content: center;\n  align-items: center;\n  padding: 5px;\n  transition: all .1s ease-in-out;\n  display: flex;\n}\n\n.top-navigation-container .middle div:hover {\n  background-color: var(--iconHoverBgColor);\n}\n\n.top-navigation-container .middle div svg {\n  fill: var(--textColor);\n}\n\n.top-navigation-container button {\n  text-transform: capitalize;\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n  max-width: 120px !important;\n}\n\n.top-navigation-container .MuiGrid-item {\n  padding-top: 0 !important;\n}\n\n.top-navigation-container .left {\n  justify-content: flex-start !important;\n}\n\n.top-navigation-container .right {\n  gap: 10px !important;\n}\n\n.top-navigation-container .actionsBtnWrapper {\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n}\n\n.top-navigation-container .templateCreateBtn {\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  display: flex;\n}\n\n.polotno-panel-container {\n  overflow-y: auto;\n}\n\n.polotno-panel-container .custom-template-section {\n  display: \"flex\";\n  flex-wrap: \"wrap\";\n  overflow-y: \"scroll\";\n}\n\n.polotno-panel-container .custom-template-section .title span {\n  color: #ed5c2f;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.polotno-panel-container .custom-template-section .default-design {\n  cursor: pointer;\n  border: .5px solid #303030;\n  border-radius: 3px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 320px;\n  height: 224px;\n  margin: 10px auto;\n  display: flex;\n}\n\n.polotno-panel-container .custom-template-section .default-design p {\n  color: #303030;\n  margin-top: 5px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 14.52px;\n}\n\n.polotno-panel-container .custom-template-section .design-template {\n  cursor: pointer;\n  border: .5px solid #303030;\n  border-radius: 3px;\n  width: 320px;\n  height: 224px;\n  margin: 10px auto;\n}\n\n.polotno-panel-container .custom-template-section .design-template img {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n.dummy-image {\n  padding: 85px;\n  object-fit: fill !important;\n}\n\n.MuiTabs-indicator {\n  background-color: #ed5c2f !important;\n}\n\n.templateTabsWrapper {\n  background-color: var(--sidepanelBgColor) !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root {\n  width: 15px;\n  opacity: 1 !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root:hover svg {\n  color: #ed5c2f !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root .Mui-disabled {\n  opacity: 1 !important;\n}\n\n.noTemplateText {\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  min-height: 200px;\n  display: flex;\n}\n\n.noTemplateText p {\n  color: var(--textColor);\n  font-size: 18px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.searchWrapper {\n  justify-content: flex-start;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  display: flex;\n  position: relative;\n}\n\n.searchWrapper .searchInput {\n  color: #000;\n  background: #fff;\n  border: .5px solid #44424180;\n  border-radius: 3px;\n  width: 514px;\n  max-width: 520px;\n  height: 40px;\n  padding: 5px 20px;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.searchWrapper .searchInput:after, .searchWrapper .searchInput:before {\n  display: none;\n}\n\n.searchWrapper .searchInput .searchIcon {\n  color: #ed5c2f;\n  position: relative;\n}\n\n.searchWrapper .searchInput .searchIcon:before {\n  content: \"\";\n  opacity: .5;\n  background-color: #000;\n  width: 1px;\n  height: 90%;\n  position: absolute;\n  left: -5px;\n}\n\n.searchWrapper .searchApplied {\n  background: #fff8ee;\n}\n\n.searchWrapper .searchApplied input {\n  padding-right: 28px;\n}\n\n.searchWrapper .clearSerach {\n  opacity: .6;\n  cursor: pointer;\n  font-size: 18px;\n  position: absolute;\n  top: 10px;\n  right: 55px;\n}\n\n.basic-tooltip {\n  text-align: center !important;\n  color: #000 !important;\n  opacity: 1 !important;\n  background-color: #fff !important;\n  width: 90% !important;\n  max-width: fit-content !important;\n  box-shadow: 0 0 12px #989595 !important;\n}\n\n.dynamic-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.dynamic-content .dynamic-content__top {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  margin: 8px auto;\n  display: flex;\n}\n\n.dynamic-content .dynamic-content__top .title {\n  color: var(--primaryColor);\n  margin-right: 5px;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 19.36px;\n}\n\n.dynamic-content .dynamic-content__top .icon {\n  cursor: pointer;\n  width: 12px;\n  height: 12px;\n}\n\n.dynamic-content .divider {\n  color: #44424145;\n  margin-top: 10px;\n}\n\n.dynamic-content .contact-element {\n  border: .5px solid var(--customFieldBorderColor);\n  text-align: center;\n  color: var(--customFieldTextColor);\n  border-radius: 3px;\n  width: 100%;\n  height: 35px;\n  margin: 5px auto;\n  line-height: 35px;\n}\n\n.dynamic-content .copy {\n  fill: var(--customFieldCopySVGColor) !important;\n}\n\n@media (width <= 600px) {\n  .polotno-container .builder-wrapper {\n    display: none;\n  }\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container {\n  background-color: var(--sidepanelBgColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab {\n  color: var(--sidepanelTextColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover {\n  background-color: var(--sidepanelOptionHoverColor);\n  opacity: .8;\n  color: var(--sidepanelTextColorHover);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active svg, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover svg {\n  color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active svg path, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover svg path {\n  fill: var(--primaryColor) !important;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container {\n  background-color: var(--mainBackgroundColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container > div > p {\n  display: none;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab-indicator-wrapper .bp5-tab-indicator {\n  background-color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"true\"] {\n  color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"true\"]:focus {\n  outline: none;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"false\"] {\n  color: var(--textColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"false\"]:focus {\n  outline: none;\n}\n\n.polotno-container .builder-wrapper .polotno-workspace-container {\n  background-color: #0000 !important;\n}\n\n.bp5-popover-transition-container {\n  z-index: 2200 !important;\n}\n\n:root {\n  --sb-track-color: #fff8ee;\n  --sb-thumb-color: #ffdfc2;\n  --primaryColor: #ed5c2f;\n  --svgColor: #fdb515;\n  --svgColorSecondary: #ed5c2f;\n  --mainBackgroundColor: #fff;\n  --textColor: #000;\n  --productCardBgColor: #fff;\n  --productCardBackgroundColorActive: #fff8ee;\n  --postCardBgColor: #fff;\n  --postCardBackgroundColorActive: #fff8ee;\n  --postCardSVGColor: #fdecd3;\n  --inputBgColor: #fff;\n  --inputTextColor: #000;\n  --inputBorderColor: #303030;\n  --inputSearchAppliedBg: #fff8ee;\n  --inputSearchIcon: #303030;\n  --selectBgColor: transparent;\n  --selectTextColor: #000;\n  --selectBorderColor: #303030;\n  --selectMenuBgColor: #fff;\n  --selectOptionTextColor: #000;\n  --selectOptionBorderColor: #5454544d;\n  --selectOptionFocusedColor: #fff8ee;\n  --selectOptionFocusedTextColor: #000;\n  --selectOptionSelectedColor: #fff8ee;\n  --selectOptionSelectedTextColor: #000;\n  --selectOptionSelectedBg: #fff8ee;\n  --topbarBgColor: #fff;\n  --sidepanelBgColor: #fff;\n  --sidepanelTextColor: #303030;\n  --sidepanelSVGColor: #303030;\n  --sidepanelSVGColorActive: #ed5c2f;\n  --sidepanelOptionHoverColor: #fff8ee;\n  --sidepanelTextColorHover: #ed5c2f;\n  --customFieldBorderColor: #303030;\n  --customFieldTextColor: #303030;\n  --customFieldCopySVGColor: #303030;\n  --cardBgColor: transparent;\n  --cardTextColor: #000;\n  --dialogModalBgColor: #fff8ee;\n  --dialogModalHeadingColor: #ed5c2f;\n  --dialogModalTextColor: #000;\n  --dialogModalSVGColor: #ed5c2f;\n  --dialogModalCrossIconColor: #000;\n  --borderColor: #00000080;\n  --secondaryButtonBgColor: #fff;\n  --secondaryButtonTextColor: #000;\n  --primaryButtonBgColor: #ed5c2f;\n  --primaryButtonTextColor: #fff;\n  --iconHoverBgColor: #00000013;\n  --footerBgColor: #fff;\n  --red: red;\n}\n\n:root body {\n  margin: 0;\n  padding: 70px 0 0;\n  font-family: Inter !important;\n}\n\n:root body::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body body {\n    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);\n  }\n}\n\n:root body .bp5-navbar {\n  color: var(--textColor);\n  background-color: var(--mainBackgroundColor);\n  z-index: auto !important;\n}\n\n:root body .bp5-navbar .bp5-card {\n  color: var(--cardTextColor);\n  background-color: var(--cardBgColor);\n}\n\n:root body .bp5-navbar .polotno-close-panel .bp5-button-text {\n  color: var(--textColor);\n}\n\n:root body .bp5-navbar > div {\n  border-bottom: 1px solid #1114181a !important;\n}\n\n:root body .go4160152499::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .go4160152499::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .go4160152499::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body .go4160152499 body, :root body .polotno-workspace-inner body, :root body .polotno-panel-container body, :root body .polotno-panel-container > div body, :root body .polotno-panel-container > div > div body, :root body .polotno-panel-container > div > div > div body {\n    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);\n  }\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--sb-track-color) !important;\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--sb-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body .bp5-popover-content > div > div > div body {\n    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);\n  }\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".basic-typo {\n  width: 100%;\n  margin: 0;\n  font-weight: 500;\n}\n\n.basic-typo h1 {\n  font-size: 50px;\n}\n\n.basic-typo h2 {\n  font-size: 45px;\n}\n\n.basic-typo h3 {\n  font-size: 40px;\n}\n\n.basic-typo h4 {\n  font-size: 35px;\n}\n\n.basic-typo h5 {\n  font-size: 30px;\n}\n\n.basic-typo h6 {\n  font-size: 25px;\n}\n\n.basic-typo p {\n  font-size: 18px;\n}\n\n.basic-button {\n  background-color: var(--primaryColor);\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  max-width: fit-content;\n  height: 100%;\n  padding: 0 10px;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n}\n\n.basic-button.disabled {\n  opacity: .5;\n  cursor: not-allowed;\n}\n\n.select-layout {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 8px;\n  width: 100%;\n  display: flex;\n}\n\n.select-layout label {\n  color: var(--textColor);\n  margin-bottom: 5px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.select-layout .generic-select-container {\n  cursor: pointer;\n  width: 100%;\n  font-size: 16px;\n  line-height: 21px;\n}\n\n.select-layout .generic-select-container .generic-select__control {\n  border: .5px solid var(--borderColor);\n  background-color: #0000;\n  border-radius: 7px;\n  height: 100%;\n  min-height: 55px;\n  padding-left: 10px;\n  font-size: 14px;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__value-container .generic-select__placeholder {\n  color: var(--textColor);\n  opacity: .5;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__value-container .generic-select__input-container {\n  color: var(--textColor);\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__value-container .generic-select__single-value {\n  color: var(--textColor);\n  font-size: 14px;\n}\n\n.select-layout .generic-select-container .generic-select__control:hover {\n  border: .5px solid var(--borderColor);\n}\n\n.select-layout .generic-select-container .generic-select__control::placeholder {\n  opacity: .5;\n}\n\n.select-layout .generic-select-container .generic-select__control.generic-select__control--is-focused {\n  border: .5px solid var(--borderColor);\n  box-shadow: none;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__indicators {\n  transition: all .2s ease-in;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__indicators .generic-select__indicator-separator {\n  display: none !important;\n}\n\n.select-layout .generic-select-container .generic-select__menu {\n  background-color: var(--mainBackgroundColor);\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list {\n  padding: 0 5px;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__menu-notice {\n  cursor: not-allowed;\n  color: var(--textColor);\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option {\n  text-align: left;\n  color: var(--textColor);\n  border-bottom: .5px solid var(--borderColor);\n  cursor: pointer;\n  padding: auto 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option:last-child {\n  border: none;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option.generic-select__option--is-focused {\n  background-color: var(--secondaryColor);\n  color: var(--textColor);\n}\n\n.toast-container {\n  z-index: 99999;\n  width: 100%;\n  max-width: 400px;\n}\n\n.toast-container .basic-toast {\n  background-color: var(--primaryColor);\n}\n\n.toast-container .basic-toast .toast-body .toast-content {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 5px;\n  height: 100%;\n  max-height: 50px;\n  display: flex;\n}\n\n.toast-container .basic-toast .toast-body .toast-content p {\n  color: var(--textColor);\n  margin: 0;\n  font-family: var(--font-family) !important;\n}\n\n.toast-container .basic-toast .toast-body .toast-content p:first-child {\n  font-weight: 600;\n}\n\n.toast-container .basic-toast svg {\n  width: 25px;\n  height: 18px;\n}\n\n.input-layout {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 10px;\n  width: 100%;\n  display: flex;\n}\n\n.input-layout .basic-label {\n  color: var(--textColor);\n  font-size: 14px;\n  font-weight: 400;\n}\n\n.input-layout .input-with-icon {\n  border: .5px solid var(--borderColor);\n  background-color: var(--mainBackgroundColor);\n  border-radius: 7px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-height: 55px;\n  display: flex;\n}\n\n.input-layout .input-with-icon .basic-input {\n  color: var(--textColor);\n  background: none;\n  border: none;\n  border-radius: 7px;\n  width: 100%;\n  padding: 5px 20px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 24px;\n  font-family: var(--font-family) !important;\n}\n\n.input-layout .input-with-icon .basic-input:focus {\n  outline: none;\n}\n\n.input-layout .input-with-icon .basic-input::placeholder {\n  opacity: .5;\n  color: var(--textColor);\n}\n\n.input-layout .input-with-icon .search-input-button {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.input-layout .input-with-icon .search-input-button:before {\n  content: \"\";\n  background-color: #303030;\n  width: 1px;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 40px;\n}\n\n.input-layout .input-with-icon .search-input-button svg {\n  cursor: pointer;\n  margin-right: 10px;\n}\n\n.input-layout .input-with-icon .cancel-input-button {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.input-layout .input-with-icon .cancel-input-button svg {\n  cursor: pointer;\n  margin-right: 10px;\n  width: 15px !important;\n}\n\n.input-layout .input-with-icon.errorBorder {\n  border: 1.5px solid var(--errorColor);\n}\n\n.input-layout .focused {\n  background-color: var(--secondaryColor);\n}\n\n.basic-divider {\n  border: none;\n  border-top: .5px solid #0000004d;\n  width: 100%;\n  max-width: 1600px;\n  margin: 3px auto;\n}\n\n.createTemplateMaindiv .createTemplateMainBox {\n  height: 100%;\n  position: relative;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper {\n  border-left: none;\n  border-right: none;\n  margin-left: 40px;\n  padding: 20px 0 30px;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioHeading p {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox {\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 25px;\n  margin-top: 20px;\n  margin-bottom: 10px;\n  display: flex;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio {\n  cursor: pointer;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio input:checked {\n  accent-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio input:focus {\n  outline: none !important;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio label {\n  cursor: pointer;\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .error-field {\n  color: var(--errorColor);\n  margin-left: 5px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .createTemplateHeader {\n  margin-left: 40px;\n  padding-bottom: 15px;\n}\n\n.createTemplateMaindiv .createTemplateHeader p {\n  color: var(--primaryColor);\n  margin-bottom: 20px;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateHeader .templateInputWrapper p {\n  color: var(--textColor);\n  margin-bottom: 16px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateHeader .templateInputWrapper .error-field {\n  color: var(--errorColor);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n  margin-top: 10px !important;\n}\n\n.createTemplateMaindiv .templateSelectWrapper {\n  margin: 20px 0 0 40px;\n  padding-bottom: 15px;\n}\n\n.createTemplateMaindiv .templateSelectWrapper p {\n  color: var(--textColor);\n  margin-bottom: 16px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .templateSelectWrapper .error-field {\n  color: var(--errorColor);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n  margin-top: 10px !important;\n}\n\n.createTemplateMaindiv .productTypeWrapper {\n  margin-left: 40px;\n  padding: 20px 0;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productHeading p:first-child {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productHeading p:last-child {\n  color: var(--primaryColor);\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 18px;\n  text-decoration-line: underline;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper {\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 25px;\n  margin-top: 20px;\n  display: flex;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard {\n  border: .45px solid var(--borderColor);\n  background: var(--mainBackgroundColor);\n  cursor: pointer;\n  border-radius: 6.299px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 17px;\n  width: 100%;\n  max-width: 185px;\n  height: 100%;\n  min-height: 135px;\n  transition: all .1s ease-in;\n  display: flex;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard.active, .createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard:hover {\n  background: var(--secondaryColor);\n  border-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard p {\n  color: var(--primaryColor);\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard:last-child img {\n  margin-bottom: 5px !important;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard.error {\n  border: .45px solid var(--errorColor);\n}\n\n.createTemplateMaindiv .productTypeWrapper .error-field {\n  color: var(--errorColor);\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper {\n  margin: 0 0 80px 40px;\n  padding: 20px 0;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardHeading p {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper {\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 25px;\n  margin-top: 20px;\n  display: flex;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard {\n  border: .45px solid var(--borderColor);\n  background: var(--mainBackgroundColor);\n  cursor: pointer;\n  border-radius: 6.299px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  padding: 13px 20px;\n  transition: all .1s ease-in;\n  display: flex;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg:last-child {\n  margin-bottom: 20px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg path {\n  fill: var(--svgColorNotActive);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover {\n  background: var(--secondaryColor);\n  border-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg:last-child, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg:last-child {\n  margin-bottom: 20px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg path, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg path, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg path:hover, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg path:hover {\n  fill: var(--svgColor);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard p {\n  color: var(--primaryColor);\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-small {\n  width: 100%;\n  max-width: 150px;\n  height: 100%;\n  min-height: 148px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-mid {\n  width: 100%;\n  max-width: 196px;\n  height: 100%;\n  min-height: 182px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-large {\n  width: 100%;\n  max-width: 248px;\n  height: 100%;\n  min-height: 226px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .error-field {\n  color: var(--errorColor);\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .footerBtns {\n  border-top: .5px solid var(--borderColor);\n  background-color: var(--mainBackgroundColor);\n  width: 100%;\n  position: fixed;\n  bottom: 0;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns {\n  justify-content: flex-end;\n  align-items: center;\n  gap: 20px;\n  padding: 14px 95px 14px 35px;\n  display: flex;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button {\n  text-transform: capitalize;\n  border-radius: 3px;\n  width: 100%;\n  max-width: 100px;\n  height: 100%;\n  min-height: 40px;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button:first-child {\n  color: var(--textColor);\n  text-align: center;\n  border: .5px solid var(--borderColor);\n  background-color: var(--mainBackgroundColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button:last-child {\n  color: var(--mainBackgroundColor);\n  text-align: center;\n  background-color: var(--primaryColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.mb-5 {\n  margin-bottom: 6rem !important;\n}\n\n.error {\n  border: 1.5px solid var(--errorColor);\n}\n\n.basic-progress .loader {\n  aspect-ratio: 1;\n  border-radius: 50%;\n  width: 50px;\n  animation: .8s linear infinite alternate l20-1, 1.6s linear infinite l20-2;\n}\n\n@keyframes l20-1 {\n  0% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);\n  }\n\n  12.5% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);\n  }\n\n  25% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);\n  }\n\n  50% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  62.5% {\n    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  75% {\n    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  100% {\n    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);\n  }\n}\n\n@keyframes l20-2 {\n  0% {\n    transform: scaleY(1)rotate(0);\n  }\n\n  49.99% {\n    transform: scaleY(1)rotate(135deg);\n  }\n\n  50% {\n    transform: scaleY(-1)rotate(0);\n  }\n\n  100% {\n    transform: scaleY(-1)rotate(-135deg);\n  }\n}\n\n.basic-progress .hide-loader .loader {\n  display: none !important;\n}\n\n.modal {\n  z-index: 99999;\n  background-color: #0009;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  overflow: auto;\n}\n\n.modal .modal-content {\n  background-color: var(--secondaryColor);\n  border: 1px solid #888;\n  border-radius: 11px;\n  width: 80%;\n  margin: auto;\n  padding: 0;\n  animation-name: animatetop;\n  animation-duration: .4s;\n  position: relative;\n  box-shadow: 0 4px 8px #0003, 0 6px 20px #00000030;\n}\n\n.modal .modal-content .modal-header {\n  color: var(--textColor);\n  height: 100%;\n  min-height: 20px;\n  position: relative;\n}\n\n.modal .modal-content .modal-header .close {\n  float: right;\n  font-size: 28px;\n  font-weight: bold;\n  position: absolute;\n  top: 0;\n  right: 5px;\n}\n\n.modal .modal-content .modal-header .close:hover, .modal .modal-content .modal-header .close:focus {\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.modal .modal-content .modal-body {\n  color: var(--textColor);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 16px;\n  display: flex;\n}\n\n.modal .modal-content .modal-body .modal-icon svg {\n  width: 100%;\n  max-width: 60px;\n  height: 100%;\n  min-height: 70px;\n}\n\n.modal .modal-content .modal-body .modal-icon svg g {\n  mask: none;\n}\n\n.modal .modal-content .modal-body .modal-icon svg g path {\n  fill: var(--primaryColor);\n}\n\n.modal .modal-content .modal-body .modal-icon svg circle {\n  stroke: var(--primaryColor);\n}\n\n.modal .modal-content .modal-footer {\n  color: var(--textColor);\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  padding: 2px 16px;\n  display: flex;\n  position: absolute;\n  bottom: 10px;\n}\n\n@keyframes animatetop {\n  from {\n    opacity: 0;\n    top: -300px;\n  }\n\n  to {\n    opacity: 1;\n    top: 0;\n  }\n}\n\n.confirmTemplateSaveModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 433px !important;\n  height: 100% !important;\n  max-height: 290px !important;\n  margin: 0 auto !important;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent {\n  flex-direction: column;\n  gap: 20px;\n  padding: 16px 16px 0;\n  display: flex;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .trashIconWrapper {\n  text-align: center;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .trashIconWrapper p {\n  color: #ed5c2f;\n  text-align: center;\n  margin-top: 10px;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText p {\n  color: #000;\n  text-align: center;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText p:last-child {\n  color: #000;\n  text-align: center;\n  letter-spacing: .28px;\n  margin: 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 10px 22px;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:focus, .confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:after, .confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.confirmTemplateSaveModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  margin-bottom: 10px;\n}\n\n.confirmTemplateSaveModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 5px;\n  width: 100%;\n  max-width: 107px;\n  height: 100%;\n  min-height: 41px;\n}\n\n.confirmTemplateSaveModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .actionBtns button:disabled {\n  opacity: .5;\n}\n\n.confirmCancelTemplateLeaveModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 407px !important;\n  height: 100% !important;\n  max-height: 258px !important;\n  margin: 0 auto !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent {\n  flex-direction: column;\n  gap: 10px;\n  display: flex;\n  padding: 16px 16px 0 !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .trashIconWrapper {\n  text-align: center;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .trashIconWrapper p {\n  color: #ed5c2f;\n  text-align: center;\n  margin-top: 12px;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText p {\n  color: #000;\n  text-align: center;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText p:last-child {\n  color: #000;\n  text-align: center;\n  letter-spacing: .28px;\n  margin: 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 10px 22px;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:focus, .confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:after, .confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 11px;\n  margin-bottom: 13px;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 3px !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  min-width: 100px !important;\n  min-height: 40px !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  max-width: 146px !important;\n  min-height: 40px !important;\n}\n\n.editTemplateNameModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 623px !important;\n  height: 100% !important;\n  max-height: 230px !important;\n  margin: 0 auto !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n  padding: 16px 16px 0 !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent {\n  padding: 0 30px !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent p {\n  color: #303030;\n  margin: 10px 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 9.8px 22px;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:focus, .editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:after, .editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.editTemplateNameModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  margin: 20px 0;\n}\n\n.editTemplateNameModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 5px;\n  width: 100%;\n  max-width: 107px;\n  height: 100%;\n  min-height: 41px;\n}\n\n.editTemplateNameModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.editTemplateNameModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.top-navigation-container {\n  background: var(--mainBackgroundColor);\n  border-bottom: .5px solid var(--borderColor);\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  max-height: 70px;\n  margin: 0;\n  padding: 23px 20px;\n  display: flex;\n  position: absolute;\n  top: 0;\n}\n\n.top-navigation-container .middle {\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  display: flex;\n}\n\n.top-navigation-container .middle p {\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--textColor);\n  margin-bottom: 0;\n  font-size: 16px;\n  font-weight: 400;\n  overflow: hidden;\n}\n\n.top-navigation-container .middle div {\n  cursor: pointer;\n  border-radius: 50%;\n  justify-content: center;\n  align-items: center;\n  padding: 5px;\n  transition: all .1s ease-in-out;\n  display: flex;\n}\n\n.top-navigation-container .middle div:hover {\n  background-color: #00000013;\n}\n\n.top-navigation-container .middle div svg {\n  fill: var(--textColor);\n}\n\n.top-navigation-container button {\n  text-transform: capitalize;\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n  max-width: 120px !important;\n}\n\n.top-navigation-container .MuiGrid-item {\n  padding-top: 0 !important;\n}\n\n.top-navigation-container .left {\n  justify-content: flex-start !important;\n}\n\n.top-navigation-container .right {\n  gap: 10px !important;\n}\n\n.top-navigation-container .actionsBtnWrapper {\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n}\n\n.top-navigation-container .templateCreateBtn {\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  display: flex;\n}\n\n.polotno-panel-container {\n  overflow-y: auto;\n}\n\n.polotno-panel-container .custom-template-section {\n  display: \"flex\";\n  flex-wrap: \"wrap\";\n  overflow-y: \"scroll\";\n}\n\n.polotno-panel-container .custom-template-section .title span {\n  color: #ed5c2f;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.polotno-panel-container .custom-template-section .default-design {\n  cursor: pointer;\n  border: .5px solid #303030;\n  border-radius: 3px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 320px;\n  height: 224px;\n  margin: 10px auto;\n  display: flex;\n}\n\n.polotno-panel-container .custom-template-section .default-design p {\n  color: #303030;\n  margin-top: 5px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 14.52px;\n}\n\n.polotno-panel-container .custom-template-section .design-template {\n  cursor: pointer;\n  border: .5px solid #303030;\n  border-radius: 3px;\n  width: 320px;\n  height: 224px;\n  margin: 10px auto;\n}\n\n.polotno-panel-container .custom-template-section .design-template img {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n.dummy-image {\n  padding: 85px;\n  object-fit: fill !important;\n}\n\n.MuiTabs-indicator {\n  background-color: #ed5c2f !important;\n}\n\n.templateTabsWrapper {\n  background-color: var(--mainBackgroundColor) !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root {\n  width: 15px;\n  opacity: 1 !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root:hover svg {\n  color: #ed5c2f !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root .Mui-disabled {\n  opacity: 1 !important;\n}\n\n.noTemplateText {\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  min-height: 200px;\n  display: flex;\n}\n\n.noTemplateText p {\n  color: var(--textColor);\n  font-size: 18px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.searchWrapper {\n  justify-content: flex-start;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  display: flex;\n  position: relative;\n}\n\n.searchWrapper .searchInput {\n  color: #000;\n  background: #fff;\n  border: .5px solid #44424180;\n  border-radius: 3px;\n  width: 514px;\n  max-width: 520px;\n  height: 40px;\n  padding: 5px 20px;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.searchWrapper .searchInput:after, .searchWrapper .searchInput:before {\n  display: none;\n}\n\n.searchWrapper .searchInput .searchIcon {\n  color: #ed5c2f;\n  position: relative;\n}\n\n.searchWrapper .searchInput .searchIcon:before {\n  content: \"\";\n  opacity: .5;\n  background-color: #000;\n  width: 1px;\n  height: 90%;\n  position: absolute;\n  left: -5px;\n}\n\n.searchWrapper .searchApplied {\n  background: #fff8ee;\n}\n\n.searchWrapper .searchApplied input {\n  padding-right: 28px;\n}\n\n.searchWrapper .clearSerach {\n  opacity: .6;\n  cursor: pointer;\n  font-size: 18px;\n  position: absolute;\n  top: 10px;\n  right: 55px;\n}\n\n.basic-tooltip {\n  text-align: center !important;\n  color: var(--textColor) !important;\n  opacity: 1 !important;\n  background-color: #fff !important;\n  width: 90% !important;\n  max-width: fit-content !important;\n  box-shadow: 0 0 12px #989595 !important;\n}\n\n.dynamic-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.dynamic-content .dynamic-content__top {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  margin: 8px auto;\n  display: flex;\n}\n\n.dynamic-content .dynamic-content__top .title {\n  color: var(--primaryColor);\n  margin-right: 5px;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 19.36px;\n}\n\n.dynamic-content .dynamic-content__top .icon {\n  cursor: pointer;\n  width: 12px;\n  height: 12px;\n}\n\n.dynamic-content .divider {\n  color: #44424145;\n  margin-top: 10px;\n}\n\n.dynamic-content .contact-element {\n  border: .5px solid var(--borderColor);\n  text-align: center;\n  color: var(--textColor);\n  border-radius: 3px;\n  width: 100%;\n  height: 35px;\n  margin: 5px auto;\n  line-height: 35px;\n}\n\n.dynamic-content .copy {\n  fill: var(--textColor) !important;\n}\n\n@media (width <= 600px) {\n  .polotno-container .builder-wrapper {\n    display: none;\n  }\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container {\n  background-color: var(--mainBackgroundColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab {\n  color: var(--textColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover {\n  background-color: var(--secondaryColor);\n  opacity: .8;\n  color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active svg, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover svg {\n  color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active svg path, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover svg path {\n  fill: var(--primaryColor) !important;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container {\n  background-color: var(--mainBackgroundColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container > div > p {\n  display: none;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab-indicator-wrapper .bp5-tab-indicator {\n  background-color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"true\"] {\n  color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"true\"]:focus {\n  outline: none;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"false\"] {\n  color: var(--textColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"false\"]:focus {\n  outline: none;\n}\n\n.polotno-container .builder-wrapper .polotno-workspace-container {\n  background-color: #0000 !important;\n}\n\n.bp5-popover-transition-container {\n  z-index: 2200 !important;\n}\n\n:root {\n  --font-family: \"Inter\";\n  --srollbar-thumb-color: #ffdfc2;\n  --primaryColor: #ed5c2f;\n  --secondaryColor: #fff8ee;\n  --svgColor: #fdb515;\n  --svgColorNotActive: #fdecd3;\n  --mainBackgroundColor: #fff;\n  --textColor: #000;\n  --borderColor: #303030;\n  --errorColor: red;\n}\n\n:root body {\n  margin: 0;\n  padding: 70px 0 0;\n  font-family: var(--font-family) !important;\n}\n\n:root body::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body body {\n    scrollbar-color: var(--srollbar-thumb-color) var(--secondaryColor);\n  }\n}\n\n:root body .bp5-navbar {\n  color: var(--textColor);\n  background-color: var(--mainBackgroundColor);\n  z-index: auto !important;\n  border-bottom: 1px solid #1114181a !important;\n}\n\n:root body .bp5-navbar .bp5-card {\n  color: var(--textColor);\n  background-color: #0000;\n}\n\n:root body .bp5-navbar .polotno-close-panel .bp5-button-text {\n  color: var(--textColor);\n}\n\n:root body .go4160152499::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .go4160152499::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .go4160152499::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body .go4160152499 body, :root body .polotno-workspace-inner body, :root body .polotno-panel-container body, :root body .polotno-panel-container > div body, :root body .polotno-panel-container > div > div body, :root body .polotno-panel-container > div > div > div body {\n    scrollbar-color: var(--srollbar-thumb-color) var(--secondaryColor);\n  }\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body .bp5-popover-content > div > div > div body {\n    scrollbar-color: var(--srollbar-thumb-color) var(--secondaryColor);\n  }\n}\n", "",{"version":3,"sources":["webpack://./src/components/TemplateBuilder/index.css"],"names":[],"mappings":"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","sourcesContent":[".basic-typo {\n  width: 100%;\n  margin: 0;\n  font-weight: 500;\n}\n\n.basic-typo h1 {\n  font-size: 50px;\n}\n\n.basic-typo h2 {\n  font-size: 45px;\n}\n\n.basic-typo h3 {\n  font-size: 40px;\n}\n\n.basic-typo h4 {\n  font-size: 35px;\n}\n\n.basic-typo h5 {\n  font-size: 30px;\n}\n\n.basic-typo h6 {\n  font-size: 25px;\n}\n\n.basic-typo p {\n  font-size: 18px;\n}\n\n.basic-button {\n  background-color: var(--primaryColor);\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  max-width: fit-content;\n  height: 100%;\n  padding: 0 10px;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n}\n\n.basic-button.disabled {\n  opacity: .5;\n  cursor: not-allowed;\n}\n\n.select-layout {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 8px;\n  width: 100%;\n  display: flex;\n}\n\n.select-layout label {\n  color: var(--textColor);\n  margin-bottom: 5px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.select-layout .generic-select-container {\n  cursor: pointer;\n  width: 100%;\n  font-size: 16px;\n  line-height: 21px;\n}\n\n.select-layout .generic-select-container .generic-select__control {\n  border: .5px solid var(--borderColor);\n  background-color: #0000;\n  border-radius: 7px;\n  height: 100%;\n  min-height: 55px;\n  padding-left: 10px;\n  font-size: 14px;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__value-container .generic-select__placeholder {\n  color: var(--textColor);\n  opacity: .5;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__value-container .generic-select__input-container {\n  color: var(--textColor);\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__value-container .generic-select__single-value {\n  color: var(--textColor);\n  font-size: 14px;\n}\n\n.select-layout .generic-select-container .generic-select__control:hover {\n  border: .5px solid var(--borderColor);\n}\n\n.select-layout .generic-select-container .generic-select__control::placeholder {\n  opacity: .5;\n}\n\n.select-layout .generic-select-container .generic-select__control.generic-select__control--is-focused {\n  border: .5px solid var(--borderColor);\n  box-shadow: none;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__indicators {\n  transition: all .2s ease-in;\n}\n\n.select-layout .generic-select-container .generic-select__control .generic-select__indicators .generic-select__indicator-separator {\n  display: none !important;\n}\n\n.select-layout .generic-select-container .generic-select__menu {\n  background-color: var(--mainBackgroundColor);\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list {\n  padding: 0 5px;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__menu-notice {\n  cursor: not-allowed;\n  color: var(--textColor);\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option {\n  text-align: left;\n  color: var(--textColor);\n  border-bottom: .5px solid var(--borderColor);\n  cursor: pointer;\n  padding: auto 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option:last-child {\n  border: none;\n}\n\n.select-layout .generic-select-container .generic-select__menu .generic-select__menu-list .generic-select__option.generic-select__option--is-focused {\n  background-color: var(--secondaryColor);\n  color: var(--textColor);\n}\n\n.toast-container {\n  z-index: 99999;\n  width: 100%;\n  max-width: 400px;\n}\n\n.toast-container .basic-toast {\n  background-color: var(--primaryColor);\n}\n\n.toast-container .basic-toast .toast-body .toast-content {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 5px;\n  height: 100%;\n  max-height: 50px;\n  display: flex;\n}\n\n.toast-container .basic-toast .toast-body .toast-content p {\n  color: var(--textColor);\n  margin: 0;\n  font-family: var(--font-family) !important;\n}\n\n.toast-container .basic-toast .toast-body .toast-content p:first-child {\n  font-weight: 600;\n}\n\n.toast-container .basic-toast svg {\n  width: 25px;\n  height: 18px;\n}\n\n.input-layout {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 10px;\n  width: 100%;\n  display: flex;\n}\n\n.input-layout .basic-label {\n  color: var(--textColor);\n  font-size: 14px;\n  font-weight: 400;\n}\n\n.input-layout .input-with-icon {\n  border: .5px solid var(--borderColor);\n  background-color: var(--mainBackgroundColor);\n  border-radius: 7px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-height: 55px;\n  display: flex;\n}\n\n.input-layout .input-with-icon .basic-input {\n  color: var(--textColor);\n  background: none;\n  border: none;\n  border-radius: 7px;\n  width: 100%;\n  padding: 5px 20px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 24px;\n  font-family: var(--font-family) !important;\n}\n\n.input-layout .input-with-icon .basic-input:focus {\n  outline: none;\n}\n\n.input-layout .input-with-icon .basic-input::placeholder {\n  opacity: .5;\n  color: var(--textColor);\n}\n\n.input-layout .input-with-icon .search-input-button {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.input-layout .input-with-icon .search-input-button:before {\n  content: \"\";\n  background-color: #303030;\n  width: 1px;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 40px;\n}\n\n.input-layout .input-with-icon .search-input-button svg {\n  cursor: pointer;\n  margin-right: 10px;\n}\n\n.input-layout .input-with-icon .cancel-input-button {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.input-layout .input-with-icon .cancel-input-button svg {\n  cursor: pointer;\n  margin-right: 10px;\n  width: 15px !important;\n}\n\n.input-layout .input-with-icon.errorBorder {\n  border: 1.5px solid var(--errorColor);\n}\n\n.input-layout .focused {\n  background-color: var(--secondaryColor);\n}\n\n.basic-divider {\n  border: none;\n  border-top: .5px solid #0000004d;\n  width: 100%;\n  max-width: 1600px;\n  margin: 3px auto;\n}\n\n.createTemplateMaindiv .createTemplateMainBox {\n  height: 100%;\n  position: relative;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper {\n  border-left: none;\n  border-right: none;\n  margin-left: 40px;\n  padding: 20px 0 30px;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioHeading p {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox {\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 25px;\n  margin-top: 20px;\n  margin-bottom: 10px;\n  display: flex;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio {\n  cursor: pointer;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio input:checked {\n  accent-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio input:focus {\n  outline: none !important;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .tempTypeRadioBox .tempRadio label {\n  cursor: pointer;\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateMainBox .tempTypeRadioWrapper .error-field {\n  color: var(--errorColor);\n  margin-left: 5px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .createTemplateHeader {\n  margin-left: 40px;\n  padding-bottom: 15px;\n}\n\n.createTemplateMaindiv .createTemplateHeader p {\n  color: var(--primaryColor);\n  margin-bottom: 20px;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateHeader .templateInputWrapper p {\n  color: var(--textColor);\n  margin-bottom: 16px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .createTemplateHeader .templateInputWrapper .error-field {\n  color: var(--errorColor);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n  margin-top: 10px !important;\n}\n\n.createTemplateMaindiv .templateSelectWrapper {\n  margin: 20px 0 0 40px;\n  padding-bottom: 15px;\n}\n\n.createTemplateMaindiv .templateSelectWrapper p {\n  color: var(--textColor);\n  margin-bottom: 16px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .templateSelectWrapper .error-field {\n  color: var(--errorColor);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n  margin-top: 10px !important;\n}\n\n.createTemplateMaindiv .productTypeWrapper {\n  margin-left: 40px;\n  padding: 20px 0;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productHeading p:first-child {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productHeading p:last-child {\n  color: var(--primaryColor);\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 18px;\n  text-decoration-line: underline;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper {\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 25px;\n  margin-top: 20px;\n  display: flex;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard {\n  border: .45px solid var(--borderColor);\n  background: var(--mainBackgroundColor);\n  cursor: pointer;\n  border-radius: 6.299px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 17px;\n  width: 100%;\n  max-width: 185px;\n  height: 100%;\n  min-height: 135px;\n  transition: all .1s ease-in;\n  display: flex;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard.active, .createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard:hover {\n  background: var(--secondaryColor);\n  border-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard p {\n  color: var(--primaryColor);\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard:last-child img {\n  margin-bottom: 5px !important;\n}\n\n.createTemplateMaindiv .productTypeWrapper .productsWrapper .productCard.error {\n  border: .45px solid var(--errorColor);\n}\n\n.createTemplateMaindiv .productTypeWrapper .error-field {\n  color: var(--errorColor);\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper {\n  margin: 0 0 80px 40px;\n  padding: 20px 0;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardHeading p {\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper {\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 25px;\n  margin-top: 20px;\n  display: flex;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard {\n  border: .45px solid var(--borderColor);\n  background: var(--mainBackgroundColor);\n  cursor: pointer;\n  border-radius: 6.299px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  padding: 13px 20px;\n  transition: all .1s ease-in;\n  display: flex;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg:last-child {\n  margin-bottom: 20px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard svg path {\n  fill: var(--svgColorNotActive);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover {\n  background: var(--secondaryColor);\n  border-color: var(--primaryColor);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg:nth-child(2), .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg:last-child, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg:last-child {\n  margin-bottom: 20px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg path, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg path, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard.active svg path:hover, .createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard:hover svg path:hover {\n  fill: var(--svgColor);\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard p {\n  color: var(--primaryColor);\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-small {\n  width: 100%;\n  max-width: 150px;\n  height: 100%;\n  min-height: 148px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-mid {\n  width: 100%;\n  max-width: 196px;\n  height: 100%;\n  min-height: 182px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .postCardWrapper .postCard-large {\n  width: 100%;\n  max-width: 248px;\n  height: 100%;\n  min-height: 226px;\n}\n\n.createTemplateMaindiv .postCardSizeWrapper .error-field {\n  color: var(--errorColor);\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16.94px;\n}\n\n.createTemplateMaindiv .footerBtns {\n  border-top: .5px solid var(--borderColor);\n  background-color: var(--mainBackgroundColor);\n  width: 100%;\n  position: fixed;\n  bottom: 0;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns {\n  justify-content: flex-end;\n  align-items: center;\n  gap: 20px;\n  padding: 14px 95px 14px 35px;\n  display: flex;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button {\n  text-transform: capitalize;\n  border-radius: 3px;\n  width: 100%;\n  max-width: 100px;\n  height: 100%;\n  min-height: 40px;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button:first-child {\n  color: var(--textColor);\n  text-align: center;\n  border: .5px solid var(--borderColor);\n  background-color: var(--mainBackgroundColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.createTemplateMaindiv .footerBtns .createTemplateBtns button:last-child {\n  color: var(--mainBackgroundColor);\n  text-align: center;\n  background-color: var(--primaryColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.mb-5 {\n  margin-bottom: 6rem !important;\n}\n\n.error {\n  border: 1.5px solid var(--errorColor);\n}\n\n.basic-progress .loader {\n  aspect-ratio: 1;\n  border-radius: 50%;\n  width: 50px;\n  animation: .8s linear infinite alternate l20-1, 1.6s linear infinite l20-2;\n}\n\n@keyframes l20-1 {\n  0% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);\n  }\n\n  12.5% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);\n  }\n\n  25% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);\n  }\n\n  50% {\n    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  62.5% {\n    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  75% {\n    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);\n  }\n\n  100% {\n    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);\n  }\n}\n\n@keyframes l20-2 {\n  0% {\n    transform: scaleY(1)rotate(0);\n  }\n\n  49.99% {\n    transform: scaleY(1)rotate(135deg);\n  }\n\n  50% {\n    transform: scaleY(-1)rotate(0);\n  }\n\n  100% {\n    transform: scaleY(-1)rotate(-135deg);\n  }\n}\n\n.basic-progress .hide-loader .loader {\n  display: none !important;\n}\n\n.modal {\n  z-index: 99999;\n  background-color: #0009;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  overflow: auto;\n}\n\n.modal .modal-content {\n  background-color: var(--secondaryColor);\n  border: 1px solid #888;\n  border-radius: 11px;\n  width: 80%;\n  margin: auto;\n  padding: 0;\n  animation-name: animatetop;\n  animation-duration: .4s;\n  position: relative;\n  box-shadow: 0 4px 8px #0003, 0 6px 20px #00000030;\n}\n\n.modal .modal-content .modal-header {\n  color: var(--textColor);\n  height: 100%;\n  min-height: 20px;\n  position: relative;\n}\n\n.modal .modal-content .modal-header .close {\n  float: right;\n  font-size: 28px;\n  font-weight: bold;\n  position: absolute;\n  top: 0;\n  right: 5px;\n}\n\n.modal .modal-content .modal-header .close:hover, .modal .modal-content .modal-header .close:focus {\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.modal .modal-content .modal-body {\n  color: var(--textColor);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 16px;\n  display: flex;\n}\n\n.modal .modal-content .modal-body .modal-icon svg {\n  width: 100%;\n  max-width: 60px;\n  height: 100%;\n  min-height: 70px;\n}\n\n.modal .modal-content .modal-body .modal-icon svg g {\n  mask: none;\n}\n\n.modal .modal-content .modal-body .modal-icon svg g path {\n  fill: var(--primaryColor);\n}\n\n.modal .modal-content .modal-body .modal-icon svg circle {\n  stroke: var(--primaryColor);\n}\n\n.modal .modal-content .modal-footer {\n  color: var(--textColor);\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  padding: 2px 16px;\n  display: flex;\n  position: absolute;\n  bottom: 10px;\n}\n\n@keyframes animatetop {\n  from {\n    opacity: 0;\n    top: -300px;\n  }\n\n  to {\n    opacity: 1;\n    top: 0;\n  }\n}\n\n.confirmTemplateSaveModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 433px !important;\n  height: 100% !important;\n  max-height: 290px !important;\n  margin: 0 auto !important;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent {\n  flex-direction: column;\n  gap: 20px;\n  padding: 16px 16px 0;\n  display: flex;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .trashIconWrapper {\n  text-align: center;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .trashIconWrapper p {\n  color: #ed5c2f;\n  text-align: center;\n  margin-top: 10px;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText p {\n  color: #000;\n  text-align: center;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .confirmTemplateSaveText p:last-child {\n  color: #000;\n  text-align: center;\n  letter-spacing: .28px;\n  margin: 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 10px 22px;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:focus, .confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:after, .confirmTemplateSaveModal .confirmTemplateSaveModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.confirmTemplateSaveModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  margin-bottom: 10px;\n}\n\n.confirmTemplateSaveModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 5px;\n  width: 100%;\n  max-width: 107px;\n  height: 100%;\n  min-height: 41px;\n}\n\n.confirmTemplateSaveModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmTemplateSaveModal .actionBtns button:disabled {\n  opacity: .5;\n}\n\n.confirmCancelTemplateLeaveModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 407px !important;\n  height: 100% !important;\n  max-height: 258px !important;\n  margin: 0 auto !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent {\n  flex-direction: column;\n  gap: 10px;\n  display: flex;\n  padding: 16px 16px 0 !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .trashIconWrapper {\n  text-align: center;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .trashIconWrapper p {\n  color: #ed5c2f;\n  text-align: center;\n  margin-top: 12px;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText p {\n  color: #000;\n  text-align: center;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .confirmTemplateLeaveText p:last-child {\n  color: #000;\n  text-align: center;\n  letter-spacing: .28px;\n  margin: 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 10px 22px;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:focus, .confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:after, .confirmCancelTemplateLeaveModal .confirmTemplateLeaveModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 11px;\n  margin-bottom: 13px;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 3px !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  min-width: 100px !important;\n  min-height: 40px !important;\n}\n\n.confirmCancelTemplateLeaveModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  max-width: 146px !important;\n  min-height: 40px !important;\n}\n\n.editTemplateNameModal .MuiPaper-root {\n  background: #fff8ee;\n  border-radius: 11px;\n  width: 100% !important;\n  max-width: 623px !important;\n  height: 100% !important;\n  max-height: 230px !important;\n  margin: 0 auto !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalTitle {\n  color: #ed5c2f;\n  text-align: center;\n  font-size: 22px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: normal;\n  padding: 16px 16px 0 !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent {\n  padding: 0 30px !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent p {\n  color: #303030;\n  margin: 10px 0;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root {\n  background: #fff;\n  border: .5px solid #303030;\n  border-radius: 7px;\n  width: 100%;\n  padding: 9.8px 22px;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:focus, .editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:focus-visible {\n  outline: none !important;\n}\n\n.editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:after, .editTemplateNameModal .editTemplateNameModalContent .MuiInputBase-root:before {\n  display: none !important;\n}\n\n.editTemplateNameModal .actionBtns {\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  margin: 20px 0;\n}\n\n.editTemplateNameModal .actionBtns button {\n  text-transform: capitalize;\n  border-radius: 5px;\n  width: 100%;\n  max-width: 107px;\n  height: 100%;\n  min-height: 41px;\n}\n\n.editTemplateNameModal .actionBtns button:first-child {\n  color: #000;\n  background: #fff;\n  border: .5px solid #30303080;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.editTemplateNameModal .actionBtns button:last-child {\n  color: #fff;\n  background: #ed5c2f;\n  margin: 0;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n.top-navigation-container {\n  background: var(--mainBackgroundColor);\n  border-bottom: .5px solid var(--borderColor);\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  max-height: 70px;\n  margin: 0;\n  padding: 23px 20px;\n  display: flex;\n  position: absolute;\n  top: 0;\n}\n\n.top-navigation-container .middle {\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  display: flex;\n}\n\n.top-navigation-container .middle p {\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--textColor);\n  margin-bottom: 0;\n  font-size: 16px;\n  font-weight: 400;\n  overflow: hidden;\n}\n\n.top-navigation-container .middle div {\n  cursor: pointer;\n  border-radius: 50%;\n  justify-content: center;\n  align-items: center;\n  padding: 5px;\n  transition: all .1s ease-in-out;\n  display: flex;\n}\n\n.top-navigation-container .middle div:hover {\n  background-color: #00000013;\n}\n\n.top-navigation-container .middle div svg {\n  fill: var(--textColor);\n}\n\n.top-navigation-container button {\n  text-transform: capitalize;\n  color: var(--textColor);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n  max-width: 120px !important;\n}\n\n.top-navigation-container .MuiGrid-item {\n  padding-top: 0 !important;\n}\n\n.top-navigation-container .left {\n  justify-content: flex-start !important;\n}\n\n.top-navigation-container .right {\n  gap: 10px !important;\n}\n\n.top-navigation-container .actionsBtnWrapper {\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n}\n\n.top-navigation-container .templateCreateBtn {\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  display: flex;\n}\n\n.polotno-panel-container {\n  overflow-y: auto;\n}\n\n.polotno-panel-container .custom-template-section {\n  display: \"flex\";\n  flex-wrap: \"wrap\";\n  overflow-y: \"scroll\";\n}\n\n.polotno-panel-container .custom-template-section .title span {\n  color: #ed5c2f;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.polotno-panel-container .custom-template-section .default-design {\n  cursor: pointer;\n  border: .5px solid #303030;\n  border-radius: 3px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 320px;\n  height: 224px;\n  margin: 10px auto;\n  display: flex;\n}\n\n.polotno-panel-container .custom-template-section .default-design p {\n  color: #303030;\n  margin-top: 5px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 14.52px;\n}\n\n.polotno-panel-container .custom-template-section .design-template {\n  cursor: pointer;\n  border: .5px solid #303030;\n  border-radius: 3px;\n  width: 320px;\n  height: 224px;\n  margin: 10px auto;\n}\n\n.polotno-panel-container .custom-template-section .design-template img {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n.dummy-image {\n  padding: 85px;\n  object-fit: fill !important;\n}\n\n.MuiTabs-indicator {\n  background-color: #ed5c2f !important;\n}\n\n.templateTabsWrapper {\n  background-color: var(--mainBackgroundColor) !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root {\n  width: 15px;\n  opacity: 1 !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root:hover svg {\n  color: #ed5c2f !important;\n}\n\n.templateTabsWrapper .templateTabs .MuiTabScrollButton-root .Mui-disabled {\n  opacity: 1 !important;\n}\n\n.noTemplateText {\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  min-height: 200px;\n  display: flex;\n}\n\n.noTemplateText p {\n  color: var(--textColor);\n  font-size: 18px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.searchWrapper {\n  justify-content: flex-start;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  display: flex;\n  position: relative;\n}\n\n.searchWrapper .searchInput {\n  color: #000;\n  background: #fff;\n  border: .5px solid #44424180;\n  border-radius: 3px;\n  width: 514px;\n  max-width: 520px;\n  height: 40px;\n  padding: 5px 20px;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.searchWrapper .searchInput:after, .searchWrapper .searchInput:before {\n  display: none;\n}\n\n.searchWrapper .searchInput .searchIcon {\n  color: #ed5c2f;\n  position: relative;\n}\n\n.searchWrapper .searchInput .searchIcon:before {\n  content: \"\";\n  opacity: .5;\n  background-color: #000;\n  width: 1px;\n  height: 90%;\n  position: absolute;\n  left: -5px;\n}\n\n.searchWrapper .searchApplied {\n  background: #fff8ee;\n}\n\n.searchWrapper .searchApplied input {\n  padding-right: 28px;\n}\n\n.searchWrapper .clearSerach {\n  opacity: .6;\n  cursor: pointer;\n  font-size: 18px;\n  position: absolute;\n  top: 10px;\n  right: 55px;\n}\n\n.basic-tooltip {\n  text-align: center !important;\n  color: var(--textColor) !important;\n  opacity: 1 !important;\n  background-color: #fff !important;\n  width: 90% !important;\n  max-width: fit-content !important;\n  box-shadow: 0 0 12px #989595 !important;\n}\n\n.dynamic-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.dynamic-content .dynamic-content__top {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  margin: 8px auto;\n  display: flex;\n}\n\n.dynamic-content .dynamic-content__top .title {\n  color: var(--primaryColor);\n  margin-right: 5px;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 19.36px;\n}\n\n.dynamic-content .dynamic-content__top .icon {\n  cursor: pointer;\n  width: 12px;\n  height: 12px;\n}\n\n.dynamic-content .divider {\n  color: #44424145;\n  margin-top: 10px;\n}\n\n.dynamic-content .contact-element {\n  border: .5px solid var(--borderColor);\n  text-align: center;\n  color: var(--textColor);\n  border-radius: 3px;\n  width: 100%;\n  height: 35px;\n  margin: 5px auto;\n  line-height: 35px;\n}\n\n.dynamic-content .copy {\n  fill: var(--textColor) !important;\n}\n\n@media (width <= 600px) {\n  .polotno-container .builder-wrapper {\n    display: none;\n  }\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container {\n  background-color: var(--mainBackgroundColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab {\n  color: var(--textColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover {\n  background-color: var(--secondaryColor);\n  opacity: .8;\n  color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active svg, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover svg {\n  color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab.active svg path, .polotno-container .builder-wrapper .polotno-side-panel .polotno-side-tabs-container .polotno-side-tabs-inner .polotno-side-panel-tab:hover svg path {\n  fill: var(--primaryColor) !important;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container {\n  background-color: var(--mainBackgroundColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container > div > p {\n  display: none;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab-indicator-wrapper .bp5-tab-indicator {\n  background-color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"true\"] {\n  color: var(--primaryColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"true\"]:focus {\n  outline: none;\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"false\"] {\n  color: var(--textColor);\n}\n\n.polotno-container .builder-wrapper .polotno-side-panel .polotno-panel-container .bp5-tabs .bp5-tab-list .bp5-tab[aria-selected=\"false\"]:focus {\n  outline: none;\n}\n\n.polotno-container .builder-wrapper .polotno-workspace-container {\n  background-color: #0000 !important;\n}\n\n.bp5-popover-transition-container {\n  z-index: 2200 !important;\n}\n\n:root {\n  --font-family: \"Inter\";\n  --srollbar-thumb-color: #ffdfc2;\n  --primaryColor: #ed5c2f;\n  --secondaryColor: #fff8ee;\n  --svgColor: #fdb515;\n  --svgColorNotActive: #fdecd3;\n  --mainBackgroundColor: #fff;\n  --textColor: #000;\n  --borderColor: #303030;\n  --errorColor: red;\n}\n\n:root body {\n  margin: 0;\n  padding: 70px 0 0;\n  font-family: var(--font-family) !important;\n}\n\n:root body::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body body {\n    scrollbar-color: var(--srollbar-thumb-color) var(--secondaryColor);\n  }\n}\n\n:root body .bp5-navbar {\n  color: var(--textColor);\n  background-color: var(--mainBackgroundColor);\n  z-index: auto !important;\n  border-bottom: 1px solid #1114181a !important;\n}\n\n:root body .bp5-navbar .bp5-card {\n  color: var(--textColor);\n  background-color: #0000;\n}\n\n:root body .bp5-navbar .polotno-close-panel .bp5-button-text {\n  color: var(--textColor);\n}\n\n:root body .go4160152499::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar {\n  width: 10px;\n}\n\n:root body .go4160152499::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .go4160152499::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n:root body .polotno-workspace-inner::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n:root body .polotno-panel-container::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n:root body .polotno-panel-container > div > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body .go4160152499 body, :root body .polotno-workspace-inner body, :root body .polotno-panel-container body, :root body .polotno-panel-container > div body, :root body .polotno-panel-container > div > div body, :root body .polotno-panel-container > div > div > div body {\n    scrollbar-color: var(--srollbar-thumb-color) var(--secondaryColor);\n  }\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar-track {\n  border-radius: 3px;\n  background: var(--secondaryColor) !important;\n}\n\n:root body .bp5-popover-content > div > div > div::-webkit-scrollbar-thumb {\n  border-radius: 3px;\n  background: var(--srollbar-thumb-color) !important;\n}\n\n@supports not selector(::-webkit-scrollbar) {\n  :root body .bp5-popover-content > div > div > div body {\n    scrollbar-color: var(--srollbar-thumb-color) var(--secondaryColor);\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ __webpack_exports__.A = (___CSS_LOADER_EXPORT___);
 
@@ -128703,7 +128703,7 @@ if (inBrowser) {
 
 
 
-;// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=template&id=5c3efe80
+;// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=template&id=250962db
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c
@@ -128713,7 +128713,7 @@ var staticRenderFns = []
 render._withStripped = true
 
 
-;// CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=5c3efe80
+;// CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=250962db
 
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
 var injectStylesIntoStyleTag = __webpack_require__(85072);
@@ -137527,9 +137527,9 @@ var _400_update = injectStylesIntoStyleTag_default()(_400/* default */.A, _400_o
 
        /* harmony default export */ var inter_400 = (_400/* default */.A && _400/* default */.A.locals ? _400/* default */.A.locals : undefined);
 
-// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/@fontsource/inter/700.css
-var _700 = __webpack_require__(72804);
-;// CONCATENATED MODULE: ./node_modules/@fontsource/inter/700.css
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/@fontsource/inter/500.css
+var _500 = __webpack_require__(88498);
+;// CONCATENATED MODULE: ./node_modules/@fontsource/inter/500.css
 
       
       
@@ -137541,20 +137541,20 @@ var _700 = __webpack_require__(72804);
       
       
 
-var _700_options = {};
+var _500_options = {};
 
-_700_options.styleTagTransform = (styleTagTransform_default());
-_700_options.setAttributes = (setAttributesWithoutAttributes_default());
-_700_options.insert = insertBySelector_default().bind(null, "head");
-_700_options.domAPI = (styleDomAPI_default());
-_700_options.insertStyleElement = (insertStyleElement_default());
+_500_options.styleTagTransform = (styleTagTransform_default());
+_500_options.setAttributes = (setAttributesWithoutAttributes_default());
+_500_options.insert = insertBySelector_default().bind(null, "head");
+_500_options.domAPI = (styleDomAPI_default());
+_500_options.insertStyleElement = (insertStyleElement_default());
 
-var _700_update = injectStylesIntoStyleTag_default()(_700/* default */.A, _700_options);
+var _500_update = injectStylesIntoStyleTag_default()(_500/* default */.A, _500_options);
 
 
 
 
-       /* harmony default export */ var inter_700 = (_700/* default */.A && _700/* default */.A.locals ? _700/* default */.A.locals : undefined);
+       /* harmony default export */ var inter_500 = (_500/* default */.A && _500/* default */.A.locals ? _500/* default */.A.locals : undefined);
 
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/@fontsource/inter/600.css
 var _600 = __webpack_require__(60137);
@@ -137585,9 +137585,9 @@ var _600_update = injectStylesIntoStyleTag_default()(_600/* default */.A, _600_o
 
        /* harmony default export */ var inter_600 = (_600/* default */.A && _600/* default */.A.locals ? _600/* default */.A.locals : undefined);
 
-// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/@fontsource/inter/500.css
-var _500 = __webpack_require__(88498);
-;// CONCATENATED MODULE: ./node_modules/@fontsource/inter/500.css
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/@fontsource/inter/700.css
+var _700 = __webpack_require__(72804);
+;// CONCATENATED MODULE: ./node_modules/@fontsource/inter/700.css
 
       
       
@@ -137599,20 +137599,20 @@ var _500 = __webpack_require__(88498);
       
       
 
-var _500_options = {};
+var _700_options = {};
 
-_500_options.styleTagTransform = (styleTagTransform_default());
-_500_options.setAttributes = (setAttributesWithoutAttributes_default());
-_500_options.insert = insertBySelector_default().bind(null, "head");
-_500_options.domAPI = (styleDomAPI_default());
-_500_options.insertStyleElement = (insertStyleElement_default());
+_700_options.styleTagTransform = (styleTagTransform_default());
+_700_options.setAttributes = (setAttributesWithoutAttributes_default());
+_700_options.insert = insertBySelector_default().bind(null, "head");
+_700_options.domAPI = (styleDomAPI_default());
+_700_options.insertStyleElement = (insertStyleElement_default());
 
-var _500_update = injectStylesIntoStyleTag_default()(_500/* default */.A, _500_options);
+var _700_update = injectStylesIntoStyleTag_default()(_700/* default */.A, _700_options);
 
 
 
 
-       /* harmony default export */ var inter_500 = (_500/* default */.A && _500/* default */.A.locals ? _500/* default */.A.locals : undefined);
+       /* harmony default export */ var inter_700 = (_700/* default */.A && _700/* default */.A.locals ? _700/* default */.A.locals : undefined);
 
 ;// CONCATENATED MODULE: ./node_modules/immer/dist/immer.mjs
 // src/utils/env.ts
@@ -152899,7 +152899,7 @@ var $ad568a7ac4136873$export$2e2bcd8739ae039 = $ad568a7ac4136873$var$store;
 
 
 
-const $7ad22e5ca6c288ca$export$c3ee1e672e1e24e7 = "https://api.openletterconnect.com/api/v1";
+const $7ad22e5ca6c288ca$export$c3ee1e672e1e24e7 = "https://api.openletterconnect.com/api/v1/sdk";
 const $7ad22e5ca6c288ca$export$6032165a31897610 = 96;
 const $7ad22e5ca6c288ca$export$882f44a34ce19ae0 = "https://api.openletterconnect.com/api/v1/download/s3/openletterconnect/assets/preview/one-barcode.png";
 const $7ad22e5ca6c288ca$export$b14103b5b94712c4 = "https://help.openletterconnect.com/getting-support/designing-your-mailers/wip-designing-mail-creatives/wip-mail-piece-design-specs";
@@ -152932,13 +152932,36 @@ const $7ad22e5ca6c288ca$export$e75e577b199ead61 = [
 ];
 
 
+let $717432aee8737b76$export$4c3a79da664857a5 = "";
+let $717432aee8737b76$export$e484206ee977114e = "";
+const $717432aee8737b76$export$2cdf1b96a9f86d16 = (text)=>{
+    navigator.clipboard.writeText(text).then(()=>{}).catch((err)=>{
+        console.error("Failed to copy text: ", err);
+    });
+};
+const $717432aee8737b76$export$8b5260d2c1269447 = ()=>{
+    return $717432aee8737b76$export$4c3a79da664857a5;
+};
+const $717432aee8737b76$export$750bdf4bac68fe69 = ()=>{
+    return $717432aee8737b76$export$e484206ee977114e;
+};
+const $717432aee8737b76$export$9d2510767fe266f9 = (name)=>{
+    $717432aee8737b76$export$4c3a79da664857a5 = name;
+};
+const $717432aee8737b76$export$4251d26568059eef = (password)=>{
+    $717432aee8737b76$export$e484206ee977114e = password;
+};
+
+
+const $f081c02ac731d950$var$base64Credentials = ()=>btoa(`${(0, $717432aee8737b76$export$8b5260d2c1269447)()}:${(0, $717432aee8737b76$export$750bdf4bac68fe69)()}`);
 const $f081c02ac731d950$var$getHeaders = (additionalHeaders = {})=>({
         "Content-Type": "application/json",
         "Accept": "application/json",
+        "Authorization": `Basic ${$f081c02ac731d950$var$base64Credentials()}`,
         ...additionalHeaders
     });
 const $f081c02ac731d950$var$fetchWrapper = async (endpoint, options)=>{
-    const url = new URL(`${(0, $7ad22e5ca6c288ca$export$c3ee1e672e1e24e7)}/${endpoint}`);
+    const url = new URL(`${(0, $7ad22e5ca6c288ca$export$c3ee1e672e1e24e7)}${endpoint}`);
     if (options.method === "GET" && options.params) Object.entries(options.params).forEach(([key, value])=>{
         url.searchParams.append(key, value);
     });
@@ -153014,7 +153037,7 @@ const $77d971be1e6bcd7c$export$1d2f21e549771e67 = async (endpoint, params)=>{
  * @returns {void}
  */ const $dbaee5ca78364d67$export$afe4a7b3b3722350 = (id, type = "edit")=>async (dispatch)=>{
         try {
-            const { data: data } = await (0, $77d971be1e6bcd7c$export$3988ae62b71be9a3)(`templates/${id}`);
+            const { data: data } = await (0, $77d971be1e6bcd7c$export$3988ae62b71be9a3)(`/templates/${id}`);
             dispatch({
                 type: (0, $e496cac0faa1ff17$export$1c6648626b31f20d),
                 payload: {
@@ -153038,7 +153061,7 @@ const $77d971be1e6bcd7c$export$1d2f21e549771e67 = async (endpoint, params)=>{
  * @throws {Error} - If an error occurs during the upload process.
  */ const $dbaee5ca78364d67$export$bbcabe93832383b3 = async (templateFormData)=>{
     try {
-        const response = await (0, $77d971be1e6bcd7c$export$299ba2dee77727e9)("templates/upload", templateFormData);
+        const response = await (0, $77d971be1e6bcd7c$export$299ba2dee77727e9)("/templates/upload", templateFormData);
         return response;
     } catch (error) {
         return error.response;
@@ -153051,7 +153074,7 @@ const $77d971be1e6bcd7c$export$1d2f21e549771e67 = async (endpoint, params)=>{
  * @returns {Promise<object>} - A promise that resolves to the response from the successful request or the error response if an error occurs.
  */ const $dbaee5ca78364d67$export$7b7ae612b60e1630 = async (data)=>{
     try {
-        const response = await (0, $77d971be1e6bcd7c$export$299ba2dee77727e9)("templates", data);
+        const response = await (0, $77d971be1e6bcd7c$export$299ba2dee77727e9)("/templates", data);
         return response;
     } catch (error) {
         return error.response;
@@ -153065,7 +153088,7 @@ const $77d971be1e6bcd7c$export$1d2f21e549771e67 = async (endpoint, params)=>{
  * @returns {Promise<object>} - A promise that resolves to the response from the successful request or the error response if an error occurs.
  */ const $dbaee5ca78364d67$export$efe36ac11163df30 = async (id, data)=>{
     try {
-        const response = await (0, $77d971be1e6bcd7c$export$b76953f99ab2be78)(`templates/${id}`, data);
+        const response = await (0, $77d971be1e6bcd7c$export$b76953f99ab2be78)(`/templates/${id}`, data);
         return response;
     } catch (error) {
         return error.response;
@@ -153113,7 +153136,7 @@ const $77d971be1e6bcd7c$export$1d2f21e549771e67 = async (endpoint, params)=>{
     try {
         const formData = new FormData();
         formData.append("image", file);
-        const response = await (0, $77d971be1e6bcd7c$export$299ba2dee77727e9)("templates/uploadFile", formData);
+        const response = await (0, $77d971be1e6bcd7c$export$299ba2dee77727e9)("/uploadFile", formData);
         return response?.data?.data?.filePath;
     } catch (error) {
         return error?.response;
@@ -153189,7 +153212,7 @@ const $77d971be1e6bcd7c$export$1d2f21e549771e67 = async (endpoint, params)=>{
  * @throws {object} - The error response if there is an error.
  */ const $dbaee5ca78364d67$export$202033b5492f87a7 = async ()=>{
     try {
-        const response = await (0, $77d971be1e6bcd7c$export$3988ae62b71be9a3)("templates/categories");
+        const response = await (0, $77d971be1e6bcd7c$export$3988ae62b71be9a3)("/categories");
         return response;
     } catch (error) {
         return error.response;
@@ -154886,12 +154909,12 @@ const $3f4ef87f7a4a530a$var$colourStyles = {
     option: (styles, { isDisabled: isDisabled, isFocused: isFocused, isSelected: isSelected })=>{
         return {
             ...styles,
-            backgroundColor: isDisabled ? undefined : isSelected && isFocused ? "var(--selectOptionSelectedBg)" : isFocused && !isSelected ? "var(--selectOptionFocusedColor)" : undefined
+            backgroundColor: isDisabled ? undefined : isSelected && isFocused ? "var(--secondaryColor)" : isFocused && !isSelected ? "var(--secondaryColor)" : undefined
         };
     }
 };
 const $3f4ef87f7a4a530a$var$errorStyles = {
-    color: "#FF0000",
+    color: "var(--errorColor)",
     fontWeight: "400"
 };
 const $3f4ef87f7a4a530a$var$GeneralSelect = ({ options: options, placeholder: placeholder, error: error, label: label, isError: isError, selectedValue: selectedValue, setSelectedValue: setSelectedValue })=>{
@@ -154960,6 +154983,27 @@ const $6ca040a325a745aa$export$823cdc5238933767 = ()=>(dispatch)=>{
 
 
 
+
+const $fb8d63cd819e9d3d$var$Cross = (props)=>{
+    const { toast: toast } = props;
+    return /*#__PURE__*/ (0, jsx_runtime.jsx)("svg", {
+        width: "22",
+        height: "22",
+        viewBox: "0 0 22 22",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, jsx_runtime.jsx)("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M2.11597 10.866C2.11597 8.40681 3.09286 6.04839 4.83173 4.30951C6.57061 2.57064 8.92903 1.59375 11.3882 1.59375C13.8473 1.59375 16.2057 2.57064 17.9446 4.30951C19.6835 6.04839 20.6604 8.40681 20.6604 10.866C20.6604 13.3251 19.6835 15.6835 17.9446 17.4224C16.2057 19.1613 13.8473 20.1382 11.3882 20.1382C8.92903 20.1382 6.57061 19.1613 4.83173 17.4224C3.09286 15.6835 2.11597 13.3251 2.11597 10.866ZM11.3882 2.92375C9.28176 2.92375 7.26164 3.76052 5.77218 5.24997C4.28273 6.73942 3.44597 8.75955 3.44597 10.866C3.44597 12.9724 4.28273 14.9925 5.77218 16.4819C7.26164 17.9714 9.28176 18.8082 11.3882 18.8082C13.4946 18.8082 15.5147 17.9714 17.0042 16.4819C18.4936 14.9925 19.3304 12.9724 19.3304 10.866C19.3304 8.75955 18.4936 6.73942 17.0042 5.24997C15.5147 3.76052 13.4946 2.92375 11.3882 2.92375ZM14.6838 7.57175C14.815 7.70302 14.8887 7.88104 14.8887 8.06665C14.8887 8.25227 14.815 8.43028 14.6838 8.56155L12.378 10.866L14.6838 13.1704C14.8152 13.3018 14.8891 13.4801 14.8891 13.666C14.8891 13.8518 14.8152 14.0301 14.6838 14.1616C14.5523 14.293 14.3741 14.3668 14.1882 14.3668C14.0023 14.3668 13.824 14.293 13.6926 14.1616L11.3882 11.8558L9.08377 14.1616C9.01868 14.2266 8.94142 14.2783 8.85638 14.3135C8.77135 14.3487 8.68021 14.3668 8.58817 14.3668C8.49613 14.3668 8.40499 14.3487 8.31995 14.3135C8.23492 14.2783 8.15765 14.2266 8.09257 14.1616C8.02748 14.0965 7.97586 14.0192 7.94063 13.9342C7.90541 13.8491 7.88728 13.758 7.88728 13.666C7.88728 13.5739 7.90541 13.4828 7.94063 13.3977C7.97586 13.3127 8.02748 13.2354 8.09257 13.1704L10.3984 10.866L8.09257 8.56155C7.96113 8.43011 7.88728 8.25184 7.88728 8.06595C7.88728 7.88006 7.96113 7.70179 8.09257 7.57035C8.22401 7.43891 8.40228 7.36507 8.58817 7.36507C8.77405 7.36507 8.95233 7.43891 9.08377 7.57035L11.3882 9.87615L13.6926 7.57035C13.7576 7.50516 13.8348 7.45344 13.9199 7.41815C14.0049 7.38286 14.0961 7.3647 14.1882 7.3647C14.2802 7.3647 14.3714 7.38286 14.4565 7.41815C14.5415 7.45344 14.6187 7.50656 14.6838 7.57175Z",
+            fill: toast ? `#fff` : `var(--textColor)`
+        })
+    });
+};
+var $fb8d63cd819e9d3d$export$2e2bcd8739ae039 = $fb8d63cd819e9d3d$var$Cross;
+
+
+
 const $a9c4d245899171bf$var$GenericSnackbar = ()=>{
     const open = (0, useSelector)((state)=>state.snackbarReducers.snackbar.open);
     const heading = (0, useSelector)((state)=>state.snackbarReducers.snackbar.heading);
@@ -154969,7 +155013,7 @@ const $a9c4d245899171bf$var$GenericSnackbar = ()=>{
         className: "toast-content",
         children: [
             /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $5a8c8921b86c6a58$export$2e2bcd8739ae039), {
-                children: heading || ""
+                children: heading || "Notifications"
             }),
             /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $5a8c8921b86c6a58$export$2e2bcd8739ae039), {
                 children: message || ""
@@ -154996,7 +155040,11 @@ const $a9c4d245899171bf$var$GenericSnackbar = ()=>{
         toastClassName: "basic-toast",
         bodyClassName: "toast-body",
         hideProgressBar: true,
-        autoClose: 3000
+        autoClose: 3000,
+        closeButton: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $fb8d63cd819e9d3d$export$2e2bcd8739ae039), {
+            toast: true
+        }),
+        closeOnClick: true
     });
 };
 var $a9c4d245899171bf$export$2e2bcd8739ae039 = $a9c4d245899171bf$var$GenericSnackbar;
@@ -155478,7 +155526,7 @@ var $d1daedf6fbcf28dd$export$2e2bcd8739ae039 = $d1daedf6fbcf28dd$var$Cancel;
 
 
 const $ec73244cd7283520$var$errorStyles = {
-    color: "#FF0000",
+    color: "var(--errorColor)",
     fontWeight: "400"
 };
 const $ec73244cd7283520$var$Input = ({ variant: variant = "input", type: type, value: value, onChange: onChange, placeholder: placeholder, label: label, error: error, inputIcon: inputIcon = false, onClick: onClick, searchApplied: searchApplied, removeSearchInput: removeSearchInput, onKeyDown: onKeyDown })=>{
@@ -155507,14 +155555,14 @@ const $ec73244cd7283520$var$Input = ({ variant: variant = "input", type: type, v
                                 className: "cancel-input-button",
                                 onClick: removeSearchInput,
                                 children: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $d1daedf6fbcf28dd$export$2e2bcd8739ae039), {
-                                    fill: "var(--inputSearchIcon)"
+                                    fill: "var(--borderColor)"
                                 })
                             }) : null,
                             /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
                                 className: "search-input-button",
                                 onClick: value.length > 0 ? onClick : ()=>{},
                                 children: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $94c98f5504771208$export$2e2bcd8739ae039), {
-                                    fill: "#ED5C2F"
+                                    fill: "var(--primaryColor)"
                                 })
                             })
                         ]
@@ -155572,8 +155620,8 @@ const $dd071d7635be500b$var$footerButtonStyles = {
     minHeight: "40px",
     textTransform: "capitalize",
     borderRadius: "3px",
-    backgroundColor: "var(--secondaryButtonBgColor)",
-    color: `var(--secondaryButtonTextColor)`,
+    backgroundColor: "var(--mainBackgroundColor)",
+    color: `var(--textColor)`,
     fontSize: `14px`,
     fontWeight: `500`
 };
@@ -155652,8 +155700,8 @@ const $dd071d7635be500b$var$CreateTemplate = ({ returnRoute: returnRoute })=>{
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $d020db196be2fc6a$export$cc55614734af2d87), {
                         children: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $d020db196be2fc6a$export$9eb849b9b922d396), {
-                            lg: 5,
-                            md: 12,
+                            lg: 6,
+                            md: 6,
                             sm: 12,
                             xs: 12,
                             children: /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
@@ -155835,7 +155883,7 @@ const $dd071d7635be500b$var$CreateTemplate = ({ returnRoute: returnRoute })=>{
                             style: {
                                 ...$dd071d7635be500b$var$footerButtonStyles,
                                 color: "#ffffff",
-                                backgroundColor: "var(--primaryButtonBgColor)"
+                                backgroundColor: "var(--primaryColor)"
                             },
                             onClick: handleNext,
                             children: (0, $0b51cdcdcd2b1339$export$af7faffe10421f14).TEMPLATE.CREATE.SUBMIT_BUTTON
@@ -156064,28 +156112,9 @@ var $9d3950b100c0523a$export$2e2bcd8739ae039 = $9d3950b100c0523a$var$CircularPro
 
 
 
-const $fb8d63cd819e9d3d$var$Cross = ()=>{
-    return /*#__PURE__*/ (0, jsx_runtime.jsx)("svg", {
-        width: "22",
-        height: "22",
-        viewBox: "0 0 22 22",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, jsx_runtime.jsx)("path", {
-            "fill-rule": "evenodd",
-            "clip-rule": "evenodd",
-            d: "M2.11597 10.866C2.11597 8.40681 3.09286 6.04839 4.83173 4.30951C6.57061 2.57064 8.92903 1.59375 11.3882 1.59375C13.8473 1.59375 16.2057 2.57064 17.9446 4.30951C19.6835 6.04839 20.6604 8.40681 20.6604 10.866C20.6604 13.3251 19.6835 15.6835 17.9446 17.4224C16.2057 19.1613 13.8473 20.1382 11.3882 20.1382C8.92903 20.1382 6.57061 19.1613 4.83173 17.4224C3.09286 15.6835 2.11597 13.3251 2.11597 10.866ZM11.3882 2.92375C9.28176 2.92375 7.26164 3.76052 5.77218 5.24997C4.28273 6.73942 3.44597 8.75955 3.44597 10.866C3.44597 12.9724 4.28273 14.9925 5.77218 16.4819C7.26164 17.9714 9.28176 18.8082 11.3882 18.8082C13.4946 18.8082 15.5147 17.9714 17.0042 16.4819C18.4936 14.9925 19.3304 12.9724 19.3304 10.866C19.3304 8.75955 18.4936 6.73942 17.0042 5.24997C15.5147 3.76052 13.4946 2.92375 11.3882 2.92375ZM14.6838 7.57175C14.815 7.70302 14.8887 7.88104 14.8887 8.06665C14.8887 8.25227 14.815 8.43028 14.6838 8.56155L12.378 10.866L14.6838 13.1704C14.8152 13.3018 14.8891 13.4801 14.8891 13.666C14.8891 13.8518 14.8152 14.0301 14.6838 14.1616C14.5523 14.293 14.3741 14.3668 14.1882 14.3668C14.0023 14.3668 13.824 14.293 13.6926 14.1616L11.3882 11.8558L9.08377 14.1616C9.01868 14.2266 8.94142 14.2783 8.85638 14.3135C8.77135 14.3487 8.68021 14.3668 8.58817 14.3668C8.49613 14.3668 8.40499 14.3487 8.31995 14.3135C8.23492 14.2783 8.15765 14.2266 8.09257 14.1616C8.02748 14.0965 7.97586 14.0192 7.94063 13.9342C7.90541 13.8491 7.88728 13.758 7.88728 13.666C7.88728 13.5739 7.90541 13.4828 7.94063 13.3977C7.97586 13.3127 8.02748 13.2354 8.09257 13.1704L10.3984 10.866L8.09257 8.56155C7.96113 8.43011 7.88728 8.25184 7.88728 8.06595C7.88728 7.88006 7.96113 7.70179 8.09257 7.57035C8.22401 7.43891 8.40228 7.36507 8.58817 7.36507C8.77405 7.36507 8.95233 7.43891 9.08377 7.57035L11.3882 9.87615L13.6926 7.57035C13.7576 7.50516 13.8348 7.45344 13.9199 7.41815C14.0049 7.38286 14.0961 7.3647 14.1882 7.3647C14.2802 7.3647 14.3714 7.38286 14.4565 7.41815C14.5415 7.45344 14.6187 7.50656 14.6838 7.57175Z",
-            fill: "var(--dialogModalCrossIconColor)"
-        })
-    });
-};
-var $fb8d63cd819e9d3d$export$2e2bcd8739ae039 = $fb8d63cd819e9d3d$var$Cross;
-
-
-
 const $c8f7718e9f3db339$var$buttonStyles = {
-    color: "var(--primaryButtonTextColor)",
-    backgroundColor: "var(--primaryButtonBgColor)",
+    color: "var(--mainBackgroundColor)",
+    backgroundColor: "var(--primaryColor)",
     maxWidth: "100px",
     minHeight: "40px",
     border: "0.5px solid var(--borderColor)",
@@ -156093,12 +156122,12 @@ const $c8f7718e9f3db339$var$buttonStyles = {
 };
 const $c8f7718e9f3db339$var$heading = {
     fontSize: "22px",
-    color: "var(--dialogModalHeadingColor)",
+    color: "var(--primaryColor)",
     fontWeight: "600"
 };
 const $c8f7718e9f3db339$var$subHeadingStyle = {
     fontSize: "16px",
-    color: "var(--dialogModalTextColor)",
+    color: "var(--textColor)",
     fontWeight: "600",
     textAlign: "center"
 };
@@ -156130,7 +156159,7 @@ const $c8f7718e9f3db339$var$Dialog = ({ icon: icon = null, customStyles: customS
                 /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
                     className: "modal-body",
                     children: [
-                        /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
+                        icon && /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
                             className: "modal-icon",
                             children: icon
                         }),
@@ -156163,8 +156192,8 @@ const $c8f7718e9f3db339$var$Dialog = ({ icon: icon = null, customStyles: customS
                             onClick: onCancel,
                             style: {
                                 ...$c8f7718e9f3db339$var$buttonStyles,
-                                color: "var(--secondaryButtonTextColor)",
-                                backgroundColor: "var(--secondaryButtonBgColor)"
+                                color: "var(--textColor)",
+                                backgroundColor: "var(--mainBackgroundColor)"
                             },
                             children: cancelText
                         }),
@@ -156251,18 +156280,39 @@ var $f8816ee2d46ac0fb$export$2e2bcd8739ae039 = $f8816ee2d46ac0fb$var$SaveTemplat
 
 const $8c59b172071542b8$var$ModalCross = (props)=>{
     const { disabled: disabled, fill: fill } = props;
-    return /*#__PURE__*/ (0, jsx_runtime.jsx)("svg", {
-        width: "21",
-        height: "22",
-        viewBox: "0 0 21 22",
+    return /*#__PURE__*/ (0, jsx_runtime.jsxs)("svg", {
+        width: "26",
+        height: "26",
+        viewBox: "0 0 26 26",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, jsx_runtime.jsx)("path", {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M1.22803 10.6482C1.22803 8.18904 2.20492 5.83062 3.94379 4.09174C5.68267 2.35287 8.04109 1.37598 10.5002 1.37598C12.9594 1.37598 15.3178 2.35287 17.0567 4.09174C18.7955 5.83062 19.7724 8.18904 19.7724 10.6482C19.7724 13.1073 18.7955 15.4657 17.0567 17.2046C15.3178 18.9435 12.9594 19.9204 10.5002 19.9204C8.04109 19.9204 5.68267 18.9435 3.94379 17.2046C2.20492 15.4657 1.22803 13.1073 1.22803 10.6482ZM10.5002 2.70598C8.39383 2.70598 6.3737 3.54274 4.88424 5.03219C3.39479 6.52165 2.55803 8.54177 2.55803 10.6482C2.55803 12.7546 3.39479 14.7747 4.88424 16.2642C6.3737 17.7536 8.39383 18.5904 10.5002 18.5904C12.6066 18.5904 14.6268 17.7536 16.1162 16.2642C17.6057 14.7747 18.4424 12.7546 18.4424 10.6482C18.4424 8.54177 17.6057 6.52165 16.1162 5.03219C14.6268 3.54274 12.6066 2.70598 10.5002 2.70598ZM13.7958 7.35398C13.9271 7.48525 14.0008 7.66326 14.0008 7.84888C14.0008 8.03449 13.9271 8.21251 13.7958 8.34378L11.49 10.6482L13.7958 12.9526C13.9273 13.084 14.0011 13.2623 14.0011 13.4482C14.0011 13.6341 13.9273 13.8123 13.7958 13.9438C13.6644 14.0752 13.4861 14.1491 13.3002 14.1491C13.1143 14.1491 12.9361 14.0752 12.8046 13.9438L10.5002 11.638L8.19583 13.9438C8.13074 14.0089 8.05348 14.0605 7.96845 14.0957C7.88341 14.1309 7.79227 14.1491 7.70023 14.1491C7.60819 14.1491 7.51705 14.1309 7.43201 14.0957C7.34698 14.0605 7.26971 14.0089 7.20463 13.9438C7.13954 13.8787 7.08792 13.8014 7.0527 13.7164C7.01747 13.6314 6.99934 13.5402 6.99934 13.4482C6.99934 13.3561 7.01747 13.265 7.0527 13.18C7.08792 13.0949 7.13954 13.0177 7.20463 12.9526L9.51043 10.6482L7.20463 8.34378C7.07319 8.21234 6.99934 8.03406 6.99934 7.84818C6.99934 7.66229 7.07319 7.48402 7.20463 7.35258C7.33607 7.22114 7.51434 7.14729 7.70023 7.14729C7.88611 7.14729 8.06439 7.22114 8.19583 7.35258L10.5002 9.65838L12.8046 7.35258C12.8697 7.28739 12.9469 7.23567 13.0319 7.20038C13.117 7.16509 13.2082 7.14693 13.3002 7.14693C13.3923 7.14693 13.4835 7.16509 13.5685 7.20038C13.6536 7.23567 13.7308 7.28879 13.7958 7.35398Z",
-            fill: disabled ? "grey" : fill
-        })
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime.jsx)("mask", {
+                id: "mask0_1992_577",
+                maskUnits: "userSpaceOnUse",
+                x: "2",
+                y: "2",
+                width: "22",
+                height: "22",
+                children: /*#__PURE__*/ (0, jsx_runtime.jsx)("path", {
+                    d: "M13 2L23.9519 12.9519L13.0144 23.8893L2.06256 12.9374L13 2Z",
+                    fill: "white"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime.jsx)("g", {
+                mask: "url(#mask0_1992_577)",
+                children: /*#__PURE__*/ (0, jsx_runtime.jsx)("path", {
+                    d: "M19.5433 16.4305C18.2305 15.1176 16.9176 13.8047 15.6047 12.4919C15.6046 12.7834 15.6044 13.0749 15.6043 13.3664C16.9186 12.052 18.2331 10.7375 19.5475 9.42317C19.786 9.18463 19.7861 8.78667 19.548 8.54854C18.8237 7.82426 18.0994 7.09998 17.3752 6.3757C17.1369 6.13743 16.7391 6.13769 16.5005 6.37623C15.1862 7.69058 13.8717 9.00507 12.5573 10.3194C12.8488 10.3193 13.1403 10.3191 13.4318 10.319C12.119 9.00613 10.8061 7.69325 9.4932 6.38037C9.25493 6.1421 8.85723 6.14223 8.6187 6.38077C7.89348 7.10598 7.1684 7.83106 6.44319 8.55628C6.20492 8.79455 6.20452 9.19251 6.44279 9.43078C7.75567 10.7437 9.06856 12.0565 10.3814 13.3694C10.3816 13.0779 10.3817 12.7864 10.3818 12.4949C9.06749 13.8093 7.753 15.1238 6.43865 16.4381C6.20025 16.6765 6.19998 17.0743 6.43825 17.3126C7.16253 18.0369 7.88681 18.7612 8.61109 19.4854C8.84923 19.7236 9.24719 19.7234 9.48559 19.485C10.7999 18.1707 12.1144 16.8562 13.4288 15.5419C13.1373 15.542 12.8458 15.5421 12.5543 15.5423C13.8672 16.8551 15.18 18.168 16.4929 19.4809C16.7311 19.719 17.1289 19.7188 17.3673 19.4804C18.0924 18.7553 18.8176 18.0301 19.5427 17.305C20.107 16.7407 19.2332 15.8668 18.6688 16.4312C17.9438 17.1563 17.2185 17.8815 16.4935 18.6065C16.785 18.6064 17.0763 18.6061 17.3678 18.606C16.0549 17.2931 14.7421 15.9802 13.4292 14.6674C13.191 14.4292 12.7932 14.4295 12.5548 14.6679C11.2403 15.9824 9.92598 17.2967 8.61149 18.6112C8.90313 18.6109 9.19436 18.6108 9.48599 18.6105C8.76171 17.8863 8.03743 17.162 7.31315 16.4377C7.31289 16.7293 7.31275 17.0206 7.31249 17.3122C8.62697 15.9977 9.94132 14.6834 11.2558 13.3689C11.4942 13.1305 11.4946 12.7328 11.2563 12.4945C9.94345 11.1816 8.63057 9.86876 7.31769 8.55588C7.31742 8.84724 7.31729 9.13874 7.31716 9.43024C8.04224 8.70516 8.76745 7.97995 9.49253 7.25487C9.20103 7.255 8.90953 7.25513 8.61816 7.2554C9.93105 8.56828 11.2439 9.88117 12.5568 11.194C12.7951 11.4323 13.1926 11.4321 13.4312 11.1935C14.7457 9.87903 16.0601 8.56455 17.3745 7.2502C17.083 7.25033 16.7916 7.2506 16.5001 7.25073C17.2244 7.97501 17.9487 8.69929 18.673 9.42357C18.6731 9.13207 18.6734 8.8407 18.6735 8.5492C17.3592 9.86355 16.0447 11.178 14.7302 12.4925C14.4917 12.7311 14.4917 13.1289 14.7297 13.3669C16.0425 14.6798 17.3554 15.9927 18.6683 17.3055C19.2318 17.8691 20.1069 16.994 19.5433 16.4305Z",
+                    fill: disabled ? "grey" : fill
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime.jsx)("circle", {
+                cx: "13",
+                cy: "13",
+                r: "12",
+                "stroke-width": "2"
+            })
+        ]
     });
 };
 var $8c59b172071542b8$export$2e2bcd8739ae039 = $8c59b172071542b8$var$ModalCross;
@@ -156278,14 +156328,12 @@ var $8c59b172071542b8$export$2e2bcd8739ae039 = $8c59b172071542b8$var$ModalCross;
  * @returns {JSX.Element} The duplicate template modal component.
  *
  */ const $b3fd558411fcaf23$var$cancelDialogStyles = {
-    maxWidth: "450px",
-    minHeight: "260px"
+    maxWidth: "407px",
+    minHeight: "258px"
 };
 const $b3fd558411fcaf23$var$ConfirmNavigateDialog = ({ open: open, handleClose: handleClose, handleNavigateAction: handleNavigateAction })=>{
     return /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $c8f7718e9f3db339$export$2e2bcd8739ae039), {
-        icon: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $8c59b172071542b8$export$2e2bcd8739ae039), {
-            fill: "var(--primaryColor)"
-        }),
+        icon: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $8c59b172071542b8$export$2e2bcd8739ae039), {}),
         customStyles: $b3fd558411fcaf23$var$cancelDialogStyles,
         open: open,
         handleClose: handleClose,
@@ -156395,8 +156443,8 @@ var $6612202931a08516$export$2e2bcd8739ae039 = $6612202931a08516$var$editPencilI
  */ const $d31b9bd88e5dcf67$var$buttonStyles = {
     maxWidth: "120px",
     minHeight: "40px",
-    backgroundColor: "var(--secondaryButtonBgColor)",
-    color: "var(--secondaryButtonTextColor)",
+    backgroundColor: "var(--mainBackgroundColor)",
+    color: "var(--textColor)",
     border: "0.5px solid var(--borderColor)",
     fontSize: "15px",
     fontWeight: "500"
@@ -156659,7 +156707,7 @@ const $d31b9bd88e5dcf67$var$TopNavigation = ({ store: store, returnRoute: return
                                         ...$d31b9bd88e5dcf67$var$buttonStyles,
                                         border: "none",
                                         backgroundColor: "var(--primaryColor)",
-                                        color: "var(--primaryButtonTextColor)"
+                                        color: "var(--mainBackgroundColor)"
                                     },
                                     onClick: ()=>handleChangeModel("save"),
                                     children: (0, $0b51cdcdcd2b1339$export$af7faffe10421f14).TEMPLATE.SUBMIT_BUTTON
@@ -156693,7 +156741,6 @@ var $d31b9bd88e5dcf67$export$2e2bcd8739ae039 = $d31b9bd88e5dcf67$var$TopNavigati
 
 
 
-
 
 
 const $21e11f889f8068bf$var$templateDefaultDesign = (props)=>{
@@ -156741,8 +156788,12 @@ var $afa975ba1b70ddf3$export$2e2bcd8739ae039 = $afa975ba1b70ddf3$var$CustomTempl
 
 
 const $c6f5440378b96420$var$designDialogStyles = {
-    maxWidth: "600px",
-    minHeight: "270px"
+    maxWidth: "430px",
+    minHeight: "265px"
+};
+const $c6f5440378b96420$var$loadDialogStyles = {
+    maxWidth: "430px",
+    minHeight: "285px"
 };
 const $c6f5440378b96420$var$templateTextStyles = {
     color: `var(--textColor)`,
@@ -156758,7 +156809,7 @@ const $c6f5440378b96420$var$customTemplateSection = {
             name: "Templates",
             ...props,
             children: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $afa975ba1b70ddf3$export$2e2bcd8739ae039), {
-                fill: "var(--sidepanelSVGColor)"
+                fill: "var(--textColor)"
             })
         })),
     Panel: (0, es.observer)(({ store: store, onGetTemplates: onGetTemplates })=>{
@@ -156772,6 +156823,14 @@ const $c6f5440378b96420$var$customTemplateSection = {
         const [olcTemplates, setOlcTemplates] = (0, react.useState)([]);
         const [searchApplied, setSearchApplied] = (0, react.useState)(false);
         const [search, setSearch] = (0, react.useState)("");
+        const [pagination, setPagination] = (0, react.useState)({
+            count: 0,
+            currentPage: 0,
+            perPage: 0
+        });
+        const paginationRef = (0, react.useRef)(pagination);
+        const searchRef = (0, react.useRef)(search);
+        const currentTemplateTypeRef = (0, react.useRef)(currentTemplateType);
         const templates = (0, useSelector)((state)=>state.templates.templates);
         const template = (0, useSelector)((state)=>state.templates.template);
         const templatesPagination = (0, useSelector)((state)=>state.templates.templatesPagination);
@@ -156786,27 +156845,48 @@ const $c6f5440378b96420$var$customTemplateSection = {
             setSelectedRecord(record);
             handleDialogChange("load-template");
         };
-        const getTemplatesByTab = async ()=>{
+        const getTemplatesByTab = async (page = 1)=>{
             const payload = {
-                tab: currentTemplateType?.id === "1" ? "my-templates" : currentTemplateType?.id === "2" ? "team-templates" : "olc-templates",
-                page: 1,
-                pageSize: 500,
+                tab: currentTemplateTypeRef.current?.id === "1" ? "my-templates" : currentTemplateTypeRef.current?.id === "2" ? "team-templates" : "olc-templates",
+                page: page,
+                pageSize: 10,
                 productId: product?.id
             };
-            search.length ? payload.search = search : undefined;
-            currentTemplateType?.id === "3" ? payload.categoryIds = selectedCategory?.id.split(",") : undefined;
+            searchRef.current.length ? payload.search = searchRef.current : undefined;
+            currentTemplateTypeRef.current?.id === "3" ? payload.categoryIds = selectedCategory?.id.split(",") : undefined;
             if (onGetTemplates) {
                 const templates = await onGetTemplates(payload);
-                if (templates.length) {
-                    if (currentTemplateType?.id === "1") setMyTemplates(templates);
-                    else if (currentTemplateType?.id === "2") setTeamTemplates(templates);
-                    else setOlcTemplates(templates);
+                if (templates?.rows) {
+                    const newTemplates = templates.rows;
+                    if (currentTemplateTypeRef.current?.id === "1") {
+                        if (templates.currentPage === 1) setMyTemplates(newTemplates);
+                        else setMyTemplates((prevTemplates)=>[
+                                ...prevTemplates,
+                                ...newTemplates
+                            ]);
+                    } else if (currentTemplateTypeRef.current?.id === "2") {
+                        if (templates.currentPage === 1) setTeamTemplates(newTemplates);
+                        else setTeamTemplates((prevTemplates)=>[
+                                ...prevTemplates,
+                                ...newTemplates
+                            ]);
+                    } else if (currentTemplateTypeRef.current?.id === "3") {
+                        if (templates.currentPage === 1) setOlcTemplates(newTemplates);
+                        else setOlcTemplates((prevTemplates)=>[
+                                ...prevTemplates,
+                                ...newTemplates
+                            ]);
+                    }
+                    setPagination({
+                        count: templates.count,
+                        currentPage: templates.currentPage,
+                        perPage: templates.perPage
+                    });
                 }
-            } else dispatch((0, $6ca040a325a745aa$export$af2dba6db4e9e1f0)("Please provide onGetTemplates handler via Props to load templates"));
+            }
         };
-        // TODO Call New Route / Recive via Props for Templates Category
         const getAllCategories = async ()=>{
-            const categories = dispatch((0, $dbaee5ca78364d67$export$202033b5492f87a7));
+            const categories = await dispatch((0, $dbaee5ca78364d67$export$202033b5492f87a7));
             if (categories?.status === 200) setTemplateCategories(categories?.data?.data.filter((item)=>item.totalTemplates > 0).map((item)=>({
                     ...item,
                     label: item.title
@@ -156825,10 +156905,10 @@ const $c6f5440378b96420$var$customTemplateSection = {
         const searchKeyDown = (event)=>{
             if (event.key === "Enter") handleSearch();
         };
-        const handleLoadAllTemplate = (pagination = false, initialCall = false)=>{
-            let page = pagination ? ++templates.currentPage : templates.currentPage;
+        const handleLoadAllTemplate = (dynamicPagination = false, initialCall = false)=>{
+            let page = dynamicPagination ? ++paginationRef.current.currentPage : paginationRef.current.currentPage;
             if (initialCall) page = 1;
-        // Call getAllTemplates if required.
+            getTemplatesByTab(page);
         };
         const handleLoadTemplate = (id)=>{
             dispatch((0, $dbaee5ca78364d67$export$afe4a7b3b3722350)(id, "copy"));
@@ -156916,13 +156996,29 @@ const $c6f5440378b96420$var$customTemplateSection = {
             if (!search) {
                 setSearchApplied(false);
                 setSearch("");
-                getTemplatesByTab();
+                setTimeout(()=>{
+                    getTemplatesByTab();
+                }, 100);
             }
         }, [
             search
         ]);
         (0, react.useEffect)(()=>{
-            handleLoadAllTemplate(true, true);
+            searchRef.current = search;
+        }, [
+            search
+        ]);
+        (0, react.useEffect)(()=>{
+            currentTemplateTypeRef.current = currentTemplateType;
+        }, [
+            currentTemplateType
+        ]);
+        (0, react.useEffect)(()=>{
+            paginationRef.current = pagination;
+        }, [
+            pagination
+        ]);
+        (0, react.useEffect)(()=>{
             getAllCategories();
             return ()=>{
                 dispatch((0, $dbaee5ca78364d67$export$1e6ea60acfeb7da4)());
@@ -156934,15 +157030,16 @@ const $c6f5440378b96420$var$customTemplateSection = {
             currentTemplateType,
             selectedCategory
         ]);
+        const handleScroll = ()=>{
+            const div = document.querySelector(".polotno-panel-container");
+            if (div) {
+                const isAtBottom = div.scrollTop + div.clientHeight >= div.scrollHeight;
+                const isNeedToLoadMore = paginationRef.current.currentPage * paginationRef.current.perPage < paginationRef.current.count;
+                if (isAtBottom && !templatesPagination.loading && isNeedToLoadMore) handleLoadAllTemplate(true);
+            }
+        };
         (0, react.useEffect)(()=>{
             const div = document.querySelector(".polotno-panel-container");
-            const handleScroll = ()=>{
-                if (div) {
-                    const isAtBottom = div.scrollTop + div.clientHeight >= div.scrollHeight;
-                    const isNeedToLoadMore = templates.currentPage * templates.perPage < templates.count;
-                    if (isAtBottom && !templatesPagination.loading && isNeedToLoadMore) handleLoadAllTemplate(true);
-                }
-            };
             if (div) {
                 div.removeEventListener("scroll", handleScroll);
                 div.addEventListener("scroll", handleScroll);
@@ -156957,9 +157054,7 @@ const $c6f5440378b96420$var$customTemplateSection = {
             className: "custom-template-section",
             children: [
                 isShowDialog.open && isShowDialog.model === "design-own" && /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $c8f7718e9f3db339$export$2e2bcd8739ae039), {
-                    icon: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $8c59b172071542b8$export$2e2bcd8739ae039), {
-                        fill: "var(--primaryColor)"
-                    }),
+                    icon: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $8c59b172071542b8$export$2e2bcd8739ae039), {}),
                     title: (0, $0b51cdcdcd2b1339$export$af7faffe10421f14).TEMPLATE.DESIGN_YOUR_OWN.TITLE,
                     subHeading: (0, $0b51cdcdcd2b1339$export$af7faffe10421f14).TEMPLATE.DESIGN_YOUR_OWN.HEADING,
                     description: (0, $0b51cdcdcd2b1339$export$af7faffe10421f14).TEMPLATE.DESIGN_YOUR_OWN.PARAGRAPH,
@@ -156980,7 +157075,7 @@ const $c6f5440378b96420$var$customTemplateSection = {
                     handleClose: ()=>handleDialogChange(""),
                     onCancel: ()=>handleDialogChange(""),
                     onSubmit: ()=>handleLoadTemplate(selectedRecord?.id),
-                    customStyles: $c6f5440378b96420$var$designDialogStyles,
+                    customStyles: $c6f5440378b96420$var$loadDialogStyles,
                     cancelText: "Cancel",
                     submitText: "OK"
                 }),
@@ -157050,7 +157145,7 @@ const $c6f5440378b96420$var$customTemplateSection = {
                                     onClick: ()=>handleDialogChange("design-own"),
                                     children: [
                                         /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $21e11f889f8068bf$export$2e2bcd8739ae039), {
-                                            fill: "var(--svgColorSecondary)"
+                                            fill: "var(--primaryColor)"
                                         }),
                                         /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $5a8c8921b86c6a58$export$2e2bcd8739ae039), {
                                             style: $c6f5440378b96420$var$templateTextStyles,
@@ -157149,12 +157244,6 @@ const $7d1ce187c1ab3d01$var$GeneralTooltip = ({ anchorSelect: anchorSelect, plac
 var $7d1ce187c1ab3d01$export$2e2bcd8739ae039 = $7d1ce187c1ab3d01$var$GeneralTooltip;
 
 
-const $717432aee8737b76$export$2cdf1b96a9f86d16 = (text)=>{
-    navigator.clipboard.writeText(text).then(()=>{}).catch((err)=>{
-        console.error("Failed to copy text: ", err);
-    });
-};
-
 
 
 
@@ -157262,7 +157351,7 @@ const $57048af01a29b1ce$var$customFieldSection = {
             name: "Fields",
             ...props,
             children: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $c63ab7ca46bc9f98$export$2e2bcd8739ae039), {
-                fill: "var(--sidepanelSVGColor)"
+                fill: "var(--textColor)"
             })
         })),
     Panel: (0, es.observer)(({ store: store, onGetCustomFields: onGetCustomFields })=>{
@@ -157282,7 +157371,7 @@ const $57048af01a29b1ce$var$customFieldSection = {
                     type: (0, $e496cac0faa1ff17$export$958a4de996e717f9),
                     payload: customFields
                 });
-            } else dispatch((0, $6ca040a325a745aa$export$af2dba6db4e9e1f0)("Please add onGetCustomFields handler Via Props to load all custom fields"));
+            }
         };
         (0, react.useEffect)(()=>{
             fetchCustomFields();
@@ -157372,54 +157461,58 @@ const $57048af01a29b1ce$var$customFieldSection = {
                     place: "bottom",
                     title: "Copy"
                 }),
-                /*#__PURE__*/ (0, jsx_runtime.jsx)("hr", {
-                    className: "divider"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
-                    className: "dynamic-content__top",
+                onGetCustomFields && /*#__PURE__*/ (0, jsx_runtime.jsxs)((0, jsx_runtime.Fragment), {
                     children: [
+                        /*#__PURE__*/ (0, jsx_runtime.jsx)("hr", {
+                            className: "divider"
+                        }),
                         /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
+                            className: "dynamic-content__top",
                             children: [
-                                /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
-                                    className: "title",
-                                    children: "Custom Fields"
-                                }),
-                                /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $10fe05b81a81fb3f$export$2e2bcd8739ae039), {
-                                    fill: "var(--primaryColor)",
-                                    className: "custom"
+                                /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
+                                            className: "title",
+                                            children: "Custom Fields"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $10fe05b81a81fb3f$export$2e2bcd8739ae039), {
+                                            fill: "var(--primaryColor)",
+                                            className: "custom"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $7d1ce187c1ab3d01$export$2e2bcd8739ae039), {
+                                            anchorSelect: ".custom",
+                                            place: "bottom",
+                                            title: "You can add custom fields to your template."
+                                        })
+                                    ]
                                 }),
-                                /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $7d1ce187c1ab3d01$export$2e2bcd8739ae039), {
-                                    anchorSelect: ".custom",
-                                    place: "bottom",
-                                    title: "You can add custom fields to your template."
+                                /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $468b2e43c10c77f3$export$2e2bcd8739ae039), {
+                                    onClick: handleShowDialog
                                 })
                             ]
                         }),
-                        /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $468b2e43c10c77f3$export$2e2bcd8739ae039), {
-                            onClick: handleShowDialog
-                        })
+                        customFields?.map(({ key: key, value: value }, i)=>/*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
+                                style: {
+                                    display: "flex",
+                                    alignItems: "center"
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
+                                        className: "contact-element",
+                                        onClick: (event)=>handleAddElementOnScreen(event, key, "click"),
+                                        children: value
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $468b2e43c10c77f3$export$2e2bcd8739ae039), {
+                                        style: $57048af01a29b1ce$var$iconButtonStyles,
+                                        onClick: ()=>copyCustomFieldText(key),
+                                        children: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $e06bdfe75163a118$export$2e2bcd8739ae039), {
+                                            className: "copy"
+                                        })
+                                    })
+                                ]
+                            }, i))
                     ]
-                }),
-                customFields?.map(({ key: key, value: value }, i)=>/*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
-                        style: {
-                            display: "flex",
-                            alignItems: "center"
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
-                                className: "contact-element",
-                                onClick: (event)=>handleAddElementOnScreen(event, key, "click"),
-                                children: value
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $468b2e43c10c77f3$export$2e2bcd8739ae039), {
-                                style: $57048af01a29b1ce$var$iconButtonStyles,
-                                onClick: ()=>copyCustomFieldText(key),
-                                children: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, $e06bdfe75163a118$export$2e2bcd8739ae039), {
-                                    className: "copy"
-                                })
-                            })
-                        ]
-                    }, i))
+                })
             ]
         });
     })
@@ -157437,7 +157530,7 @@ const $d303f0b433a1814c$var$SidePanel = (props)=>{
         children: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, side_panel.SidePanel), {
             store: props.store,
             sections: [
-                ...props.currentTemplateType !== "Real Penned Letter" ? [
+                ...props.currentTemplateType !== "Real Penned Letter" && props.onGetTemplates ? [
                     {
                         ...(0, $c6f5440378b96420$export$2e2bcd8739ae039),
                         Panel: (panelProps)=>/*#__PURE__*/ (0, jsx_runtime.jsx)((0, $c6f5440378b96420$export$2e2bcd8739ae039).Panel, {
@@ -157695,7 +157788,7 @@ const $edeafd00018ca857$var$App = ({ secretKey: secretKey, returnRoute: returnRo
         :root {
         ${styles ? Object.entries(styles.root).map(([key, value])=>`${key}: ${value};`).join(" ") : ""}
           }
-        body { background-color: var(--mainBackgroundColor);}` : (0, ht)`<></>`;
+        body { background: var(--mainBackgroundColor);}` : (0, ht)`<></>`;
     return /*#__PURE__*/ (0, jsx_runtime.jsxs)((0, jsx_runtime.Fragment), {
         children: [
             /*#__PURE__*/ (0, jsx_runtime.jsx)(GlobalStyle, {}),
@@ -157730,9 +157823,14 @@ var $edeafd00018ca857$export$2e2bcd8739ae039 = $edeafd00018ca857$var$App;
 
 
 
-const $24075a5d702d64b3$var$TemplateBuilder = ({ container: container, secretKey: secretKey, returnRoute: returnRoute, onGetTemplates: onGetTemplates, onGetCustomFields: onGetCustomFields, onSubmit: onSubmit, styles: styles })=>{
+
+const $24075a5d702d64b3$var$TemplateBuilder = ({ container: container, secretKey: secretKey, basicAuthUsername: basicAuthUsername, basicAuthPassword: basicAuthPassword, returnRoute: returnRoute, onGetTemplates: onGetTemplates, onGetCustomFields: onGetCustomFields, onSubmit: onSubmit, styles: styles })=>{
     if (!container) throw new Error("Root element not found");
     if (!secretKey) throw new Error("secretKey not found");
+    if (!basicAuthUsername) throw new Error("basicAuthUsername not found");
+    if (!basicAuthPassword) throw new Error("basicAuthPassword not found");
+    (0, $717432aee8737b76$export$9d2510767fe266f9)(basicAuthUsername);
+    (0, $717432aee8737b76$export$4251d26568059eef)(basicAuthPassword);
     const root = (0, client).createRoot(container);
     root.render(/*#__PURE__*/ (0, jsx_runtime.jsx)((0, jsx_runtime.Fragment), {
         children: /*#__PURE__*/ (0, jsx_runtime.jsx)((0, Provider_default), {
@@ -157757,6 +157855,9 @@ var // Example to run the project locally for development. Comment out these lin
 //   TemplateBuilder({
 //     container: rootElement,
 //     secretKey: import.meta.env.VITE_APP_PLOTNO_API_KEY,
+//     basicAuthUsername: import.meta.env.VITE_APP_BASIC_AUTH_USERNAME,
+//     basicAuthPassword: import.meta.env.VITE_APP_BASIC_AUTH_PASSWORD,
+//     // onGetTemplates: getAllTemplatesByTab,
 //     styles: {}
 //   });
 // } else {
@@ -157784,6 +157885,14 @@ $24075a5d702d64b3$export$2e2bcd8739ae039 = $24075a5d702d64b3$var$TemplateBuilder
       type: String,
       required: true
     },
+    basicAuthUsername: {
+      type: String,
+      required: true
+    },
+    basicAuthPassword: {
+      type: String,
+      required: true
+    },
     returnRoute: {
       type: String,
       required: false
@@ -157807,7 +157916,7 @@ $24075a5d702d64b3$export$2e2bcd8739ae039 = $24075a5d702d64b3$var$TemplateBuilder
   },
   mounted() {
     let vm = this;
-    console.log('vm',vm);
+    console.log('vm', vm);
     this.initializeEditor(vm);
   },
   methods: {
@@ -157815,11 +157924,13 @@ $24075a5d702d64b3$export$2e2bcd8739ae039 = $24075a5d702d64b3$var$TemplateBuilder
       $24075a5d702d64b3$export$2e2bcd8739ae039({
         container: document.getElementById(props.container) || document.getElementById('builder'),
         secretKey: props.secretKey,
+        basicAuthUsername: props.basicAuthUsername,
+        basicAuthPassword: props.basicAuthPassword,
         returnRoute: props.returnRoute,
         onGetTemplates: props.onGetTemplates,
         onGetCustomFields: props.onGetCustomFields,
         onSubmit: props.onSubmit,
-        styles:props.styles,
+        styles: props.styles,
       });
     }
   }
@@ -157952,6 +158063,8 @@ var component = normalizeComponent(
 const src_TemplateBuilder = ({
   container,
   secretKey,
+  basicAuthUsername,
+  basicAuthPassword,
   returnRoute,
   onGetTemplates,
   onGetCustomFields,
@@ -157961,6 +158074,8 @@ const src_TemplateBuilder = ({
   const props = {
     container,
     secretKey,
+    basicAuthUsername,
+    basicAuthPassword,
     returnRoute,
     onGetTemplates,
     onGetCustomFields,