Built files from Bizgaze WebServer
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

style.subscription.css 27KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221
  1. :root {
  2. --primary-color: #004a86;
  3. --success-color: #20B600;
  4. }
  5. .subs-bg-pattern {
  6. background-image: url(../../../../imgs/subs-bg-pattern.png);
  7. background-repeat: repeat;
  8. }
  9. .inr-sign::before {
  10. content: "\20B9";
  11. margin-right: 1px;
  12. }
  13. .subs-btn-primary, .subs-btn-outline-primary:focus, .subs-btn-outline-primary:hover {
  14. color: #fff;
  15. background-color: var(--primary-color);
  16. border: 2px solid var(--primary-color);
  17. font-weight: 600;
  18. }
  19. .subs-btn-outline-primary {
  20. color: var(--primary-color);
  21. background-color: transparent;
  22. border: 2px solid var(--primary-color);
  23. font-weight: 600;
  24. }
  25. .subs-btn-primary:hover, .subs-btn-primary:focus {
  26. background-color: #023b6a;
  27. border-color: #023b6a;
  28. }
  29. .registration-wrap .logo-heading-wrap {
  30. margin-bottom: 25px;
  31. }
  32. .registration-wrap .biz-logo {
  33. width: 200px;
  34. height: 50px;
  35. }
  36. .registration-wrap {
  37. margin-left: 0px;
  38. margin-right: 0px;
  39. background-color: #fff;
  40. }
  41. .registration-wrap .row {
  42. margin-left: 0px;
  43. margin-right: 0px;
  44. }
  45. .registration-wrap .form-error-message {
  46. right: 0;
  47. }
  48. .registration-wrap .registration-col-wrap {
  49. height: 100vh;
  50. overflow: hidden;
  51. display: flex;
  52. flex-direction: column;
  53. }
  54. .registration-wrap .registration-banner-wrap {
  55. height: 100vh;
  56. background-repeat: no-repeat;
  57. background-size: cover;
  58. }
  59. #registrationFormWrap .form-control:focus {
  60. box-shadow: none !important;
  61. background-color: white !important;
  62. }
  63. #right-on-add .offer-percentage {
  64. position: absolute;
  65. right: 25px;
  66. top: 10px;
  67. background-color: rgb(255, 34, 94);
  68. color: #fff;
  69. border-radius: 5px;
  70. font-size: 14px;
  71. font-weight: 600;
  72. padding: 3px 5px;
  73. z-index: 9;
  74. }
  75. .registration-form-wrap .form-control, .registration-form-wrap .select2-selection, .email-register-form .form-control {
  76. border-bottom: 1px solid rgb(206, 206, 206) !important;
  77. height: 50px;
  78. }
  79. .registration-form-wrap .form-control:focus, .email-register-form .form-control:focus {
  80. box-shadow: 0 0 0 0.1rem rgb(0 123 255 / 25%);
  81. }
  82. #AddOns-data {
  83. position: relative;
  84. width: 45%;
  85. margin: 20px auto 0px auto;
  86. }
  87. #AddOns-data .addons_search {
  88. border: 2px solid rgba(0, 0, 0, .15) !important;
  89. border-radius: 5px !important;
  90. padding-right: 30px !important;
  91. height: 38px;
  92. }
  93. #AddOns-data .search-icon {
  94. position: absolute;
  95. right: 10px;
  96. top: 50%;
  97. transform: translateY(-50%);
  98. }
  99. .heading-underline {
  100. position: relative;
  101. font-weight: 600;
  102. color: #000;
  103. margin-bottom: 10px;
  104. display: inline-block;
  105. }
  106. .heading-underline::after {
  107. content: '';
  108. height: 2px;
  109. width: 40%;
  110. background: rgb(255, 195, 74);
  111. position: absolute;
  112. left: 0;
  113. bottom: -7px;
  114. }
  115. .registration-wrap .form-heading-wrap {
  116. margin-top: 15px;
  117. display: flex;
  118. justify-content: space-between;
  119. align-items: center;
  120. }
  121. .form-heading-wrap .form-heading {
  122. font-size: 20px;
  123. }
  124. .form-heading-wrap .heading-tag-line {
  125. font-size: 14px;
  126. color: #000;
  127. }
  128. .registration-form-wrap .divCustomProperties {
  129. margin-bottom: 20px;
  130. }
  131. .registration-form-wrap .card.Section:not(.section_ReferalDetails) .divCustomProperties:nth-of-type(odd), .registration-form-wrap .divCustomProperties_referalname {
  132. padding-left: 2px !important;
  133. }
  134. .registration-form-wrap .card.Section:not(.section_ReferalDetails) .divCustomProperties:nth-of-type(even), .registration-form-wrap .divCustomProperties_referalemail {
  135. padding-right: 2px !important;
  136. }
  137. .registration-form-wrap .divCustomProperties_isreferal {
  138. padding: 0px !important;
  139. }
  140. .registration-form-wrap label {
  141. font-size: 16px !important;
  142. font-weight: 600 !important;
  143. color: #000 !important;
  144. opacity: 1 !important;
  145. top: -5px !important;
  146. }
  147. .registration-form-wrap .form-control,.registration-form-wrap .select2-selection, .email-register-form .form-control {
  148. border: 1px solid rgb(206, 206, 206) !important;
  149. height: 50px;
  150. }
  151. .registration-form-wrap .form-control:focus, .email-register-form .form-control:focus {
  152. box-shadow: 0 0 0 0.1rem rgb(0 123 255 / 25%);
  153. }
  154. .registration-form-wrap .select2-selection {
  155. display: flex;
  156. align-items: center;
  157. padding-left: 10px;
  158. }
  159. .registration-form-wrap .select2-selection .select2-selection__arrow {
  160. height: 50px;
  161. }
  162. .registration-form-wrap #lblValidation_cityid {
  163. display: none;
  164. }
  165. .registration-form-wrap #div_isreferal {
  166. height: 100%;
  167. display: flex;
  168. align-items: center;
  169. justify-content: space-between;
  170. }
  171. .registration-form-wrap #div_isreferal label {
  172. margin-bottom: 0px;
  173. }
  174. .registration-form-wrap #div_isreferal #lblValidation_isreferal {
  175. display: none;
  176. }
  177. .registration-form-wrap .referal-link {
  178. font-size: 22px;
  179. text-decoration: underline;
  180. color: #000;
  181. font-weight: bold;
  182. display: inline-block;
  183. margin-bottom: 20px;
  184. }
  185. .registration-form-wrap .action-btn-wrap {
  186. display: flex;
  187. justify-content: space-between;
  188. align-items: center;
  189. }
  190. .registration-form-wrap .div_phonenumber .phonenumber-input-wrap {
  191. position: relative;
  192. }
  193. .registration-form-wrap .div_phonenumber .phone-verify-btn {
  194. position: absolute;
  195. top: 50%;
  196. transform: translateY(-50%);
  197. right: 5px;
  198. padding: 3px 10px !important;
  199. }
  200. .registration-form-wrap .phonenumber-input-wrap .txt_phonenumber.verify-btn-visible {
  201. padding-right: 65px;
  202. }
  203. .registration-form-wrap .select2-container--default .select2-selection__rendered{
  204. width: 100% !important;
  205. }
  206. .form-group-required, .registration-form-wrap .select2-selection.form-group-required {
  207. border-bottom: 1px solid #fb6b5b !important;
  208. }
  209. .subs-logo-wrap {
  210. padding: .75rem 1.5rem .25rem;
  211. }
  212. .biz-subs-logo {
  213. width: 215px;
  214. height: 50px;
  215. }
  216. .add-on-products-sec .cart-wrap {
  217. /*background-color: rgb(255, 255, 246);*/
  218. border: 2px solid #eaecec;
  219. border-radius: 0.25rem;
  220. display: flex;
  221. flex-direction: column;
  222. }
  223. .add-on-products-sec .cart-body {
  224. min-height: 100px;
  225. margin: 0px;
  226. /*padding: 0px 15px;*/
  227. flex-grow: 2;
  228. }
  229. .add-on-products-sec .cart-footer {
  230. /*background-color: #FCFCEA;*/
  231. /*padding: 0px 15px 15px 15px;*/
  232. border-top: 2px solid rgb(221, 221, 216);
  233. }
  234. .orderitemsdiv .cart-item {
  235. position: relative;
  236. padding: 10px 0px;
  237. color: #000;
  238. }
  239. .orderitemsdiv .cart-item:not(:first-child), .orderitemsdiv .offeritems .cart-item, .orderitemsdiv .AddonItemsList .cart-item {
  240. border-top: 2px solid rgb(221, 221, 216);
  241. }
  242. .orderitemsdiv .cart-item .item-title-price-wrap,
  243. .orderitemsdiv .cart-item .item-plan-offer-wrap {
  244. display: flex;
  245. justify-content: space-between;
  246. align-items: center;
  247. flex-wrap: wrap;
  248. }
  249. .orderitemsdiv .cart-item .plans-dp-btn{
  250. border-radius: 20px;
  251. font-size: 14px;
  252. font-weight: normal;
  253. padding: 0.25rem 0.75rem;
  254. background-color: var(--primary-color);
  255. border: none;
  256. }
  257. .orderitemsdiv .cart-item .item-title-price-wrap {
  258. font-size: 18px;
  259. color: #000;
  260. font-weight: 600;
  261. }
  262. .orderitemsdiv .item-title-price-wrap .item-title {
  263. display: inline-block;
  264. max-width: 70%;
  265. }
  266. .orderitemsdiv .cart-item .price-trash-wrap {
  267. display: flex;
  268. align-items: center;
  269. }
  270. .orderitemsdiv .cart-item .item-remove-btn {
  271. color: rgb(255, 34, 94);
  272. margin-left: 5px;
  273. height: 25px;
  274. width: 25px;
  275. }
  276. .orderitemsdiv .cart-item .item-remove-btn.btn-icon-style-3::before {
  277. background-color: rgb(255, 34, 94);
  278. }
  279. .orderitemsdiv .cart-item .item-desc {
  280. font-size: 14px;
  281. }
  282. .orderitemsdiv .cart-item .item-offer-status {
  283. color: var(--success-color);
  284. font-weight: 600;
  285. }
  286. .orderitemsdiv .cart-item .item-offer-status i {
  287. transform: rotateY(180deg);
  288. }
  289. .cart-price-details-wrap .detail-heading-wrap{
  290. display: flex;
  291. justify-content: space-between;
  292. margin-bottom: 10px;
  293. }
  294. .cart-price-details-wrap .add-plan-link,
  295. .cart-price-details-wrap .apply-coupon-link {
  296. display: inline-block;
  297. color: rgb(0, 47, 137);
  298. text-decoration: underline;
  299. font-size: 18px;
  300. font-weight: 600;
  301. }
  302. .cart-price-details-wrap .coupon-input-wrap {
  303. position: relative;
  304. margin: 10px 0;
  305. }
  306. .cart-price-details-wrap .coupon-input-wrap .apply-coupon-input {
  307. height: 40px;
  308. border: 1px dashed rgb(182, 182, 178) !important;
  309. background-color: transparent;
  310. }
  311. .cart-price-details-wrap .coupon-input-wrap .apply-coupon-input:focus {
  312. background-color: #fff;
  313. box-shadow: none;
  314. }
  315. .coupon-input-wrap .coupon-apply-btn {
  316. position: absolute;
  317. right: 10px;
  318. top: 50%;
  319. transform: translateY(-50%);
  320. color: rgb(144, 145, 142);
  321. }
  322. .cart-price-details-wrap {
  323. color: #000;
  324. padding: 10px 0px;
  325. }
  326. .cart-price-details-wrap .detail-heading {
  327. font-size: 18px;
  328. }
  329. .cart-price-details-wrap .detail-heading::after {
  330. bottom: -5px;
  331. }
  332. .cart-price-details-wrap .detail-list .detail-item {
  333. display: flex;
  334. align-items: center;
  335. margin: 5px 0px;
  336. }
  337. .cart-price-details-wrap .detail-list .detail-item span:first-child {
  338. width: 45%;
  339. }
  340. .cart-price-details-wrap .detail-list .detail-item span:last-child {
  341. width: 55%;
  342. }
  343. .cart-price-details-wrap .detail-list .detail-item span:last-child::before {
  344. content: '\2807';
  345. font-size: 12px;
  346. margin-right: 10px;
  347. }
  348. .cart-price-details-wrap .detail-list .net-total-item {
  349. font-weight: bold;
  350. font-size: 18px;
  351. }
  352. .cart-wrap .cart-proceed-wrap {
  353. text-align: center;
  354. }
  355. .cart-proceed-wrap .cart-proceed-btn {
  356. /*border-radius: 25px;*/
  357. padding: 0.25rem 1.75rem;
  358. background-color: var(--success-color);
  359. border-color: var(--success-color);
  360. font-size: 16px;
  361. margin-left: auto;
  362. }
  363. .cart-proceed-wrap .cart-proceed-btn:hover, .cart-proceed-wrap .cart-proceed-btn:focus {
  364. background-color: #1e9205;
  365. border-color: #1e9205;
  366. }
  367. .addons-wrap .addons-heading {
  368. font-size: 32px;
  369. }
  370. .addons-wrap .addon-search-wrap {
  371. position: relative;
  372. width: 60%;
  373. margin: 20px auto 0px 0px;
  374. }
  375. .addons-wrap .search-icon {
  376. position: absolute;
  377. right: 10px;
  378. top: 50%;
  379. transform: translateY(-50%);
  380. }
  381. .addon-heading-search-wrap .addon-search-input {
  382. border: 2px solid rgba(0, 0, 0, .15) !important;
  383. border-radius: 10px !important;
  384. padding-right: 30px !important;
  385. height: 45px;
  386. }
  387. .addon-heading-search-wrap .addon-search-input:focus {
  388. box-shadow: none !important;
  389. }
  390. /*.addons-wrap .addon-products-wrap {
  391. display: flex;
  392. flex-wrap: wrap;
  393. gap: 40px;
  394. }*/
  395. /*.add-on-content-wrap .addons-wrap .addon-products-wrap{
  396. justify-content: center;
  397. }*/
  398. .addon-products-wrap .product-card {
  399. position: relative;
  400. display: -ms-flexbox;
  401. display: flex;
  402. -ms-flex-direction: column;
  403. flex-direction: column;
  404. max-width: 225px;
  405. /*min-width: 225px;*/
  406. word-wrap: break-word;
  407. background-color: #fff;
  408. background-clip: border-box;
  409. border: 2px solid rgba(0, 0, 0, .15);
  410. box-shadow: 0 1px 0px rgb(0 0 0 / 10%);
  411. /*border-radius: 0.25rem;*/
  412. border-radius: 10px;
  413. padding: 10px;
  414. }
  415. .addon-products-wrap .product-card .offer-percentage {
  416. position: absolute;
  417. right: 10px;
  418. top: 10px;
  419. background-color: rgb(255, 34, 94);
  420. color: #fff;
  421. border-radius: 5px;
  422. font-size: 14px;
  423. font-weight: 600;
  424. padding: 3px 5px;
  425. z-index: 9;
  426. }
  427. .addon-products-wrap .product-card .product-img-wrap {
  428. display: flex;
  429. -webkit-box-align: center;
  430. align-items: center;
  431. -webkit-box-pack: center;
  432. justify-content: center;
  433. /*height: 80px;*/
  434. height: 50px;
  435. width: 100%;
  436. position: relative;
  437. overflow: hidden;
  438. margin-bottom: 10px;
  439. }
  440. .addon-products-wrap .product-img-wrap img {
  441. width: auto;
  442. height: auto;
  443. max-width: 100%;
  444. max-height: 100%;
  445. }
  446. .product-title-desc-wrap {
  447. text-align: center;
  448. }
  449. .product-title-desc-wrap .product-title,
  450. .product-title-desc-wrap .product-desc {
  451. overflow: hidden;
  452. text-overflow: ellipsis;
  453. white-space: nowrap;
  454. }
  455. .product-title-desc-wrap .product-title {
  456. font-size: 18px;
  457. font-weight: 600;
  458. color: #000;
  459. }
  460. .product-title-desc-wrap .product-desc {
  461. font-size: 14px;
  462. color: rgba(0, 0, 0, 0.6);
  463. }
  464. .product-card .product-card-footer {
  465. display: flex;
  466. justify-content: space-between;
  467. align-items: center;
  468. padding-top: 8px;
  469. margin-top: 5px;
  470. border-top: 1px solid rgba(0, 0, 0, .10);
  471. position: relative;
  472. }
  473. .product-card .product-card-footer::after {
  474. content: "\2014 \00A0";
  475. position: absolute;
  476. top: 0;
  477. left: 0;
  478. right: 0;
  479. transform: rotateX(270deg);
  480. }
  481. .product-card-footer .cart-btn {
  482. font-size: 14px;
  483. border-radius: 20px;
  484. font-weight: 600;
  485. }
  486. .product-card-footer .add-cart-btn {
  487. padding: 5px 25px;
  488. /*background-color: #fff;*/
  489. background-color: #000;
  490. color: #fff;
  491. /*color: var(--success-color);*/
  492. border: 2px solid #000;
  493. /*border: 2px solid var(--success-color);*/
  494. }
  495. .product-card-footer .add-cart-btn:hover {
  496. padding: 5px 25px;
  497. /*background-color: var(--success-color);*/
  498. background-color: #fff;
  499. /*color: #fff;*/
  500. color: #000;
  501. /*border: 2px solid var(--success-color);*/
  502. border: 2px solid #000;
  503. }
  504. .product-card-footer .remove-cart-btn {
  505. padding: 5px 15px;
  506. color: #fff;
  507. border: 2px solid #FF0000;
  508. background-color: #FF0000;
  509. }
  510. .product-card-footer .remove-cart-btn:hover {
  511. padding: 5px 15px;
  512. color: #FF0000;
  513. border: 2px solid #FF0000;
  514. background-color: #fff;
  515. }
  516. #addon-list .product-card-footer .product-price {
  517. color: #000;
  518. font-size: 18px;
  519. font-weight: 600;
  520. }
  521. .subs-transact-sec .subs-transact-row-wrap {
  522. margin: 0 20px;
  523. }
  524. .subs-transact-sec .transact-details-wrap {
  525. display: flex;
  526. flex-direction: column;
  527. justify-content: space-between;
  528. align-items: center;
  529. }
  530. .subs-transact-sec .transact-detail-top-wrap {
  531. display: flex;
  532. justify-content: space-between;
  533. flex-wrap: wrap;
  534. width: 100%;
  535. }
  536. .subs-transact-sec .transact-status-msg {
  537. /*color: rgb(0, 177, 83);*/
  538. color: #49ca29;
  539. font-weight: bold;
  540. font-size: 28px;
  541. /*font-style: italic;*/
  542. }
  543. .subs-transact-sec .transact-price {
  544. color: #000;
  545. font-weight: bold;
  546. font-size: 30px;
  547. }
  548. .subs-transact-sec .transact-detail-list-item {
  549. display: flex;
  550. }
  551. .subs-transact-sec .transact-detail-list-item span {
  552. color: #7C848B;
  553. position: relative;
  554. }
  555. .subs-transact-sec .transact-detail-list-item span:first-child {
  556. /*width: 40%;*/
  557. }
  558. .subs-transact-sec .transact-detail-list-item span:last-child {
  559. /*width: 60%;*/
  560. }
  561. .subs-transact-sec .transact-detail-list-item span:last-child:before {
  562. /* content: '\2807';
  563. font-size: 12px;
  564. margin-right: 10px;*/
  565. }
  566. .subs-details-wrap .subs-card-wrap {
  567. /*display: grid;*/
  568. grid-template-columns: repeat(2, 1fr);
  569. gap: 20px;
  570. }
  571. .subs-card-wrap .subs-plan-card,
  572. .subs-card-wrap .subs-add-on-card {
  573. /*grid-column: 1 / 3;*/
  574. }
  575. .subs-details-wrap .subs-card {
  576. /*background-color: rgb(247, 249, 250);*/
  577. /*border-radius: 10px;*/
  578. color: #000;
  579. }
  580. .subs-details-wrap .subs-card .subs-card-title {
  581. margin-bottom: 15px;
  582. }
  583. .subs-details-wrap .subs-card .plan-item-wrap {
  584. padding: 5px 0;
  585. border-bottom: 2px solid #dbdcdc;
  586. }
  587. .subs-details-wrap .subs-card .plan-title-price-wrap {
  588. display: flex;
  589. justify-content: space-between;
  590. font-weight: 600;
  591. }
  592. .subs-details-wrap .subs-card .card-body-title {
  593. font-weight: 600;
  594. }
  595. .subs-details-wrap .subs-card .plan-desc {
  596. font-size: 14px;
  597. }
  598. .subs-details-wrap .download-invoice-btn, .subs-details-wrap .retry-payment-btn {
  599. /*border-radius: 25px;
  600. color: #fff;
  601. background-color: rgb(0, 47, 134);
  602. padding: 10px 20px;*/
  603. }
  604. [data-formuniquekey="bizgaze_crm_customer_userregistration"] .modal-body.simple-scroll-bar .simplebar-content {
  605. padding: 0px !important;
  606. }
  607. .add-on-products-sec .biz-custom-scrollbar, .PaymentDetails .biz-custom-scrollbar {
  608. overflow-y: auto;
  609. overflow-y: overlay;
  610. }
  611. /* Pricing Details */
  612. .pricing-details-wrap {
  613. position: relative;
  614. height: 100vh;
  615. overflow: hidden;
  616. }
  617. .pricing-details-wrap .pricing-detail-col {
  618. background-repeat: no-repeat;
  619. background-size: cover;
  620. }
  621. .pricing-details-wrap .plan-verification-wrap {
  622. border-left: 2px solid #959CA4;
  623. }
  624. .pricing-details-wrap .plan-details-bg-img-wrap img {
  625. position: absolute;
  626. }
  627. .pricing-details-wrap .plan-detail-top-left-img {
  628. top: 0;
  629. left: 0;
  630. }
  631. .pricing-details-wrap .plan-detail-top-right-1-img {
  632. top: 25px;
  633. right: 20px;
  634. }
  635. .pricing-details-wrap .plan-detail-top-right-2-img {
  636. top: 140px;
  637. right: 5px;
  638. }
  639. .pricing-details-wrap .plan-detail-left-bottom-img {
  640. left: 5px;
  641. bottom: -150px;
  642. }
  643. .pricing-details-wrap .plan-detail-bottom-right-img {
  644. bottom: 0;
  645. right: 0;
  646. }
  647. .pricing-details-header-wrap .logo-wrap {
  648. display: flex;
  649. justify-content: space-between;
  650. align-items: center;
  651. }
  652. .pricing-details-header-wrap .login-btn {
  653. padding: 10px 30px;
  654. }
  655. .pricing-details-body-wrap .pricing-body-heading {
  656. color: #000;
  657. font-weight: bold;
  658. }
  659. .biz-plans-carousel {
  660. position: relative;
  661. }
  662. .biz-plans-carousel .owl-nav button.owl-prev, .biz-plans-carousel .owl-nav button.owl-next {
  663. position: absolute;
  664. top: 50%;
  665. transform: translateY(-50%);
  666. opacity: 1;
  667. font-size: 35px !important;
  668. color: #6c6c6c !important;
  669. }
  670. .biz-plans-carousel .owl-nav [class*=owl-]:hover, .biz-plans-carousel .owl-nav [class*=owl-]:focus, .biz-plans-carousel .owl-nav [class*=owl-]:focus-visible {
  671. background-color: transparent !important;
  672. color: #000 !important;
  673. border: none;
  674. outline: none;
  675. }
  676. .biz-plans-carousel .owl-nav [class*=owl-].disabled{
  677. opacity: 0;
  678. }
  679. .biz-plans-carousel .owl-nav button.owl-prev {
  680. left: 15px;
  681. }
  682. .biz-plans-carousel .owl-nav button.owl-next {
  683. right: 15px;
  684. }
  685. .biz-plans-carousel .plan-card-item {
  686. position: relative;
  687. width: 300px;
  688. margin: 20px auto;
  689. border: none;
  690. border-top: 8px solid rgb(255,177,201);
  691. border-radius: 8px;
  692. background-color: #fffff6;
  693. -webkit-box-shadow: 0px 25px 15px -20px hsl(229deg 6% 80%);
  694. -moz-box-shadow: 0px 25px 15px -20px hsl(229deg 6% 80%);
  695. box-shadow: 0px 25px 15px -20px hsl(229deg 6% 80%);
  696. }
  697. .biz-plans-carousel .plan-item-bg-img {
  698. position: absolute;
  699. left: -60px;
  700. top: 20%;
  701. width: 60px !important;
  702. }
  703. .plan-card-item .card-header {
  704. position: relative;
  705. border: 0;
  706. text-align: center;
  707. }
  708. .plan-card-item .card-header {
  709. padding: 10px;
  710. height: 45px;
  711. max-height: 45px;
  712. }
  713. .plan-card-item .card-header .plan-title {
  714. color: #000;
  715. font-weight: bold;
  716. }
  717. .plan-card-item .plan-list-group .plan-list-item {
  718. color: #000;
  719. position: relative;
  720. padding: 10px;
  721. margin-left: 15px;
  722. border-bottom: 2px solid #eaecec;
  723. }
  724. .plan-card-item .plan-list-group .plan-list-item:hover {
  725. background-color: #fcfcdf;
  726. }
  727. .plan-card-item .plan-price-wrap {
  728. height: 30px;
  729. display: flex;
  730. justify-content: center;
  731. align-items: center;
  732. }
  733. .plan-card-item .plan-price-wrap .plan-price {
  734. font-size: 18px;
  735. color: #000;
  736. font-weight: 600;
  737. }
  738. .plan-card-item .plan-list-group {
  739. min-height: 150px;
  740. overflow-y: auto;
  741. }
  742. .plan-card-item .plans-dp-link{
  743. color: var(--primary-color);
  744. font-weight: 600;
  745. }
  746. .plan-card-item .plan-list-group .plan-list-item:last-of-type {
  747. border-bottom: none;
  748. }
  749. .plan-card-item .plan-list-group .plan-list-item::before {
  750. content: "";
  751. position: absolute;
  752. top: 15px;
  753. left: -15px;
  754. width: 15px;
  755. height: 15px;
  756. background: url(../../../../imgs/yes-tick.svg) left top / cover no-repeat;
  757. }
  758. .plan-card-item .card-footer {
  759. padding: 10px;
  760. height: 60px;
  761. max-height: 60px;
  762. border: none !important;
  763. }
  764. .plan-card-item .plan-subscribe-btn {
  765. font-weight: 600;
  766. border: 2px solid #1F2327;
  767. margin: auto;
  768. }
  769. .plan-verification-wrap .input-form-wrap {
  770. display: flex;
  771. align-items: flex-end;
  772. justify-content: space-between;
  773. }
  774. .contact-verify-form .contact-input {
  775. flex-grow: 1;
  776. }
  777. .contact-verify-form label {
  778. font-weight: 600;
  779. color: #000 !important;
  780. margin-bottom: 10px;
  781. }
  782. .contact-verify-form .contact-input {
  783. border: 2px solid rgba(0, 0, 0, .15) !important;
  784. height: 50px;
  785. border-radius: 5px !important;
  786. }
  787. .contact-verify-form .contact-input:focus {
  788. box-shadow: none;
  789. }
  790. .contact-verify-form .send-otp-btn {
  791. margin-left: 20px;
  792. background-color: var(--success-color);
  793. border-color: var(--success-color);
  794. border-radius: 5px;
  795. display: flex;
  796. align-items: center;
  797. justify-content: center;
  798. height: 50px;
  799. }
  800. .otp-verification-modal {
  801. width: auto;
  802. background-color: rgba(0, 0, 0, 0.5);
  803. }
  804. .otp-verification-modal .modal-content {
  805. width: auto;
  806. margin: 0 auto;
  807. }
  808. .otp-verification-modal .modal-body {
  809. position: relative;
  810. display: flex;
  811. flex-direction: column;
  812. align-items: center;
  813. padding: 25px;
  814. height: auto !important;
  815. }
  816. .otp-verification-modal .otp-err-msg, .pricing-details-wrap .princing-form-err-msg {
  817. position: absolute;
  818. width: 100%;
  819. top: 0;
  820. z-index: 1;
  821. }
  822. .otp-verification-modal .otp-err-msg .alert, .princing-form-err-msg .alert{
  823. text-align: center;
  824. }
  825. .otp-verification-modal .modal-close-btn {
  826. position: absolute !important;
  827. top: 5px;
  828. right: 5px;
  829. color: #000 !important;
  830. }
  831. .otp-verification-modal .otp-heading-wrap {
  832. text-align: center;
  833. padding: 20px 0px;
  834. color: #000;
  835. }
  836. .otp-verification-modal .otp-input-group {
  837. display: flex;
  838. justify-content: space-between;
  839. }
  840. .otp-input-group .otp-input {
  841. border: none;
  842. border-bottom: 1px solid #3e606c;
  843. margin: 0px 10px;
  844. font-size: 20px;
  845. height: 40px;
  846. max-width: 50px;
  847. text-align: center;
  848. }
  849. .otp-input-group .otp-input:first-child {
  850. margin-left: 0px;
  851. }
  852. .otp-input-group .otp-input:last-child {
  853. margin-right: 0px;
  854. }
  855. .otp-input-group .otp-input:focus, .otp-input-group .otp-input:focus-visible, .otp-input-group .otp-input:hover {
  856. outline: none;
  857. background-color: rgb(204,204,204,0.2) !important;
  858. }
  859. .otp-modal-footer {
  860. width: 100%;
  861. display: flex;
  862. justify-content: space-between;
  863. align-items: center;
  864. }
  865. .otp-modal-footer .otp-resend-link {
  866. color: #000;
  867. text-decoration: underline;
  868. font-weight: 600;
  869. font-size: 18px;
  870. }
  871. /* End-Pricing Details */
  872. /*added by rahul*/
  873. .bg-registration {
  874. background: url(../../../../imgs/registration-background.png);
  875. background-size: contain;
  876. background-repeat:no-repeat;
  877. }
  878. .w-fit {
  879. width: fit-content
  880. }
  881. .bg-light-green {
  882. background-color: #49ca29
  883. }
  884. .registration-modal.modal {
  885. overflow-y: auto !important;
  886. }
  887. .registration-container-border {
  888. outline: 5px solid #ededed;
  889. border: 5px solid #f0f0f0;
  890. border-radius: 20px;
  891. }
  892. .biz-contact-form input, .biz-contact-form .select2-selection {
  893. padding: 10px;
  894. border-radius: 5px !important;
  895. margin: 25px 0px;
  896. border: 1px solid #b3a4a4;
  897. width: 100%;
  898. font-size: 1rem;
  899. }
  900. .biz-contact-form .select2-selection {
  901. margin: 0;
  902. height: 100%;
  903. }
  904. .biz-contact-form .select2-selection .select2-selection__arrow {
  905. top: 50%;
  906. transform: translateY(-50%);
  907. margin-right: 10px;
  908. }
  909. .biz-contact-form .submit-btn {
  910. background: #feda2a;
  911. box-shadow: 5px 5px 0px 0px rgb(0 0 0);
  912. -webkit-box-shadow: 5px 5px 0px 0px rgb(0 0 0);
  913. -moz-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
  914. font-weight: 500;
  915. color: #000 !important;
  916. }
  917. .overflow-y-auto {
  918. overflow-y: auto !important;
  919. }
  920. .transact-price.dashed-border {
  921. border: 2px dashed #000;
  922. }
  923. .biz-contact-form .select2-container--default .select2-selection--single .select2-selection__clear {
  924. right: 30px;
  925. }
  926. /* Responsiveness */
  927. @media (max-width: 576px) {
  928. .biz-plans-carousel .owl-nav button.owl-prev {
  929. left: 10px;
  930. }
  931. .biz-plans-carousel .owl-nav button.owl-next {
  932. right: 10px;
  933. }
  934. .otp-input-group .otp-input {
  935. margin: 0px 5px;
  936. max-width: 45px;
  937. }
  938. .plan-verification-wrap .input-form-wrap{
  939. flex-wrap: wrap;
  940. }
  941. .contact-verify-form .send-otp-btn {
  942. margin: 15px auto 0;
  943. }
  944. .registration-form-wrap .card.Section .divCustomProperties {
  945. padding: 0px !important;
  946. }
  947. .registration-form-wrap .form-control {
  948. padding: 0.375rem 0.75rem !important;
  949. }
  950. .registration-wrap .form-heading-wrap{
  951. justify-content: center;
  952. }
  953. .registration-wrap .form-heading-wrap .form-heading-col {
  954. text-align: center;
  955. }
  956. .addons-wrap .addon-heading-search-wrap {
  957. flex-direction: column;
  958. }
  959. .addons-wrap .addon-search-wrap {
  960. width: 100%;
  961. margin-left: 0px;
  962. margin-top: 15px;
  963. }
  964. .biz-plans-carousel .plan-card-item {
  965. width: 80%;
  966. }
  967. .biz-plans-carousel .plan-item-bg-img {
  968. display: none !important;
  969. }
  970. }
  971. @media (max-width: 767px) {
  972. .addons-wrap .addon-products-wrap {
  973. flex-wrap: nowrap;
  974. overflow-x: auto;
  975. }
  976. .add-on-products-sec .cart-wrap {
  977. max-width: 400px;
  978. margin: 0px auto;
  979. }
  980. }
  981. @media (max-width: 991px) {
  982. .registration-wrap {
  983. min-height: 100vh;
  984. height: 100%;
  985. overflow-y: unset;
  986. }
  987. .pricing-details-wrap .plan-details-bg-img-wrap img {
  988. display: none;
  989. }
  990. .registration-form-wrap .card.Section:not(.section_ReferalDetails) .divCustomProperties:nth-of-type(odd), .registration-form-wrap .divCustomProperties_referalname {
  991. padding-left: 15px;
  992. }
  993. .registration-form-wrap .card.Section:not(.section_ReferalDetails) .divCustomProperties:nth-of-type(even), .registration-form-wrap .divCustomProperties_referalemail {
  994. padding-right: 15px;
  995. }
  996. .registration-form-wrap .divCustomProperties_isreferal {
  997. padding: 0px 15px;
  998. }
  999. }
  1000. @media (max-width: 1199px) {
  1001. .pricing-details-wrap .plan-verification-wrap {
  1002. border-left: none;
  1003. }
  1004. .subs-period-card,
  1005. .subs-due-date-card {
  1006. grid-column: 1/3;
  1007. }
  1008. }