.ctg-receipt-container label#ctg-file-upload {
  text-align: center;
  border: 2px dashed #7e61ff;
  padding: 15px 20px;
  border-radius: 5px;
  font-weight: bold;
  color: #7e61ff;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow ease 0.25s;
  float: right;
  margin-left: 20px;
  min-width: min(250px , 100%);
  box-sizing: border-box;
  margin-top: 12px;
  font-family: inherit;
  font-size: 14px;
}
.ctg-receipt-container label#ctg-file-upload:active {
  box-shadow:none;
}
.ctg-receipt-container input#ctgfile {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0 !important;
}
.ctg-receipt-container img{
  max-width: 250px !important;
  height: auto !important;
  display: none;
  margin: 12px 0 0 0 !important;
}
.ctg-receipt-container .preview{
  position: relative;
  float: right;
  display: block;
  clear: both;
}
.ctg-receipt-container {
  display: block;
  width: 100%;
  float: right;
}
.ctg-receipt-container #remove-file{
  position:absolute;
  color: red;
  border: 1px solid red;
  padding: 4px 10px;
  border-radius: 4px;
  top: 22px;
  left: 10px;
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.ctg-receipt-container label,
.ctg-receipt-container input[type=text]{
display:block;
clear:both;
}
.ctg-receipt-container input[type=text]{
margin-bottom: 12px !important;
min-width: min(250px,100%);
}

.ctg-receipt-container .progress-bar{
width: min(250px , 100%);
background: transparent;
height: 10px;
border: 1px solid #999;
border-radius: 10px;
position: relative;
float: initial;
clear: both;
margin: auto;
margin-top: 16px;
}
.ctg-receipt-container .progress-bar .progress{
position:absolute;
left:0;
height: 100%;
background: #555;
transition: 0.2s;
}

.ctg-card-area{
  margin-bottom: 10px;
  border-radius: 4px;
  max-width: 400px;
  margin: 20px auto;
  border: 1px solid #ddd;
  padding: 10px;
}
.ctg-card-area input[type="text"]{
  width:100%;
}
.ctg-card-area #ctg-file-upload{
  width:100%;
}
.card-pay-gateway .card-number-owner-name,
.card-pay-gateway .total-amount{
    display: block;
    clear: both;
}
.card-pay-gateway .total-amount b{
    margin-left:4px;
}

.receipt-submit-information{
  display:block;
  text-align: center;
  background: #0ce7a2;
  padding: 12px;
  border-radius: 4px;
  color: #000;
  font-size: 16px;
  clear: both;
  margin-top: 10px;
  border: 0px solid #0ce7a2;
}
.card-pay-gateway-telegram,
.card-pay-gateway-whatsapp{
    color:#000;
}
.card-pay-gateway-whatsapp svg,
.card-pay-gateway-telegram svg{
  height: auto !important;
  stroke: #000;
}
.ctg-card-area .ctg-receipt-container .preview{float: initial;margin: auto;width: fit-content;}
.ctg-loading{
  position:relative;
}
.ctg-loading:before{
    content:'';
    width: 102%;
    height: 102%;
    position:absolute;
    background:#fff;
    left: -1%;
    top: -1%;
    opacity: 0.8;
    z-index: 99;
  }
  .ctg-loading:after{
    content: "";
    position: absolute;
    top: 37%;
    right: 0;
    left: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    border-radius: 50px;
    border: 2px solid #d4d4d4;
    border-top-color: #275dfc;
    -webkit-animation: loading 2s linear infinite;
    animation: loading 0.3s linear infinite;
    z-index: 99;
  }
#ctg-card-fields-container .ctg-card-field-row.ctg-loading:after{
  right: 24%;
  z-index: 99;
  top: 34px;
}
  @-webkit-keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .card-pay-gateway .card-number{
    position:relative;
    cursor: pointer;
}
.card-pay-gateway .card-number:after{
    content:'';
    background:url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 11C6 8.17157 6 6.75736 6.87868 5.87868C7.75736 5 9.17157 5 12 5H15C17.8284 5 19.2426 5 20.1213 5.87868C21 6.75736 21 8.17157 21 11V16C21 18.8284 21 20.2426 20.1213 21.1213C19.2426 22 17.8284 22 15 22H12C9.17157 22 7.75736 22 6.87868 21.1213C6 20.2426 6 18.8284 6 16V11Z" stroke="%231C274C" stroke-width="1.5"/><path opacity="0.5" d="M6 19C4.34315 19 3 17.6569 3 16V10C3 6.22876 3 4.34315 4.17157 3.17157C5.34315 2 7.22876 2 11 2H15C16.6569 2 18 3.34315 18 5" stroke="%231C274C" stroke-width="1.5"/></svg>');
    background-size: 25px;
    position: absolute;
    left: 0;
    width: 25px;
    height: 25px;
    top: 7px;
    left: 9px;
    opacity: 0.3;
}
.wp-block-group:has(.ctg-card-area){
  display: flex;
  flex-direction: column;
}
.wp-block-group:has(.ctg-card-area) > div{
  width:100%;
  order:3
}
.wp-block-group:has(.ctg-card-area)  .wp-block-woocommerce-order-confirmation-status{
  order: 1;
}
.wp-block-group:has(.ctg-card-area)  .wp-block-woocommerce-order-confirmation-additional-information{
  order: 2;
}
.ctg-card-info .card-number{
  direction:ltr!important;
  margin-top: 5px !important;
}
.card-number-title{
  display:block;
  margin-top: 10px;
  font-size: 14px;
}