/* Here, the content of the common custom CSS defined into Home - Setup - Display - CSS*/
/* General button styles */
.button-custom {
    background-color: #4CAF50; /* Green background */
    border: none; /* Remove border */
    color: white; /* White text */
    padding: 12px 20px; /* Padding */
    text-align: center; /* Center text */
    text-decoration: none; /* No underline */
    display: inline-block; /* Display inline */
    font-size: 16px; /* Font size */
    margin: 4px 2px; /* Margin */
    cursor: pointer; /* Pointer on hover */
    border-radius: 8px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.2s; /* Transition effects */
}

/* Hover effects */
.button-custom:hover {
    background-color: #45a049; /* Darker green */
    transform: scale(1.05); /* Slightly enlarge */
}

/* Disabled button style */
.button-custom:disabled {
    background-color: #ccc; /* Gray background */
    color: #666; /* Dark gray text */
    cursor: not-allowed; /* Not allowed cursor */
}
/* General table styles */
.table-custom {
    width: 100%; /* Full width */
    border-collapse: collapse; /* Collapse borders */
    margin: 20px 0; /* Margin around table */
    font-size: 18px; /* Font size */
    background-color: #f9f9f9; /* Light gray background */
}

/* Table header styles */
.table-custom th {
    background-color: #4CAF50; /* Green header */
    color: white; /* White text */
    padding: 12px; /* Padding */
    text-align: left; /* Align text left */
}

/* Table cell styles */
.table-custom td {
    border: 1px solid #ddd; /* Light gray border */
    padding: 12px; /* Padding */
}

/* Row hover effect */
.table-custom tr:hover {
    background-color: #f1f1f1; /* Light gray on hover */
}

/* Alternate row styles */
.table-custom tr:nth-child(even) {
    background-color: #f2f2f2; /* Slightly darker gray */
}

/* Responsive table */
@media screen and (max-width: 600px) {
    .table-custom {
        font-size: 14px; /* Smaller font on small screens */
    }
}