/* Main content styling */
.main-content {
    padding-left: 150px; /* Set padding to 150px for desktop */
    padding-bottom: 20%;
}

/* Responsive adjustment: remove padding on mobile screens */
@media (max-width: 991px) {
    .main-content {
        padding-left: 0;
    }
}

/* DataTable pagination button styling */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #397d7d;
    color: white !important;
    border-radius: 4px;
    margin: 2px;
    border: 1px solid #2e6666;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #2e6666;
    color: white !important;
}

/* Add Issue Modal styling */
.modal {
    z-index: 2000; /* Ensure the modal is in front of all other elements */
}

.modal-backdrop {
    z-index: 1500; /* Backdrop behind the modal but above other elements */
}

.modal-header {
    background-color: #397d7d;
    color: white;
}

.modal-footer button {
    background-color: #397d7d;
    color: white;
}

.modal-footer button:hover {
    background-color: #2e6666;
}

/* Style for required form fields */
.form-required {
    color: red;
    font-weight: bold;
}

/* Style for reference number card */
.reference-card {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position */
    top: 20%; /* Positioning from top */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center the card */
    z-index: 3000; /* Ensure it appears above other elements */
    width: 300px; /* Set width of the card */
}