.popup {
     padding: 10px 20px !important;
 }

 #container {
     width: 100%;
 }

 div#form-card,
 div#form-upi,
 div#form-netbanking {
     margin: 0;
 }

 .two-third.svelte-xzw8mw {
     width: 66.66%;
     -webkit-box-flex: 1;
     -ms-flex-positive: 1;
     -webkit-flex-grow: 1;
     flex-grow: 1;
 }

 .third.svelte-xzw8mw {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding-left: 20px;
     width: 33.33%;
 }

 .row.svelte-xzw8mw {
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     margin-top: 12px;
     margin-bottom: 12px;
 }

 #body.sub #footer {
     pointer-events: auto;
     opacity: 1;
     -webkit-transform: none;
     -ms-transform: none;
     transform: none;
 }

 .tb_button {
     padding: 1px;
     cursor: pointer;
     border-right: 1px solid #8b8b8b;
     border-left: 1px solid #FFF;
     border-bottom: 1px solid #fff;
 }

 .tb_button.hover {
     borer: 2px outset #def;
     background-color: #f8f8f8 !important;
 }

 .ws_toolbar {
     z-index: 100000
 }

 .ws_toolbar .ws_tb_btn {
     cursor: pointer;
     border: 1px solid #555;
     padding: 3px
 }

 .tb_highlight {
     background-color: yellow
 }

 .tb_hide {
     visibility: hidden
 }

 .ws_toolbar img {
     padding: 2px;
     margin: 0px
 }

 #form,
 #form-fields {
     height: auto;
 }

 .tab-content {
     overflow: initial;
 }

 .button,
 .btn,
 .submit-button,
 .loader::after {
     color: #FFFFFF;
     background-image: radial-gradient(circle at 50%, #fde989, transparent), -webkit-gradient(linear, left top, right top, from(#fec545), to(#be8325));
     background-image: radial-gradient(circle at 50%, #fde989, transparent), linear-gradient(90deg, #fec545, #be8325);
     background-position: 50%, 50%;
     color: #865b00;
     background: #3964a8 !important;
 }

 #footer {
     bottom: 56px !important;
     z-index: 10;
     -webkit-transform: translateY(100%);
     -ms-transform: translateY(100%);
     transform: translateY(100%);
     opacity: 1;
 }

 .back {
     float: left;
     margin: 0 6px 0 0;
     font-size: 16px;
 }

 div#processbtn {
     position: relative;
     cursor: pointer;
 }

 span#footer-cta {
     text-align: center;
     margin: 0 auto;
     display: block;
 }

 #topbar {
     background: #3964a8;
     color: #fff;
 }

 .ok {
     background: #1b427e;
     width: 30%;
     padding: 5px;
     margin: 0 auto;
     display: block;
     color: #fff;
     border-radius: 5px;
 }

 form#form {
     margin-bottom: 0;
 }

 body {
     margin: 20px 0;
 }

 .stack.svelte-12i0eli.horizontal {
     display: block;
 }

 @media screen and (max-width: 560px) and (min-width: 220px) {
     body {
         margin: 0;
     }
 }

 .ripple {
     position: relative;
     overflow: hidden;
 }

 .ripple:before,
 ripple:focus,
 .ripple:focus:after {
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.6);
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
 }

 .ripple:focus:before {
     transition: all 0.5s ease-out;
     opacity: 0;
     width: 160px;
     height: 160px;
     margin-top: -80px;
     margin-left: -80px;
 }

 .ripple:after {
     content: "";
     position: absolute;
     top: -110%;
     left: -210%;
     width: 200%;
     height: 200%;
     opacity: 0;
     transform: rotate(30deg);
     background: rgba(255, 255, 255, 0.13);
     background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
 }

 .ripple:after {
     opacity: 1;
     top: -55%;
     left: -30%;
     transition-property: left, top, opacity;
     transition-duration: 0.7s, 0.7s, 0.15s;
     transition-timing-function: ease;
     animation: slide 2s infinite;
 }

 /* Active state */

 .ripple:active:after {
     opacity: 0;
 }

 @keyframes slide {
     0% {
         transform: translateX(-100%);
     }

     100% {
         transform: translateX(100%);
     }
 }

 .powered img {
     width: 11px;
     vertical-align: bottom;
     padding-right: 6px;
 }

 .powered p {
     text-align: center;
     font-size: 10px;
 }

 .powered {
     position: relative;
     bottom: -135px;
 }

 img.ytb {
     width: 19px;
     vertical-align: middle;
     padding: 7px 5px 7px 10px;
 }

 .videopopup {
     background: #4c73b1;
     color: #fff;
 }

 .svelte-1adm44z img {
     width: auto;
     height: 1.5rem;
     padding-left: 32px;
 }

 div#processbtn {
     position: absolute;
     cursor: pointer;
     width: 94%;
     bottom: 9px;
 }

 /*popup-model-css*/
 .overlay {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.7);
     transition: opacity 500ms;
     visibility: hidden;
     opacity: 0;
 }

 .overlay:target {
     visibility: visible;
     opacity: 1;
     z-index: 9;
 }

 .popup {
     /* margin: 5% 3%; */
     padding: 20px;
     background: #fff;
     border-radius: 5px;

     position: relative;
     transition: all 5s ease-in-out;
 }

 button.btn1.ok {
     display: initial;
     width: 49%;
 }

 button.btn1.refresh {
     display: initial;
     width: 49%;
 }

 .popup h2 {
     font-weight: 300;
     font-size: 18px;
     padding: 7px 0;
     margin-top: 0;
     margin: 0;
     color: #333;
     font-family: ubuntu, helvetica, sans-serif;
 }

 .popup .close {
     position: absolute;
     top: 0px;
     right: 0px;
     transition: all 200ms;
     font-size: 30px;
     font-weight: bold;
     text-decoration: none;
     color: #333;
 }

 .popup p {
     font-family: ubuntu, helvetica, sans-serif;
     text-align: center;
 }

 .popup .close:hover {
     color: #06D85F;
 }

 .popup .content {
     /*max-height: 30%;*/
     overflow: auto;
     font-family: ubuntu, helvetica, sans-serif;
 }

 .content button {
     border: 1px solid #aaa;
     padding: 10px 8px;
     color: #fff;
     border-radius: 5px;
     width: 49%;
     background: #0f3672;
 }



 div#whereis .popup {

     padding: 20px;
     background: #fff;
     border-radius: 5px;
     width: 80%;
     position: relative;
     transition: all 5s ease-in-out;
 }

 .sst {
     height: 420px;
     display: block;
     overflow-y: auto;
 }

 h4.refno {
     margin: 10px auto 0;
     text-align: center;
     font-size: 23px;
     color: red;
     letter-spacing: 0.5;
 }

 div#CheckRefNo .popup .content {
     line-height: 1.6;
 }

 .copy {
     margin-top: 15px !important;
     border: 1px solid #ddd;
     border-radius: 5px;
     padding: 10px;
 }

 .copybtn {
     background: #4e7fcc;
     color: #fff;
     padding: 3px 12px;
     float: right;
     border-radius: 20px;
     top: -14px;
     position: relative;
     margin: 10px;
     box-shadow: 1px 1px #3964a8, 2px 2px #3964a8, 3px 3px #3964a8;
     -webkit-transform: translateX(-3px);
     transform: translateX(-3px);
 }

 .language a {
     background: #eee;
     padding: 3px 10px;
     margin: 0 8px;
     font-size: 12px;
     border: 1px solid #aaa;
     border-radius: 10px;
 }

 .copybtn:focus,
 .copybtn:active {
     box-shadow: none !important;
     -webkit-transform: none !important;
     transform: none !important;
 }

 .border-list:not(.touchfix)>*:not(.uninteractive):hover:not(:disabled),
 .border-list>*:focus,
 .border-list>*:focus-within,
 .border-list>.selected {
     border: 1px solid #e6e7e8 !important;
 }

 div#back {
     padding: 10px;
 }

 .sst img {
     max-width: 100%;
     margin-bottom: 10px;
 }

 /* @media screen and (max-width: 700px) {

     .popup {
         width: 80%;
     }
 } */

 @keyframes cssAnimation {
     to {
         visibility: visible;
     }
 }

 i {
     font-style: normal;
     opacity: 1;
 }

 div.popup {
     animation: zoom-in-zoom-out 0.3s;

 }

 .dn {
     display: none;
 }

 i.svelte-1adm44z {
     float: left;
 }

 .new-method {
     padding: 10px;
 }

 @keyframes zoom-in-zoom-out {
     0% {
         transform: scale(0.7, 0.7);
     }

     100% {
         transform: scale(1, 1);
     }
 }


 li {
     line-height: 1.5;
     color: rgba(51, 51, 51, .6);
     padding: 0px;
 }

 ul,
 ul:hover {
     padding: 0px 19px;
     background: #fff;

 }

 .border-list.svelte-gnrme0 {
     margin-bottom: 24px;
     background: #fff;
     border: 1px solid #e6e7e8;
 }

 button.svelte-13rsokc {
     background: #fff;
     border: none;
     border: 1px solid #e6e7e8 !important;
     background-color: rgba(98, 172, 255, .06) !important;
 }

 h1,
 h3 {
     color: green;
 }

 body,
 header {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 #logo {
     background: transparent !important;
     margin-right: 0;
 }

 #merchant {
     white-space: nowrap;
     position: relative;
     text-align: center;
     text-shadow: none;
 }

 #merchant-name,
 #merchant-desc {
     color: #000;
 }

 .has-dropdown {
     margin: 30px auto 0;
 }

 div#qrcode img {
     margin: 25px auto 0;
     text-align: center;
     display: block;
 }

 #amount {
     color: #10c45c;
 }

 .screen-main.svelte-qxv6ic.svelte-qxv6ic {
     padding: 0;
 }

 .borderdesign {
     border: 1px solid #eee;
     border-radius: 10px;
     padding: 10px 0px;
     margin-top: 20px;
 }