@media(min-width:768px) {
    .navbar .container-fluid {
        padding-right: 30px;
        padding-left: 30px;
    }
}

@media(min-width:768px) and (max-width:1300px)
{
    /*.btn {
        font-size:10px;
    }*/
    .table *{
        font-size:12px;
    }
    .card.file-selectcard{
        padding:0px;
    }
        .card.file-selectcard .card-body{
            padding:8px;
        }
        .userlist .btn{
            font-size:12px;
        }
        .fs-15{
            font-size:11px!important
        }
    .custom-radio{
        font-size:8px;
        padding-left:25px;
    }
        .custom-radio .checkmark:after{
            top:3px;
            left:3px;
        }
        .fs-small {
            font-size: 10px !important;
        }
    .nav-pills .nav-link{
        font-size:10px;
        padding:0.2rem .5rem;
    }
    .chats .text{
        padding:10px;
        font-size:10px;
    }
    .card-alert p{
        font-size:8px;
    }
    .card-alert{
        padding:10px;
    }
    /*.form-control{
        font-size:.5rem
    }*/
    .step1filesList .fileName, .filesList .fileName{
        word-break:break-all;
    }
    .selectFileDropdown .custom-checkbox{
        padding-left:18px;
        font-size:10px;
    }
    .selectFileDropdown .custom-checkbox img{
        width:15px
    }
    .selectFileDropdown .dropdown-item {
        font-size: 10px;
        padding: .25rem .25rem;
    }
    .selectFileDropdown .dropdown-item  span{
        font-size:10px;
    }
    .custom-checkbox .checkmark {
        top: 3px;
        left: 0;
        height: 15px;
        width: 15px;
    }
        .custom-checkbox .checkmark:after {
            left: 5px;
            top: -6px;
            width: 6px;
            height: 15px;
        }
        .selectFileDropdown .dropdown-item > div:first-child{
            align-items:baseline;
        }
    .chat-icon-1 {
        position: absolute;
        top: 5px;
        right: 54px;
        width: 15px;
    }
    .chat-icon-2 {
        position: absolute;
        top: 5px;
        right: 35px;
        width: 15px;
    }
    .home-main .chat-card{
        padding:5px;
    }
    .home-main .chat-card .card-body, .home-main .chat-card .card-footer{
        padding:5px;
    }
}
@media(min-width:1600px)
{
    .name{
        font-size:18px;
    }
    .email{
        font-size:13px;
    }
}

@media(max-width:786px){
    body.account-layout {
        overflow: auto;
    }

    .accountdivmain {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

        .accountdivmain .account-image-div {
            flex: 0 0 100%;
            max-width: 100%;
            width: 100%;
        }

        .accountdivmain .account-inputs-div {
            max-width: 100%;
            width: 100%;
            height: auto;
            padding: 40px 20px;
            overflow: visible;
        }
}

/* ========== Left Chat / AiSearch ========== */
@media (max-width: 767.98px) {
    .resp-left-col,
    #AiSearch.resp-left-col {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .resp-left-col.stickyChat,
    #AiSearch.stickyChat {
        max-width: 100%;
        width: 100%;
    }
}

/* ========== Inline expandable search (main-card tables) ========== */
.resp-inline-search.customSearch {
    display: inline-flex !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.resp-inline-search {
    display: inline-flex;
    vertical-align: middle;
    overflow: visible;
    padding-top: 2px;
    padding-bottom: 2px;
}

.resp-inline-search-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    overflow: visible;
    background: transparent;
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.resp-inline-search.customSearch.ShowSearch .resp-inline-search-pill {
    max-width: min(320px, 72vw);
    overflow: hidden;
    border-color: #E0E0E0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.resp-inline-search-trigger {
    width: auto;
    min-width: 42px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.resp-inline-search.customSearch.ShowSearch .resp-inline-search-trigger {
    width: 0;
    min-width: 0;
    opacity: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    pointer-events: none;
    transition: width 0.2s ease, opacity 0.2s ease;
}

.resp-inline-search-expanded {
    display: flex;
    align-items: center;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease 0.05s;
}

.resp-inline-search.customSearch.ShowSearch .resp-inline-search-expanded {
    width: 260px;
    opacity: 1;
}

.resp-inline-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 240px;
    padding: 4px 10px 4px 12px;
}

.resp-inline-search-leading-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.resp-inline-search-input {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 12px;
    line-height: 1.4;
}

.resp-inline-search-close {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.resp-inline-search-close img {
    width: 18px;
    height: 18px;
}

/*
 * Authenticated application responsive audit (2026-06-24)
 * - Header menus and custom dialogs use desktop widths that can exceed a tablet/mobile viewport.
 * - List-page toolbars need controlled wrapping; data tables need a reliable horizontal scroll boundary.
 * - Sticky chat, main content, and activity panels need to stack below the desktop grid breakpoint.
 * - Long document/task names and generated Select2 controls need safe shrink/wrap behavior.
 *
 * These rules are intentionally scoped to .authenticated-app. The class is only emitted for signed-in
 * users, and every layout change is inside max-width media queries so the approved desktop remains intact.
 */
@media (max-width: 1024px) {
    body.authenticated-app {
        overflow-x: hidden;
    }

    .authenticated-app .MainBodyDiv,
    .authenticated-app .home-main,
    .authenticated-app .home-main > .row,
    .authenticated-app #mainDiv,
    .authenticated-app #RightDiv,
    .authenticated-app #RightDiv2,
    .authenticated-app #AiSearch {
        min-width: 0;
        max-width: 100%;
    }

    .authenticated-app .home-main {
        width: 100%;
        height: auto;
        min-height: calc(100vh - 77px);
        padding: 12px;
        overflow: visible;
    }

    .authenticated-app .home-main > .row {
        margin-right: 0;
        margin-left: 0;
    }

    .authenticated-app .responsive-page-toolbar {
        flex-wrap: wrap;
        gap: 12px;
    }

    .authenticated-app .responsive-page-toolbar > * {
        min-width: 0;
        max-width: 100%;
    }

    .authenticated-app .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .authenticated-app .fileName,
    .authenticated-app .file-name,
    .authenticated-app .file-names,
    .authenticated-app .document-name,
    .authenticated-app .task-name {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .authenticated-app .select2-container {
        max-width: 100%;
    }

    .authenticated-app .modal-dialog {
        width: auto;
        max-width: calc(100vw - 32px);
        margin-right: auto;
        margin-left: auto;
    }

    .authenticated-app .navbar .dropdown-menu,
    .authenticated-app .menu-user-list,
    .authenticated-app .notifiction-dropdown,
    .authenticated-app .dropdown-menu-Notes,
    .authenticated-app .dropdown-login {
        max-width: calc(100vw - 24px);
    }

    .authenticated-app .resp-inline-search.customSearch.ShowSearch .resp-inline-search-pill {
        max-width: min(320px, calc(100vw - 48px));
    }

    /* Keep the chat header usable when the tablet column becomes narrow. */
    .authenticated-app #AiSearch .chat-header-buttons {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        gap: 8px;
        padding: 10px 12px 0;
    }

    /* The user-chat toolbar uses the same desktop overlay pattern as Katie's
       header. Keep it in normal flow on narrow laptop screens so it cannot
       overlap the Katie / Team Chat tab row. */
    .authenticated-app #AiSearch .uc-conv-toolbar {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        flex-shrink: 0;
        gap: 8px;
        padding: 10px 12px 0;
    }

    .authenticated-app #AiSearch .uc-conv-toolbar-title {
        min-width: 0;
    }

    .authenticated-app #AiSearch .uc-conv-toolbar-actions {
        flex-shrink: 0;
    }

    .authenticated-app #AiSearch .chat-header-buttons .header-sticker {
        min-width: 0;
        gap: 6px;
    }

    .authenticated-app #AiSearch .chat-header-buttons .header-sticker-info {
        width: auto !important;
        min-width: 0;
    }

    .authenticated-app #AiSearch .chat-header-buttons .header-actions {
        flex-shrink: 0;
    }

    .authenticated-app #AiSearch .new-chat-btn {
        white-space: nowrap;
    }

    .authenticated-app #AiSearch .chat-tab {
        min-width: 0;
    }
}

/* Tablet/small-laptop split: keep chat beside the document when present, then
   place activity/share panels on their own full-width rows below it. */
@media (min-width: 769px) and (max-width: 1024px) {
    .authenticated-app .home-main > .row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .authenticated-app #AiSearch.stickyChat {
        flex: 0 0 280px;
        width: 280px;
        max-width: 280px;
    }

    .authenticated-app #mainDiv {
        position: static;
        flex: 1 1 0;
        width: auto;
        max-width: 100%;
    }

    .authenticated-app #mainDiv > .main-card {
        position: static;
    }

    .authenticated-app #RightDiv,
    .authenticated-app #RightDiv2 {
        position: static;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        margin-top: 12px;
    }

    .authenticated-app #RightDiv > .card,
    .authenticated-app #RightDiv2 > .card {
        position: static;
        width: 100%;
    }
}

/* Mobile navbar: open from the left as a labelled navigation sidebar. */
.mobile-nav-close,
.mobile-nav-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .authenticated-app .homeNav .container-fluid {
        flex-wrap: nowrap;
    }

    .authenticated-app .homeNav .mobile-navbar-actions {
        display: flex;
        align-items: center;
        margin: 0 4px 0 auto;
        padding: 0;
        list-style: none;
        gap: 2px;
    }

    .authenticated-app .homeNav .mobile-navbar-actions > .nav-item {
        flex: 0 0 auto;
        width: auto;
    }

    .authenticated-app .homeNav .mobile-navbar-actions .nav-link {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        min-height: 40px;
        padding: 4px 5px;
    }

        .authenticated-app .homeNav .mobile-navbar-actions #notificationCount {
            top: 5px !important;
            right: -3px;
            left: auto !important;
            transform: translate(9%, -68%) !important;
        }

    .authenticated-app .homeNav .mobile-navbar-actions .nav-link::after,
    .authenticated-app .homeNav .mobile-navbar-actions .dropdown[data-mobile-label]::after {
        display: none;
    }

    .authenticated-app .homeNav .mobile-navbar-actions .dropdown {
        position: relative;
        display: block;
        width: auto;
    }

    .authenticated-app .homeNav .mobile-navbar-actions .dropdown-menu.show {
        position: fixed !important;
        top: 70px !important;
        right: 8px !important;
        bottom: auto !important;
        left: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 76px);
        margin: 0 !important;
        overflow-y: auto;
        transform: none !important;
    }

    .authenticated-app .homeNav .navbar-collapse {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100%;
        z-index: 1080;
        display: block !important;
        width: min(360px, 86vw);
        height: 100vh !important;
        height: 100dvh !important;
        padding: 72px 20px 24px;
        overflow-y: auto;
        visibility: hidden;
        background: #fff;
        box-shadow: 12px 0 32px rgba(15, 23, 42, 0.18);
        transition: left 0.25s ease, visibility 0.25s ease;
    }

    .authenticated-app .homeNav .navbar-collapse.show,
    .authenticated-app .homeNav .navbar-collapse.collapsing {
        visibility: visible;
        left: 0;
    }

    .authenticated-app .homeNav .mobile-nav-close {
        position: absolute;
        top: 20px;
        right: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        color: #424242;
        background: transparent;
        font-size: 24px;
    }

    .authenticated-app .homeNav .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 0 !important;
        gap: 4px;
    }

    .authenticated-app .homeNav .navbar-nav > .nav-item,
    .authenticated-app .homeNav .navbar-nav > .nav-item > .dropdown {
        width: 100%;
    }

    .authenticated-app .homeNav .navbar-nav > .nav-item > .nav-link,
    .authenticated-app .homeNav .navbar-nav > .nav-item > .dropdown > .nav-link {
        display: flex !important;
        align-items: center;
        width: 100%;
        min-height: 52px;
        padding: 10px 14px;
        border-radius: 6px;
        gap: 16px;
    }

    .navbar-light .navbar-toggler {
        color: rgba(0, 0, 0, .55);
        border: none !important; 
        padding: 0px;
    }

    .authenticated-app .homeNav .navbar-nav > .nav-item > .nav-link > span[title] {
        display: flex !important;
        align-items: center;
        width: 100%;
        gap: 16px;
    }

    .authenticated-app .homeNav .navbar-nav > .nav-item > .nav-link > span[title]::after,
    .authenticated-app .homeNav .nav-link[data-mobile-label]::after,
    .authenticated-app .homeNav .navbar-nav > .nav-item > .dropdown[data-mobile-label]::after {
        content: attr(title);
        color: #424242;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
    }

    .authenticated-app .homeNav .nav-link[data-mobile-label]::after,
    .authenticated-app .homeNav .navbar-nav > .nav-item > .dropdown[data-mobile-label]::after {
        content: attr(data-mobile-label);
    }

    .authenticated-app .homeNav .nav-link[data-mobile-label] > span[title]::after {
        content: none;
    }

    .authenticated-app .homeNav .navbar-nav > .nav-item > .dropdown[data-mobile-label] {
        position: relative;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .authenticated-app .homeNav .navbar-nav > .nav-item > .dropdown[data-mobile-label] > .nav-link {
        flex: 0 0 auto;
        width: auto;
    }

    /* Large navbar dropdowns use the viewport on mobile instead of being
       constrained and clipped by the navigation drawer. */
    .authenticated-app .homeNav .navbar-nav > .nav-item.dropdown > .dropdown-menu.show,
    .authenticated-app .homeNav .navbar-nav > .nav-item > .dropdown > .dropdown-menu.show {
        position: fixed !important;
        top: 68px !important;
        right: 12px !important;
        bottom: 12px !important;
        left: 12px !important;
        z-index: 1095;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100dvh - 80px);
        margin: 0 !important;
        overflow-y: auto;
        transform: none !important;
    }

    .authenticated-app .homeNav .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1075;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, 0.42);
    }

    body.mobile-nav-open .homeNav .mobile-nav-backdrop {
        display: block;
    }

    body.mobile-nav-open {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .authenticated-app .home-main {
        height: auto;
        min-height: calc(100vh - 70px);
        min-height: calc(100dvh - 70px);
        padding: 10px;
    }

    .authenticated-app .home-main > .row {
        row-gap: 12px;
    }

    .authenticated-app #mainDiv,
    .authenticated-app #RightDiv,
    .authenticated-app #RightDiv2,
    .authenticated-app #AiSearch,
    .authenticated-app .stickyChat {
        position: static;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .authenticated-app .main-card,
    .authenticated-app .home-main .chat-card,
    .authenticated-app .activity-sidebar-card,
    .authenticated-app #RightDiv > .card:first-child,
    .authenticated-app #RightDiv2 > .card:first-child {
        position: static;
        width: 100%;
        height: auto !important;
        min-height: 0;
        max-height: none !important;
    }

    .authenticated-app .responsive-page-toolbar {
        align-items: stretch !important;
    }

    .authenticated-app .responsive-page-toolbar > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .authenticated-app .table-responsive {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .authenticated-app .table-responsive > .table,
    .authenticated-app .table-responsive .dt-layout-table > .table {
        min-width: 680px;
    }

    .authenticated-app .dt-container .row,
    .authenticated-app .dt-container .dt-layout-row {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .authenticated-app .nav-tabs,
    .authenticated-app .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .authenticated-app .modal-dialog {
        max-width: calc(100vw - 16px);
        margin: 8px auto;
    }

    .authenticated-app .modal-content {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        overflow: hidden;
    }

    .authenticated-app .modal-body {
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .authenticated-app .modal-body .row > [class*="col-md-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .authenticated-app .navbar .dropdown-menu,
    .authenticated-app .menu-user-list,
    .authenticated-app .notifiction-dropdown,
    .authenticated-app .dropdown-menu-Notes,
    .authenticated-app .dropdown-login {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }

    .authenticated-app .notifiction-dropdown .nav-tabs {
        overflow-x: auto;
    }

    .authenticated-app #uploaddiv .dropstart > .dropdown-menu {
        top: 100%;
        right: auto;
        left: 0;
        max-width: calc(100vw - 32px);
    }

    .authenticated-app .dropdown-filter {
        width: min(240px, calc(100vw - 24px)) !important;
        max-height: min(360px, calc(100dvh - 32px));
        overflow-y: auto;
    }
}

@media (max-width: 576px) {
    .authenticated-app .navbar-brand img {
        max-width: 140px;
    }

    .authenticated-app .home-main {
        padding: 8px;
    }

    .authenticated-app .main-card > .card-body {
        padding: 12px;
    }

    .authenticated-app .responsive-page-toolbar > * {
        flex: 0 0 100%;
        width: 100%;
    }

    .authenticated-app .responsive-page-toolbar .resp-inline-search,
    .authenticated-app .responsive-page-toolbar .resp-inline-search-pill,
    .authenticated-app .responsive-page-toolbar .resp-inline-search-expanded,
    .authenticated-app .responsive-page-toolbar .resp-inline-search-field {
        max-width: 100%;
    }

    .authenticated-app .responsive-page-toolbar .resp-inline-search.customSearch.ShowSearch .resp-inline-search-expanded {
        width: min(260px, calc(100vw - 48px));
    }

    .authenticated-app .table-responsive > .table,
    .authenticated-app .table-responsive .dt-layout-table > .table {
        min-width: 620px;
    }

    .authenticated-app .modal-header,
    .authenticated-app .modal-body,
    .authenticated-app .modal-footer {
        padding-right: 12px;
        padding-left: 12px;
    }

    .authenticated-app .modal-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

    .authenticated-app .modal-footer > .btn {
        margin: 0;
    }

    .authenticated-app .personal-note-reminder-popup {
        min-width: 0;
        width: calc(100vw - 16px);
    }

    .chat-tab-bar {
        margin-top: 0px;
    }
}

/* Chat becomes an off-canvas drawer on tablets and small laptops. */
@media (max-width: 1024px) {
    .authenticated-app #minList {
        display: list-item;
    }

    .authenticated-app #AiSearch.stickyChat {
        position: fixed;
        top: 77px;
        bottom: 0;
        left: 50%;
        z-index: 1055;
        display: block;
        flex: none;
        width: min(500px, calc(100vw - 32px));
        max-width: min(500px, calc(100vw - 32px));
        height: auto;
        padding: 12px;
        transform: translateX(-50%);
    }

    .authenticated-app #AiSearch.stickyChat.d-none {
        display: none;
    }

    .authenticated-app #AiSearch .chat-card {
        position: relative;
        top: auto;
        width: 100%;
        height: 100% !important;
        max-height: none !important;
        border: 1px solid #F57C00;
        box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22);
    }

    /* Preserve the large-screen chat header layout inside the wider drawer. */
    .authenticated-app #AiSearch .chat-header-buttons,
    .authenticated-app #AiSearch .uc-conv-toolbar,
    .authenticated-app #AiSearch .uc-new-chat-header {
        position: absolute;
        top: 10px;
        right: 20px;
        left: 20px;
        padding: 0;
    }

    .authenticated-app #AiSearch .minimize-on-hover {
        opacity: 1;
        max-width: 30px;
        margin-left: 8px;
    }

    .authenticated-app #mainDiv {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .chat-drawer-backdrop {
        position: fixed;
        inset: 77px 0 0;
        z-index: 1050;
        display: block;
        width: 100%;
        height: auto;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, 0.34);
        cursor: default;
    }

    .chat-drawer-backdrop.d-none {
        display: none;
    }

    body.chat-drawer-open {
        overflow: hidden;
    }

    .chat-tab-bar {
        margin-top: 40px;
    }
}

/* Keep navbar actions horizontal on tablets and small laptops. Bootstrap's
   navbar-expand-lg otherwise collapses them below 992px. */
@media (min-width: 769px) and (max-width: 1024px) {
    .authenticated-app .homeNav .navbar-toggler {
        display: none;
    }

    .authenticated-app .homeNav .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        align-items: center;
        width: auto;
    }

    .authenticated-app .homeNav .navbar-nav {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .authenticated-app .homeNav .navbar-nav > .nav-item {
        flex: 0 0 auto;
    }
}