.ck-editor__editable {
    resize: both !important;
    height: auto !important;
    max-height: none !important;
    min-height: 300px !important;
    border-radius: 10px !important;
    border: 2px solid #e0e6ed !important;
    padding: 15px !important;
    transition: all 0.3s ease !important;
}

.ck-editor__editable:focus {
    border-color: #145392 !important;
    box-shadow: 0 0 0 0.2rem rgba(20, 83, 146, 0.15) !important;
    outline: none !important;
}



/* Removed duplicate button styles - consolidated above */


/* Apply to all form groups not just nested */
label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 1rem;
    text-decoration: none;
    display: block;
}


/* Button styles */
.submit-button {
    width: auto;
    min-width: 180px;
    height: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin: 20px 0;
    padding: 12px 32px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.submit-button:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    transform: translateY(-2px);
}

.submit-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3);
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 40px;
    gap: 10px;
}


table { 
    table-layout: fixed; /* Fix the table layout to prevent stretching */
    width: 100%; /* Ensure the table takes up the full width */
    border-collapse: collapse; /* Collapse borders for a cleaner look */
    margin-top: 10px;
    background-color: #7e7f8065; 
    
}

th, td { 
    border: 1px solid hsla(0, 0%, 87%, 0.952);
    vertical-align: top; /* Align content to the top */
    padding: 10px;
    text-align: left;
    color: #000000; 
    overflow: hidden; /* Prevent content overflow */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
}

th { 
    background-color: #145392;
    color : #fff
}

tr:nth-child(even) { 
    background-color: #f4f4f454; 
}

tr:hover { 
    background-color: #83838375; 
}

tbody tr {
    height: 100px; /* Set a strict height for each row */
    overflow: hidden; /* Hide any content that overflows */
    display: table-row; /* Ensure proper table layout */
}


/* Target the specific "Delete" column */
th.delete-column,
td.delete-column {
    width: 5%; /* Adjust as needed */
}

/* Target the specific "ID" column */
th.id-column,
td.id-column {
    width: 5%; /* Adjust as needed */
}

/* Target the specific "Date" column */
th.date-column,
td.date-column {
    width: 10%; /* Adjust as needed */
}

/* Target the specific "Priority" column */
th.priority-column,
td.priority-column {
    width: 7%; /* Adjust as needed */
}

/* Target the specific "Schedule" column */
th.schedule-column,
td.schedule-column {
    width: 15%; /* Adjust as needed */
}

/* Target the specific "User" column */
th.user-column,
td.user-column {
    width: 10%; /* Adjust as needed */
}

/* Target the specific "Status" column */
th.status-column,
td.status-column {
    width: 10%; /* Adjust as needed */
}


/* Adjust the editable email content specifically */
td.editable-email-content {
    max-height: 200px; /* Set a maximum height for the content */
    overflow: hidden; /* Hide overflowing content */
    padding: 10px; /* Add consistent padding */
    line-height: 1.5; /* Improve readability */
}

.editable-email-content::-webkit-scrollbar {
    width: 8px; /* Set the width of the scrollbar */
}

.editable-email-content::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Set the color of the scrollbar thumb */
    border-radius: 4px; /* Add rounded corners */
}

.editable-email-content::-webkit-scrollbar-thumb:hover {
    background-color: #aaa; /* Change color on hover */
}


.block-footer {
    margin-top: 100px;
}

/* Alert message improvements */
.alert {
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 25px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
}

.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-left: 4px solid #28a745;
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.alert-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border-left: 4px solid #ffc107;
}

/* Error message styling */
.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 5px;
    display: block;
    font-weight: 500;
}

/* Toggle button styling */
#toggleTableButton {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
    margin-bottom: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#toggleTableButton:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
    transform: translateY(-2px);
}

/* Historical requests container */
#historicalRequestsContainer {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8ecf0;
    margin-top: 30px;
    margin-bottom: 50px;
}

/* Content wrapper for better spacing */
.content {
    padding: 20px 0;
    min-height: calc(100vh - 200px);
}

/* Submit request wrapper */
.submit-request-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Form styling improvements */
.submit-request-form {
    background: transparent;
}

/* Icon spacing in labels */
label i {
    margin-right: 8px;
    color: #145392;
}

/* Button icon spacing */
.submit-button i,
#toggleTableButton i {
    margin-right: 8px;
}

/* Responsive improvements */
@media (max-width: 768px) {
    h1.submit-request-header {
        font-size: 2rem;
    }
    
    .submit-request-wrapper {
        padding: 10px;
    }
    
    .email-content-container,
    .email-config-container,
    .form-group:first-of-type {
        padding: 20px;
    }
    
    .email-config-container {
        flex-direction: column;
    }
    
    .email-config-container .form-group {
        max-width: 100%;
        min-width: 100%;
    }
}


.email-content-container {
    order: -1;
    margin-bottom: 30px;
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8ecf0;
}

/* Prevent styles from applying to the radio buttons */
#id_priority_status label {
    font-weight: normal;
    text-decoration: none;
}

/* For dropdowns below CkEditor */
.email-config-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    align-items: flex-start;
    margin-top: 25px;
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8ecf0;
}

.email-config-container .form-group {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    max-width: 380px;
    min-width: 250px;
}



/* Style the filters container */
#filtersContainer {
    display: flex;
    flex-wrap: wrap;              /* Allow wrapping if needed */
    justify-content: flex-start;  /* Align items to the start (left) */
    gap: 10px;                    /* Reduce spacing between items */
    align-items: flex-start;      /* Align vertically in the container */
}

#filtersContainer .form-group {
    display: flex;               /* Use flexbox for the form-group */
    flex-direction: column;      /* Arrange label and dropdown vertically */
    flex-grow: 1;                /* Allows form-group to grow and fill available space */
    flex-shrink: 1;              /* Allows form-group to shrink if necessary */
    flex-basis: 0;               /* Initial size (0 means it will take up equal space) */
    max-width: 300px;            /* Optional: max width constraint */
    min-width: 200px;            /* Optional: min width to prevent shrinking too much */
}

#filtersContainer .form-group select,
.email-config-container .form-group select {
    width: 100%;
    padding: 14px 16px;
    min-height: 48px;
    height: auto;
    line-height: 1.5;
    border: 2px solid #e0e6ed;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #f8f9fa;
    font-size: 1rem;
    color: #2c3e50;
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 0;
    overflow: visible;
    display: block;
}

#filtersContainer .form-group select option,
.email-config-container .form-group select option {
    white-space: normal;
    padding: 8px 12px;
    word-wrap: break-word;
}

#filtersContainer .form-group select:focus,
.email-config-container .form-group select:focus {
    border-color: #145392;
    box-shadow: 0 0 0 0.2rem rgba(20, 83, 146, 0.15);
    background-color: white;
    outline: none;
}

#filtersContainer .form-group select:hover,
.email-config-container .form-group select:hover {
    border-color: #145392;
    background-color: white;
}

#filtersContainer select option[value="all"] {
    font-style: italic;
    color: #888;
}



#form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Form container styling */
form {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Form group improvements */
.form-group {
    margin-bottom: 25px;
}

.form-group input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e6ed;
    border-radius: 10px;
    font-size: 1rem;
    color: #2c3e50;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input[type="text"]:focus {
    border-color: #145392;
    box-shadow: 0 0 0 0.2rem rgba(20, 83, 146, 0.15);
    background-color: white;
    outline: none;
}

.form-group input[type="text"]:hover {
    border-color: #145392;
    background-color: white;
}

.form-group input[type="text"]::placeholder {
    color: #6c757d;
    opacity: 0.7;
}

.common-dropdown {
    width: 100%;               /* Make the dropdown take up the full width of its container */
    padding: 8px;              /* Add padding for better appearance */
    border: 1px solid #ccc;    /* Add a border */
    border-radius: 4px;        /* Add rounded corners */
    box-sizing: border-box;    /* Ensure padding and border are included in the element's total width and height */
    background-color: #fff;    /* Add a background color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}

.common-dropdown:hover {
    border-color: #007bff;     /* Change border color on hover */
    background-color: #f8f9fa; /* Change background color on hover */
}

label {
    color: #2c3e50;
}

/* Ensure the text color is always black for the datetimepicker input */
.datetimepicker {
    background-color: #f8f9fa !important;
    color: #2c3e50 !important;
    border: 2px solid #e0e6ed !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

.datetimepicker:focus {
    border-color: #145392 !important;
    box-shadow: 0 0 0 0.2rem rgba(20, 83, 146, 0.15) !important;
    background-color: white !important;
    outline: none !important;
}

/* Ensure the text color is always black for the flatpickr input */
.flatpickr-input {
    background-color: #f8f9fa !important;
    color: #2c3e50 !important;
    border: 2px solid #e0e6ed !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

.flatpickr-input:focus {
    border-color: #145392 !important;
    box-shadow: 0 0 0 0.2rem rgba(20, 83, 146, 0.15) !important;
    background-color: white !important;
    outline: none !important;
}

/* Ensure the cursor is a pointer for readonly flatpickr input */
.flatpickr-input[readonly] {
    cursor: pointer;
}

.flatpickr-input:hover {
    border-color: #145392 !important;
    background-color: white !important;
}


.ck-content {
    color: #2c3e50;
    background-color: white;
    font-size: 1rem;
    line-height: 1.6;
}

.ck-list-bogus-paragraph {
    color: black; /* Ensure text color is black */
}

/* Style the h1 header tag */
h1.submit-request-header {
    margin-bottom: 30px;
    font-size: 2.5rem;
    margin-top: 20px;
    color: #145392;
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


#requestListContainer {
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent content from wrapping */
    max-width: 100%; /* Ensure it doesn't exceed the page width */
}

.email-content-column {
    white-space: normal; /* Preserve line breaks and spaces */
    word-break: break-word; /* Ensure long words break */
    overflow-wrap: break-word; /* Break words if they overflow */
    width: auto; /* Let the width adjust based on content */
    text-align: left; /* Ensure text is always aligned to the left */
    margin: 0; /* Reset margin */
    padding: 10px;
    line-height: 1.5; /* Set consistent line height for better readability */
    height: 180px;
    max-height: 180px; /* Set a strict height limit for the box */
    overflow: hidden; /* Hide overflowing content */
    position: relative; /* Ensure the expand button is positioned correctly */
    display: block; /* Ensure the content respects the height limit */
}

.email-content-column:hover {
    overflow-y: auto; /* Enables vertical scrolling when hovered */
}


.editable-email-content {
    white-space: normal; /* Preserve line breaks and spaces */
    word-break: break-word; /* Ensure long words break */
    overflow-wrap: break-word; /* Break words if they overflow */
    width: auto; /* Let the width adjust based on content */
    text-align: left; /* Ensure text is always aligned to the left */
    margin: 0; /* Reset margin */
    padding: 10px;
    line-height: 1.5; /* Set consistent line height for better readability */
    height: 210px;
    max-height: 210px; /* Set a strict height limit for the box */
    overflow: hidden; /* Hide overflowing content */
    position: relative; /* Ensure the expand button is positioned correctly */
    display: block; /* Ensure the content respects the height limit */
}


.editable-email-content:hover {
    overflow-y: auto; /* Allow vertical scrolling on hover */
}

.editable-email-content:hover::after {
    content: attr(data-tooltip); /* Display the full content as a tooltip */
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
    padding: 5px;
    z-index: 10;
    max-width: 300px;
    white-space: normal;
    word-break: break-word;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.submit-email-content-fixed {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.submit-email-content-fixed:hover {
    background-color: #0056b3;
}

/* Pagination container styling */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 10px;
}

/* Pagination link styling */
.page-link {
    display: inline-block;
    padding: 8px 12px;
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
    border: 1px solid #007bff;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.page-link:hover {
    background-color: #007bff;
    color: white;
}

/* Current page styling */
.current-page {
    display: inline-block;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background-color: #007bff;
    border: 1px solid #007bff;
    border-radius: 4px;
}

/* Previous and Next button styling */
.page-link.previous,
.page-link.next {
    font-weight: bold;
}

.page-link.previous:hover,
.page-link.next:hover {
    background-color: #0056b3;
    color: white;
}


/* For screens smaller than 768px (mobile size) */
@media (max-width: 768px) {
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block; /* Make table elements block-level */
    }

    thead {
        display: none; /* Hide table headers */
    }

    tr {
        margin-bottom: 15px; /* Add spacing between rows */
        border: 1px solid #ccc; /* Add a border for separation */
        padding: 10px; /* Add padding for better readability */
    }

    td {
        display: flex;
        justify-content: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }

    td.status-column,
    td.id-column,
    td.user-column,
    td.delete-column,
    td.priority-column,
    td.schedule-column,
    td.date-column,
    td.email-content-column {
        width: 100%; /* Set specific columns to 100% width */
    }

    td::before {
        content: attr(data-label); /* Use the data-label attribute for labels */
        font-weight: bold;
        margin-right: 10px;
        color: #555;
    }
}

thead tr th {
    height: 50px !important; /* Set a fixed height */
    vertical-align: middle; /* Align content vertically in the middle */
    text-align: center; /* Center-align the text horizontally */
    line-height: 1.5; /* Ensure consistent line spacing */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Prevent content overflow */
    padding: 8px 10px; /* Add consistent padding */
    background-color: #145392; /* Ensure background color is applied */
    color: #fff; /* Ensure text color is white */
}

.client-data-pipelines-table td:last-child {
    white-space: normal !important;      /* Allow wrapping */
    word-break: break-all !important;    /* Break long words/URLs */
    overflow-wrap: break-word !important;
}