@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}

/*.e-leftfreeze {
    position: relative !important;
    left: auto !important;
}

.e-freezeleftborder {
    border-left: none !important;
}*/


a, .btn-link {
    color: #0366d6;
}

/*.btn-primary {
    color: #fff ;
    background-color: #1b6ec2;
    border-color: #1861ac;
}*/

*.btn-primary,
*.btn-primary:hover,
*.btn-primary:active,
*.btn-primary:visited,
*.btn-primary:focus {
    color: #000000 !important;
    background-color: #0080FF !important;
    border-color: #1861ac;
}


.fixed-width-label {
    width: 150px;
}



app {
    position: relative;
    display: flex;
    flex-direction: row;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}



.main {
    flex: 1;
    overflow: hidden;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }



.content {
    padding-top: 0px;
    margin: 0; /* Remove margin */
}


.rz-header {
    background-color: #f7f7f7;
    display: block;
    /*   padding: 0; Remove padding */
    margin: 0 !important; /* Remove margin */

    padding-top: 1px !important;
    padding-left: 0px !important;
    padding-bottom: 0px !important;
}



.rz-body {
    background-color: #f7f7f7;
    padding: 0 !important;
    margin: 0 !important; /* Remove margin */
}

.rz-card {
    margin: 0 !important; /* Remove margin */
}


.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }



@media screen and (max-width:800px) {


    .e-pivot-view-port {
        overflow-x: auto !important;
    }


    .notonmobile {
        display: none !important;
    }

    .onmobile {
        display: block !important;
    }

    /*.main-buttons {
        flex-direction: row;*/ /* Ensures buttons stay in rows */
    /*justify-content: center;*/ /* Center the buttons on mobile */
    /*}

        .main-buttons .rz-button {
            flex: 1 1 45%;*/ /* Make each button take 45% of the width on small screens */
    /*margin-bottom: 10px;*/ /* Add spacing between the rows */
    /*}*/


}

@media all and (min-width:801px) {


    .notonmobile {
        display: block !important;
    }

    .onmobile {
        display: none !important;
    }
}

/* This will hide arrows on right of top menu */

.rzi.rz-navigation-item-icon-children {
    display: none;
}

/*.rzi.rz-navigation-item {
    flex-wrap: wrap;
        }

        .rzi.rz-navigation-item .rz-navigation-item-active {
            z-index: 1;
        }*/

.rz-tabview-selected {
    display: block;
    background-color: rgba(100,255,255,0.25);
}

div.rz-navigation-item-link {
    background-color: #f7f7f7;
    color: #000000 !important;
}

    div.rz-navigation-item-link:hover {
        color: #b0b0b0;
    }

.rz-navigation-item {
    background-color: #f7f7f7;
    color: #000000 !important;
}

i.rzi.rz-navigation-item-icon {
    background-color: #f7f7f7;
    color: #000000 !important;
}

.rz-menu {
    background-color: #f7f7f7;
}

div.rz-navigation-item-wrapper {
    background-color: #f7f7f7;
    color: #000000 !important;
}

    div.rz-navigation-item-wrapper:hover {
        background-color: #f7f7f7;
        color: #000000 !important;
    }

    div.rz-navigation-item-wrapper.rz-navigation-item-wrapper-active {
        background-color: #f7f7f7;
        color: #000000 !important;
    }

/*.rz-menu-toggle*/
/*.rz-menu-toggle-item*/

.rz-title-column {
    text-transform: none !important;
}

.rz-column-title-content {
    text-transform: none !important;
}


.row {
    display: flex;
    margin: 0 !important; /* Remove margin */
    padding: 0 !important;
    align-items: stretch; /* Ensures items stretch to fill the row */
}

.footer-buttons {
    display: flex;
    justify-content: center;
}

.button-container {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap into multiple rows */
    justify-content: space-between; /* Evenly distributes space between buttons */
    max-width: 800px; /* Adjust the width to control how the buttons wrap */
    gap: 10px; /* Adds space between buttons */
}

    .button-container .rz-button {
        flex: 1 1 22%; /* Ensures 4 buttons per row; 22% width with gap spacing */
        box-sizing: border-box;
        background-color: white !important; /* White background */
        color: black !important; /* Adjust text color to black for contrast */
    }

.main-buttons {
    display: flex;
    flex-wrap: wrap; /* This allows the buttons to wrap into the next row */
    gap: 2px; /* Add space between the buttons */
    justify-content: left;
    /*  display: flex;
    justify-content: left;*/
    flex-direction: row;
    /*background-color: white !important;*/ /* White background */
    /*color: black !important;*/ /* Adjust text color to black for contrast */
}



.button-container2 {
    display: flex;
    /*flex-wrap: wrap;*/ /* Allows buttons to wrap into multiple rows */
    /*justify-content: space-between;*/ /* Evenly distributes space between buttons */
    /*max-width: 800px;*/ /* Adjust the width to control how the buttons wrap */
    gap: 10px; /* Adds space between buttons */
}

    .button-container2 .rz-button {
        flex: 1 1 22%; /* Ensures 4 buttons per row; 22% width with gap spacing */
        box-sizing: border-box;
        background-color: white !important; /* White background */
        color: black !important; /* Adjust text color to black for contrast */
    }



.col {
    margin: 0 !important; /* Remove margin */
    padding: 0 !important; /* Remove padding */
}

.e-chart {
    width: inherit !important;
    height: inherit !important;
}

/* Make the modal occupy the full screen */
/* Force full-screen and ignore parent transforms */
.full-screen-modal2 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(37, 211, 102, 0.5) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    z-index: 99999 !important; /* very high so nothing overlays it */
    overflow: auto !important;
}

/* Modal dialog wrapper */
.modal-full-width2 {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

/* Content */
.modal-content {
    height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}


.modal-header, .modal-body {
    width: 100%;
}

.modal-body {
    height: calc(100% - 56px); /* Adjust height to fill remaining space */
    overflow-y: auto !important; /* Enable scrolling if content overflows */
    padding: 10px; /* Optional padding for visual clarity */
    text-align: left; /* Aligns text and content to the left */
}

.modal {
    position: fixed;
    top: 0; /* Align to the top of the screen */
    left: 0; /* Align to the left side of the screen */
    width: 100% !important; /* Full width */
    height: 100% !important; /* Full height */
    padding: 20px;
    background-color: rgba(37, 211, 102, 0.5); /* Background for modal */
    box-shadow: none; /* Remove any extra shadow */
    z-index: 1050;
}

    .modal.show {
        display: block;
    }



.col-1.sidebar {
    width: 80px; /* Increased to accommodate the icon size and padding */
    padding: 10px; /* Padding for spacing around the icons */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar .material-icons {
    font-size: 45px; /* Ensuring the icons are 45px */
}

.main-content {
    padding: 0px; /* Adjust padding as needed */
    flex-grow: 1; /* Takes up the remaining space in the row */
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin-top: 0; /* Remove margin below the header */
}


.panel-menu {
    background-color: #128C7E !important;
    color: white !important;
}

    .panel-menu .navigation-menu .navigation-item-wrapper {
        background-color: #128C7E !important;
        color: white !important;
    }

.rz-panel-menu .rz-navigation-item-wrapper-active::before {
    content: none !Important;
}




/* Task Type */

.task-div-1 {
    border-left: 4px solid blue !important;
}

/* Task Personal Info */

.task-div-2 {
    border-left: 4px solid red !important;
}
/* Task Custom Fields */

.task-div-3 {
    border-left: 4px solid black !important;
}
/* Task Product Group */

.task-div-4 {
    border-left: 4px solid green !important;
}
/* Task Product Selection */

.task-div-5 {
    border-left: 4px solid lightblue !important;
}
/* Task Account Selection */

.task-div-6 {
    border-left: 4px solid aqua !important;
}
/* Task Coucher Selection like invoices quotations */

.task-div-7 {
    border-left: 4px solid aquamarine !important;
}
/* Task Subject and Message */

.task-div-8 {
    border-left: 4px solid blueviolet !important;
}

/* Task Save */
.task-div-9 {
    border-left: 4px solid darkblue !important;
}
/* Task pipeline or process sequence */

.task-div-10 {
    border-left: 4px solid darkcyan !important;
}
/* Task Assignment Followup */

.task-div-11 {
    border-left: 4px solid darkcyan !important;
}
/* Task Assignment Original Message FRame RadzenCard */
.task-div-12 {
    border-left: 4px solid darkcyan !important;
}
/* Task Assignment Assignment Frame RadzenCard */

.task-div-13 {
    border-left: 4px solid darkcyan !important;
}

/* Task Past Communication RadzenCard */

.task-div-14 {
    border-left: 4px solid darkcyan !important;
}

.task-div-15 {
    border-left: 4px solid darkcyan !important;
}

.task-div-16 {
    border-left: 4px solid blue !important;
}

.task-div-16 {
    border-left: 4px solid green !important;
}

.e-kanban .e-card-kanban-image {
    height: 45px;
    width: 45px;
    margin-left: 8px;
}

    .e-kanban .e-card-kanban-image img {
        height: inherit;
        width: inherit;
        border-radius: 50%;
    }

.e-kanban .e-card .e-card-tag-field {
    background: #000000;
    color: #FFFFFF;
    margin-right: 5px;
    line-height: 1.1;
    font-size: 13px;
    border-radius: 3px !important;
    padding: 4px;
}

.e-kanban-table {
     
    padding: 0px !important;
}



.e-kanban .e-card .e-card-header-title {
    background: #0047AB;
    color: #FFFFFF;
    margin-right: 5px;
    line-height: 1.1;
    font-size: 10px;
    border-radius: 0px !important;
    padding: 0.5em 0.8em; /* 5px top/bottom, 8px left/right */
}

.e-kanban .e-card .e-card-id-field {
    background: #0047AB;
    color: #FFFFFF;
    margin-right: 5px;
    line-height: 1.1;
    font-size: 13px;
    border-radius: 0px !important;
    padding: 0.5em 0.8em; /* 5px top/bottom, 8px left/right */
    display: inline-block; /* 👈 this is the key */
    width: auto; /* optional, but safe */
}

.e-kanban .e-card-custom-footer {
    display: flex;
    padding: 0.5em 0.8em; /* 5px top/bottom, 8px left/right */
    line-height: 1;
    height: 35px;
}

.e-kanban .e-card td {
    background-color: #fff;
}

.e-kanban .e-card .e-card-content {
    display: flex;
    justify-content: space-between;
}

.e-kanban .e-card .e-card-content {
    display: flex;
    flex-direction: column; /* Arrange content vertically */
    gap: 10px; /* Add some space between elements */
}

    .e-kanban .e-card .e-card-content .subject {
        font-weight: bold; /* Make the contact name bold */
        color: #007bff; /* Change the color to blue */
    }



    .e-kanban .e-card .e-card-content .contact-name {
        font-weight: bold; /* Make the contact name bold */
        color: #007bff; /* Change the color to blue */
    }

    .e-kanban .e-card .e-card-content .company-name {
        /*font-style: italic; Make the company name italic */
        color: #652986; /* Change the color to green */
    }

    .e-kanban .e-card .e-card-content .task-name {
        font-style: italic; /* Make the company name italic */
        color: #007bff; /* Change the color to blue */
    }

    .e-kanban .e-card .e-card-content .task-priority {
        /* font-style: italic;  Make the company name italic */
        color: #FA0404; /* Change the color to blue */
    }



    .e-kanban .e-card .e-card-content .task-date {
        font-style: italic; /* Make the company name italic */
        color: #0F2152; /* Change the color to blue */
    }

    .e-kanban .e-card .e-card-content .target-date {
        /*  font-style: italic;  Make the company name italic */
        color: #007bff; /* Change the color to blue */
    }



    .e-kanban .e-card .e-card-content .full-name {
        font-weight: bold; /* Make the contact name bold */
        /*  font-style: italic;  Make the company name italic */
        color: #28a745; /* Change the color to green */
    }
    .e-kanban .e-card .e-card-content  .tag-field {
        background: #000000;
        color: #FFFFFF;
        margin-right: 5px;
        line-height: 1.1;
        font-size: 13px;
        border-radius: 3px !important;
        padding: 4px;
    }


    .e-kanban .e-card .e-card-content .follow-up-remarks {
        color: #000000; /* Keep the color for follow-up remarks */
    }


/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

.login-page {

    background-color: aquamarine;
   

}

.loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Adjust this value to ensure it's on top of other elements */
}

    .loading-indicator img {
        width: 150px; /* Adjust the size as needed */
        height: 150px; /* Adjust the size as needed */
    }

.taskoriginalmessage {
    font-weight: bold;
    font-size: larger;
    color: blue;


}


.taskassignmentmessage {
    font-weight: bold;
    font-size: larger;
    color: blue;
}

.taskreplymessage {
    font-weight: bold;
    font-size: larger;
    color: blue;
}

.taskpastcommunication {
    font-weight: bold;
    font-size: larger;
    color: blue;
}

.taskcurrentresponse {
    font-weight: bold;
    font-size: larger;
    color: blue;
}

.taskreferences {
    font-weight: bold;
    font-size: larger;
    color: black;
}

.attachfiles {
    font-weight: bold;
    color: black;
}

.filesattached {
    font-weight: bold;
    color: black;
}





.div-likebutton {
    width: 100%;
    height: 40px;
    background-color: Teal;
    border: 1px solid Teal;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.div-buttonlike-text {
    margin-right: 10px;
    vertical-align: middle;
    font-weight: bold;
    color: white;
}


.div-likebutton2 {
    width: 100%;
    height: 40px;
    background-color: Navy;
    border: 1px solid Navy;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.div-buttonlike-text2 {
    margin-right: 10px;
    vertical-align: middle;
    font-weight: bold;
    color: white;
}


.div-likebutton3 {
    width: 100%;
    height: 40px;
    background-color: Teal;
    border: 1px solid Teal;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.div-buttonlike-text3 {
    margin-right: 10px;
    vertical-align: middle;
    font-weight: bold;
    color: white;
}


.div-likebutton4 {
    width: 100%;
    height: 40px;
    background-color: Navy;
    border: 1px solid Navy;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.div-buttonlike-text4 {
    margin-right: 10px;
    vertical-align: middle;
    font-weight: bold;
    color: white;
}

.e-gantt .e-gantt-chart .e-custom-holiday {
    background-color: #e82869;
}



.form-row {
    display: table-row;
    margin-bottom: 10px;
    padding-left: 10px !important;
    margin-left: 1.5rem;
    
}

.custom-image {
    width: 15rem; /* Adjust the width as per your requirement */
    height: auto; /* Maintains aspect ratio */
    border-radius: 5px; /* Optional: Adds rounded corners */
    margin: 0.5rem; /* Optional: Adds space around the image */
    object-fit: cover; /* Optional: Ensures the image fits nicely */
}

/* Full-screen overlay styling */
.fullscreen-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(37, 211, 102, 0.5);
    z-index: 9999;
    overflow: hidden;
}

.fullscreen-image {
    max-width: 90%; /* Ensure the image fits within the viewport */
    max-height: 90%;
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Optional: Add a shadow for better visibility */
    object-fit: contain; /* Preserve aspect ratio */
    cursor: pointer;
}

.assignment-button {
    background-color: black;
    color: red;
    font-weight: bold;
    font-size: larger;
}


.total-button {
    background-color: black;
    color: red;
    font-weight: bold;
    font-size: larger;
}



.e-panel-content {
    text-align: left;
    margin-top: 10px;
}




.e-dashboardlayout {
    padding: 20px;
    z-index: 0;
}

.e-panel {
    cursor: auto !important;
}

.e-panel-header {
    border: none !important;
    background-color: darkgreen;
    /* height: 40px !important; */
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    color: white;
    text-align: center !important;
    font-family: Verdana !important;
    font-size: 24px !important;
    vertical-align: middle !important;
}

.title {
    font-size: 15px;
    font-weight: bold;
    color: white;
}



/* Panel 1: Blue theme */
.panel1 .e-panel-container {
    background-color: #e3f2fd !important;
      /* Light blue */
    color: #0d47a1 !important;
     
    border-radius: 8px;
}

.panel1 .e-panel-header {
    background-color: #2196f3 !important; /* Blue */
    color: white !important;
    font-weight: bold;
    padding: 6px 10px;
    font-size: 16px;
}

/* Panel 2: Green theme */
.panel2 .e-panel-container {
    background-color: #e8f5e9 !important; /* Light green */
    color: #1b5e20 !important;
    border-radius: 8px;
}

.panel2 .e-panel-header {
    background-color: #4caf50 !important; /* Green */
    color: white !important;
    font-weight: bold;
    padding: 6px 10px;
    font-size: 16px;
}

/* Panel 3: Orange theme */
.panel3 .e-panel-container {
    background-color: #fff3e0 !important; /* Light orange */
    color: #e65100 !important;
    border-radius: 8px;
}

.panel3 .e-panel-header {
    background-color: #ff9800 !important; /* Orange */
    color: white !important;
    font-weight: bold;
    padding: 6px 10px;
    font-size: 16px;
}

/* Panel 4: Purple theme */
.panel4 .e-panel-container {
    background-color: #f3e5f5 !important; /* Light purple */
    color: #4a148c !important;
    border-radius: 8px;
}

.panel4 .e-panel-header {
    background-color: #9c27b0 !important; /* Purple */
    color: white !important;
    font-weight: bold;
    padding: 6px 10px;
    font-size: 16px;
}

/* Panel 5 - Red Theme */
.panel5 .e-panel-container {
    background-color: #ffebee !important; /* Light Red Content */
    color: #b71c1c !important; /* Deep Red Text */
    border-radius: 8px;
}

.panel5 .e-panel-header {
    background-color: #7B68EE  !important;/* Red Header */
    color: #ffffff !important;
    font-weight: bold;
    font-size: 16px;
    padding: 8px;
}

/* Panel 6 - Teal Theme */
.panel6 .e-panel-container {
    background-color: #e0f2f1 !important; /* Light Teal Content */
    color: #004d40 !important;
    border-radius: 8px;
}

.panel6 .e-panel-header {
    background-color: #009688 !important; /* Teal Header */
    color: #ffffff !important;
    font-weight: bold;
    font-size: 16px;
    padding: 8px;
}

/* Panel 7 - Amber Theme */
.panel7 .e-panel-container {
    background-color: #fff8e1 !important; /* Light Amber Content */
    color: #ff6f00 !important;
    border-radius: 8px;
}

.panel7 .e-panel-header {
    background-color: #ffc107 !important; /* Amber Header */
    color: #000000 !important;
    font-weight: bold;
    font-size: 16px;
    padding: 8px;
}

/* Panel 8 - Gray Theme */
.panel8 .e-panel-container {
    background-color: #f5f5f5 !important; /* Light Gray Content */
    color: #424242 !important;
    border-radius: 8px;
}

.panel8 .e-panel-header {
    background-color: #9e9e9e !important; /* Gray Header */
    color: #ffffff !important;
    font-weight: bold;
    font-size: 16px;
    padding: 8px;
}

ellipse[id*=_Trackball_1] {
    stroke-width: 1 !important;
    stroke: white !important;
}

.e-chart-focused:focus {
    outline: none !important;
}

#control-container {
    padding: 0px !important;
}

#gradient-chart stop {
    stop-color: #2485FA;
}

#gradient-chart1 stop {
    stop-color: #FEC200;
}

.centered-panel {
    display: flex;
    justify-content: left;
    align-items: center;
    height: 100%;
}


.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fullscreen-chart {
    width: 90vw;
    height: 90vh;
    background-color: white;
    border-radius: 8px;
    padding: 10px;
}

.panelchart {
    cursor: pointer;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
}

/* Prevent layout scroll */
.dashboard-wrapper {
    overflow-x: hidden !important;
}

/* Ensure dashboard fits container */
.dashboard-layout-full {
    width: 95 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#userMessageCard {
    min-height: 220px;
}
.login-wrapper {
    background-image: url('/Content/Images/login_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: calc(100vh - 65px);
    width: 100%;
    position: relative;
    overflow: hidden;
}



.login-form-top-right {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 320px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
}

.footer-bottom-left {
    position: absolute;
    bottom: 20px;
    left: 30px;
    color: #333;
    background-color: rgba(255, 255, 255);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
}
.logo-top-left {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 200px;
    height: 60px; /* Or as needed */
    background-image: url('/Content/Images/logo.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    background-color: transparent;
  
}
.register-scroll-wrapper {
    height: 90vh; /* Or a specific height like 600px */
    overflow-y: auto;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
}

hr.separator {
    width: 98%;
    margin: 1px auto;
    border-top: 1px solid #999999;
}


/* pill look */
.tag-pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    height: 32px;
    border-radius: 999px; /* fully rounded pill */
    border: 1px solid rgba(0,0,0,0.12);
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

    /* subtle hover raise */
    .tag-pill-button:hover {
        transform: translateY(-1px);
        background: rgba(0,0,0,0.02);
    }

    /* focus only shows a small outline, not the 'active' highlight */
    .tag-pill-button:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(100,150,220,0.12);
    }

    /* persistent highlight when tag exists in TaskTags */
    .tag-pill-button.selected-tag {
        background: #e8f4ff; /* light blue background */
        border-color: #7fb9ff; /* blue border */
        box-shadow: 0 2px 6px rgba(127,185,255,0.12);
        color: #0b577f; /* darker blue text for contrast */
    }

        /* keep keyboard accessibility (selected + focus) */
        .tag-pill-button.selected-tag:focus {
            box-shadow: 0 0 0 4px rgba(127,185,255,0.18);
        }

    /* small active feedback on press */
    .tag-pill-button:active {
        transform: translateY(0);
        opacity: 0.95;
    }


/* Minimal helper so very long filenames wrap instead of creating horizontal overflow.
     Remove this block entirely if you want *exactly* default browser behavior. */
.file-name-wrap {
    white-space: normal; /* allow wrapping */
    word-break: break-word; /* break long tokens if needed */
}

/* ============================================
   Syncfusion Chat — Final Unified CSS (copy-paste)
   Place in global CSS loaded AFTER Syncfusion CSS
   ============================================ */

/* -----------------------
   Base wrapper for our custom message items
   ----------------------- */
.e-chat .e-message-wrapper .custom-message-item,
.e-chat .custom-message-item,
.custom-message-item {
    display: flex !important;
    width: 100% !important;
    align-items: flex-start !important;
    margin: 2px 0 !important; /* compact vertical spacing */
    box-sizing: border-box !important;
}

    /* -----------------------
   Alignment: left = other users, right = logged-in user
   ----------------------- */
    .e-chat .e-message-wrapper .custom-message-item.custom-them,
    .custom-message-item.custom-them {
        justify-content: flex-start !important;
    }

    .e-chat .e-message-wrapper .custom-message-item.custom-me,
    .custom-message-item.custom-me {
        justify-content: flex-end !important;
    }

/* -----------------------
   Message wrapper area — ensure footer doesn't overlay messages
   ----------------------- */
.e-chat .e-message-wrapper {
    /* reserve space for the footer (adjust 90px if your footer height differs) */
    padding-bottom: 92px !important;
    box-sizing: border-box !important;
}

/* -----------------------
   Bubble skeleton — no neutral background; color comes from msg-status-*
   ----------------------- */
.e-chat .custom-message-bubble,
.custom-message-bubble {
    max-width: 95% !important; /* wide bubbles */
    padding: 8px 12px !important;
    margin: 0 6px !important; /* minimal horizontal gap */
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    line-height: 1.35 !important;
    color: inherit !important; /* text color controlled by msg-status */
    background: transparent !important; /* no neutral background; only msg-status applies */
}

/* -----------------------
   Sender (me) bubble shape and placement
   ----------------------- */
.e-chat .custom-message-item.custom-me .custom-message-bubble,
.custom-message-item.custom-me .custom-message-bubble {
    text-align: right !important;
    border-radius: 12px 12px 12px 4px !important;
    margin-left: auto !important;
    margin-right: 6px !important;
}

/* -----------------------
   Receiver (other) bubble shape and placement
   ----------------------- */
.e-chat .custom-message-item.custom-them .custom-message-bubble,
.custom-message-item.custom-them .custom-message-bubble {
    text-align: left !important;
    border-radius: 12px 12px 4px 12px !important;
    margin-right: auto !important;
    margin-left: 6px !important;
}

/* -----------------------
   Ensure Syncfusion's inner .e-text does not interfere
   ----------------------- */
.e-chat .e-text,
.e-text {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* -----------------------
   Collapse empty blocks inserted by HTML editors (avoid blank lines)
   ----------------------- */
.e-chat .custom-text > div:empty,
.custom-text > div:empty,
.e-chat .custom-text > p:empty,
.custom-text > p:empty,
.e-chat .custom-text > br,
.custom-text > br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* -----------------------
   Message text formatting
   ----------------------- */
.e-chat .custom-text,
.custom-text {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    white-space: pre-wrap !important;
    display: block !important;
    word-break: break-word !important;
}

/* -----------------------
   Meta row (author + timestamp) — tighten spacing
   ----------------------- */
.e-chat .custom-meta,
.custom-meta {
    font-size: 0.82rem !important;
    margin-bottom: 0 !important; /* remove big gap before text */
    color: #444 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.e-chat .custom-time,
.custom-time {
    font-size: 0.75rem !important;
    color: #666 !important;
    opacity: 0.85 !important;
}

/* -----------------------
   Status line — ensure visible and block-level
   ----------------------- */
.e-chat .custom-msg-status,
.custom-msg-status {
    display: block !important; /* ensure it occupies line */
    margin-top: 4px !important;
    font-size: 0.75rem !important;
    color: #333 !important;
    opacity: 0.95 !important;
    text-align: right !important;
}

/* -----------------------
   Make sure last message has extra bottom margin so status not obscured
   ----------------------- */
.e-chat .e-message-wrapper .custom-message-item:last-child .custom-message-bubble,
.custom-message-item:last-child .custom-message-bubble {
    margin-bottom: 18px !important;
}

/* -----------------------
   MessageType backgrounds — ONLY these apply (Alert / Info / Warning)
   ----------------------- */

/* ALERT */
.e-chat .custom-message-item.msg-status-alert .custom-message-bubble,
.custom-message-item.msg-status-alert .custom-message-bubble {
    background-color: #fff3cd !important; /* light yellow */
    color: #856404 !important;
}

/* INFO */
.e-chat .custom-message-item.msg-status-info .custom-message-bubble,
.custom-message-item.msg-status-info .custom-message-bubble {
    background-color: #d1ecf1 !important; /* light blue */
    color: #0c5460 !important;
}

/* WARNING */
.e-chat .custom-message-item.msg-status-warning .custom-message-bubble,
.custom-message-item.msg-status-warning .custom-message-bubble {
    background-color: #f8d7da !important; /* light red/pink */
    color: #721c24 !important;
}

/* -----------------------
   Hover effect
   ----------------------- */
.e-chat .custom-message-bubble:hover,
.custom-message-bubble:hover {
    transform: scale(1.01);
    transition: transform 0.12s ease-in-out;
}

/* -----------------------
   Responsive tweak for narrow screens
   ----------------------- */
@media (max-width: 480px) {
    .e-chat .custom-message-bubble,
    .custom-message-bubble {
        max-width: calc(100% - 40px) !important;
        padding: 8px 10px !important;
    }
}
/* ---------- FORCE modal to viewport (high specificity + !important) ---------- */
.modal.fade.show.full-screen-modal2,
.full-screen-modal2.modal.fade.show {
    position: fixed !important; /* fixed to viewport */
    inset: 0 !important; /* top:0; right:0; bottom:0; left:0; */
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    z-index: 99999 !important; /* above almost everything */
    overflow: auto !important;
    background-color: rgba(37, 211, 102, 0.5) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
}

/* Force the modal dialog to occupy the viewport area */
.modal-full-width2,
.modal-dialog.modal-full-width2 {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: stretch !important; /* allow header/body to fill vertically */
}

/* Ensure modal-content fills dialog */
.modal-content {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Keep header visible and pinned to top of modal */
.modal-header {
    flex: 0 0 auto !important;
    z-index: 100000 !important;
}

/* Modal body should scroll internally if content larger than viewport */
.modal-body {
    flex: 1 1 auto !important;
    overflow: auto !important;
}

/* Ensure all interactive elements inside modal receive pointer events */
.full-screen-modal2 button,
.full-screen-modal2 input,
.full-screen-modal2 select,
.full-screen-modal2 textarea,
.full-screen-modal2 .rz-button {
    pointer-events: auto !important;
}

    /* Ensure close button shows above everything and is clickable */
    .full-screen-modal2 .close,
    .full-screen-modal2 .rz-button[title="Close"],
    .full-screen-modal2 .rz-button[title="Save Image"],
    .full-screen-modal2 .help-button {
        position: relative !important;
        z-index: 100001 !important;
    }

/* ---------- TEMPORARY: Neutralize inline parent transforms that break position:fixed ----------
   This targets elements that have inline 'transform' styles and forces them off.
   Use this temporarily for debugging or until you remove transforms from parent containers.
*/
*[style*="transform"] {
    transform: none !important;
    will-change: auto !important;
}

/* Also neutralize common CSS properties that create containing blocks for fixed elements */
*[style*="filter"],
*[style*="perspective"],
*[style*="backdrop-filter"] {
    filter: none !important;
    perspective: none !important;
    backdrop-filter: none !important;
}

/* ---------- Optional: if you want top-aligned (not vertically centered) body content ----------
   Remove align-items:center from .modal-full-width2 and force content to start at top:
*/
.modal-full-width2.align-top,
.modal-full-width2.top-aligned {
    align-items: flex-start !important;
}

/* ---------- Helpful debug outlines (comment out in production) ----------
.full-screen-modal2 { outline: 2px dashed rgba(255,0,0,0.25) !important; }
*/