.siu-stats {
    display: block;
    align-content: center;
	padding-bottom: 20px;
	width:100%;
}

.analytics-cards {
    display: flex;
    gap: 20px;
	    margin: 20px 0px;
}

.card-gamca {
	background: #f7f7f7;  padding: 20px; border-radius: 8px; text-align: center;
}

.box {
    width: 28%;
    padding: 20px;
    display: inline-block;
    background-color: purple;
    color: #ffffff;
    margin: 10px;
    border-radius: 10px;
}

.siu-stats strong {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
}

.siu-search-form {
    margin-bottom: 20px;
}

.siu-search-form input[type="text"] {
    padding: 8px;
    font-size: 14px;
    width: 300px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.siu-search-form button {
    padding: 8px 15px;
    font-size: 14px;
    background-color: #007cba;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.siu-search-form button:hover {
    background-color: #005a8c;
}

table.widefat {
    margin-top: 20px;
    border-collapse: collapse;
}

table.widefat th {
    background: #007cba;
    color: white;
    text-align: left;
    padding: 10px;
}

table.widefat td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.table-pagination {
    margin-top: 20px;
    text-align: center;
}

.table-pagination a {
    margin: 0 5px;
    padding: 5px 10px;
    background: #007cba;
    color: white;
    text-decoration: none;
    border-radius: 3px;
}

.table-pagination a:hover {
    background: #005a8c;
}

.widefat-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.widefat-header, .widefat-row {
    display: flex;
    border-bottom: 1px solid #ccc;
}
.widefat-cell {
    flex: 1;
    padding: 8px;
    text-align: left;
    border-right: 1px solid #ccc;
}
.widefat-cell:last-child {
    border-right: none;
}
.widefat-header {
    background-color: #f4f4f4;
    font-weight: bold;
}


.spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(0, 0, 0, 0.1);
        border-left-color: #000;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-right: 5px;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .button {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        background-color: #0073aa;
        color: white;
        font-size: 16px;
        cursor: pointer;
    }

    .button[disabled] {
        opacity: 0.7;
        cursor: not-allowed;
    }


.row {
    width: 100%;
    overflow: auto;
}
.col-100 {
    width: 100%;
}
.col-90 {
    width: 90%;
    float: left;
}
.col-80 {
    width: 80%;
    float: left;
}
.col-70 {
    width: 70%;
    float: left;
}
.col-60 {
    width: 60%;
    float: left;
}
.col-50 {
    width: 50%;
    float: left;
}
.col-40 {
    width: 40%;
    float: left;
}
.col-30 {
    width: 30%;
    float: left;
}
.col-33 {
    width: 33.33%;
    float: left;
}
.col-25 {
    width: 25%;
    float: left;
}
.col-20 {
    width: 20%;
    float: left;
}
.col-10 {
    width: 10%;
    float: left;
}
@media only screen and (max-width: 3800px) {
    .col-lg-100 {
        width: 100%;
    }
    .col-lg-90 {
        width: 90%;
        float: left;
    }
    .col-lg-80 {
        width: 80%;
        float: left;
    }
    .col-lg-70 {
        width: 70%;
        float: left;
    }
    .col-lg-60 {
        width: 60%;
        float: left;
    }
    .col-lg-50 {
        width: 50%;
        float: left;
    }
    .col-lg-40 {
        width: 40%;
        float: left;
    }
    .col-lg-30 {
        width: 30%;
        float: left;
    }
    .col-lg-33 {
        width: 33.33%;
        float: left;
    }
    .col-lg-25 {
        width: 25%;
        float: left;
    }
    .col-lg-20 {
        width: 20%;
        float: left;
    }
    .col-lg-10 {
        width: 10%;
        float: left;
    }

}

@media only screen and (max-width: 768px) {
    .col-md-100 {
        width: 100%;
    }
    .col-md-90 {
        width: 90%;
        float: left;
    }
    .col-md-80 {
        width: 80%;
        float: left;
    }
    .col-md-70 {
        width: 70%;
        float: left;
    }
    .col-md-60 {
        width: 60%;
        float: left;
    }
    .col-md-50 {
        width: 50%;
        float: left;
    }
    .col-md-40 {
        width: 40%;
        float: left;
    }
    .col-md-30 {
        width: 30%;
        float: left;
    }
    .col-md-33 {
        width: 33.33%;
        float: left;
    }
    .col-md-25 {
        width: 25%;
        float: left;
    }
    .col-md-20 {
        width: 20%;
        float: left;
    }
    .col-md-10 {
        width: 10%;
        float: left;
    }
	
	.analytics-cards {
    display: flex;
    gap: 20px;
		flex-wrap: wrap;
		
}
}

@media only screen and (max-width: 576px) {
    .col-sm-100 {
        width: 100%;
    }
    .col-sm-90 {
        width: 90%;
        float: left;
    }
    .col-sm-80 {
        width: 80%;
        float: left;
    }
    .col-sm-70 {
        width: 70%;
        float: left;
    }
    .col-sm-60 {
        width: 60%;
        float: left;
    }
    .col-sm-50 {
        width: 50%;
        float: left;
    }
    .col-sm-40 {
        width: 40%;
        float: left;
    }
    .col-sm-30 {
        width: 30%;
        float: left;
    }
    .col-sm-33 {
        width: 33.33%;
        float: left;
    }
    .col-sm-25 {
        width: 25%;
        float: left;
    }
    .col-sm-20 {
        width: 20%;
        float: left;
    }
    .col-sm-10 {
        width: 10%;
        float: left;
    }
}















/* Style for labels inside .gamca-form */
.gamca-form label {
    display: block; /* Ensure each label is on a new line */
    font-weight: bold; /* Make text bold for clarity */
    margin-bottom: 5px; /* Add spacing between label and input */
    color: #333; /* Dark gray color for better readability */
}
.gamca-form h1 {
   font-size: 24px;
    color: #333333 ;
    border-left: 5px solid ;
    padding-left: 13px ;
}

.gamca-form p {
   font-size: 14px;
    color: #333333 ;
    padding-left: 13px ;
}


/* Style for input fields inside .gamca-form */
.gamca-form input[type="text"],
.gamca-form input[type="email"],
.gamca-form input[type="date"],
.gamca-form input[type="number"],
.gamca-form input[type="file"],
.gamca-form select {
    width: 100%; /* Full width for responsiveness */
    padding: 10px; /* Add padding for better usability */
    margin-bottom: 15px; /* Space between form elements */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Include padding and border in the width */
    font-size: 14px; /* Adjust font size */
    background-color: #f9f9f9; /* Subtle background color */
}

.gamca-form input[type="tel"] {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #f9f9f9;
    height: 44px;
}
.iti {
    position: relative;
    display: inline-block;
    width: 100%;
}


/* Focus state for input fields and select */
.gamca-form input:focus,
.gamca-form select:focus {
    border-color: #0073aa; /* Change border to WordPress admin blue */
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); /* Add subtle glow effect */
    outline: none; /* Remove default outline */
}

/* Style for select dropdowns */
.gamca-form select {
    appearance: none; /* Remove default browser styling */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5"%3E%3Cpath fill="%23333" d="M0 0l5 5 5-5z"/%3E%3C/svg%3E'); /* Custom dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 5px;
}

/* General styling for the form */
.gamca-form {
      margin: 0px auto;
    padding: 10px;
	position:relative;
}

/* Add styling for buttons */
.gamca-form button {
    background-color: #0073aa; /* WordPress admin blue */
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
}

.gamca-form button:hover {
    background-color: #005f8c; /* Darker blue on hover */
}

/* Add error messages or warnings */
.gamca-form .error-message {
    color: red; /* Red for errors */
    font-size: 14px; /* Slightly smaller font size */
    margin-top: -10px;
    margin-bottom: 10px;
}

.display-none {
	display:none;
}


/* Style for the Stripe card element container */
#card-element {
    border: 1px solid #ccc; /* Light gray border */
    padding: 10px; /* Add padding inside the card element */
    border-radius: 4px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background color */
    margin-bottom: 15px; /* Space below the card element */
    font-size: 16px; /* Adjust font size for readability */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus effects */
}

/* Focus state for the card element */
#card-element:focus {
    border-color: #0073aa; /* WordPress admin blue */
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); /* Blue glow effect */
}

/* Submit button styling */
#submit-button {
background-color: #0073aa;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
}

/* Submit button hover state */
#submit-button:hover {
    background-color: #005f8c; /* Darker blue on hover */
}

/* Submit button active state */
#submit-button:active {
    transform: scale(0.98); /* Slightly shrink on click */
}

/* Disabled submit button */
#submit-button:disabled {
    background-color: #ccc; /* Gray background for disabled state */
    cursor: not-allowed; /* Not-allowed cursor */
}

/* Error message styling */
#payment-errors {
    color: red; /* Red color for error messages */
    font-size: 14px; /* Adjust font size for readability */
    font-weight: bold; /* Bold text for emphasis */
    margin-top: 10px; /* Space above the error message */
/*     padding: 5px; /* Add padding for better readability */ */
    background-color: #ffe5e5; /* Light red background for visibility */
/*     border: 1px solid #ffcccc; /* Border to match background */ */
    border-radius: 4px; /* Rounded corners */
}

/* General container styles for radio groups */
.radio-group {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

/* Custom radio styles */
.custom-radio {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.custom-radio {
    padding: 5px 0px;
}
.custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-radio .radio-label {
    padding: 10px 15px;
    border: 2px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background-color: #fff;
    transition: all 0.3s ease;
	
}

.custom-radio input[type="radio"]:checked + .radio-label {
    border-color: #0073aa;
    background-color: #0073aa;
    color: #fff;
}

.custom-radio .radio-label:hover {
    border-color: #0073aa;
}