/* Reset default margin and padding */
body, h1, h2, h3, p, ul, li, input, button {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* Use Arial or preferred sans-serif font */
}

/* Body background color */
body {
    background-color: #181818; /* Set background color to a light gray */
}

/* Container styles */
.container {
    max-width: 900px; /* Set maximum width */
    margin: 20px auto; /* Center the container and add margin */
    background-color: #FFFFFF; /* Set background color to white */
    border-radius: 8px; /* Add border radius for rounded corners */
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); /* Add box shadow for depth */
    padding: 20px; /* Add padding */
}

/* Page title styles */
.page-title h2 {
    font-size: 24px; /* Set font size */
    margin-bottom: 20px; /* Add margin bottom */
    color: #2C3E50; /* Set text color to a dark blue */
}

/* Form styles */
.form {
    margin-bottom: 20px; /* Add margin bottom */
}

.form h3 {
    font-size: 20px; /* Set font size */
    margin-bottom: 10px; /* Add margin bottom */
    color: #2C3E50; /* Set text color to a dark blue */
}

/* Add margin between label and input */
form label {
    margin-bottom: 10px; /* Adjust as needed */
    display: block;
}
/* Input field styles */
.form input[type="text"],
.form input[type="number"] {
    width: calc(100% - 20px); /* Set input width */
    padding: 10px; /* Add padding */
    margin-bottom: 10px; /* Add margin bottom */
    border: 1px solid #BDC3C7; /* Add border */
    border-radius: 4px; /* Add border radius */
    font-size: 16px; /* Set font size */
}

/* Button styles */
.form input[type="submit"],
.form button[type="button"] {
    background-color: #3498DB; /* Set background color to a vibrant blue */
    color: #FFFFFF; /* Set text color to white */
    border: none; /* Remove border */
    padding: 12px 20px; /* Add padding */
    margin-right: 10px; /* Add margin right */
    border-radius: 4px; /* Add border radius */
    font-size: 16px; /* Set font size */
    cursor: pointer; /* Add pointer cursor */
}

.form input[type="submit"]:hover,
.form button[type="button"]:hover {
    background-color: #2980B9; /* Darken background color on hover */
}

/* Reset button styles */
.form input[type="reset"] {
    background-color: #E74C3C; /* Set background color to a vibrant red */
    color: #FFFFFF; /* Set text color to white */
    border: none; /* Remove border */
    padding: 12px 20px; /* Add padding */
    border-radius: 4px; /* Add border radius */
    font-size: 16px; /* Set font size */
    cursor: pointer; /* Add pointer cursor */
}

.form input[type="reset"]:hover {
    background-color: #C0392B; /* Darken background color on hover */
}
/* Style for the dropdown list */
#digital_print {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 10px;
}

/* Style for dropdown options */
#digital_print option {
    font-size: 16px;
}

/* Style for selected option */
#digital_print option:checked {
    background-color: #007bff; /* Change the background color of the selected option */
    color: #fff; /* Change the text color of the selected option */
}

/* Listing styles */
.listing {
    margin-top: 20px; /* Add margin top */
}

.listing table {
    width: 100%; /* Set table width to 100% */
    border-collapse: collapse; /* Collapse table borders */
}

.listing th, .listing td {
    border: 1px solid #ddd; /* Add border */
    padding: 10px; /* Add padding */
    text-align: left; /* Align text to the left */
}

.listing th {
    background-color: #ECF0F1; /* Set background color for table header */
}
/* Center align content in specific table columns */
#table-listing th:nth-child(2),
#table-listing th:nth-child(3),
#table-listing th:nth-child(4),
#table-listing th:nth-child(5) {
    text-align: center;
}
/* Center align content in specific table columns */
#table-listing td:nth-child(2),
#table-listing td:nth-child(3),
#table-listing td:nth-child(4),
#table-listing td:nth-child(5) {
    text-align: center;
}

/* Notification styles */
.notification {
    background-color: #2ECC71; /* Set background color to a vibrant green */
    color: #FFFFFF; /* Set text color to white */
    padding: 10px; /* Add padding */
    margin-bottom: 20px; /* Add margin bottom */
    border-radius: 4px; /* Add border radius */
}

/* Error styles */
.errors {
    list-style-type: none; /* Remove default list style */
    color: #E74C3C; /* Set text color to a vibrant red */
    margin-bottom: 20px; /* Add margin bottom */
}

.errors li {
    margin-bottom: 5px; /* Add margin bottom */
}
/* Search form styles */
.container-search {
    margin-bottom: 20px; /* Add margin bottom */
}

.container-search input[type="text"] {
    width: calc(100% - 20px); /* Set input width */
    padding: 10px; /* Add padding */
    border: 1px solid #BDC3C7; /* Add border */
    border-radius: 4px; /* Add border radius */
    font-size: 16px; /* Set font size */
}

.container-search input[type="text"]:focus {
    outline: none; /* Remove outline on focus */
    border-color: #3498DB; /* Change border color on focus */
}
/* Add margin to each side on mobile devices */
@media screen and (max-width: 768px) {
    body {
        font-size: 12px;
        padding: 0px;
        margin: 0px;
    }
    .form label,
    .form input[type="text"],
    .form input[type="number"],
    .form input[type="submit"],
    .form input[type="reset"],
    .form button {
        font-size: 12px;
    }
    .container {
        margin: 0px;
        padding: 10px;
        border-radius: 0px
    }
}