@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700;800;900&display=swap');

body {
  overflow-x: hidden;
  font-family: 'Rubik', 'inter', 'sans-serif';
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 16px;
}
h1,h2,h3,h4,h5,h6 {
  margin: 0;
}
img {
  display: block;
  width: 100%;
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
  padding: 0;
}
a {
  text-decoration: none;
}
/* sidebar css start */
.sidebar-row {
  display: flex;
  flex-flow: nowrap;
}
.container-fluid {
  margin: 0;
  padding: 0;
}
.sidebar-col {
  position: fixed;
  left: 0;
  top: 0;
  padding: 20px 0;
  width: 240px;
  height: 100%;
  background: #161616;
}
.main-col {
  width: calc(100% - 240px);
  margin-left: auto;
  padding: 0;
}
.sidebar-col>.logo {
  margin-bottom: 46px;
}
.side-bar-menu .nav-item, .sidebar-min-height .nav-item {
  text-align: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 14px;
}
.side-bar-menu + .nav-item {
  margin-bottom: 0;
}
.side-bar-menu {
  height: calc(100vh - 218px);
  overflow: auto;
}
.nav-item .side-bar-link {
  display: flex;
  align-items: center;
  column-gap: 12px;
  padding: 15px 2px 15px 16px;
  color: #A2A2A2;
  position: relative;
}
.nav-item .side-bar-link:hover {
  color: #fff;
}
.side-bar-link span {
  font-size: 16px;
  vertical-align: middle;
  line-height: normal;
  font-weight: 500;
}
.side-bar-menu .nav-item.active .side-bar-link {
  color: #fff;
  background: linear-gradient(266.45deg, #FF0E00 10.51%, #FF4300 84.38%);
  border-radius: 10px;
}
.nav-item .side-bar-link svg {
  width: 18px;
  height: auto;
}
.nav-item.active .side-bar-link svg,
.nav-item.active .side-bar-link svg path {
  fill: #fff;
}
.nav-item .side-bar-link:hover svg,
.nav-item .side-bar-link:hover svg path {
  fill: #fff;
}
.sidebar-min-height {
  overflow-y: auto;
  min-height: calc(100vh - 90px);
  max-height: calc(100vh - 65px);
}
/* sidebar css end */
/* header design start */
.header-title .logo {
  display: none;
}
.main-col .header-bar {
  padding: 13px 30px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.158);
  position: sticky;
  width: 100%;
  top: 0;
  background: #2D2D2D;
  z-index: 9;
}
.main-col .header-title h3 {
  font-size: 16px;
  line-height: normal;
  font-weight: 500;
  color: #fff;
  line-height: 18.96px;
}
.main-col .header-bar-right {
  display: flex;
  margin-left: auto;
}
.header-button-group {
  display: flex;
  align-items: center;
  column-gap: 24px;
}
.account-details {
  display: inline-block;
  margin-left: 31px;
}
.account-details .dropdown {
  position: relative;
}
.account-details .dropdown .dropdown-toggle {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}
.account-details .dropdown .dropdown-toggle p {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
  margin: 3px 0 0;
  padding-right: 30px;
}
.account-details .dropdown .dropdown-toggle:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 2px;
  border: 0;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  width: 9px;
  height: 9px;
  transform: rotate(-45deg);
}
.header-button-group .button-view .btn {
  padding: 3px 14px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  border-radius: 4px;
  border: none;
}
.header-button-group .button-view .btn.preview-btn {
  background: #409B67;
}
.header-button-group .button-view .btn.publish-btn {
  background: #F92424;
}
.header-button-group .button-view .btn.preview-btn:hover,
.header-button-group .button-view .btn.publish-btn:hover {
  background-color: #000;
  border: none;
}
.header-button-group .button-view .btn.preview-btn:focus-visible,
.header-button-group .button-view .btn.publish-btn:focus-visible {
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
.account-dropdown {
  width: 20px;
  height: 20px;
  display: block;
  background: linear-gradient(180deg, #FF0E00 0%, #FF4300 100%);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  border-radius: 34px;
}
.account-dropdown:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: -1px;
  bottom: 0;
  margin: auto;
  width: 8px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.99688 6.95039C5.86354 6.95039 5.73854 6.92956 5.62188 6.88789C5.50521 6.84622 5.39687 6.77539 5.29688 6.67539L0.696875 2.07539C0.513542 1.89206 0.421875 1.65872 0.421875 1.37539C0.421875 1.09206 0.513542 0.858724 0.696875 0.675391C0.880208 0.492057 1.11354 0.400391 1.39688 0.400391C1.68021 0.400391 1.91354 0.492057 2.09688 0.675391L5.99688 4.57539L9.89688 0.675391C10.0802 0.492057 10.3135 0.400391 10.5969 0.400391C10.8802 0.400391 11.1135 0.492057 11.2969 0.675391C11.4802 0.858724 11.5719 1.09206 11.5719 1.37539C11.5719 1.65872 11.4802 1.89206 11.2969 2.07539L6.69688 6.67539C6.59688 6.77539 6.48854 6.84622 6.37188 6.88789C6.25521 6.92956 6.13021 6.95039 5.99688 6.95039Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;

}
.dropdown .dropdown-toggle.show .account-dropdown::after {
  transform: rotate(180deg);
}
.account-details .dropdown-menu .dropdown-item:focus {
  background: transparent;
}
.account-details .dropdown .dropdown-toggle:after {
  content: normal;
}
.account-details .dropdown-menu {
  background: #161616;
  padding: 0;
  transform: translate(0px, 48px) !important;
  border-radius: 0;
  border: none;
}
.account-details .dropdown-menu .dropdown-item {
  color: #fff;
  padding: 13px 18px;
  border-bottom: 1px solid #FFFFFF1A;
}
.account-details .dropdown-menu .dropdown-item:hover {
  background: linear-gradient(180deg, #FF0E00 0%, #FF4300 100%);
}

.account-details .dropdown-menu .dropdown-item:nth-child(4){
  border-bottom: none;
}
/* header design end */
/* main-details css start */
.integration-page {
  width: 100%;
  min-height: calc(100vh - 125px);
}
.error-msg {
  display: block;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  width: 100%;
  color: #FF0E00;
}
.flex-fill .error-msg {
  display: block;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  width: 100%;
  color: #FF0E00;
  max-width: 230px;
}
.content {
  padding: 30px;
  background: #F8F7F7;
}
.content-inner {
  display: flex;
  background: #fff;
  border-radius: 10px;
  min-height: calc(100vh - 125px);
}
.content-inner .content-left {
  width: 50%;
}
.content-inner .content-right {
  width: 50%;
  text-align: center;
  position: relative;
}
.content-left .content-left-inner {
  padding: 30px 16px;
}
.feature-content .feature-details {
  width: 100%;
  padding: 46px 51px;
  border-radius: 10px;
}
.feature-content {
  display: flex;
  flex-flow: row wrap;
  gap: 30px;
}
.feature-content .feature-details {
  width: 100%;
  border-radius: 10px;
}
/* main-details css end */
/* dashboard design start */
.dashboard .storeName .title-nm {
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  color: #409B67;
  margin: 0 0 16px;
}
.dashboard .storeName p {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;
  line-height: 19.36px;
  text-align: left;
  margin: 0 0 24px;
}
.dashboard .feature-content .feature-details {
  width: 100%;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.dashboard .feature-content {
  gap: 16px;
}
.dashboard .feature-content .feature-details .feature-icon {
  width: 42%;
}
.dashboard .feature-content .feature-details .feature-inner {
  width: 58%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.dashboard .feature-content .feature-details .feature-icon img {
  height: auto;
}
.dashboard .feature-content .feature-details.design-your-app {
  background: linear-gradient(224.66deg, rgba(91, 109, 179, 0.15) 14.97%, rgba(154, 172, 216, 0.15) 89%);
}
.dashboard .feature-content .feature-details.getting-started {
  background: linear-gradient(224.66deg, rgba(246, 157, 94, 0.15) 13.91%, rgba(245, 203, 71, 0.15) 89%);
}
.dashboard .feature-content .feature-details.help {
  background: linear-gradient(224.66deg, rgba(76, 119, 187, 0.15) 14.97%, rgba(20, 72, 159, 0.15) 89%);
}
.dashboard .feature-content .feature-details.launch-app {
  background: linear-gradient(20.02deg, rgba(93, 168, 143, 0.15) 2.18%, rgba(86, 110, 128, 0.15) 131.84%);
}
.dashboard .feature-content .feature-title {
  font-family: 'Rubik';
  font-size: 26px;
  font-weight: 500;
  line-height: 32px;
  color: #000000;
}

.arrow-btn {
  display: flex;
  width: 90px;
  height: 90px;
  background: #fff;
  position: relative;
  border-radius: 10px;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  align-self: end;
  right: -1px;
}

.arrow-btn:before {
  content: "";
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: linear-gradient(224.66deg, #5B6DB3 14.97%, #9AACD8 89%);
  border-radius: 10px;
  display: block;
}

.arrow-btn:after {
  content: "";
  position: absolute;
  margin: auto;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='22' viewBox='0 0 21 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33594 5.99992L18.1693 20.8333C18.4748 21.1388 18.8637 21.2916 19.3359 21.2916C19.8082 21.2916 20.197 21.1388 20.5026 20.8333C20.8082 20.5277 20.9609 20.1388 20.9609 19.6666C20.9609 19.1944 20.8082 18.8055 20.5026 18.4999L5.66927 3.66658H18.3359C18.8082 3.66658 19.204 3.50686 19.5234 3.18742C19.8429 2.86797 20.0026 2.47214 20.0026 1.99992C20.0026 1.5277 19.8429 1.13186 19.5234 0.812419C19.204 0.492974 18.8082 0.333252 18.3359 0.333252H1.66927C1.19705 0.333252 0.801216 0.492974 0.481771 0.812419C0.162327 1.13186 0.00260544 1.5277 0.00260544 1.99992V18.6666C0.00260544 19.1388 0.162327 19.5346 0.481771 19.8541C0.801216 20.1735 1.19705 20.3333 1.66927 20.3333C2.14149 20.3333 2.53733 20.1735 2.85677 19.8541C3.17622 19.5346 3.33594 19.1388 3.33594 18.6666V5.99992Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: cover;
}

.getting-started .arrow-btn:before {
  background: linear-gradient(90deg, #F6905D 0.03%, #F5CE65 100.04%);
}

.help .arrow-btn:before {
  background: linear-gradient(224.66deg, #4C77BB 14.97%, #14489F 89%);
}

.launch-app .arrow-btn:before {
  background: linear-gradient(20.02deg, #5DA88F 2.18%, #566E80 131.84%);
}

.preview-col .mobile-preview {
  display: inline-block;
  background: #fff;
  box-shadow: 0px 3px 8px 0px #00000026;
  padding: 7px 11px;
  border-radius: 80px;
  margin: 30px 0;
  position: relative;
}

.preview-col .mobile-preview .mobile-preview-type {
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 13px 14px;
  border-radius: 80px;
}

.preview-col .mobile-preview .mobile-preview-type svg {
  width: 20px;
  height: auto;
}

.mobile-preview .mobile-preview-type.active {
  background: linear-gradient(180deg, #FF0E00 0%, #FF4300 100%);
}

.preview-col .mobile-preview .mobile-preview-type.active svg path {
  fill: #fff;
}

.preview-col .mobile-preview .toggle {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}

.preview-col .mobile-preview .toggle:not(.active)+.ios-preview {
  background-color: red;
}

.preview-col .mobile-preview .toggle:not(.active)+.ios-preview svg path {
  fill: #fff;
}

.preview-col .mobile-preview .toggle.active+.ios-preview {
  background-color: transparent;
}

.preview-col .mobile-preview .toggle.active+.ios-preview+.android-preview {
  background-color: red;
}

.preview-col .mobile-preview .toggle.active+.ios-preview+.android-preview svg path {
  fill: #fff;
}

.smartphone {
  position: relative;
  overflow: hidden;
  width: 360px;
  height: 720px;
  margin: auto;
  padding: 63px 18px 12px 20px;
  background: url('../layout-image/iphone-14-pro-max.png') no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

.active-frame {
  width: 370px;
  height: 762px;
  padding: 63px 12px 12px 10px;
  background: url('../layout-image/Samsung_Galaxy_S22.png') no-repeat;
}

.content-main {
  height: 100%;
}

.smartphone .bottom-bar {
  padding: 10px 0;
  position: absolute;
  z-index: 999;
  bottom: 56px;
  width: calc(100% - 50px);
  height: 30px;
  background: #fff;
  margin: auto;
  left: 0;
  right: 0;
}

/* dashboard design end */
/* mobile device design start */
.smartphone .content {
  width: 100%;
  height: 88.5%;
  position: relative;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  margin: auto;
}
.preview-col .collection-grid-view {
  display: flex;
  flex-flow: row wrap;
  gap: 9px;
}

.preview-col .collection-grid-view .grid-item {
  width: calc(100% / 3 - 6px);
}

.smartphone .collection-grid-view .grid-item-img img {
  width: 89px;
  height: 111px;
}
.smartphone.active-frame .collection-grid-view .grid-item-img img {
  width: 97px;
  height: 121px;
}
.mobile-device {
  position: relative;
  padding: 0 0 30px;
}
.phone-bg {
  position: absolute;
  max-width: 530px;
  max-height: 530px;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: linear-gradient(180deg, rgba(255, 14, 0, 0.1) 0%, rgba(255, 67, 0, 0.1) 100%);
  border-radius: 100%;
}
.phone-bg span {
  display: block;
  width: 50px;
  position: absolute;

}
.phone-bg span img {
  width: 100%;
  height: auto;
}

.top-left {
  top: -20px;
  left: -56px;
  transform: rotate(337deg);
  -webkit-animation: swing-anticlockwise 10s linear infinite;
  -moz-animation: swing-anticlockwise 10s linear infinite;
  animation: swing-anticlockwise 12s linear infinite;
}

.top-right {
  top: -20px;
  right: -56px;
  transform: rotate(22.27deg);
  -webkit-animation: rotate 15s linear infinite;
  -moz-animation: rotate 15s linear infinite;
  animation: swing-clockwise 3s linear infinite;
}

.bottom-left {
  bottom: -20px;
  left: -56px;
  transform: rotate(351deg);
  -webkit-animation: rotate 15s linear infinite;
  -moz-animation: rotate 15s linear infinite;
  animation: swing-clockwise 3s linear infinite;
}

.bottom-right {
  bottom: -20px;
  right: -56px;
  -webkit-animation: swing-anticlockwise 10s linear infinite;
  -moz-animation: swing-anticlockwise 10s linear infinite;
  animation: swing-anticlockwise 12s linear infinite;
}
/* publish design start */
/* publish design start */
.publishapp-detail { padding: 30px 16px; width: 100%;}
.publishapp-detail .web-icons { display: flex;  justify-content: space-between; margin: 30px 15px 0; }
.publishapp-detai .useful-instruction .web-icons i { margin-right: 0; margin-bottom: 0;}
.publishapp-detail .web-icons-info { width: 33%; position: relative;}
.publishapp-detail .web-icons-info i svg { max-width: 503px; width: 100%; }
.publish-app-instruction-details {  display: flex;  flex-flow: row wrap; padding: 0 50px 50px; margin:60px 0 50px; border-bottom: 1px rgba(0, 0, 0, 0.2) solid;column-gap: 110px; justify-content: space-between; }
.publish-app-instruction-details .step-row { max-width: 277px; width:20%; border: 1px #4D4D4D solid;  border-radius: 18px;  position: relative; padding:50px 34px 50px 34px; text-align: center; }
.publish-app-instruction-details .step-row:last-child:after { display: none !important;}
.publish-app-instruction-details .step-row::after { position: absolute; right: -68px; top:47%; content: ''; width: 68px; height: 30px; background: url(../layout-image/step-arrow.png) no-repeat; background-size: 100%; }
.publish-app-instruction-details .step-row .badge { font-family: 'inter', 'sans-serif'; text-transform: uppercase; position: absolute; top:-20px; left: 0; right: 0;   max-width: 120px; margin: 0 auto; background: #FFEAE6; border:1px #4D4D4D solid; border-radius: 46px; font-weight: 800; font-size: 14px; line-height: 24px; padding: 7px 32px; color: #000; }
.publish-app-instruction-details .step-row .steps-link { text-transform: uppercase; color: #ED2224; font-size: 14px; font-weight: 600; text-decoration: underline; line-height: 24px; }
.publish-app-instruction-details .step-row p { font-size: 16px; margin-top: 30px; color: #4D4D4D; line-height: 24px; }
.publishapp-detail .publish-app-main-form .app-details-content { display: flex; align-items: start; background: #000000; border-radius: 10px 10px 0 0; padding: 21px; margin-top: 0; }
.publishapp-detail .app-icon { margin-right: 15px; margin-top: 5px;}
.publishapp-detail .publish-your-app .row-content h3 { color: #fff; font-family: 'Rubik'; font-size: 18px; font-weight: 700; line-height: 28.44px; text-align: left; margin: 0 0 10px;}
.publishapp-detail .publish-your-app .row-content p { color: #FFF; font-size: 14px; font-weight: 400; line-height: 24px; max-width: initial;  margin: 0; }
.publishapp-detail .publish-app-column { border: 1px #E5E5E5 solid; border-radius: 10px; margin: 0 0 38px 0; padding-bottom: 24px;}
.publishapp-detail .publish-form-view { margin: 0 12px; }
.publishapp-detail .form-filed { display: flex; flex-flow: row wrap;}
.publishapp-detail .app-field { position: relative; width: 50%; padding:0 12px; margin-top: 44px;} 
.publish-form-view .form-label{font-size:14px;font-weight:500;color:#545454; z-index: 1; background:#fff;padding:0 10px;position:absolute;left:28px;top:-7px;}
.publish-form-view .form-control{  height:60px;border:1px solid #B9B9B9;border-radius:8px;padding:18px 16px; font-size: 14px; font-weight: 400; line-height: 24px; color: #212529}
.publish-form-view .form-control option { font-family: Inter; font-size: 14px; font-weight: 400; line-height: 24px; text-align: left; color: #000; }
.publishapp-detail .app-field .country-code-select { position: relative; z-index: 0; cursor: pointer;}
.publish-form-view .form-control:focus, .publish-form-view .form-control:active { border-color: #FF0E00; box-shadow: none; }
.publish-app-form { margin-top: 26px; }
.publish-app-page .submit-content .form-control { transition: 0.3s all; background: #F92424; border-radius: 10px; padding: 15px 34px; text-align: center; text-transform: uppercase; color: #fff; font-size: 18px; font-weight: 500; border: none; width: auto; margin: auto;}
.publish-app-page .submit-content .form-control:hover { background: #000;}
.publish-app-page .submit-form .submit-details{font-family: 'Inter'; font-size: 14px; font-weight: 500; line-height: 16px; color: #757575; text-align: center; display: block; margin-top: 24px; }
.publishapp-detail .app-field.app-field-25 { width: 25%;}
.publishapp-detail .app-field.app-field-50 { width: 50%;}
.publishapp-detail .app-field.app-field-full { width: 100%;}
.publishapp-detail .alert-danger {
  position: fixed;
  top: 63px;
  left: 12%;
  right: 0;
  margin: auto;
  text-align: center;
  width: 350px;
  z-index: 8;
}
.upload .publish-image-preview{
  display: inline-block;
  margin: 15px 0;
  position: relative;
}
.upload .drag-file-area label{
  display: none;
}
.appLogoPreview {height: 100px; width: 100px;}
.appBannerPreview {height: 100px; width: 205px;}
.upload-files-container {width: 100%;padding: 0px; margin-top: -10px; border-radius: 10px;display: flex;align-items: center;justify-content: center;flex-direction: column; position: relative;}
.drag-file-area {border: 1px dashed #B9B9B9;border-radius: 10px; font-family: 'inter', 'sans-serif';margin: 10px 0 10px; width: 100%;text-align: center; height: 136px;}
/* .drag-file-area .upload-icon {font-size: 50px;} */
.drag-file-area:hover , .drag-file-area:focus-visible{
  border:1px solid #FF0E00;
}
.drag-file-area h3 {font-size: 14px; font-weight: 600; margin: 3px 0; line-height: 17px; }
.drag-file-area label {font-size: 16px; font-weight: 400; font-weight: normal; display: inline-block; width: 100%; padding: 30px 60px; cursor: pointer; }
.label-title { padding: 0 10px; background: #fff; position: absolute; left: 15px; top: 0; font-size: 14px; font-weight: 600; color: #545454;}
.drag-file-area label .browse-files-text { color: #545454;font-weight: normal; line-height: 17px; font-size: 14px; font-weight: 400;}
.browse-files span {position: relative;top: -25px;}
.default-file-input {opacity: 0;}
.file-block {color: #000000;background-color: #409B671A;transition: all 1s;width: 100%;position: relative;display: none;flex-direction: row;justify-content: space-between;align-items: center;margin: 0;padding: 16px;border-radius: 10px;cursor: pointer;}
.file-info {display: flex;align-items: center;font-size: 15px;}.file-icon {margin-right: 10px;}
.file-name {padding: 0 3px;}
.remove-file-icon {cursor: pointer;display: flex;align-items: center;line-height: 20px;}
.remove-file-icon span {margin-right: 10px;}
.publish-form-view textarea.form-control {height: 140px;}
.publish-form-view .form-control#country_code {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none'%3E%3Cmask id='path-1-inside-1_608_9327' fill='white'%3E%3Cpath d='M0 0H38V38H0V0Z'/%3E%3C/mask%3E%3Cpath d='M1 38V0H-1V38H1Z' fill='%23B9B9B9' mask='url(%23path-1-inside-1_608_9327)'/%3E%3Cpath d='M19.0008 21.9504C18.8674 21.9504 18.7424 21.9296 18.6258 21.8879C18.5091 21.8462 18.4008 21.7754 18.3008 21.6754L13.7008 17.0754C13.5174 16.8921 13.4258 16.6587 13.4258 16.3754C13.4258 16.0921 13.5174 15.8587 13.7008 15.6754C13.8841 15.4921 14.1174 15.4004 14.4008 15.4004C14.6841 15.4004 14.9174 15.4921 15.1008 15.6754L19.0008 19.5754L22.9008 15.6754C23.0841 15.4921 23.3174 15.4004 23.6008 15.4004C23.8841 15.4004 24.1174 15.4921 24.3008 15.6754C24.4841 15.8587 24.5758 16.0921 24.5758 16.3754C24.5758 16.6587 24.4841 16.8921 24.3008 17.0754L19.7008 21.6754C19.6008 21.7754 19.4924 21.8462 19.3758 21.8879C19.2591 21.9296 19.1341 21.9504 19.0008 21.9504Z' fill='%23545454'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: right;
  background-size: 38px;
}
.upload-files-container .drag-file {
  display: none;
  align-items: center;
  width: 100%;
  padding: 10px 8px 10px 16px;
  border: 1px solid #409B67;
  border-radius: 10px;
  column-gap: 10px;
  justify-content: space-between;
  background: #409B671A;
}
.file-title {
  font-family: Inter;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  color:  #000000;
}
.upload-files-container .file-delete {
  cursor: pointer;
  position: absolute;
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 99;
}
.upload .drag-file-area label {
  padding: 24px 50px;
}
/* .upload input[type="file"] {
  height: 60%;
} */
.upload-files-container input[type="file"] {
	display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  opacity: 0;
  z-index: 9;
  /* cursor: pointer; */
}

.announcement-bar-scn {
  padding: 10px 0 10px 0;
}

.announcement-bar-wrap {
  padding: 0;
}

.marquee {
  --gap: 6rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  list-style: none;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee__content {
    animation-play-state: paused !important;
  }
}

/* Enable animation */
.enable-animation .marquee__content {
  animation: scroll 10s linear infinite;
}

/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
  max-width: fit-content;
}

/* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
.marquee--pos-absolute .marquee__content:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

/* Enable position absolute animation on the duplicate content (last-child) */
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
  animation-name: scroll-abs;
}

@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}

.marquee__content > * {
  flex: 0 0 auto;
}


@media (max-width:1899px) {
  .publish-app-instruction-details .step-row { width: 20%; margin: 20px 39px 20px 15px; padding: 30px 14px 10px 14px;}
  .publish-app-instruction-details { padding: 0 15px 30px 15px; justify-content: center;}
}
@media (max-width:1399px) {
  .publish-app-instruction-details .step-row { width: 25%;}
}
@media (max-width:1024px) {
  .publish-app-instruction-details .step-row  { width: 42%;}
  .publishapp-detail .app-field.app-field-50 { width: 50%;}
}
@media (max-width:992px) {
  .publish-app-instruction-details .step-row  { width: 38%;}
  .publishapp-detail .app-field.app-field-50, .publishapp-detail .app-field.app-field { width: 100%;}
}
@media (max-width:767px) {
  .publish-app-instruction-details .step-row  { width: 100%;}
}
/* publish design end */
@keyframes swing-clockwise {
  0% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(10deg);
  }
}

@keyframes swing-anticlockwise {
  0% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }

  25% {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
  }

  50% {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }

  75% {
    -webkit-transform: rotate3d(0, 0, 1, 270deg);
    transform: rotate3d(0, 0, 1, 270deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

/* mobile device design end */
/* App Features design start */
.features-list {
  width: 100%;
}
.feautres-sec .feautres-row {
  display: flex;
  flex-flow: row wrap;
  width: 100%;  
  gap: 24px;
}
.feautres-sec .feautres-row .feautres-col {
  width: calc(25% - 20px);
  padding: 25px;
  font-size: 16px;
  line-height: 1.4;
  position: relative;
  box-shadow: 0px 3px 8px 0px #00000026;
  border-radius: 10px;
}
.features-view .integration-page{
  padding: 30px 16px;
}
.features-page {
  width: 100%;
}
.features-content {
  padding-top: 14px;
}
.feautres-col h2 {
  font-family: Rubik;
  font-size: 18px;
  font-weight: 600;
  line-height: 21.33px;
  padding-top: 20px;
  padding-bottom: 8px;
  color: #000;
}
.feautres-col p {
  font-family: Rubik;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.96px;
  color: #616161;
  margin-bottom: 0;
}
.feautres-col .configure {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-top: 20px;
  border-top: 1px solid #0000001A;
}
.toggle-input {
  display: none;
}
.toggle-button {
  display: inline-block;
  width: 60px;
  height: 24px;
  background-color: #ccc;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
}
.toggle-button:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
}
.toggle-input:checked + .toggle-button {
  background-color: #000;
}
.toggle-input:checked + .toggle-button:before {
  transform: translateX(35px);
}
.feautres-row .feautres-col .toggle-btn,
.feautres-row .feautres-col .toggle-btn-account,
.feautres-row .feautres-col .toggle-guest-checkout,
.feautres-row .feautres-col .toggle-discount {
  position: absolute;
  right: 0;
  top: 0;
}
.configure-btn {
  font-family: Rubik;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.59px;
  text-align: center;
  padding: 11px 20px;
  background: #000;
  border-radius: 4px;
  color: #fff;
}
.configure-btn:hover {
  color: #fff;
}
.feautres-col .feautre-icon svg {
  display: block;
  width: 76px;
  height: 76px;
}
.feautres-col .feautre-icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.tooltip-container {
  position: relative;
  display: inline-block;
  margin-left: 5px;
}

.tooltip-icon {
  cursor: pointer;
}

.tooltip-text {
  visibility: hidden;
  width: 240px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  opacity: 0;
  transition: opacity 0.3s;
  font-weight: 400;
}
/* .input-button-container:hover .tooltip-text, */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.feature-field .form-control {
  font-size: 14px;
  border-radius: 0;
  border: 1px solid #B9B9B9;
  border-right: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.feature-field .form-control:focus, .feature-field .form-control:active {
  box-shadow: inherit;
  background: transparent;
  border-color: #FF0E00;
}
.feature-field .input-button-container {
  display: flex;
  align-items: center;
}
.feature-field .save-btn {
  padding: 10px;
  color: #fff;
  background: transparent;
  border: none;
  font-size: 13px;
  border: 1px solid #B9B9B9;
  border-left: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.feature-field .contact-us-col {
  width: 100%;
}
.feature-field .contact-us-col .form-control {
  padding: 8px 14px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: #545454;
}
.feautres-col .form-label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #545454;
}
.feature-field .tooltip-container {
  margin-top: -4px;
}
.error-tooltip {
  visibility: hidden;
  width: 240px;
  background-color: #c00000;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  left: 100%;
  opacity: 0;
  transition: opacity 0.3s;
  font-weight: 400;
  font-size: 14px;
}
.error-tooltip:before {
  content: '';
  border-width: 5px 5px 5px 0;
  position: absolute;
  border-style: solid;
  top: 42%;
  right: 100%;
  border-color: transparent #c00000;
}
.error-tooltip.view {
  visibility: visible;
  opacity: 1;
}
/* App Features design end */
/* Contact Support design start */
.contact-support {
  width: 100%;
  height: 100%;
}
.contact-row {
  display: flex;
  flex-flow: row wrap;
}
.contact-col {
  width: 50%;
  padding: 30px;
}
.user-manual-content .accordioan-user-manual .accordion-content {
  display: flex;
  align-items: center;
  column-gap: 14px;
  padding: 18px 30px;
  border: 1px solid #B9B9B9;
  border-radius: 10px;
}
.user-manual-content {
  max-width: 437px;
}
.accordion-content .title {
  font-family: Rubik;
  font-size: 18px;
  font-weight: 400;
  line-height: 21.33px;
  color: #4B4B4B;
}
.accordioan-user-manual {
  margin-bottom: 16px;
}
.accordioan-user-manual:last-child {
  margin-bottom: 0;
}
.accordioan-user-manual .accordion-content .arrow {
  height: 18px;
  width: 18px;
}
.accordioan-user-manual .accordion-content .arrow svg {
  overflow: visible !important;
}
.content-media {
  max-width: 170px;
  width: 100%;
  float: right;
  margin-top: -126px;
  margin-right: 120px;
}
.contact-row .page-description {
  margin-bottom: 30px;
  margin-top: 40px;
}
.description-link {
  font-family: Inter;
  font-size: 16px;
  font-weight: 600;
  line-height: 19.36px;
  color: #FF0F00;
  display: flex;
  align-items: center;
  column-gap: 12px;
}
.description-link:hover{
  color: #FF0F00;
}
.description-text {
  display: inline-block;
}
.navigation-link:hover .accordion-content {
  background: linear-gradient(269.41deg, #FF0E00 2.19%, #FF4300 97.18%);
}
.navigation-link:hover .title{
  color:#fff
}
.navigation-link .arrow svg path{
  fill:linear-gradient(180deg, #FF0000 0%, #FF0A00 7%, #FF9000 100%);
  stroke:linear-gradient(180deg, #FF0000 0%, #FF0A00 7%, #FF9000 100%);
}
.navigation-link:hover .arrow svg path{
  fill:#fff;
  stroke: #fff;
}
.contact-col.user-manual {
  position: relative;
  padding: 30px 16px;
}
.contact-col.user-manual:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 1px;
  height: 94%;
  background: #0000001A;
}
.contact-us-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 36px;
}
.contact-us-col {
  width: 50%;
  position: relative;
}
.contact-us-col.email {
  width: 100%;
}
.contact-us-col.textarea {
  width: 100%;
}
.contact-us-col .form-control {
  width: 100%;
  display: block;
  width: 100%;
  padding: 18px 16px;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #B9B9B9;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 8px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.contact-us-col textarea.form-control {
  height: 100px;
}
.contact-us-col .form-control#country_code option {
  color: #000;
}
.contact-us-col .form-control:focus, .contact-us-col .form-control:active {
  box-shadow: inherit;
  background: transparent;
  border-color: #FF0E00;
}
.contact-us-form {
  margin-top: 50px;
}
.contact-us-col .form-label {
  background: #Fff;
  padding: 0 10px;
  position: absolute;
  left: 18px;
  top: -9px;  
  z-index: 1;
}
.contact-us-col .form-control#country_code {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none'%3E%3Cmask id='path-1-inside-1_608_9327' fill='white'%3E%3Cpath d='M0 0H38V38H0V0Z'/%3E%3C/mask%3E%3Cpath d='M1 38V0H-1V38H1Z' fill='%23B9B9B9' mask='url(%23path-1-inside-1_608_9327)'/%3E%3Cpath d='M19.0008 21.9504C18.8674 21.9504 18.7424 21.9296 18.6258 21.8879C18.5091 21.8462 18.4008 21.7754 18.3008 21.6754L13.7008 17.0754C13.5174 16.8921 13.4258 16.6587 13.4258 16.3754C13.4258 16.0921 13.5174 15.8587 13.7008 15.6754C13.8841 15.4921 14.1174 15.4004 14.4008 15.4004C14.6841 15.4004 14.9174 15.4921 15.1008 15.6754L19.0008 19.5754L22.9008 15.6754C23.0841 15.4921 23.3174 15.4004 23.6008 15.4004C23.8841 15.4004 24.1174 15.4921 24.3008 15.6754C24.4841 15.8587 24.5758 16.0921 24.5758 16.3754C24.5758 16.6587 24.4841 16.8921 24.3008 17.0754L19.7008 21.6754C19.6008 21.7754 19.4924 21.8462 19.3758 21.8879C19.2591 21.9296 19.1341 21.9504 19.0008 21.9504Z' fill='%23545454'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: right;
  background-size: 38px;
}
.submit-content .form-control {
  transition: 0.3s all;
  font-family: Rubik;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  padding: 15px 34px;
  background: #F92424;
  color: #fff;
  border-radius: 10px;
  width: auto;
  margin: auto;
}
.submit-content .form-control:focus{
  box-shadow: inherit;
  border: 1px solid #000;
} 
.submit-content .form-control:hover {
  background: #000;
}
#submitBtn {
  cursor: not-allowed;
}
/* Contact Support design end */
/* Delete Layout and Logout Confirm design start */
#deleteLayoutConfirm.modal.show .modal-dialog, #deleteSubLayoutConfirm.modal.show .modal-dialog, #logoutLayoutConfirm.modal.show .modal-dialog {
  max-width: 426px;
  margin-top: 92px;
}
#deleteLayoutConfirm .modal-header .btn-close, #deleteSubLayoutConfirm .modal-header .btn-close, #logoutLayoutConfirm .modal-header .btn-close, #infoModal .modal-header .btn-close {
  background: inherit;
  color: inherit;
  opacity: inherit;
}
#deleteLayoutConfirm .modal-header .btn-close:focus, #deleteSubLayoutConfirm .modal-header .btn-close:focus, #logoutLayoutConfirm .modal-header .btn-close:focus, #infoModal .modal-header .btn-close:focus {
  box-shadow: inherit;
}
#deleteLayoutConfirm .modal-icon, #deleteSubLayoutConfirm .modal-icon, #logoutLayoutConfirm .modal-icon {
  display: block;
  margin: auto;
  text-align: center;
  padding-bottom: 24px;
}
#deleteLayoutConfirm .modal-body p, #deleteSubLayoutConfirm .modal-body p, #logoutLayoutConfirm .modal-body p {
  font-family: Inter;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: #000000CC;
  margin-bottom: 0;
}
#deleteLayoutConfirm .modal-content, #deleteSubLayoutConfirm .modal-content, #logoutLayoutConfirm .modal-content {
  padding: 0 24px;
  border-radius: 16px;
  border: none;
}
#deleteLayoutConfirm .modal-header, #deleteSubLayoutConfirm .modal-header, #logoutLayoutConfirm .modal-header {
  padding: 18px 16px;
  border-bottom: 1px solid #5050501A;
  margin-bottom: 30px;
}
#deleteLayoutConfirm .modal-body, #deleteSubLayoutConfirm .modal-body, #logoutLayoutConfirm .modal-body {
  padding: 0;
}
#deleteLayoutConfirm .modal-title, #deleteSubLayoutConfirm .modal-title, #logoutLayoutConfirm .modal-title {
  font-family: Rubik;
  font-size: 20px;
  font-weight: 600;
  line-height: 23.7px;
  text-align: left;
  color: #000000;
}
#deleteLayoutConfirm .modal-footer, #deleteSubLayoutConfirm .modal-footer, #logoutLayoutConfirm .modal-footer {
  border-top: none;
  padding: 30px 0;
}
#deleteLayoutConfirm .modal-footer .btn, #deleteSubLayoutConfirm .modal-footer .btn, #logoutLayoutConfirm .modal-footer .btn {
  width: 46%;
  margin: 0;
  padding: 11px;
  font-family: Rubik;
  font-size: 16px;
  font-weight: 400;
  line-height: 18.96px;
  text-align: center;
  border-radius: 4px;
  --bs-btn-border-width: 0;
}
#deleteLayoutConfirm .modal-footer, #deleteSubLayoutConfirm .modal-footer, #logoutLayoutConfirm .modal-footer {
  justify-content: center;
  column-gap: 16px;
  align-items: center;
}
#deleteLayoutConfirm .btn.btn-secondary, #deleteSubLayoutConfirm .btn.btn-secondary, #logoutLayoutConfirm .btn.btn-secondary {
  background: #000000;
}
#deleteLayoutConfirm .btn.btn-secondary:focus, #deleteSubLayoutConfirm .btn.btn-secondary:focus, #logoutLayoutConfirm .btn.btn-secondary:focus {
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
#deleteLayoutConfirm .btn.btn-secondary:hover, #deleteSubLayoutConfirm .btn.btn-secondary:hover, #logoutLayoutConfirm .btn.btn-secondary:hover {
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
#deleteLayoutConfirm .btn.btn-primary, #deleteSubLayoutConfirm .btn.btn-primary, #logoutLayoutConfirm .btn.btn-primary {
  background: #F92424;
  border: none;
}
#deleteLayoutConfirm .btn.btn-primary:focus, #deleteSubLayoutConfirm .btn.btn-primary:focus, #logoutLayoutConfirm .btn.btn-primary:focus {
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
#deleteLayoutConfirm .btn.btn-primary:hover, #deleteSubLayoutConfirm .btn.btn-primary:hover, #logoutLayoutConfirm .btn.btn-primary:hover {
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
.modal-backdrop.show {
  opacity: 0.3;
}
/* Delete Layout and Logout Confirm design end */

.loader {
  width: 75px;
  height: 75px;
  margin: 15px auto;
  border: 6px solid transparent;
  border-top-color: #F92424;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  left: 0;
  right: 0;
  top: 125px;
  margin: auto;
  z-index: 3;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.menuIcon, .subMenuIcon {
  cursor: move;
}

/* pop-up new design start */
.popup-modal{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1055;
  display: none;
  max-width: 388px;
  width: 100%;
  height: 100%;
  background:#161616;
  outline: 0;
  color: #fff;
}
.popup-modal .modal-header {
  padding: 18px 16px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #505050;
}
.popup-modal .btn-close {
  background: inherit;
  color: inherit;
  opacity: inherit;

}
.popup-modal .btn-close:focus{
  box-shadow: inherit;
}
.popup-modal .popupForm {
  padding: 0 16px;
}
.popup-modal .modal-dialog{
  margin: 0;
  transition:ease-in 3s !important;
}
.popup-modal .modal-body {
  padding: 20px 10px 0 0;
  height: calc(100vh - 190px);
  overflow: auto;
}
/* .popup-modal .modal-body::-webkit-scrollbar {
  width: 3px; 
}
.popup-modal .modal-body::-webkit-scrollbar-thumb {
 background: linear-gradient(266.45deg, #FF0E00 10.51%, #FF4300 84.38%);
 border:none; 
 border-radius: 4px;
}
.popup-modal .modal-body::-webkit-scrollbar-track {
  background: #F1F1F1;
} */
.popup-modal .modal-col label {
  font-family: Rubik;
  font-size: 16px;
  font-weight: 500;
  line-height: 18.96px;
  text-align: left;
  color: #fff;
  margin-bottom: 10px;
}
.popup-modal .modal-col label + .sub-title{
  display: block;
}
.popup-modal .modal-col .sub-title {
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.94px;
  text-align: left;
  color: #FFFFFFB2;
}
.popup-modal .modal-col .search-results {
  position: relative;
}
.popup-modal .modal-col .form-control{
  padding: 12px 8px;
  background: #48484899;
  border: 1px solid #48484899;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
  color: #fff;
  border-radius: 4px;
}
.popup-modal .modal-col .form-control:focus{
  box-shadow:inherit;
}
.popup-modal .modal-col {
  padding: 16px 0;
  border-bottom: 1px solid #FFFFFF1A;
}
.popup-modal .modal-col label + .suggestion-mes {
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  color: #F2AE44;
  margin-bottom: 10px;
  display: block !important;
}
.popup-modal .picker {
  display: flex;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #48484899;
  padding: 8px;
  background: #FFFFFF0D;
}
.popup-modal .col-inner {
  display: flex;
  column-gap: 10px;
  align-items: center;
}
.popup-modal .col-inner + .col-inner {
  margin-top: 16px;
}
.popup-modal .modal-col .form-control + .col-inner{
  margin-top: 16px;
}
.popup-modal .pop-col {
  width: 50%;
}
.popup-modal .modal-content{
  background-color: transparent;
}
.upload-container {
  display: flex;
  align-items: center;
}
.upload-btn {
  padding: 12px 8px;
  background: #fff;
  border: 1px solid #fff;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.94px;
  color: #000;
  border-radius: 4px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.upload-btn span {
  display: flex;
  align-items: center;
  gap: 1px;
}
.image_preview img {
  height: 50px;
  width: 50px;
  /* display: inline;
  font-size: 14px; */
}
.image_preview {
  background: #48484899;
  padding: 12px 8px;
  border: 1px solid #48484899;
  border-radius: 4px;
  margin-top: 10px;
  display: flex;
}
.remove-image {
  cursor: pointer;
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 99;
}
#preview-box {
  width: fit-content;
  display: inline-block;
  position: relative;
}
.upload-alert {
  margin-top: 10px;
  font-size: 14px;
  margin-bottom: 0;
  color: #842029;
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
  border-radius: 0.375rem;
  padding: 10px 8px;
}
/* info pop-up design start */
.btn-info.openInfo {
  /* text-transform: uppercase; */
  color: red;
  /* font-size: 14px; */
  font-weight: bold;
  text-decoration: underline;
  /* line-height: 24px; */
  /* background: transparent; */
  /* margin: 10px 0 auto; */
  /* display: block; */
  /* border: none; */
}
.info-wraper, .info-wraper li {
  list-style-type: decimal;
}
.info-wraper{
  padding-left: 20px;
}
.info-wraper li{
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 22px;
}
.info-popup .modal-dialog {
  max-width: 600px;
}
/* info pop-up design end */
/* Color picker */
.popup-modal .picker input[type="color"] {
  width: 24px;
  height: 24px;
  border-radius: 2px;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  margin-right: 10px;
}
.popup-modal .picker input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.popup-modal .picker input[type="text"]{
  background: transparent;
  color: #fff;
  border: none;
  max-width: 78px;
  width: 100%;
}
.popup-modal .picker input[type="color"]::-webkit-color-swatch {
  border: none;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.popup-modal .modal-footer {
  display: flex;
  align-items: center;
  column-gap: 16px;
  padding: 20px 0;
  background: #161616;
  flex-wrap: inherit;
  border: none;
}
.popup-modal .modal-footer .btn{
  width: 50%;
  font-family: Rubik;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.33px;
  text-align: center;
  border: none;
  padding: 10px;
}
.popup-modal .modal-footer .btn-secondary{
  background: #fff;
  color: #000;
}
.popup-modal .modal-footer .btn-secondary:focus, .popup-modal .modal-footer .btn-secondary:hover{
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
.popup-modal .modal-footer .btn-primary{
  background: #F92424;
  color: #fff;
}
.popup-modal .modal-footer .btn-primary:focus, .popup-modal .modal-footer .btn-primary:hover{
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
.popup-modal .modal-col.search-catalog-section label {
  width: auto;
}
.popup-modal .modal-col.search-catalog-section label + span {
  display: inline;
}  
.popup-modal .modal-col .typeahead.form-control {
  background: transparent;
  border: none;
}
.popup-modal .modal-col.search-catalog-section .input-group {
  background: #48484899;
  border: 1px solid #48484899;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.popup-modal .modal-col.search-catalog-section .input-group .btn{
  padding: 8px;
  border: none;
}
.popup-modal .modal-col.search-catalog-section .input-group .btn:active {
  border:none;
}
.popup-modal .modal-col.search-catalog-section .input-group .btn:hover{
  border: none;
  margin-left: 0;
}
.popup-modal .modal-col.search-catalog-section .search-results .card{
  background: #2B2B2B;
  max-height: 180px;
  overflow-y: auto;
  position: absolute;
  width: 100%;
  z-index: 1;
  /* height: 100%; */
  padding: 8px;
}
.popup-modal .modal-col.search-catalog-section .search-results .card .row {
  border-bottom: none !important;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 10px;
  justify-content: space-between;
}
.popup-modal .modal-col.search-catalog-section .search-results .card .row .col-md-1 {
  width: 35px;
  height: 35px;
  padding: 0 !important;
}
.popup-modal .modal-col.search-catalog-section .search-results .card .row .col-md-1 img{
  border-radius:2px;;
}
.popup-modal .modal-col.search-catalog-section .search-results .card .row .col-md-9.pt-2{
  width: 61%;
}
.popup-modal .modal-col.search-catalog-section .search-results .card .row .col-md-2 {
  width: 21%;
  padding: 0;
} 
.popup-modal .modal-col.search-catalog-section .search-results .card .row .col-md-9.pt-2 span {
  font-family: Inter;
  font-size: 14px;
  line-height: 16.94px;
  color: #FFFFFF;
}
.popup-modal #update_menu_modal .modal-col.search-catalog-section .search-results .card .row .col-md-9.pt-2 {
  width: 56%;
}
.popup-modal #update_menu_modal .modal-col.search-catalog-section .search-results .card .row .col-md-2 {
  width: 25%;
  padding: 0;
}
.popup-modal .modal-col.search-catalog-section .search-results .card .row .col-md-2 .select-item {
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  text-transform:uppercase;
  padding:7px 10px;
  background: #FF4300;
  color:#fff;
  border-radius:30px;
  cursor: pointer;
  border: none;
}
.popup-modal .modal-col.search-catalog-section .search-results .card.no-data-found h5 {
  font-family: Rubik;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.59px;
  text-align: center;
}
.popup-modal .modal-col.search-catalog-section .search-results .card.no-data-found p {
  font-family: Inter;
  font-size: 13px;
  font-weight: 400;
  line-height: 15.73px;
  text-align: center;
  color: #FFFFFF99;
  margin-bottom: 0;
}
.popup-modal .single-product-card {
  max-height: 260px;
  overflow-y: auto;
  position: relative;
  width: 100%;
  background: #2B2B2B;
  padding: 8px;
}
.popup-modal .modal-col .single-product-card .row {
  border-bottom: none !important;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 10px;
  justify-content: space-between;
  margin-bottom: 0;
}
.popup-modal .modal-col .single-product-card .row .col-md-1 {
  width: 35px;
  height: 35px;
  padding: 0 !important;
}
.popup-modal .modal-col .single-product-card .row .col-md-9.pt-2 {
  width: 77%;
}
.popup-modal .modal-col .single-product-card .row .col-md-2 {
  width: 5%;
  padding: 0;
}
.popup-modal .modal-col .single-product-card .row .col-md-2 .un-select-item {
  cursor: pointer;
  background: transparent;
  border: none;
}
.popup-modal .modal-col .single-product-card .row .col-md-2 .un-select-item span {
  position: relative;
}
.popup-modal .modal-col .single-product-card .row .col-md-2 .un-select-item span:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M5.00156 6.04961L1.32656 9.72461C1.18906 9.86211 1.01406 9.93086 0.801563 9.93086C0.589063 9.93086 0.414063 9.86211 0.276563 9.72461C0.139063 9.58711 0.0703125 9.41211 0.0703125 9.19961C0.0703125 8.98711 0.139063 8.81211 0.276563 8.67461L3.95156 4.99961L0.276563 1.32461C0.139063 1.18711 0.0703125 1.01211 0.0703125 0.799609C0.0703125 0.587109 0.139063 0.412109 0.276563 0.274609C0.414063 0.137109 0.589063 0.0683594 0.801563 0.0683594C1.01406 0.0683594 1.18906 0.137109 1.32656 0.274609L5.00156 3.94961L8.67656 0.274609C8.81406 0.137109 8.98906 0.0683594 9.20156 0.0683594C9.41406 0.0683594 9.58906 0.137109 9.72656 0.274609C9.86406 0.412109 9.93281 0.587109 9.93281 0.799609C9.93281 1.01211 9.86406 1.18711 9.72656 1.32461L6.05156 4.99961L9.72656 8.67461C9.86406 8.81211 9.93281 8.98711 9.93281 9.19961C9.93281 9.41211 9.86406 9.58711 9.72656 9.72461C9.58906 9.86211 9.41406 9.93086 9.20156 9.93086C8.98906 9.93086 8.81406 9.86211 8.67656 9.72461L5.00156 6.04961Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  width: 10px;
  height: 10px;
  top: -8px;
  right: -5px;
}
.popup-modal .modal-col .form-select {
  background: #222222;
  color: #fff;
  font-size: 14px;
  border: 1px solid #48484899;
  padding: 11px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M6.5 12C6.39238 12 6.29148 11.9809 6.19731 11.9427C6.10314 11.9046 6.0157 11.8397 5.93498 11.7481L2.22197 7.53435C2.07399 7.36641 2 7.15267 2 6.89313C2 6.63359 2.07399 6.41985 2.22197 6.25191C2.36996 6.08397 2.5583 6 2.787 6C3.0157 6 3.20404 6.08397 3.35202 6.25191L6.5 9.82443L9.64798 6.25191C9.79596 6.08397 9.9843 6 10.213 6C10.4417 6 10.63 6.08397 10.778 6.25191C10.926 6.41985 11 6.63359 11 6.89313C11 7.15267 10.926 7.36641 10.778 7.53435L7.06502 11.7481C6.9843 11.8397 6.89686 11.9046 6.80269 11.9427C6.70852 11.9809 6.60762 12 6.5 12Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: right;
  background-size: 22px;
}
.popup-modal .modal-col .form-select option {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
  text-align: left;
  color: #FFFFFF99;
}
.popup-modal .modal-col [type="checkbox"]{
  height: 15px;
  width: 15px;
  background: #000;
  margin-right: 10px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #B9B9B9;
  background-color: transparent;
  cursor: pointer;
  border-radius: 2px;
}
.popup-modal .modal-col [type="checkbox"]:checked {
  background-color: #F92424;
  border-color:#F92424;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}
.popup-modal .modal-col [type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 2px 2px rgba(0, 123, 255, 0.25);
}
.popup-modal .modal-col [type="checkbox"] + label {
  margin-bottom: 0;
}
.popup-modal .modal-col [type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.75 16.5C3.3375 16.5 2.98438 16.3531 2.69063 16.0594C2.39687 15.7656 2.25 15.4125 2.25 15V4.5C2.25 4.0875 2.39687 3.73438 2.69063 3.44063C2.98438 3.14688 3.3375 3 3.75 3H4.5V2.25C4.5 2.0375 4.57188 1.85938 4.71563 1.71563C4.85938 1.57188 5.0375 1.5 5.25 1.5C5.4625 1.5 5.64063 1.57188 5.78438 1.71563C5.92813 1.85938 6 2.0375 6 2.25V3H12V2.25C12 2.0375 12.0719 1.85938 12.2156 1.71563C12.3594 1.57188 12.5375 1.5 12.75 1.5C12.9625 1.5 13.1406 1.57188 13.2844 1.71563C13.4281 1.85938 13.5 2.0375 13.5 2.25V3H14.25C14.6625 3 15.0156 3.14688 15.3094 3.44063C15.6031 3.73438 15.75 4.0875 15.75 4.5V15C15.75 15.4125 15.6031 15.7656 15.3094 16.0594C15.0156 16.3531 14.6625 16.5 14.25 16.5H3.75ZM3.75 15H14.25V7.5H3.75V15ZM3.75 6H14.25V4.5H3.75V6ZM9 10.5C8.7875 10.5 8.60938 10.4281 8.46563 10.2844C8.32188 10.1406 8.25 9.9625 8.25 9.75C8.25 9.5375 8.32188 9.35938 8.46563 9.21563C8.60938 9.07188 8.7875 9 9 9C9.2125 9 9.39063 9.07188 9.53438 9.21563C9.67813 9.35938 9.75 9.5375 9.75 9.75C9.75 9.9625 9.67813 10.1406 9.53438 10.2844C9.39063 10.4281 9.2125 10.5 9 10.5ZM6 10.5C5.7875 10.5 5.60938 10.4281 5.46563 10.2844C5.32188 10.1406 5.25 9.9625 5.25 9.75C5.25 9.5375 5.32188 9.35938 5.46563 9.21563C5.60938 9.07188 5.7875 9 6 9C6.2125 9 6.39063 9.07188 6.53438 9.21563C6.67813 9.35938 6.75 9.5375 6.75 9.75C6.75 9.9625 6.67813 10.1406 6.53438 10.2844C6.39063 10.4281 6.2125 10.5 6 10.5ZM12 10.5C11.7875 10.5 11.6094 10.4281 11.4656 10.2844C11.3219 10.1406 11.25 9.9625 11.25 9.75C11.25 9.5375 11.3219 9.35938 11.4656 9.21563C11.6094 9.07188 11.7875 9 12 9C12.2125 9 12.3906 9.07188 12.5344 9.21563C12.6781 9.35938 12.75 9.5375 12.75 9.75C12.75 9.9625 12.6781 10.1406 12.5344 10.2844C12.3906 10.4281 12.2125 10.5 12 10.5ZM9 13.5C8.7875 13.5 8.60938 13.4281 8.46563 13.2844C8.32188 13.1406 8.25 12.9625 8.25 12.75C8.25 12.5375 8.32188 12.3594 8.46563 12.2156C8.60938 12.0719 8.7875 12 9 12C9.2125 12 9.39063 12.0719 9.53438 12.2156C9.67813 12.3594 9.75 12.5375 9.75 12.75C9.75 12.9625 9.67813 13.1406 9.53438 13.2844C9.39063 13.4281 9.2125 13.5 9 13.5ZM6 13.5C5.7875 13.5 5.60938 13.4281 5.46563 13.2844C5.32188 13.1406 5.25 12.9625 5.25 12.75C5.25 12.5375 5.32188 12.3594 5.46563 12.2156C5.60938 12.0719 5.7875 12 6 12C6.2125 12 6.39063 12.0719 6.53438 12.2156C6.67813 12.3594 6.75 12.5375 6.75 12.75C6.75 12.9625 6.67813 13.1406 6.53438 13.2844C6.39063 13.4281 6.2125 13.5 6 13.5ZM12 13.5C11.7875 13.5 11.6094 13.4281 11.4656 13.2844C11.3219 13.1406 11.25 12.9625 11.25 12.75C11.25 12.5375 11.3219 12.3594 11.4656 12.2156C11.6094 12.0719 11.7875 12 12 12C12.2125 12 12.3906 12.0719 12.5344 12.2156C12.6781 12.3594 12.75 12.5375 12.75 12.75C12.75 12.9625 12.6781 13.1406 12.5344 13.2844C12.3906 13.4281 12.2125 13.5 12 13.5Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: right;
  background-size: 18px;
  appearance: none;
  -webkit-appearance: none;
}
.popup-modal .font-style-options,
.popup-modal .label-visibility-options {
  display: flex;
  gap: 10px;
}
.popup-modal .font-style-options input[type="radio"],
.popup-modal .label-visibility-options input[type="radio"] {
  display: none;
}
.popup-modal .font-style-options label,
.popup-modal .label-visibility-options label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  height: 45px;
  width: 100%;
  background: #48484899;
  color: #fff;
  margin-bottom: 0 !important;
}
.popup-modal .font-style-options input[type="radio"]:checked + label,
.popup-modal .label-visibility-options input[type="radio"]:checked + label {
  background-color: #fff;
}
.popup-modal .font-style-options input[type="radio"]:checked + label svg path {
  fill: #000;
}
.popup-modal .alert.alert-danger {
  /* margin: 0 16px; */
  padding: 10px;
}
.popup-modal .alert.alert-danger li {
  font-size: 14px;
}
.input-svg {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="27" height="22" viewBox="0 0 27 22" fill="none"><path d="M1 1L1 21" stroke="white" stroke-opacity="0.1" stroke-linecap="round"/><path d="M16.125 14C14.7625 14 13.6094 13.5281 12.6656 12.5844C11.7219 11.6406 11.25 10.4875 11.25 9.125C11.25 7.7625 11.7219 6.60938 12.6656 5.66563C13.6094 4.72188 14.7625 4.25 16.125 4.25C17.4875 4.25 18.6406 4.72188 19.5844 5.66563C20.5281 6.60938 21 7.7625 21 9.125C21 9.675 20.9125 10.1938 20.7375 10.6813C20.5625 11.1688 20.325 11.6 20.025 11.975L24.225 16.175C24.3625 16.3125 24.4313 16.4875 24.4313 16.7C24.4313 16.9125 24.3625 17.0875 24.225 17.225C24.0875 17.3625 23.9125 17.4313 23.7 17.4313C23.4875 17.4313 23.3125 17.3625 23.175 17.225L18.975 13.025C18.6 13.325 18.1688 13.5625 17.6813 13.7375C17.1938 13.9125 16.675 14 16.125 14ZM16.125 12.5C17.0625 12.5 17.8594 12.1719 18.5156 11.5156C19.1719 10.8594 19.5 10.0625 19.5 9.125C19.5 8.1875 19.1719 7.39062 18.5156 6.73438C17.8594 6.07812 17.0625 5.75 16.125 5.75C15.1875 5.75 14.3906 6.07812 13.7344 6.73438C13.0781 7.39062 12.75 8.1875 12.75 9.125C12.75 10.0625 13.0781 10.8594 13.7344 11.5156C14.3906 12.1719 15.1875 12.5 16.125 12.5Z" fill="white" fill-opacity="0.7"/></svg>') no-repeat;
    background-size: auto;
    background-position: 0px center;
    width: 10%;
    cursor: pointer;
}
.popup-modal .label-visibility-options input[type="radio"]:checked + label {
  color: #000;
}
/* pop-up new design end */
/* .notification-history design start */
.notification-history-view .history {
  /* padding-top: 14px; */
}
.notification-history .content-left {
  width: 100%;
}
.notification-history .content-right.preview-col{
  width: inherit;
}
.history-row {
  display: flex;
  column-gap: 16px;
  justify-content: space-between;
  margin-top: 0;
}
.history-row .history-col.go-back {
  width: 46%;
}
/* .history-row .history-col {
  display: flex;
  align-items: center;
} */
.history-date {
  display: flex;
  align-items: flex-start;
}
.history-date .form-control {
  height: 40px;
  width: 230px;
}
.history-date .form-control:focus{
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
.history-date .btn {
  font-family: Rubik;
  font-size: 16px;
  font-weight: 500;
  line-height: 18.96px;
  display: inline-block;
  padding: 10px 20px;
  width: 100%;
}
.history-date .date-title {
  padding: 0 16px;
  margin-top: 12px;
}
.history-col.his-btn .history-btn {
  display: flex;
  column-gap: 10px;
}
.notification-history button{
  padding: 10px;
  border: 1px solid #000000;
  border-radius: 4px;
  display: flex;
  align-items: center;
  column-gap: 8px;
  font-family: Rubik;
  font-size: 16px;
  font-weight: 500;
  line-height: 18.96px;
  color: #000000;
}
.history .filters-form {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.notification-history thead tr th {
  background: #F9F9F9;
  padding: 20px 16px;
  font-family: Rubik;
  font-size: 12px;
  font-weight: 500;
  line-height: 14.22px;
}
.notification-history tbody tr td {
  background: transparent !important;
  padding: 20px 16px;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.94px;
}
.notification-history tbody tr td{
  color: #303030 !important;
  border-bottom: 1px solid #0000001A;
}
.notification-history tbody tr:nth-child(odd) td {
  --bs-table-accent-bg: inherit;
}
.notification-history .table {
  border: 1px solid #0000001A;
}
.notification-history thead tr th:nth-child(4), .notification-history thead tr th:nth-child(5) {
  text-align: center;
}
.notification-history tbody tr td:nth-child(4) {
  text-align: center;
}
.history-btn .btn{
  font-family: Rubik;
  font-size: 16px;
  font-weight: 500;
  line-height: 18.96px;
}
.history-btn .btn:focus{
  box-shadow: inherit;
  border: none;
}
.history-btn .btn.btn-secondary {
  background: #F92424;
  border: none;
  padding: 10px 24px;
}
.history-btn .btn.btn-secondary:hover, .history-btn .btn.btn-secondary:focus{
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
.history-btn .btn.btn-primary {
  background: #000;
  border: none;
}
.history-btn .btn.btn-primary:hover, .history-btn .btn.btn-primary:focus{
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
.history-btn .btn.btn-primary:active {
  border: none;
}
.history .filters-form .notification-history {
  color: #000;
}
.history .filters-form .notification-history:hover button {
  background:#000;
  color:#fff;
}
.history .filters-form .notification-history:hover button svg path {
  fill: #fff;
}
/* .notification-history design end */

/* preview page design start */
.content.preview-col {
  text-align: center;
  position: relative;
}
.perview-buttons .customize-btn, .perview-buttons .publish-btn {
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  border-radius: 4px;
  border: 1px solid #000;
  background-color: #000;
  font-size: 16px;
  font-weight: 400;
}
.perview-buttons .customize-btn:hover, .perview-buttons .publish-btn:hover {
  color: #000;
  background-color: #fff;
  transition: all 0.35s ease-in-out 0s;
}
.perview-buttons .customize-btn:focus, .perview-buttons .publish-btn:focus {
  color: #fff;
  background-color: #000;
  transition: all 0.35s ease-in-out 0s;
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
.redirect-btn-view {
  padding: 0 0 30px;
}
/* preview page design end */

/* help page design start */
#videoModal .modal-content{
  border: none;
  line-height: 0;
  background: #000;
}
#videoModal .btn-close {
  background: inherit;
  color: inherit;
  opacity: inherit;
  position: absolute;
  right: -7px;
  top: -14px;
}
#videoModal .btn-close svg {
  width: 24px;
  height: auto;
}
.help-view .integration-page{
  padding: 30px 16px;
}
.help-page .help-row {
  display: flex;
  column-gap: 16px;
  row-gap: 30px;
  flex-flow: row wrap;
  margin: 30px 0;
}
.help-page .help-col{
  width: calc(33.33% - 11px);
  display: none;
}
.help-page .video-content {
  padding: 12px 20px;
  background: #2D2D2D;
  min-height: 64px;
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px
}
.video-image {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}
.help-page .video-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px
}
.help-col-inner {
  border-radius: 10px;
  border: 1px solid #000;
}
.help-page .video-content h5 {
  font-family: Inter;
  font-size: 16px;
  font-weight: 600;
  line-height: 19.36px;
  color: #fff;
}
.help-page .video-content p {
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  color: #656565;
  margin-bottom: 0;
}
button.btn-video.video-play {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  z-index: 1;
  outline: none;
}
.btn-video:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  animation: pulse-border 1.5s ease-out infinite;
  pointer-events: none;
  background: rgba(255,255,255,0.9);
  z-index: -1;
}

@keyframes pulse-border {
  0% {
      transform: scale(0.8);
      opacity: 1;
  }

  100% {
      transform: scale(2);
      opacity: 0;
  }
}
.btn-video::after {
  content: "";
  width: 16px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22' viewBox='0 0 18 22' fill='none'%3E%3Cpath d='M0.332031 19.6249V2.37492C0.332031 1.9027 0.498698 1.50686 0.832031 1.18742C1.16536 0.867974 1.55425 0.708252 1.9987 0.708252C2.13759 0.708252 2.28342 0.729085 2.4362 0.770752C2.58898 0.812419 2.73481 0.874919 2.8737 0.958252L16.457 9.58325C16.707 9.74992 16.8945 9.95825 17.0195 10.2083C17.1445 10.4583 17.207 10.7221 17.207 10.9999C17.207 11.2777 17.1445 11.5416 17.0195 11.7916C16.8945 12.0416 16.707 12.2499 16.457 12.4166L2.8737 21.0416C2.73481 21.1249 2.58898 21.1874 2.4362 21.2291C2.28342 21.2708 2.13759 21.2916 1.9987 21.2916C1.55425 21.2916 1.16536 21.1319 0.832031 20.8124C0.498698 20.493 0.332031 20.0971 0.332031 19.6249Z' fill='%23FF4300'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}

.btn-video:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
  background-color: #fff;
}
.video-popup.show .modal-dialog {
  max-width: 1065px;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}
#videoModal .modal-body iframe {
  min-height: 600px;
  height: 100%;
}
#videoModal .btn-close:focus {
  box-shadow: inherit;
}
#videoModal .modal-body{
  padding: 0;
}
.load-more-btn {
  text-align: center;
  padding: 0 0 30px 
}
.load-more-btn .loadMoreBtn {
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  border-radius: 4px;
  border: 1px solid #000;
  background-color: #000;
  font-size: 16px;
  font-weight: 400;
}
.load-more-btn .loadMoreBtn:hover {
  color: #000;
  background-color: #fff;
  transition: all 0.15s ease-in-out 0s;
}
.load-more-btn .loadMoreBtn:focus {
  color: #fff;
  background-color: #000;
  transition: all 0.35s ease-in-out 0s;
  box-shadow: 0 0 0 0.16rem rgba(128, 128, 128, 0.5);
}
/* help page design end */

/* terms and condition page design start */
.terms-page {
  padding: 30px 16px;
}

.terms-content {
  font-size: 14px;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
}

.terms-content h5 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 10px;
}

.terms-content ul li {
  margin-bottom: 10px;
  padding-left: 18px;
  position: relative;
  margin-left: 40px;
  letter-spacing: 0.5px;
  line-height: 24px;
}

.terms-content ul li:before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
}

.terms-content ul li:after {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background-color: #FF1A00;
  border-radius: 50%;
}

.terms-content strong {
  font-weight: bold;
}

.terms-content p {
  margin-bottom: 10px;
}
/* terms and condition page design end */

/* Image Swatch Start */
.image-swatch-page {
  display: flex;
}
.image-swatch-page form {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}
.image-swatch-main div.col-lg-6.image-type {
  max-width: calc(30% - 15px);
}
.image-swatch-main div.col-lg-6.image-url {
  max-width: calc(60% - 15px);
}
.image-swatch-main div.col-lg-6.image-preview {
  max-width: calc(10% - 15px);
}
.image-swatch-main {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  max-width: calc(50% - 15px);
  margin-right: 60px;
}
.image-swatch-main div.col-lg-6,.image-swatch-main .col-lg-12{
  max-width :100%;
  width:100%;
  margin-top:25px;
}
.image-swatch-main div.col-lg-3 {
  max-width: 100%;
  width: 100%;
  position: relative;
}
.image-swatch-main input[type=text],.image-swatch-main input[type=url],.image-swatch-main select{
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  background-clip: padding-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  height: 66px;
  border: 1px solid #ff857b;
  border-radius: 10px;
  padding: 5px 20px;
  font-size: 16px;
  outline:none;
}
.image-swatch-main input[type="submit"] {
  width: 100%;
  display: inline-block;
  padding: 16px;
  min-width: 210px;
  /* height: 42px; */
  font-size: 16px;
  line-height: 19px;
  border-radius: 10px;
  font-weight: 500;
  background: #F92424;
  color: #fff;
  border: 0;
  text-transform: uppercase;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.image-swatch-main input[type="submit"]:hover {
  background-color: #000;
}
.image-swatch-main .image-option-name label ,.image-swatch-main .image-url label ,.image-swatch-main .image-type label {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  background: #fff;
  padding: 0 10px;
  position: absolute;
  left: 35px;
  top: -7px;
}
.image-swatch-main .image-swatch {
  margin-top: 20px;
}
.image-swatch-main .image-url {
  margin-top: 30px;
}
.image-url-steps li {
  font-size: 16px;
  line-height: 1.3;
  margin: 10px 0;
  list-style-position: inside;
}
.image-url-section ol {
  padding: 0;
}
.image-url-section {
  max-width: calc(50% - 15px);
  width: 100%;
}
/* .image-swatch-heading {
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
}  */
.instruction-image {
  margin: 10px 0 0;
  max-width: 550px;
}
.image-url-steps li p {
  margin: 15px 0 25px;
}
.step-instruction {
  margin-top: 10px;
  color: #727272;
  font-size: 14px;
}
.alert div{
  text-align: center;
}
.alert-success {  
  position: fixed;
  top: 63px;
  left: 12%;
  right: 0;
  margin: auto;
  text-align: center;
  width: 350px;
  z-index: 8;
}
.integration-page .alert-danger {  
  position: fixed;
  top: 63px;
  left: 12%;
  right: 0;
  margin: auto;
  text-align: center;
  width: 350px;
  z-index: 8;
}
.image-url-section ol {
  padding: 0;
}
.step-instruction #preview_image {
  width: 50px;
  height: 50px;
  display: block;
  float: right;
  margin-top: 10px;
}
span.instruction-comment {
  display: block;
  padding-left: 20px;
  padding-top: 5px;
}
.image-swatch-layout span.url {
  width: 50px;
  height: 50px;
  display: block;
  /* float: right; */
  margin-top: 10px;
}
.image-swatch-layout .integration-page {
  padding: 30px 16px;
}
.feature-label {
  padding-top: 20px;
  font-family: Rubik;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.switch-toggle,
.switch-toggle-discount {
  --width: 180px;
  --height: 40px;
  --offset: 2px;
  --radius: 10px;
  position: relative;
  width: var(--width);
  height: var(--height);
  padding: var(--offset);
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  transition: background-color 250ms ease-in-out;

  input[type="checkbox"] {
    cursor: pointer;
    position: absolute;
    inset: 0;
    appearance: none;
    z-index: 2;

    &:checked {
      + label.switch-toggle-label {
        &:before {
          translate: 100% 0;
          background-color: #000;
        }
        span {
          &:nth-child(1) {
            color: gray;

          }
          &:nth-child(2) {
            color: white;
          }
        }
      }
    }

    & + label.switch-toggle-label {
      position: absolute;
      inset: var(--offset);
      padding: 10px 0;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      place-items: center;
      user-select: none;
      pointer-events: none;
      border-radius: var(--radius);
      background-color: #fff;
      transition: background-color 250ms ease-in-out;
      box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);

      &:before {
        content: "";
        position: absolute;
        width: 50%;
        inset: 0;
        background: #000;
        border-radius: calc(var(--radius) - var(--offset));
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        translate: 0 0;
        transition: translate 250ms cubic-bezier(0.93, 0.26, 0.07, 0.69), background-color 250ms ease-in-out;
      }

      span {
        position: relative;
        transition: color 200ms linear;

        &:nth-child(1) {
          color: white; /* JPG text default color */
        }

        &:nth-child(2) {
          color: gray; /* PNG text default color */
        }
      }
    }
  }
}

.no_scroll {
  overflow: hidden;
  height: 100%;
}

/* Image Swatch end */

@media(max-width:1920px) {
  .content-media{
    margin-right: 60px;
  }
}
@media(max-width:1640px){
  .content-media{
    max-width: 130px;
    margin-right: 40px;
  }
}
@media(max-width:1540px) {
  .top-left {
    top: -10px;
    left: 0;
  }
  .top-right {
    top: -10px;
    right: 0;
  }
  .bottom-left {
    bottom: -10px;
    left: 0;
  }
  .bottom-right {
    bottom: -10px;
    right: 0;
  }
  .content {
    padding: 15px;
  }
  .content-media{
    max-width: 130px;
    margin-right: 0;
  }
}

@media(max-width:1440px) {
  .sidebar-col {
    width: 200px;
  }

  .main-col {
    width: calc(100% - 200px);
  }

  .side-bar-menu .nav-item, .sidebar-min-height .nav-item {
    padding: 0 10px;
  }

  .side-bar-link span {
    font-size: 14px;
  }

  .nav-item .side-bar-link {
    padding: 10px 2px 10px 10px;
    column-gap: 10px;
  }

  .dashboard .feature-content .feature-title {
    font-size: 20px;
    line-height: normal;
  }

  .arrow-btn {
    width: 60px;
    height: 60px;
  }

  .arrow-btn:before {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
  }

  .phone-bg {
    max-width: 450px;
    max-height: 450px;
  }

  .content-inner {
    column-gap: 12px;
  }

  .phone-bg span {
    width: 36px;
  }
  #videoModal .modal-body iframe{
    min-height: 540px;
  }
  .video-popup.show .modal-dialog{
    max-width: 960px;
  }
}
@media(max-width:1365px){
  .feautres-col .feautre-icon svg {
    width: 66px;
    height: 66px;
  }
  .configure-btn{
    padding: 8px 14px;
    line-height: normal;
  }
  .feautres-col p{
    margin-bottom: 0;
  }
  .user-manual-content {
    max-width: 380px;
  }
  .user-manual-content .accordioan-user-manual .accordion-content{
    padding: 14px 17px;
  }
  .accordion-content .title{
    font-size: 16px;
    line-height: normal;
  }
  .content-media {
    max-width: 100px;
  }
  .contact-us-col .form-control{
    padding: 12px 12px;
  }
  .contact-us-form {
    margin-top: 30px;
  } 
  .contact-col{
    padding: 16px;
  }
  .contact-col.user-manual{
    padding: 16px;
  }
  .contact-col.user-manual:before{
    right: 4px;
  }
  .contact-row .page-description{
    margin-top: 30px;
    margin-bottom: 24px;
  }
}
@media(max-width:1279px){
  .feautres-sec .feautres-row .feautres-col{
    padding: 20px;
  }
  .toggle-input:checked + .toggle-button:before {
    transform: translateX(28px);
  }
  .toggle-button:before {
    width: 16px;
    height: 16px;
    left: 3px;
  }
  .toggle-button{
    width: 50px;
    height: 20px;
  }
  .content-media{
    margin-top: 0;
  }
  #deleteLayoutConfirm.modal.show .modal-dialog, #deleteLayoutConfirm.modal.show .modal-dialog{
    max-width: 360px;
    margin-top: 64px;
  }
  #deleteLayoutConfirm .modal-body p, #deleteSubLayoutConfirm .modal-body p{
    font-size: 14px;
    line-height: normal;
  }
  #deleteLayoutConfirm .modal-content, #deleteSubLayoutConfirm .modal-content{
    padding: 0 15px;
  }
  #deleteLayoutConfirm .modal-header, #deleteSubLayoutConfirm .modal-header{
    padding: 12px 12px;
    margin-bottom: 12px;
  }
  #videoModal .modal-body iframe{
    min-height: 500px;
  }
  .video-popup.show .modal-dialog{
    max-width: 860px;
  }
  .help-page .video-content h5{
    font-size: 14px;
    line-height: normal;
  }
}
@media(max-width:1240px){
  .notification-history button{
      padding: 6px;
      column-gap: 6px;
      font-size: 14px;
  }
  .history-date .form-control{
      height: auto;
      width: 180px;
  }
  .history-col.his-btn .history-btn{
      column-gap: 8px;
  }
  .history-date .date-title{
      padding: 0 10px;
      font-size: 14px;
  }
  .history-btn .btn{
      font-size: 14px;
  }
  .history-btn .btn.btn-secondary{
      padding: 10px 14px;
  }
}
@media(max-width:1199px) {
  .dashboard .feature-content .feature-details .feature-icon {
    width: 100%;
  }

  .dashboard .feature-content .feature-details .feature-inner {
    width: 100%;
    height: auto;
    padding: 15px;
  }

  .arrow-btn {
    right: -15px;
    bottom: -15px;
  }

  .content-inner {
    flex-flow: row wrap;
  }

  .content-inner .content-left {
    width: 100%;
  }

  .content-inner .content-right {
    width: 100%;
  }

  .dashboard .feature-content .feature-details .feature-icon img {
    max-height: 200px;
    object-fit: contain;
  }

  .mobile-device {
    margin: 15px;
    padding: 0;
  }

  .account-details {
    margin-left: 10px;
  }

  .account-details .dropdown .dropdown-toggle p {
    font-size: 12px;
  }

  .main-col .header-bar {
    padding: 11px 15px;
  }

  .header-button-group .button-view .btn {
    font-size: 14px;
  }

  .header-button-group {
    column-gap: 10px;
  }
  .preview-col .mobile-preview{
    margin: 12px 0 12px;
  }
  .feautres-col .feautre-icon svg {
    width: 56px;
    height: 56px;
  }
  .feautres-col p {
    margin-bottom: 0;
  }
  .feautres-sec .feautres-row{
    gap: 18px;
  }
  .feautres-sec .feautres-row .feautres-col{
    width: calc(33.33% - 12px);
    padding: 16px;
  }
  .contact-col {
    width: 100%;
  }
  .user-manual-content {
    max-width: 80%;
  }
  .contact-col.user-manual:before{
    content: normal;
  }
}
@media(max-width:1100px){
  .history .filters-form {
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
  }
  .history .filters-form .notification-history {
      width: 100%;
  }
  .history-row {
      flex-flow: row wrap;
      gap: 10px;
      justify-content: center;
      align-items: center;
  }
  .history-col.his-btn {
      width: 100%;
  }
  .notification-history button {
      margin: auto;
  }
  .history-col.his-btn .history-btn {
      justify-content: center;
  }
}
@media(max-width:992px) {
  .main-col .header-title h3 {
    font-size: 14px;
  }
  .header-button-group .button-view .btn {
    padding: 3px 6px;
    font-size: 13px;
  }
  #deleteLayoutConfirm.modal.show .modal-dialog, #deleteLayoutConfirm.modal.show .modal-dialog{
    max-width: 320px;
  }
  .account-dropdown {
    width: 20px;
    height: 20px;
    padding-bottom: 8px;
  }
  .account-details .dropdown .dropdown-toggle p {
    padding-right: 22px;
  }
  .feautres-sec .feautres-row .feautres-col {
    width: calc(50% - 9px);
  }
  .modal-body .modal-icon svg {
    width: 60px;
  }
  .help-page .help-col {
    width: calc(50% - 8px);
  }
  #videoModal .modal-body iframe {
    min-height: 440px;
  }
  .video-popup.show .modal-dialog {
    max-width: 660px;
  }
  .terms-content h5 {
    font-size: 16px;
    margin-top: 10px;
  }
  .terms-content ul li {
    font-size: 14px;
    margin-left: 14px;
  }
  .history-date {
      flex-flow: row wrap;
  }
  .history-date .date-title {
      width: 100%;
      text-align: center;
  }
  .history-date .form-control {
      margin: auto;
  }
}

@media(max-width:767px) {
  .sidebar-col {
    position: fixed;
    top: 0;
    left: -100%;
    width: 270px;
    z-index: 111;
    padding: 10px 0;
    transition: 0.5s all;
  }
  .openmenu .sidebar-col {
    left: 0;
  }
  .cancel-drawer {
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    cursor: pointer;
    top: 10px;
    right: 10px;
    left: auto;
    margin-left: auto;
  }
  .cancel-bar {
    background-color: #fff;
    width: 100%;
    height: 2px;
    display: block;
    position: absolute;
  }
  .cancel-bar:first-child {
    transform: rotate(45deg);
    top: 10px;
  }
  .cancel-bar:last-child {
    transform: rotate(-45deg);
    top: 10px;
  }
  .main-col {
    width: 100%;
  }
  .main-col .header-bar {
    flex-flow: row wrap;
    row-gap: 10px;
  }
  .header-title {
    width: 100%;
    display: flex;
    column-gap: 10px;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
  }
  .main-col .header-bar-right {
    flex-wrap: wrap;
    margin-left: 0;
    width: 100%;
    row-gap: 10px;
  }
  .main-col .header-title h3 {
    text-align: center;
  }
  .header-button-group {
    width: 100%;
    justify-content: center;
  }
  .account-details {
    width: 100%;
    margin-left: 0;
  }
  .drawer {
    width: 24px;
    height: 24px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
    cursor: pointer;
  }
  .drawer-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
  }
  .header-title .logo {
    display: block;
    width: 40px;
    height: 40px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    margin-left: -15px;
    margin-top: -15px;
  }
  .smartphone {
    width: 259px;
    height: 550px;
    padding: 54px 13px 12px 14px;
    background-size: contain;
  }
  .smartphone.active-frame {
    padding: 54px 9px 12px 7px;
  }
  .phone-bg {
    max-width: 360px;
    max-height: 360px;
  }
  .phone-bg span {
    width: 24px;
  }
  .smartphone .content{
    height: 84%;
  }
  .bottom-bar .fix-wrap {
      padding: 0 10px;
  }
  .btm-bar-view a span {
      font-size: 9px;
  }
  .btm-bar-view {
      margin: 0 -16px;
  }
  .dashboard .feature-content .feature-title {
    font-size: 18px;
  }
  .feautres-sec .feautres-row .feautres-col {
    width: 100%;
  }
  .user-manual-content {
    max-width: 100%;
    width: 100%;
  }
  .user-manual-content .accordioan-user-manual .accordion-content{
    padding: 12px;
    column-gap: 10px;
  }
  .contact-us-row{
    margin-bottom: 24px;
  }
  .contact-us-row{
    flex-flow: row wrap;
  }
  .contact-us-col {
    width: 100%;
  }
  .help-page .help-row{
    gap: 10px;
  }
  .help-page .help-col {
    width: 100%;  
  }
  #videoModal .modal-body iframe {
    min-height: 300px;
  }
  .video-popup.show .modal-dialog {
    max-width: 500px;
  }
}
@media(max-height: 600px) {
  .sidebar-min-height {
    min-height: inherit;
  }
  .accordion-body .card-body {
    overflow-X: auto;
  }
  .accordion .drag-button{
    font-size: 14px;
  }
  .card-body .table>tbody tr td{
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 12px;
  }
  .card-body .table>thead tr th{
    padding: 10px 12px;
  }
}
@media(max-width: 425px) {
  #videoModal .modal-body iframe {
    min-height: 200px;
  }
  .video-popup.show .modal-dialog {
    max-width: 340px;
  }
}