html, body {
  height: 100vh;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 12px;
}
@media screen and (max-width: 1024px) {
  body {
    display: block;
    margin: 10px 0 50px 0px;
  }
}

@media screen and (max-width: 1024px) {
  .container {
    padding: 50px 20px;
  }
}
.container .card {
  margin: 0 auto;
  border: 1px solid #efefef;
  text-align: center;
  width: 80%;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.container .card .row {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.container .card .row .col-md-6 {
  margin: 0;
  padding: 20px 30px;
}
.container .card .row .col-md-6.bg-grey {
  background-color: #fafafa;
}
.container .card h3.status_title {
  font-size: 23px;
  font-weight: bold;
}
@media screen and (max-width: 1024px) {
  .container .card h3.status_title {
    font-size: 17px;
  }
}
.container .card p {
  font-size: 12px;
  color: #999999;
}
.container .card p span {
  display: inline-block;
  background-color: #efefef;
  border: 1px solid #CCC;
  padding: 2px 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.container .card p.qr_code {
  margin: 0 auto 20px 10px;
  border: 1px solid #efefef;
  width: 180px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.container .card p.qr_code img {
  max-width: 100%;
}
@media screen and (max-width: 1024px) {
  .container .card p.qr_code {
    width: 100%;
  }
}
.container .card .logo_container {
  margin: 0 auto;
  width: 200px;
}
.container .card .logo_container img.logo {
  max-width: 10%;
}
.container .card img.payment_screen_logo {
  max-width: 100%;
}
.container .card .pay_amount {
  font-size: 20px;
  font-weight: 700;
  padding: 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.container .card .pay_amount span {
  font-weight: 500;
}
@media screen and (max-width: 1024px) {
  .container .card .pay_amount span {
    display: block;
  }
}
.container .card #address {
  display: inline-block;
  font-size: 14px;
  background-color: #eff0f8;
  padding: 10px;
  width: 100%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.container .card #address a {
  display: inline-block;
  margin-left: 20px;
}
.container .card #count_down {
  margin: 0 auto;
  background-color: #FFF;
  border: 1px solid #efefef;
  padding: 20px;
  width: 100%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.container .card #count_down .row {
  display: flex;
  align-items: center;
}
.container .card #count_down .row h3 {
  display: block;
  margin: 0;
  padding: 0;
}
.container .card #count_down span.separator {
  color: #CCC;
  font-size: 30px;
}
.container .card #count_down small {
  color: #999999;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
@media screen and (max-width: 1024px) {
  .container .card #count_down small {
    font-size: 9px;
  }
}
@media screen and (max-width: 1024px) {
  .container .card {
    width: 100%;
  }
  .container .card .row div.mt-0 {
    padding-top: 30px;
  }
}
.container .status_content {
  padding: 20px 0 20px 0px;
}
.container .status_content .loader {
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  background: radial-gradient(circle closest-side, #1979fa 94%, rgba(0, 0, 0, 0)) right/calc(200% - 1em) 100%;
  animation: l24 1s infinite alternate linear;
}
.container .status_content .loader::before {
  content: "Processing...";
  line-height: 1em;
  color: rgba(0, 0, 0, 0);
  background: inherit;
  background-image: radial-gradient(circle closest-side, #fff 94%, #000);
  -webkit-background-clip: text;
  background-clip: text;
}
.container .status_content p {
  margin: 0;
}
@keyframes l24 {
  100% {
    background-position: left;
  }
}

.list-group .form-check-label {
  cursor: pointer;
}
.list-group input[type=radio] {
  height: 25px;
  width: 25px;
}

.btn.border-primary:hover {
  background-color: #0d6efd;
  color: #FFFFFF !important;
}

.loading {
  margin-top: 5px;
  width: 25px;
  padding: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
  display: inline-block;
}

@keyframes l3 {
  to {
    transform: rotate(1turn);
  }
}
/*

    REFRESH BUTTON


*/
.refresh-btn {
  position: relative;
  display: inline-block;
  border-radius: 30px;
  background-color: #fcfcfc;
  color: #ffa000;
  text-align: center;
  font-size: 15px;
  padding: 9px 0;
  transition: all 0.3s;
  padding-right: 40px;
  margin: 20px 5px 0px 5px;
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.06);
  text-decoration: none;
  width: 100%;
  overflow: hidden;
}
.refresh-btn:hover {
  color: #fff !important;
}
.refresh-btn:hover svg {
  animation: spin 2s linear infinite;
}
.refresh-btn:hover .btn-icon::after {
  display: none;
  opacity: 0.1;
}
.refresh-btn:hover .btn-icon {
  width: 100%;
  border-radius: 30px;
}
.refresh-btn .name-refresh {
  position: relative;
  z-index: 9999;
}
.refresh-btn .btn-icon {
  background-color: #ffa000;
  width: 92px;
  height: 45px;
  float: right;
  position: absolute;
  border-radius: 30px 30px 30px 0;
  right: 0px;
  top: 0px;
  transition: all 0.3s;
}
.refresh-btn .btn-icon::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 45px solid #fcfcfc;
  border-right: 40px solid transparent;
  position: absolute;
  top: 0px;
  left: 0px;
}
.refresh-btn .btn-icon svg {
  position: absolute;
  right: 25px;
  top: 13px;
  color: #fff;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}/*# sourceMappingURL=style.css.map */