/* ==================================
   Jul 2025 – John Mc Additions
   Cleaned Custom styling for navigation, forms, and data tables
   ================================== */

/* Import Google Fonts - Lato, Open Sans, and Poppins with various weights */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ==================================
   GLOBAL STYLES
   ================================== */

/* Set Poppins as the primary font for the entire application */
body {
    font-family: Poppins !important;
}

/* Global link styling */
a {
    color: #6143eb;
    font-weight: 600;
}

/* Global heading styling */
h2 {
    margin-top: 25px;
}

h3 {
    font-weight: 600;
}

/* Font weight overrides */
.fal, .far {
    font-weight: 300 !important;
}

/* Small text styling */
small {
    text-decoration: none !important;
    font-style: italic;
}

/* ==================================
   GLASSMORPHISM BASE STYLES
   ================================== */

/* Base glassmorphism effect used across multiple elements */
.glassmorphism-base,
.navbar-expand-md .navbar-nav .nav-link,
div#caseMenuBar {
    border-radius: 999px;
    background-color: #00000017;
    backdrop-filter: blur(20px);
    box-shadow: rgba(255, 255, 255, 0.45) 1px 1px 1px inset, rgba(255, 255, 255, 0.45) -1px -1px 1px inset, rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
    color: rgb(255, 255, 255) !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
    transition: 0.4s cubic-bezier(0.5, 1.5, 0.5, 1) !important;
}

    /* Base hover effect for glassmorphism elements */
    .glassmorphism-hover,
    .navbar-expand-md .navbar-nav .nav-link:hover,
    .navbar-inverse .navbar-nav li .dropdown-menu a:hover,
    a.site-action.dropdown-item:hover,
    a.dropdown-item.useTemplate.d-inline-flex:hover,
    a.dropdown-item.editTemplates.editing:hover,
    a.dropdown-item.saveTemplates.editing:hover,
    #caseArea #caseMenuBar .dropdown-menu .dropdown-item:hover,
    a.dropdown-item:hover,
    label.btn.btn-outline-primary:hover {
        transform: scale(1.03) !important;
        box-shadow: rgba(255, 255, 255, 0.6) 1px 1px 1px inset, rgba(255, 255, 255, 0.6) -1px -1px 1px inset, rgba(0, 0, 0, 0.25) 0px 6px 16px !important;
        background: linear-gradient(135deg, rgb(169, 0, 255), rgb(87, 75, 232)) !important;
        border-radius: 99px;
        color: white !important;
    }

/* ==================================
   NAVIGATION STYLES
   ================================== */

/* Main navigation links styling */
.navbar-expand-md .navbar-nav .nav-link {
    font-size: 14px;
    margin-right: 10px;
    padding: 5px 20px !important;
}

/* Navigation container background image */
body > nav.navbar .container {
    background: linear-gradient(135deg, #400061, #09007c);
    height: 55px;
    max-width: 100% !important;
}

span.case-stage.paused.ml-2.text-nowrap > span {
    background: gray !important;
}

/* ==================================
   DROPDOWN MENU STYLES
   ================================== */

/* Dropdown menu styling with glassmorphism effect */
.dropdown-menu.dropdown-menu-right.show,
.dropdown-menu.show {
    border-radius: 20px;
    margin-right: 20px;
    backdrop-filter: blur(15px);
    box-shadow: rgba(255, 255, 255, 0.45) 1px 1px 1px inset, rgba(255, 255, 255, 0.45) -1px -1px 1px inset, rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
    color: rgb(255, 255, 255) !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #ffffffb8, rgba(255, 255, 255, 0.05)) !important;
    padding: 15px 20px !important;
    transition: 0.4s cubic-bezier(0.5, 1.5, 0.5, 1) !important;
    margin-top: 10px !important;
}

/* Dropdown menu item base styling */
.navbar-inverse .navbar-nav li .dropdown-menu a {
    background-color: transparent;
    font-size: 18px;
}

/* Dropdown menu item font styling */
.dropdown-menu .dropdown-item {
    font-size: 0.8rem !important;
    font-weight: 600;
}

h6.dropdown-header {
    font-size: 0.8rem;
}

/* Specific dropdown background overrides */
#ddlCaseItemVisibility > div,
#caseItemMenu > div,
#caseMenuBar > div > div.d-none.d-md-inline-block > div.dropdown.d-inline-block.show > div,
ul.dropdown-menu.inner.show {
    background: white !important;
}

#ddlCaseItemVisibility > div {
    margin-top: 10px !important;
}

#caseArea #caseSummary .dropdown-menu {
    /*margin-top: 50px !important;*/
    margin-left: 20% !important;
}

.caseSummaryBody.casestatus_open.reloadable {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgb(255 0 0 / 9%)) !important;
}

.caseSummaryBody.casestatus_resolved.reloadable {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), #28a7452e) !important;
}


ul.dropdown-menu.inner.show {
    background-color: transparent !important;
}

/* ==================================
   BUTTON STYLES
   ================================== */

/* Base button styling with glassmorphism effect */
.btn.btn-default,
a.btn.px-4.btn-info,
input#daterangepicker,
button.btn.btn-info.dropdown-toggle {
    border-radius: 999px;
    padding: 5px 20px;
    backdrop-filter: blur(15px);
    background: linear-gradient(135deg, #ffffffb8, rgba(255, 255, 255, 0.05));
    box-shadow: rgba(255, 255, 255, 0.45) 1px 1px 1px inset, rgba(255, 255, 255, 0.45) -1px -1px 1px inset, rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
}

    /* Button hover states */
    .btn.btn-default:hover,
    a.btn.px-4.btn-info:hover,
    button.btn.btn-info.dropdown-toggle:hover {
        transform: scale(1.03) !important;
        box-shadow: rgba(255, 255, 255, 0.6) 1px 1px 1px inset, rgba(255, 255, 255, 0.6) -1px -1px 1px inset, rgba(0, 0, 0, 0.25) 0px 6px 16px !important;
        background: linear-gradient(135deg, #a900ff, #574be8) !important;
        color: white !important;
    }

/* Info buttons and date picker with blue gradient background */
a.btn.px-4.btn-info,
input#daterangepicker,
button.btn.btn-info.dropdown-toggle {
    background: linear-gradient(135deg, rgb(169, 0, 255), rgb(87, 75, 232)) !important;
}

/* Primary buttons styling */
button.btn.btn-sm.btn-primary,
body .btn.btn-primary,
button.tox-button {
    padding: 5px 20px;
    transform: scale(1.03) !important;
    box-shadow: rgba(255, 255, 255, 0.6) 1px 1px 1px inset, rgba(255, 255, 255, 0.6) -1px -1px 1px inset, rgba(0, 0, 0, 0.25) 0px 6px 16px !important;
    background: linear-gradient(135deg, rgb(169, 0, 255), rgb(87, 75, 232)) !important;
    border-radius: 99px;
    border-color: transparent;
}

/* Danger buttons */
body .btn.btn-danger,
button#standardExportReport {
    padding: 5px 20px;
    transform: scale(1.03) !important;
    box-shadow: rgba(255, 255, 255, 0.6) 1px 1px 1px inset, rgba(255, 255, 255, 0.6) -1px -1px 1px inset, rgba(0, 0, 0, 0.25) 0px 6px 16px !important;
    background: linear-gradient(135deg, rgb(169, 0, 255), rgb(87, 75, 232)) !important;
    border-radius: 99px;
    border-color: transparent;
}

body .btn.btn-danger {
    margin: 20px;
}

button#standardExportReport {
    margin: 15px;
}

/* Outline secondary buttons */
button.btn.btn-sm.btn-outline-secondary,
button.chart-type-btn {
    border: 2px solid #343a4038;
    border-radius: 999px;
    background-color: #00000017;
    margin-right: 10px;
    backdrop-filter: blur(20px);
    box-shadow: rgba(255, 255, 255, 0.45) 1px 1px 1px inset, rgba(255, 255, 255, 0.45) -1px -1px 1px inset, rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
    padding: 10px 20px !important;
    transition: 0.4s cubic-bezier(0.5, 1.5, 0.5, 1) !important;
}

button.chart-type-btn {
    font-size: 14px;
    color: #7b838a;
}

    button.btn.btn-sm.btn-outline-secondary:hover, button.btn.btn-sm.btn-outline-info:hover, button.btn.btn-outline-info.period-btn:hover, button.chart-type-btn:hover, button.chart-type-btn.active, .btn-outline-primary:hover {
        padding: 10px 20px;
        transform: scale(1.03) !important;
        box-shadow: rgba(255, 255, 255, 0.6) 1px 1px 1px inset, rgba(255, 255, 255, 0.6) -1px -1px 1px inset, rgba(0, 0, 0, 0.25) 0px 6px 16px !important;
        background: linear-gradient(135deg, rgb(169, 0, 255), rgb(87, 75, 232)) !important;
        border-radius: 99px;
        border-color: transparent;
        color: white !important;
    }

/* Outline info buttons */
button.btn.btn-sm.btn-outline-info, button.btn.btn-outline-info.period-btn, .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle {
    border: 2px solid #5d43e652;
    border-radius: 999px;
    background-color: #00000017;
    margin-right: 10px;
    backdrop-filter: blur(20px);
    box-shadow: rgba(255, 255, 255, 0.45) 1px 1px 1px inset, rgba(255, 255, 255, 0.45) -1px -1px 1px inset, rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), #a900ff14) !important;
    padding: 10px 20px !important;
    transition: 0.4s cubic-bezier(0.5, 1.5, 0.5, 1) !important;
    color: #5d41e4;
}

h5.mb-0.filter-toggle {
    color: #5f44e8;
}

/* Outline primary buttons (button groups) */
label.btn.btn-outline-primary {
    border-radius: 999px;
    padding: 10px 20px;
    border: 2px solid #dcdcdc7d;
    margin-right: 15px;
    font-weight: 500;
    color: #0a283e;
}

    label.btn.btn-outline-primary.active {
        background: linear-gradient(45deg, #116393, #154971);
        margin-right: 15px;
        border-radius: 999px;
        padding: 10px 20px;
        border-top-right-radius: 999px !important;
    }

.btn-group > .btn:not(:first-child),
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-radius: 999px !important;
    border: 2px solid #343a4038 !important;
}

/* Special dropdown label button */
a#dLabel {
    text-decoration: none;
    background: linear-gradient(45deg, #116393, #154971);
    margin-right: 15px;
    border-radius: 999px;
    padding: 10px 20px;
    width: 200px !important;
    display: block;
    color: white !important;
    border: 1px solid transparent;
}

    a#dLabel:hover {
        background: linear-gradient(135deg, #a900ff, #574be8);
        border-color: gainsboro;
        border-radius: 999px;
        padding: 10px 20px;
        box-shadow: rgba(255, 255, 255, 0.45) 1px 1px 1px inset, rgba(255, 255, 255, 0.45) -1px -1px 1px inset, rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
    }

/* Site action buttons */
a.site-action.btn.btn-info.btn-sm {
    padding: 10px 20px;
    border-radius: 999px;
}

.standard-reporting-filters .form-control, .standard-reporting-filters .selectpicker {
    border-radius: 999px;
    border-color: gainsboro;
}
/* Bootstrap select styling */
.filter-option {
    border: 2px solid #dcdcdc7d;
    border-radius: 99px;
}

button.btn.dropdown-toggle.btn-outline-secondary {
    border: none;
    border-radius: 99px;
    height: 44px;
    background-color: white;
    padding: 10px 20px !important;
}

/* TinyMCE button overrides */
.tox .tox-button--secondary,
.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end > *,
.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start > * {
    border-radius: 999px;
    padding: 10px 20px;
    font-family: 'Poppins';
    font-weight: normal;
    font-size: 16px;
    background: linear-gradient(135deg, #a900ff, #574be8);
}

.tox .tox-button--secondary {
    background: white !important;
}

/* ==================================
   TYPOGRAPHY
   ================================== */

/* Case list header styling */
h1#case-list-header {
    font-size: 3rem !important;
    padding-bottom: 15px;
    border-bottom: 2px solid gainsboro;
    margin-bottom: 15px;
    margin-top: 50px;
}

/* TinyMCE font overrides */
.tox .tox-selectfield select,
.tox .tox-label,
.tox .tox-toolbar-label,
.tox .tox-dialog__title {
    font-family: 'Poppins' !important;
    font-weight: 500;
}

/* Modal footer text */
#ajax-send-comms > form > div.modal-footer.justify-content-between > small {
    font-weight: 700;
    color: #b4b4b4;
}

/* ==================================
   FORM CONTROLS
   ================================== */

/* Custom checkbox styling */
.custom-control-input:checked ~ .custom-control-label::before {
    background: linear-gradient(135deg, #a900ff, #574be8) !important;
}

/* Form input styling */
.form-control {
    height: 44px;
}

    .form-control:focus {
        outline: 4px solid #a900ff;
    }

/* File input styling */
input[type="file"] {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #333;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(135deg, #116393, #154971);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

    input[type="file"]::file-selector-button {
        font-family: 'Poppins', sans-serif;
        background: white;
        border: none;
        padding: 8px 16px;
        border-radius: 999px;
        color: #154971;
        cursor: pointer;
        transition: 0.3s ease;
    }

        input[type="file"]::file-selector-button:hover {
            background: #e5f1fa;
        }

/* Input group text styling */
span.input-group-text {
    background: linear-gradient(135deg, #116393, #154971);
    border-top-right-radius: 99999px;
    border-bottom-right-radius: 99999px;
    color: white;
}

/* Select2 styling */
ul.select2-selection__rendered {
    display: block;
    width: 100%;
    height: 32px !important;
    font-size: 1rem;
    font-weight: 400;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 999px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    padding: 20px 10px !important;
}

.select2-container--default .select2-selection--multiple {
    border: none;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: transparent;
}

ul#select2-ExternalAddresses-results {
    margin-top: -10px;
    border: 2px solid gainsboro;
}

li.select2-selection__choice {
    margin-top: -18px !important;
    margin-left: 10px;
    background: linear-gradient(135deg, #a900ff, #574be8);
    border-color: gainsboro !important;
    border-radius: 999px !important;
    padding: 5px 10px !important;
    box-shadow: rgba(255, 255, 255, 0.45) 1px 1px 1px inset, rgba(255, 255, 255, 0.45) -1px -1px 1px inset, rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
    color: white;
}

/* ==================================
   TABLE STYLES
   ================================== */

/* Table header styling */

#service-breakdown-table > thead > tr {
    border: none !important;
}

    #service-breakdown-table > thead > tr > th {
        border: none !important;
    }

/* Table header text color */
th {
    color: white !important;
}

/* DataTable sort indicator styling */
.triagelist-area .triagelist-results table.dataTable thead tr th.sorted.sort_desc:after {
    border-top-color: white;
}

/* Table link color */
.triagelist-area .triagelist-results table.dataTable tbody tr td a {
    color: #5e43e5;
}

/* Table responsive styling */
.triagelist-area .triagelist-results .table-responsive {
    overflow: auto !important;
}

.triage-page-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* ==================================
   CASE STATUS INDICATORS
   ================================== */

/* Standard size for case status indicators */
.triagelist-area .triagelist-results table.dataTable tbody tr .case-stage .case-status-key {
    width: 24px;
    height: 24px;
    border-radius: 99px !important;
    padding-top: 4px;
}

/* Open case status - Red gradient */
.triagelist-area .triagelist-results table.dataTable tbody tr .case-stage.open .case-status-key {
    background: linear-gradient(135deg, #bb1349 0%, #7e0000 100%);
    border-color: crimson;
}

/* Resolved case status - Green gradient */
.triagelist-area .triagelist-results table.dataTable tbody tr .case-stage.resolved .case-status-key {
    background: linear-gradient(135deg, #28a745 0%, #035f02 100%);
    border-color: #28a745;
}

/* Allocated case status - Orange gradient */
.triagelist-area .triagelist-results table.dataTable tbody tr .case-stage.allocated .case-status-key {
    background: linear-gradient(135deg, #ff9e00 0%, #c13000 100%);
    border-color: #d39e00;
    color: white !important;
}

/* In progress case status - Teal border only */
.triagelist-area .triagelist-results table.dataTable tbody tr .case-stage.inprogress .case-status-key {
    border-color: #1ebea1;
}

/* Closed and paused case status - Dark gradient */
.triagelist-area .triagelist-results table.dataTable tbody tr .case-stage.closed .case-status-key,
.triagelist-area .triagelist-results table.dataTable tbody tr .case-stage.paused .case-status-key {
    background: linear-gradient(135deg, #000000 0%, #495057 100%);
    border-color: #545b62;
    color: white !important;
}

/* Special styling for paused status indicator */
.triagelist-area .triagelist-results table.dataTable tbody .case-stage.paused .case-status-key {
    font-size: 8px;
    padding-top: 2px;
    padding-left: 1px;
}

/* ==================================
   PAGINATION
   ================================== */

/* Active pagination item */
.page-item.active .page-link {
    background: linear-gradient(135deg, #a900ff, #574be8);
    border-color: #a900ff;
}

/* ==================================
   CASE AREA SPECIFIC STYLES
   ================================== */

/* Case menu bar positioning and styling */
div#caseMenuBar {
    top: 80px !important;
    width: auto !important;
    display: inline-block;
    margin-right: 10px;
    padding: 5px 12px !important;
    /*margin-top: 10px;*/
    margin-top: -25px;
}

#caseArea #caseMenuBar > .container {
    padding-top: 0px;
}

/* Case summary styling */
#caseArea #caseSummary .caseSummaryBody {
    margin-top: 70px;
    border-right: none;
    border-top: none;
    border-bottom: none;
    box-shadow: rgba(255, 255, 255, 0.45) 1px 1px 1px inset, rgba(255, 255, 255, 0.45) -1px -1px 1px inset, rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
    /* background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important; */
    border-radius: 24px;
}

    #caseArea #caseSummary .caseSummaryBody.casestatus_inprogress {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgb(240, 247, 255)) !important;
    }

    #caseArea #caseSummary .caseSummaryBody.casestatus_allocated {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgb(255, 193, 7, 0.15)) !important;
    }

    /* Case summary edit options */
    #caseArea #caseSummary .caseSummaryBody #case_editoptions a.case_editlink {
        margin-top: 125px;
        width: 90%;
        max-width: 300px;
        min-width: 180px;
        display: block;
        margin-left: -45%;
        margin-right: 50%;
        position: relative;
        left: 20px;
        background: linear-gradient(135deg, #a900ff, #574be8);
        border-color: gainsboro;
        border-radius: 999px;
        padding: 10px 20px;
        box-shadow: rgba(255, 255, 255, 0.45) 1px 1px 1px inset, rgba(255, 255, 255, 0.45) -1px -1px 1px inset, rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
    }

@media (max-width: 800px) {
    #caseArea #caseSummary .caseSummaryBody #case_editoptions a.case_editlink {
        margin-top: 125px !important;
    }
}

/* Case summary headers */
#caseSummary > div > div:nth-child(2) > h4,
#caseArea #caseSummary .caseSummaryBody h4 {
    border-bottom: 3px solid #dcdcdc5e !important;
}

#caseSummary > div > div:nth-child(2) > h4 {
    margin-bottom: 70px;
}

#caseArea #caseSummary {
    z-index: 1;
}

/* ==================================
   TIMELINE STYLES
   ================================== */

/* Timeline container */
div#caseTimeline {
    margin-top: 90px !important;
}

/* Timeline panel base styling */
.timeline-panel {
    box-shadow: rgba(255, 255, 255, 0.45) 1px 1px 1px inset, rgba(255, 255, 255, 0.45) -1px -1px 1px inset, rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
    border-radius: 24px !important;
    border: 3px solid #dcdcdc3b !important;
}

    /* Internal timeline panels */
    .timeline-panel.timeline-internal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgb(240, 247, 255)) !important;
        border: 3px solid #dcdcdc3b !important;
    }

/* Status change timeline panels with special border */
#caseArea #caseTimeline .timeline-area ul.timeline > li.timeline-statuschange .timeline-panel {
    border: 5px solid transparent !important;
    border-image: repeating-linear-gradient( 45deg, black, black 5px, yellow 5px, yellow 10px ) 5 !important;
    background: #ffffee !important;
}

/* Timeline separators */
li.timeline-separator {
    border: aliceblue !important;
}

#caseArea #caseTimeline .timeline-area ul.timeline > li.timeline-separator > .timeline-separator-area {
    border-bottom: 3px solid #dcdcdc5e !important;
    padding-bottom: 11px;
}

/* Timeline badges */
#caseArea #caseTimeline .timeline-area ul.timeline > li > .timeline-panel > .timeline-heading .timeline-badge.comms {
    background-color: transparent !important;
    color: blue;
    font-size: 24px !important;
}

#caseArea #caseTimeline .timeline-area ul.timeline > li > .timeline-panel > .timeline-heading .timeline-badge.note {
    background-color: transparent !important;
    color: #13527d;
    font-size: 24px !important;
}

/* Timeline menu button */
#caseArea #caseTimeline .timeline-area ul.timeline > li > .timeline-panel > .timeline-heading .timeline-menu .btn-link:after {
    display: none;
}

/* Timeline panel arrows - hidden */
#caseArea #caseTimeline .timeline-area ul.timeline > li > .timeline-panel.timeline-internal::after,
#caseArea #caseTimeline .timeline-area ul.timeline > li > .timeline-panel.timeline-


#caseArea #caseTimeline .timeline-area ul.timeline > li > .timeline-panel > .timeline-heading .timeline-menu .btn-link:after {
    display: none;
}

.fa-bars:before {
    content: "\f142";
    color: #154971;
}


.daterangepicker .ranges li {
    font-family: 'Poppins';
}

.daterangepicker.ltr.show-ranges.show-calendar.opensright {
    font-family: 'Poppins' !important;
    font-size: 16px !important;
}

.daterangepicker .ranges li.active {
    background: linear-gradient(45deg, #116393, #154971);
}

.daterangepicker.ltr.show-ranges.show-calendar.opensright {
    background: #ffffffbd;
    backdrop-filter: blur(15px);
}

.daterangepicker .calendar-table th {
    color: black !important;
}

td.active.start-date.available {
    background: linear-gradient(45deg, #116393, #154971);
    border-radius: 36px !important;
}

.daterangepicker td.in-range {
    background-color: #337ab71c;
}

#caseTimeline {
    padding-top: 1% !important;
}

#caseSummary {
    padding-top: 1% !important;
    margin-bottom: 0rem !important;
}

#caseArea #caseTimeline .timeline-area ul.timeline > li > .timeline-panel.timeline-internal::before {
    display: none !important;
}

#caseArea #caseTimeline .timeline-area ul.timeline > li > .timeline-panel::before {
    border-right: none !important;
    display: none !important;
}

#caseArea #caseTimeline .timeline-area ul.timeline > li > .timeline-panel::before {
    border-right: none !important;
    display: none !important;
}

#caseArea #caseTimeline .timeline-area ul.timeline > li > .timeline-panel::after {
    border-right: none !important;
    display: none !important;
}

.body-content {
    padding-top: 20px;
}

.table thead tr {
    background: linear-gradient(135deg, #a900ff, #574be8);
}


.fieldTextEdit {
    transform: scale(1.03) !important;
    box-shadow: rgba(255, 255, 255, 0.6) 1px 1px 1px inset, rgba(255, 255, 255, 0.6) -1px -1px 1px inset, rgba(0, 0, 0, 0.25) 0px 6px 16px !important;
    background: linear-gradient(135deg, #a900ff, #574be8) !important;
    color: white !important;
    position: absolute;
    padding: 0 !important;
    margin-right: 5px;
}

select {
    border: 2px solid #dcdcdc7d !important;
    border-radius: 99px !important;
}

    select#signatureList {
        border-top-left-radius: 99px !important;
        border-bottom-left-radius: 99px !important;
        border-width: 2px;
        border-color: #cccccc;
    }


button.btn.btn-secondary {
    box-shadow: rgba(255, 255, 255, 0.6) 1px 1px 1px inset, rgba(255, 255, 255, 0.6) -1px -1px 1px inset, rgba(0, 0, 0, 0.25) 0px 6px 16px !important;
    background: linear-gradient(135deg, rgb(169, 0, 255), rgb(87, 75, 232)) !important;
    border-radius: 99px;
    color: white !important;
}

input#search-cases {
    border-radius: 999px;
    margin-right: 15px;
}

input[type="search"] {
    border-radius: 999px;
    margin-right: 15px;
    border: 1px solid #ced4da;
}

h5.card-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgb(240, 247, 255)) !important;
    border: 3px solid #dcdcdc3b !important;
    box-shadow: rgba(255, 255, 255, 0.45) 1px 1px 1px inset, rgba(255, 255, 255, 0.45) -1px -1px 1px inset, rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
}

td {
    background: #f8f9fa;
}

button.btn.btn-link, h5.mb-0.filter-toggle, .nutrition-value.clickable, .text-primary {
    color: #5f44e8 !Important;
}

.standard-reporting-filters {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), #a900ff14) !important;
}

#caseArea #caseSummary .caseSummaryBody.casestatus_paused {
    background: linear-gradient(45deg, #49505740, transparent);
    border-left-color: gainsboro;
}

/* ==================================
   REPORT ICONS
   ================================== */

#ctNavBar > li.nav-item.dropdown.show > div > a:before {
    font-family: 'Font Awesome 5 Pro';
    padding-right: 10px;
    font-weight: 900; /*Ensure solid style for Pro icons */
}


input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

td.case-stage.text-center.paused > span {
    background: grey !important;
}


body .btn.btn-secondary, body .badge.btn-secondary, body .nav-pills.btn-secondary, body .pagination.btn-secondary, body .btn.badge-secondary, body .badge.badge-secondary, body .nav-pills.badge-secondary, body .pagination.badge-secondary {
    background-color: #28a745;
}


button.btn.btn-sm.btn-outline-info.row-toggle, button.btn.btn-sm.row-toggle.btn-outline-secondary {
    padding: 10px !important;
}

.card-header {
    background: linear-gradient(45deg, #a900ff00, #a900ff30);
}

.table .thead-dark tr > th {
    background: #5f44e8 !important;
}

.bg-primary {
    background-color: #4631ac !important;
}

.bg-success {
    background-color: #6240eb !important;
}

.bg-info {
    background-color: #9d0cfc !important;
}

.bg-warning {
    background-color: #a400a4 !important;
}

.card.border-info {
    border-color: #9d0cfc !important;
}

.border-warning {
    border-color: #a400b0 !important;
}

.text-info {
    color: #9d0cfc !important;
}

.text-success {
    color: #6240eb !important;
}

.text-warning {
    color: #a400a4 !important;
}

.btn-outline-primary {
    color: #4631ac;
    margin-right: 10px;
}

.nav-tabs .nav-link {
    background: transparent !important;
}