/* Custom styles for Plugin */
 .payment_method_mpesa_express{
     font-weight:600!important;
     font-size: 14px!important;
}


 label[for="mpesa_phone"]{
     font-size: 18px;
}

 li.wc_payment_method.payment_method_mpesa_express img {
     max-width: 50px;
    /* Adjust the width as needed */
     height: auto;
    /* Maintain aspect ratio */
}
 #valid-msg {
     color: #00c900;
}
 .hide {
     display: none;
}
 #error-msg {
     color: red;
}
 #error-msg2 {
     color: red;
}
/* Basic styling for responsiveness */
 table#ordersTable {
     width: 100%;
     border-collapse: collapse;
}
 #ordersTable th, #ordersTable td {
     border: 1px solid #dddddd;
     padding: 8px;
}
 #ordersTable th {
     background-color: #f2f2f2;
}
/* Colored CSS for table rows */
 #ordersTable tr:nth-child(even) {
     background-color: #f2f2f2;
}
 #ordersTable tr:hover {
     background-color: #dddddd;
}
/* Pagination buttons */
 .pagination {
     display: inline-block;
}
 .pagination button {
     color: black;
     float: left;
     padding: 8px 16px;
     text-decoration: none;
     transition: background-color .3s;
     border: 1px solid #ddd;
     margin: 0 4px;
}
 .pagination button.hover {
     cursor: pointer;
}
 .pagination button.active {
     background-color: #4CAF50;
     color: white;
}
 .pagination button:hover:not(.active) {
     background-color: #ddd;
}
 .loading-popup {
     display: none;
     position: fixed;
     z-index: 1;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0,0,0,0.4);
}
 .loading-popup-content {
     position: relative;
     background-color: #fefefe;
     margin: 15% auto;
     padding: 20px;
     border: 1px solid #888;
     width: 30%;
     text-align: center;
}
 #request_payment_btn{
     display: inline-block;
     background: #37c781;
     font-size: 1.4em;
     font-weight: 600;
     cursor: pointer;
     color: #ffffff;
     border: none;
     border-radius: 4px;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     text-align: center;
     text-transform: uppercase;
     cursor: pointer;
	 padding: 15px 32px;
}
 .loaderingmain {
    background: rgb(0 0 0 / 45%);
    width: 100%;
    height: 100%;
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
}
 .loaderingmain .loader {
     position: relative;
     margin: 0px auto;
     width: 30px;
     height:30px;
     top: 50%;
}
 .loaderingmain .loader:before {
     content: '';
     display: block;
     padding-top: 100%;
}
 .circular-loader {
     -webkit-animation: rotate 2s linear infinite;
     animation: rotate 2s linear infinite;
     height: 100%;
     -webkit-transform-origin: center center;
     -ms-transform-origin: center center;
     transform-origin: center center;
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
     margin: auto;
}
 .loader-path {
     stroke-dasharray: 150,200;
     stroke-dashoffset: -10;
     -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
     animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
     stroke-linecap: round;
}
 @-webkit-keyframes rotate {
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 @keyframes rotate {
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 @-webkit-keyframes dash {
     0% {
         stroke-dasharray: 1,200;
         stroke-dashoffset: 0;
    }
     50% {
         stroke-dasharray: 89,200;
         stroke-dashoffset: -35;
    }
     100% {
         stroke-dasharray: 89,200;
         stroke-dashoffset: -124;
    }
}
 @keyframes dash {
     0% {
         stroke-dasharray: 1,200;
         stroke-dashoffset: 0;
    }
     50% {
         stroke-dasharray: 89,200;
         stroke-dashoffset: -35;
    }
     100% {
         stroke-dasharray: 89,200;
         stroke-dashoffset: -124;
    }
}
 @-webkit-keyframes color {
     0% {
         stroke: #70c542;
    }
     40% {
         stroke: #70c542;
    }
     66% {
         stroke: #70c542;
    }
     80%, 90% {
         stroke: #70c542;
    }
}
 @keyframes color {
     0% {
         stroke: #70c542;
    }
     40% {
         stroke: #70c542;
    }
     66% {
         stroke: #70c542;
    }
     80%, 90% {
         stroke: #70c542;
    }
}
 .success_msg {
    text-align: center;
     width: 100%;
     color: green;
     padding: 0;
     margin: 0;
     font-size:18px;
     font-weight:800 
}
 .fail_msg {
     text-align: center;
     width: 100%;
     color: red;
     padding: 0;
     margin: 0;
     font-size:20px;
     font-weight:800 
}