:root {
    --navbar-height: 96px;
    --command-center-treeview-width: 340px;
    --command-center-treeview-min-width:200px;
    --command-center-treeview-max-width:500px;
}

body {
    /*padding-top: 50px;*/
    padding-bottom: 20px;
    color: #222222;
}

body {
    padding-top: var(--navbar-height) !important;
}

.body-fadeout {
    opacity: 0;
    transition: opacity 0.3s;
}


/* Optional: Ensure the navbar stays above other elements */
.navbar.fixed-top {
    z-index: 1030;
}

#busyIndicator {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.2); 
    z-index: 9999;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease-in-out; /* Smooth fade */
}

    #busyIndicator.fadeout {
        opacity: 0;
    }

.busyindicator-image {
    width: 128px; /* Smaller, less intrusive */
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); /* Nice shadow */
}



td {
    color: #222222;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

.navbar-brand img {
    background-color: white;
}

.mb20px {
    margin-bottom: 20px;
}

.navbar .navbar-nav .nav-link {
    color:white !important;
}

div .navbar-nav a {
    margin-right: 10px !important; /*Adjust the value as needed*/
}

    div.navbar-nav a:hover {
        background-color: #2a3f55; /*Replace with your preferred color*/
    }


.navbar-nav .nav-item.active {
    background-color: #bbcbdd; /* Change to your desired background color */
    color: black !important; /* Change to your desired text color */
}


/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}
.container-90 {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
}
/*Toast Notifications*/
.xtoast-container {
    position: fixed;
    top: 28px;
    right: 28px;
    z-index: 9999;
    pointer-events: none;
}

.xtoast {
    min-width: 280px;
    max-width: 600px;
    margin-bottom: 14px;
    padding: 14px 20px 14px 58px;
    border-radius: 8px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 1.5px 6px rgba(0,0,0,0.10);
    border-left: 10px solid #888;
    background: #333;
    font-family: var(--bs-body-font-family) ;
    font-size: 1.12rem;
    letter-spacing: 0.08em;
    position: relative;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(120%) scale(0.96);
    transition: transform 0.33s cubic-bezier(.39,.58,.57,1), opacity 0.33s cubic-bezier(.39,.58,.57,1);
}

    .xtoast-visible {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

  .xtoast-hiding {
    opacity: 0;
    transform: translateX(120%) scale(0.97);
    transition: transform 0.7s cubic-bezier(.4,0,.2,1), opacity 0.7s cubic-bezier(.4,0,.2,1);
}

/* Success Toast */
.xtoast-success {
    border-left-color: #2ECC71;
    background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
    color: #fff;
}

/* Error Toast */
.xtoast-error {
    border-left-color: #E74C3C;
    background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
    color: #fff;
}

/* Warning Toast */
.xtoast-warning {
    border-left-color: #F39C12;
    background: linear-gradient(90deg, #d35400 0%, #f39c12 100%);
    color: #fff;
}

/* Info Toast */
.xtoast-info {
    border-left-color: #3498DB;
    background: linear-gradient(90deg, #2980b9 0%, #3498db 100%);
    color: #fff;
}

.xtoast-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6em;
    opacity: 1;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.xtoast-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.55em;
    font-weight: bold;
    cursor: pointer;
    margin-left: 12px;
    line-height: 1;
    transition: opacity 0.18s, color 0.18s, background 0.18s;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .xtoast-close:hover,
    .xtoast-close:focus {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        background: rgba(255, 255, 255, 0.1);
        outline: none;
    }


body {
    font-family: "Helvetica Neue", Helvetica,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem; 
    line-height: 1.5;
    padding: 20px;
}

.controls {
    margin: 20px 0;
}

button {
    padding: 10px 15px;
    margin-right: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

.btn-success {
    background-color: #2ECC71;
    color: white;
}

.btn-error {
    background-color: #E74C3C;
    color: white;
}

.btn-warning {
    background-color: #F39C12;
    color: white;
}

.btn-info {
    background-color: #3498DB;
    color: white;
}



.validation-summary-errors {
    background-color: #fdf7c2;
    border: 1px solid #f3e2a9;
    padding: 10px;
    border-radius: 5px;
    color: #de6fa1;
    font-size: 14px;
}

    .validation-summary-errors div {
        margin-bottom: 5px;
        line-height: 1.5;
    }


/******New style to fix the missing style of Bootstrap4 in Bootstrap5 that still are used  */
.form-group {
    margin-bottom: 1rem; /* Like Bootstrap 4 */
}

.control-label {
    font-weight: 600; /* Classic look, optional */
    margin-bottom: 0.5rem;
    display: block;
}

.input-group-addon {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    color: #495057;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.has-error .form-control {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25);
}

.has-success .form-control {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40,167,69,.25);
}


.fw-half-bold {
    font-weight: 500 !important;
}

/* Highlight row on hover for ALL tables */
table tbody tr:hover {
    background-color: #cfe2ff !important; 
    cursor: pointer;
}
    table tbody tr:hover td,
    table tbody tr:hover th {
        background-color: #cfe2ff !important;
    }
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected:hover {
    background-color: #cfe2ff !important;
}


.sortable-table thead th {
    background: linear-gradient( to bottom, #f6f8fa 0%, #e6e9ef 50%, #dde1e7 100% );
    font-weight: 600;
    font-size: 1.08em;
    color: #495057;
    cursor: pointer;
    box-shadow: 0 1px 0 #fff, 0 2px 2px -1px #ccc;
}

    .sortable-table thead th:hover {
        background: linear-gradient( to bottom, #eaf4fc 0%, #dbe7ef 100% );
        color: #1a237e;
        transition: background 0.25s;
    }

    .sortable-table thead th.sort-active {
        background: linear-gradient( to bottom, #fff2ba 0%, #ffe29f 100% );
        color: #d84315;
    }

.definition-list-bordered dt,
.definition-list-bordered dd {
    border-bottom: 1px solid #e9ecef;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
}

    .definition-list-bordered dt:last-of-type,
    .definition-list-bordered dd:last-of-type {
        border-bottom: none;
    }

.definition-list-bordered dd {
    border-left: 1.5px solid #e9ecef; /* Vertical border between name and value */
    padding-left: 1rem;
    margin-left: -1px;
}

.table-compact {
    font-size: 0.93rem;
    
    line-height: 1.2;
}



/* Chosen Select Validation Styling */
.chosen-container.input-validation-error .chosen-single {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff5f5;
}

    .chosen-container.input-validation-error .chosen-single:focus {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    }

.chosen-container.input-validation-error .chosen-drop {
    border-color: #dc3545 !important;
}

/* For multi-select if you use it */
.chosen-container.input-validation-error .chosen-choices {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff5f5;
}

/* Hide the original validation error styling from the hidden select */
.chosen-select.input-validation-error {
    border: none !important;
    box-shadow: none !important;
}
.form-validation .text-danger {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
}

/*=======================================================*/
.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Loading Dots */
.loading-dots {
    display: flex;
    gap: 4px;
}

    .loading-dots div {
        width: 12px;
        height: 12px;
        background: #007bff;
        border-radius: 50%;
        animation: pulse 1.5s infinite ease-in-out;
    }

        .loading-dots div:nth-child(2) {
            animation-delay: 0.2s;
        }

        .loading-dots div:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes pulse {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.btn-bootstrap-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

    .btn-bootstrap-primary:hover {
        background-color: #0b5ed7 !important;
        border-color: #0a58ca !important;
        color: #fff !important;
    }

    .btn-bootstrap-primary:focus,
    .btn-bootstrap-primary.focus {
        background-color: #0b5ed7 !important;
        border-color: #0a58ca !important;
        color: #fff !important;
        box-shadow: 0 0 0 0.2rem rgba(49, 132, 253, 0.5) !important;
    }

    .btn-bootstrap-primary:active,
    .btn-bootstrap-primary.active {
        background-color: #0a58ca !important;
        border-color: #0a53be !important;
        color: #fff !important;
    }




    .btn-bootstrap-primary::before {
        content: "\f055"; /* fa-circle-plus */
        font: var(--fa-font-solid); /* provided by FA6 CSS */
        display: inline-block;
        margin-right: .5rem;
        line-height: 1;
    }

/* Subtle Create button */
.btn-create-subtle {
    background-color: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
    color: var(--bs-primary-text-emphasis);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: background-color .15s, border-color .15s, color .15s;
}

    .btn-create-subtle:hover,
    .btn-create-subtle:focus {
        border-color: var(--bs-success);
        color: var(--bs-primary);
        text-decoration: none;
    }

    .btn-create-subtle:active {
        border-color: var(--bs-success);
    }

    .btn-create-subtle:disabled,
    .btn-create-subtle.disabled {
        opacity: .65;
        pointer-events: none;
    }

    /* Inject FA icon before text */
    .btn-create-subtle::before {
        content: "\f055"; /* fa-circle-plus */
        font: var(--fa-font-solid); 
        line-height: 1;
        color: var(--bs-success); /* icon color */
    }
/*--------------------------------------------------*/
/* Hide the whole box when there are no errors (class added by tag helper) */
.validation-summary.validation-summary-valid {
    display: none;
}

/* Base container */
.validation-summary {
    /* If framework styles leak in, uncomment to reset:
     all: revert; 
  */
    --vs-bg: #fff5f5;
    --vs-border: #f3c2c2;
    --vs-text: #7a1f1f;
    display: block;
    padding: 12px 16px;
    margin: 12px 0;
    background: var(--vs-bg);
    border: 1px solid var(--vs-border);
    border-left: 4px solid var(--vs-text);
    border-radius: 8px;
    color: var(--vs-text);
    font-size: .95rem;
}

/* Title row (place inside the summary div) */
.validation-summary__title {
    margin: 0 0 .5rem 0;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* The UL/LI the tag helper renders */
.validation-summary > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .validation-summary > ul > li {
        position: relative;
        margin: .25rem 0;
        padding-left: 1.1rem;
    }

        .validation-summary > ul > li::before {
            content: "▸"; /* alternatives: "‣", "›", "⟶" */
            position: absolute;
            left: 0;
            top: 0;
            font-weight: 700;
            line-height: 1;
        }
.text-orangered{
    color:orangered;
}

/*used in TimeSlot View for LeadRules Summary column */

.leadrule-name-display{
    color:#17175c;
}
.leadrule-allocation-display {
    font-weight: 600;
}
/*** Used in secondary lead Process Index view*/
td.no-leadprocess-assigned {
    color: #0A75AB;
    font-weight: 540;
}

td.no-leadrule-assigned {
    color: #0A75AB;
    
    font-weight: 540;
}