.ck-editor__editable {
    resize: both !important;  /* Enable both horizontal and vertical resizing */
    height: auto !important;  /* Allow the editor to resize vertically */
    max-height: none !important;  /* Remove any maximum height constraints */
    min-height: 300px !important; /* Optional: Set a minimum height */
}



.submit-button:hover {
    background-color: #0056b3; /* Change background color on hover */
}


.submit-button {
    background-color: #007bff; /* Set button background color */
    color: #fff; /* Set button text color */
}


/* Apply to all form groups not just nested */
label {
    font-weight: bold;
    text-decoration: underline;
}


/* Button styles */
.submit-button
{
    width: 100px; /* Set the width of the button */
    height: 60px; /* Set the height of the button */
    font-size: 16px; /* Set button font size */
    border: none; /* Remove button border */
    border-radius: 5px; /* Apply border radius to button */
    cursor: pointer; /* Change cursor to pointer on hover */
    margin: 10px 5px; /* Add consistent margin to buttons for spacing */
}


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: #14539293;
    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; 
}


.email-content-container {
    order: -1; /* Move it to the top */
}

/* 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;              /* Allow wrapping if needed */
    justify-content: left;      /* Center items within the container */
    gap: 15px;                    /* Consistent spacing between items */
    align-items: flex-start;          /* Align vertically in the container */
}


.email-config-container .form-group {
    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 */
}



/* 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%;               /* 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 */
}

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



#form-group {
    margin-bottom: 15px; /* Add margin between form fields */
    display: flex; /* Use flexbox for the form */
    flex-direction: column; /* Arrange form fields vertically */
    align-items: left; /* Center align the form fields */
}

.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 : #000000;
}

/* Ensure the text color is always black for the datetimepicker input */
.datetimepicker {
    background-color: #fff !important; /* White background color */
    color: #000000 !important; /* Black text color */
}

/* Ensure the text color is always black for the flatpickr input */
.flatpickr-input {
    background-color: #fff !important; /* White background color */
    color: #000000 !important; /* Black text color */
}

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


.ck-content {
    color: black; /* Set default text color */
    background-color: white; /* Set default background color */
}

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

/* Style the h1 header tag */
h1.submit-request-header {
    margin-bottom: 20px;
    font-size: 24px;
    margin-top: 15px;
    color: #000000; /* Change this to the desired color */
    text-align: center;
}

#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: #14539293; /* 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;
}