1  @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400');
  2  
  3  body {
  4    -webkit-touch-callout: none; /* iOS Safari */
  5      -webkit-user-select: none; /* Safari */
  6       -khtml-user-select: none; /* Konqueror HTML */
  7         -moz-user-select: none; /* Firefox */
  8          -ms-user-select: none; /* Internet Explorer/Edge */
  9              user-select: none; /* Non-prefixed version, currently
 10                                    supported by Chrome and Opera */
 11  }
 12  
 13  
 14  .container {
 15    display: flex;
 16    justify-content: center;
 17  }
 18  
 19  .mobile {
 20    background-color: #F7F7F7;
 21    border-radius: 50px;
 22    margin: 10px;
 23    height: 812px;
 24    width: 375px;
 25    box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
 26    overflow: hidden;
 27    position: relative;
 28    transform: scale(0.9);
 29    transform-origin: top center;
 30  }
 31  
 32  .header {
 33    height: 30%;
 34    background-color: darkblue;
 35    border-bottom-right-radius: 40px;
 36      border-bottom-left-radius: 40px;
 37    display: flex;
 38    justify-content: space-around;
 39    align-items: center;
 40    position: relative;
 41    z-index: 1;
 42     overflow: hidden;
 43  }
 44  
 45  .header::before{
 46    content:"";
 47    height: 200px;
 48    width: 200px;
 49    background-color: lightseagreen;
 50    border-radius: 50%;
 51    position:absolute;
 52    top: -60px;
 53    left: -100px;
 54    z-index: 2;
 55  }
 56  
 57  .header::after {
 58    content:"";
 59    height: 100px;
 60    width: 100px;
 61    background-color: lightblue;
 62    border-radius: 50%;
 63    position:absolute;
 64    right: -20px;
 65    bottom: -30px;
 66    z-index: 2;
 67   
 68  }
 69  
 70  .header-summary {
 71    display: flex;
 72    flex-direction: column;
 73  font-family: 'Montserrat', sans-serif;
 74    color: white;
 75    z-index: 3;
 76  }
 77  
 78  .menu-items .header-summary {
 79    margin-bottom: 40px;
 80  }
 81  
 82  .logo {
 83      margin-bottom: 0.5rem;
 84      font-weight: bold;
 85      text-align: center;
 86  }
 87  
 88  .summary-text {
 89    font-size: 2rem;
 90    font-weight: bold;
 91    text-align: center;
 92    margin-bottom: 0.5rem;
 93  }
 94  
 95  .summary-balance {
 96    font-size: 1.2rem;
 97    text-align: center;
 98    /* letter-spacing: 1.5px;
 99    margin-bottom: 0.8rem; */
100    
101  }
102  
103  #content {
104    z-index: 4;
105    position: absolute;
106    top: 210px;
107    margin: 0 7.5%;
108    display:flex;
109    flex-direction:column;
110    width: 85%;
111  }
112  
113  .overlay {
114    z-index: -1!important;
115  }
116  
117  .card {
118    font-family: 'Montserrat', sans-serif;
119    align-self: stretch;
120    background-color: white;
121    border: 1px solid lightseagreen;
122    border-radius: 50px;
123    display: flex;
124    flex-direction:column;
125     box-shadow: 0 14px 28px rgba(0,0,0,0.02), 0 10px 10px rgba(0,0,0,0.0);
126  }
127  
128  .card-wallet {
129    margin-bottom: 50px;
130  }
131  
132  video {
133    border-radius: 20px;
134  }
135  
136  canvas {
137    border-radius: 20px;
138  }
139  
140  iframe {
141    height: 200px;
142    position: relative;
143    left: -10px;
144    border: none;
145  }
146  
147  .upper-row {
148    display: flex;
149    justify-content: space-evenly;
150    /* padding: 25px; */
151    margin-top: 25px;
152  }
153  
154  .upper-row-sub {
155    margin: 0;
156    padding: 25px;
157  }
158  
159  .single {
160    margin: 0!important;
161    padding: 25px!important;
162  }
163  
164  .card-item {
165    display: flex;
166    flex-direction: column;
167    text-align: center;
168  }
169  
170  .card-terms {
171    height: 500px;
172    overflow-y: auto;
173  }
174  
175  .card-auth .card-item {
176    margin: 0;
177  }
178  
179  .span-header {
180    color: darkblue;
181    font-size: 1.2rem;
182    font-weight: bold;
183    padding-bottom: 20px;
184  }
185  
186  .span-header-sub {
187    color: darkblue;
188    font-size: 1.2rem;
189    font-weight: bold;
190    padding: 0;
191  }
192  
193  .span-body {
194    max-width: 80%;
195    margin: 0 auto;
196  }
197  
198  .span-docs {
199    max-width: 80%;
200    margin: 0 auto;
201    text-align: left;
202    padding: 10px 0;
203  }
204  
205  /* .card-item span:first-child {
206    font-size: 0.7rem;
207    font-weight: bold;
208    margin-bottom:10px;
209  } */
210  
211  /* .card-item span:last-child {
212    font-size: 1.2rem;
213    font-weight: 300;
214  } */
215  
216  .dollar {
217    color: lightseagreen;
218  }
219  
220  .lower-row {
221    display: flex;
222    justify-content: space-evenly;
223    padding: 25px 0;
224    /* margin-bottom: 25px; */
225  }
226  
227  /* .card-auth > .lower-row {
228    margin-bottom: 50px;
229  } */
230  
231  .lower-row::before {
232      content: '';
233      display: block;
234      position: absolute;
235      top: 110px;
236      width: 50%;
237      left: 25%;
238      /* border-top: 1px solid #E1E1E1; */
239  }
240  
241  .icon-item {
242    display: flex;
243    flex-direction: column;
244    justify-content: center;
245    align-items: center;
246  }
247  
248  .icon {
249    color: lightseagreen;
250    padding: 10px;
251    background-color: #FBFBFB;
252    border-radius: 5px;
253    margin-bottom: 5px;
254  }
255  
256  .icon-text {
257    font-size: 0.6em;
258    color: #939393;
259  }
260  
261  .transactions {
262    font-family: 'Montserrat', sans-serif;
263    display: flex;
264    position: relative;
265    margin: 2rem 0;
266    padding-top: 10px;
267    flex-direction: column;
268    max-height: 350px;
269    overflow-y: auto;
270  }
271  
272  .list {
273    font-family: 'Montserrat', sans-serif;
274    display: flex;
275    position: relative;
276    margin: 2rem 0;
277    padding-top: 10px;
278    flex-direction: column;
279    height: 450px;
280    overflow-y: auto;
281  }
282  
283  .associates {
284    height: 290px;
285  }
286  
287  .t-desc, .s-desc, .a-desc {
288    color: darkblue;
289    font-size: 1rem;
290    font-weight: bold;
291    padding-bottom: 20px;
292    text-align: center;
293  }
294  
295  .transaction {
296    cursor: pointer;
297    padding: 10px 20px;
298    display: flex;
299    justify-content: space-between;
300    align-items: center;
301    background-color:white;
302    box-shadow: 0 14px 28px rgba(0,0,0,0.02), 0 10px 10px rgba(0,0,0,0.0);
303    border: 1px solid lightseagreen;
304    border-radius: 20px;
305    margin-bottom:20px;
306    color: darkblue;
307  }
308  
309  .list-item {
310    padding: 10px 20px;
311    display: flex;
312    justify-content: space-between;
313    align-items: center;
314    background-color:white;
315    box-shadow: 0 14px 28px rgba(0,0,0,0.02), 0 10px 10px rgba(0,0,0,0.0);
316    border: 1px solid lightseagreen;
317    border-radius: 50px;
318    font-weight: 500;
319    color: darkblue;
320    margin-bottom: 10px;
321  }
322  
323  .associate {
324    padding: 10px 20px;
325    display: flex;
326    justify-content: space-between;
327    align-items: center;
328    background-color:white;
329    box-shadow: 0 14px 28px rgba(0,0,0,0.02), 0 10px 10px rgba(0,0,0,0.0);
330    border: 1px solid lightseagreen;
331    border-radius: 50px;
332    font-weight: 500;
333    color: darkblue;
334    margin-bottom: 10px;
335  }
336  
337  .t-details, .a-details {
338    width: 85%;
339    height: 55px;
340    overflow: hidden;
341  }
342  
343  .a-details {
344    height: auto;
345  }
346  
347  /* .s-details {
348    width: 85%;
349    overflow: hidden;
350  } */
351  
352  .t-more-details {
353    padding-top: 10px;
354    font-size: 0.8rem;
355  }
356  
357  .t-price, .a-price {
358    text-align: center;
359  }
360  
361  .s-price {
362    text-align: center;
363  }
364  
365  .t-icon-container {
366    width: 45px;
367    align-self: flex-start;
368  }
369  
370  .t-icon {
371    width: 100%;
372    border-radius: 50%;
373    box-shadow: 5px 5px 25px 0px rgba(0,0,0,0.2);
374  }
375  
376  .t-title {
377    text-align: left;
378    flex-grow: 1;
379    font-size: 0.8rem;
380    /* font-weight: bold; */
381    margin-bottom: 5px;
382  }
383  
384  .s-title {
385    padding-left: 15px;
386    font-weight: bold;
387  }
388  
389  .w-title {
390    padding-left: 20px;
391    font-weight: bold;
392    font-size: 0.7rem;
393  }
394  
395  .c-title {
396    font-size: 0.8rem;
397    padding-bottom: 5px;
398  }
399  
400  .a-title {
401    font-size: 0.8rem;
402    text-align: center;
403  }
404  
405  .t-time, .a-time {
406    font-size: 0.6rem;
407    opacity: 0.6;
408    font-weight: 300;
409    letter-spacing: 1px;
410  }
411  
412  .s-time {
413    font-size: 0.6rem;
414    font-weight: 300;
415    letter-spacing: 1px;
416  }
417  
418  .s-time span {
419    padding-right: 10px;
420  }
421  
422  .t-amount {
423    font-size: 0.8rem;
424    letter-spacing: 1px;
425    font-weight: 400;
426    color: darkblue;
427  }
428  
429  .red {
430    color: #F4532D;
431  }
432  
433  .drawer {
434    display:flex;
435    /* background-color: white; */
436    height:120px;
437    /* position:absolute; */
438    bottom: 0px;
439    width: 100%;
440    border-top-left-radius: 50px;
441    border-top-right-radius: 50px;
442    z-index: 5;
443    justify-content: space-evenly;
444    align-items: center;
445  }
446  
447  .drawer-auth {
448    height: 175px;
449  }
450  
451  .drawer span {
452    display: inline-block;
453    /* font-size: 1.5rem; */
454    color: #fff;
455    transition: all 0.4s;
456    cursor: auto;
457  }
458  
459  .drawer span i:hover {
460    transform: scale(1.2);
461    border-bottom: 2px solid orange;
462  }
463  
464  .drawer span i {
465    transition: all 0.3s ease;
466    padding-bottom: 8px;
467  }
468  
469  .drawer input {
470    border: none;
471  }
472  
473  
474  
475  .menu-btn {
476    display: flex;
477    justify-content: center;
478    align-items: center;
479    width: 200px;
480    height: 50px;
481    background-color: lightseagreen;
482    color: white;
483    /* top: -25px; */
484    /* position: absolute; */
485    margin: 0 auto;
486    /* transform: rotate(-45deg); */
487    border-radius: 50px;
488    box-shadow: 5px 5px 25px 0px rgba(0,0,0,0.2);
489    cursor: pointer;
490    transition: all 0.1s;
491    opacity: 0.9;
492  }
493  
494  .menu-subscribed {
495    background-color: darkblue;
496  }
497  
498  .menu-subscribed:hover {
499    box-shadow: none!important;
500  }
501  
502  .menu-sub {
503    scale: 0.6;
504    position: relative;
505    left: -30px;
506  }
507  
508  .menu-list {
509    scale: 0.6;
510    position: relative;
511    float: left;
512    width: 130px!important;
513  }
514  
515  .menu-assoc {
516    scale: 0.6;
517    position: relative;
518  }
519  
520  .menu-add-item {
521    margin-top: 25px;
522    width: 100px!important;
523  }
524  
525  .btn-register {
526    top: 50px;
527  }
528  
529  .menu-btn:hover {
530    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
531  }
532  
533  .menu-btn i{
534    font-size: 1.5em;
535    transform: rotate(45deg);
536    
537  }
538  
539  .footer {
540    margin-top: 20px;
541    text-align: center;
542  }
543  
544  .transaction:hover {
545      box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
546  }
547  
548  .auth-bar {
549    /* position: absolute; */
550    background-color: lightseagreen;
551    color: white;
552    padding: 15px;
553    text-align: center;
554    top: 100px;
555    left: 0;
556    right: 0;
557    z-index: 1000;
558    border-radius: 50px;
559    /* width: 200px; */
560    margin: 0 auto;
561  }
562  
563  .auth-message {
564    font-family: Montserrat, sans-serif;
565    /* font-size: 1.2rem!important; */
566    /* font-weight: 500; */
567  }
568  
569  .blinking {
570    animation: blink 2s step-start infinite; /* Apply blinking animation */
571  }
572  
573  @keyframes blink {
574    50% {
575        opacity: 0; /* Fade out at halfway point */
576    }
577  }
578  
579  #canvas {
580    position: absolute;
581    left: 15%;
582  }
583  
584  input {
585    padding: 10px;
586    margin: 10px;
587    border: 1px solid lightseagreen;
588    border-radius: 20px;
589    font-family: Montserrat, sans-serif;
590  }
591  
592  #pay-form {
593    padding-top: 20px;
594    /* padding-left: 25px;
595    padding-right: 25px; */
596  
597    label {
598      position: relative;
599      font-weight: bold;
600      font-size: 0.8rem;
601      padding-right: 20px;
602    }
603  
604    .tax-label {
605      float: left;
606      width: 100%;
607      padding: 0!important;
608    }
609  
610    select {
611      padding: 10px;
612      border: 1px solid lightseagreen;
613      border-radius: 20px;
614      width: 100px;
615    }
616  }
617  
618  .tabs {
619    margin-top: 25px;
620    margin-bottom: 10px;
621  }
622  
623  button {
624    border-radius: 20px;
625  }
626  
627  .tab-button {
628    width: 95px;
629    margin: 0 5px;
630    padding: 10px;
631    border: 1px solid lightseagreen;
632    font-family: Montserrat, sans-serif;
633  }
634  
635  .tab-content {
636    /* margin-top: 15px; */
637    overflow-y: auto;
638    max-height: 180px;
639  }
640  
641  .tab-active {
642    background: darkblue; 
643    color: white;
644  }
645  
646  .submit {
647    padding: 25px;
648    border: none;
649    background: none;
650    color: white;
651    font-size: 1rem;
652    font-family: Montserrat, sans-serif;
653    cursor: pointer;
654  }
655  
656  #submit-business-id {
657    padding: 0;
658  }
659  
660  .submit-sub {
661    font-size: 1.5rem;
662    font-weight: bold
663  }
664  
665  .submit-list {
666    font-size: 1rem;
667    font-weight: bold;
668    text-decoration: none;
669    text-align: center;
670  }
671  
672  .submit-sub:disabled {
673    cursor: auto;
674  }
675  
676  
677  
678  @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
679  
680  * {
681    margin: 0;
682    padding: 0;
683    box-sizing: border-box;
684  }
685  
686  body {
687    font-family: "Montserrat", sans-serif;
688  }
689  
690  .container {
691    max-width: 1050px;
692    width: 90%;
693    margin: auto;
694    padding-bottom: 20px;
695  }
696  
697  nav {
698    position: absolute;
699    top: 0;
700    left: 10px;
701    z-index: 9999;
702  }
703  
704  .navbar {
705    width: 100%;
706    box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
707  }
708  
709  .nav-container {
710    display: flex;
711    justify-content: space-between;
712    align-items: center;
713    height: 62px;
714  }
715  
716  .navbar .menu-items {
717    display: flex;
718  }
719  
720  .navbar .nav-container li {
721    list-style: none;
722  }
723  
724  .navbar .nav-container a {
725    text-decoration: none;
726    color: #fff;
727    font-weight: 500;
728    font-size: 1.2rem;
729    padding: 0.7rem;
730  }
731  
732  .navbar .nav-container a:hover{
733      font-weight: bolder;
734  }
735  
736  .nav-container {
737    display: block;
738    position: relative;
739    height: 60px;
740  }
741  
742  .nav-container .checkbox {
743    position: absolute;
744    display: block;
745    height: 32px;
746    width: 32px;
747    top: 20px;
748    left: 20px;
749    z-index: 5;
750    opacity: 0;
751    cursor: pointer;
752  }
753  
754  .nav-container .hamburger-lines {
755    display: block;
756    height: 26px;
757    width: 32px;
758    position: absolute;
759    top: 17px;
760    left: 20px;
761    z-index: 2;
762    display: flex;
763    flex-direction: column;
764    justify-content: space-between;
765  }
766  
767  .nav-container .hamburger-lines .line {
768    display: block;
769    height: 4px;
770    width: 100%;
771    border-radius: 10px;
772    background: #fff;
773  }
774  
775  .nav-container .hamburger-lines .line1 {
776    transform-origin: 0% 0%;
777    transition: transform 0.4s ease-in-out;
778  }
779  
780  .nav-container .hamburger-lines .line2 {
781    transition: transform 0.2s ease-in-out;
782  }
783  
784  .nav-container .hamburger-lines .line3 {
785    transform-origin: 0% 100%;
786    transition: transform 0.4s ease-in-out;
787  }
788  
789  .navbar .menu-items {
790    position: fixed;
791    padding-top: 60px;
792    /* box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); */
793    background-color: darkblue;
794    height: 110vh;
795    width: 50vh;
796    transform: translate(-150%);
797    display: flex;
798    flex-direction: column;
799    margin-left: -10px;
800    /* padding-left: 50px; */
801    transition: transform 0.5s ease-in-out;
802    text-align: center;
803  }
804  
805  .navbar .menu-items li {
806    margin-bottom: 1.2rem;
807    font-size: 1.5rem;
808    font-weight: 500;
809  }
810  
811  .nav-container input[type="checkbox"]:checked ~ .menu-items {
812    transform: translateX(0);
813  }
814  
815  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
816    transform: rotate(45deg);
817  }
818  
819  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
820    transform: scaleY(0);
821  }
822  
823  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
824    transform: rotate(-45deg);
825  }
826  
827  .nav-container input[type="checkbox"]:checked ~ .logo{
828    display: none;
829  }
830  
831  .col-1, .col-2, .col-3 {
832    display: inline-grid;
833    float: left;
834    width: 33.3%;
835    text-align: center;
836  }
837  
838  .tooltip {
839    position: relative;
840  }
841  .tooltip__item {
842    position: absolute;
843    min-width: 100px;
844    padding: 20px;
845    visibility: hidden;
846    opacity: 0;
847    background: white;
848    transition: all 0.25s cubic-bezier(0, 0, 0.2, 1);
849    color: #484848;
850    border: 1px solid #cecece;
851    border-radius: 3px;
852    font-size: 18px;
853    font-weight: 500;
854    box-shadow: 0 2px 1px #bcbcbc;
855    z-index: 4;
856  }
857  .tooltip__item:after {
858    content: "";
859    display: block;
860    position: absolute;
861    width: 0;
862    height: 0;
863    border-style: solid;
864  }
865  .tooltip__initiator {
866    cursor: pointer;
867    z-index: 5;
868  }
869  .tooltip[data-direction=bottom] .tooltip__initiator:hover ~ .tooltip__item {
870    transform: translate3d(-50%, 0, 0);
871    visibility: visible;
872    opacity: 1;
873  }
874  .tooltip[data-direction=bottom] .tooltip__item {
875    top: calc(100% + 1em);
876    left: 50%;
877    transform: translate3d(-50%, -15px, 0);
878  }
879  .tooltip[data-direction=bottom] .tooltip__item:after {
880    top: -0.5em;
881    left: 50%;
882    transform: translate3d(-50%, 0, 0);
883    border-width: 0 0.5em 0.5em 0.5em;
884    border-color: transparent transparent white transparent;
885    -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
886    filter: drop-shadow(1px -1px 1px #bcbcbc);
887  }
888  
889  .input-register {
890    margin: 0 auto;
891    width: 50%
892  }
893  
894  #business-id {
895    margin-bottom: 50px;
896  }
897  
898  .menu-label {
899    padding: 25px;
900    color: #fff;
901  }
902  
903  .empty {
904    width: 100%;
905    text-align: center;
906  }