/*
 * Grow CRM responsive overrides
 *
 * Loaded after the selected theme and before public/css/custom.css.
 * Desktop layouts from 992px upwards remain unchanged.
 */

/* Smartphone and tablet: 0-991px */
@media screen and (max-width: 991.98px) {

    .docs-main-wrapper {
        max-width: 100%;
        min-width: 0;
    }

    .docs-main-wrapper .doc-body {
        min-width: 0;
        padding: 24px;
        overflow-wrap: anywhere;
    }

    .docs-main-wrapper .doc-to-by-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .docs-main-wrapper .doc-to-by-container .doc-to-by .x-title {
        overflow-wrap: anywhere;
    }

    .docs-main-wrapper .doc-dates-container .doc-dates-wrapper {
        padding-left: 24px;
        padding-right: 24px;
    }

    /*
     * Keep all billing columns.
     * The table scrolls inside the document instead of widening the page.
     */
    .docs-main-wrapper .doc-body .embedded-bill .invoice-table-wrapper {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
}


/* Smartphone: 0-767px */
@media screen and (max-width: 767.98px) {

    .docs-main-wrapper {
        margin-top: 15px;
    }

    .docs-main-wrapper .doc-body {
        padding: 15px;
    }

    /* Document hero */
    .docs-main-wrapper .header-cover,
    .docs-main-wrapper .doc-hero-header {
        height: 150px;
    }

    .docs-main-wrapper .doc-hero-header {
        padding-top: 36px;
    }

    .docs-main-wrapper .doc-hero-header .main-heading {
        font-size: 26px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .docs-main-wrapper .doc-hero-header .main-title {
        padding-right: 15px;
        padding-left: 15px;
        font-size: 16px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    /* Service provider and client */
    .docs-main-wrapper .doc-to-by-container {
        margin-top: 20px;
        margin-bottom: 24px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .docs-main-wrapper .doc-to-by-container > .row > .col-12 + .col-12 {
        margin-top: 24px;
    }

    .docs-main-wrapper .doc-to-by-container .doc-to-by.text-right {
        text-align: left !important;
    }

    /* Proposal dates, ID and status */
    .docs-main-wrapper .doc-dates-container {
        margin-top: 20px;
    }

    .docs-main-wrapper .doc-dates-container .doc-dates-wrapper {
        padding: 15px 20px;
    }

    .docs-main-wrapper .doc-dates-wrapper > .pull-left,
    .docs-main-wrapper .doc-dates-wrapper > .pull-right {
        float: none !important;
        width: 100%;
        max-width: 100%;
        text-align: left !important;
    }

    .docs-main-wrapper .doc-dates-wrapper > .pull-right {
        margin-top: 15px;
    }

    .docs-main-wrapper .doc-dates-wrapper > .pull-left > table,
    .docs-main-wrapper .doc-dates-wrapper > .pull-right > table {
        width: 100%;
    }

    .docs-main-wrapper .doc-dates-wrapper td {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .docs-main-wrapper .doc-dates-wrapper .x-left-date,
    .docs-main-wrapper .doc-dates-wrapper .x-left-id,
    .docs-main-wrapper .doc-dates-wrapper .x-right-status {
        padding-left: 12px !important;
    }

    /* Embedded pricing table */
    .docs-main-wrapper .doc-body .embedded-bill > .col-12 {
        padding-right: 0;
        padding-left: 0;
    }

    .docs-main-wrapper .doc-body .embedded-bill #bill-totals-wrapper > .pull-left,
    .docs-main-wrapper .doc-body .embedded-bill #bill-totals-wrapper > .pull-right {
        float: none !important;
        width: 100%;
        max-width: 100%;
    }

    .docs-main-wrapper .doc-body .embedded-bill #bill-totals-wrapper > .pull-right {
        margin-left: 0;
    }

    .docs-main-wrapper .doc-body .embedded-bill .invoice-total-table {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Preview footer buttons */
    .docs-main-wrapper #invoice-buttons-container > .text-right {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: left !important;
    }

    .docs-main-wrapper #invoice-buttons-container .btn {
        display: block;
        width: 100%;
        margin: 0 0 8px;
        white-space: normal;
    }

    /* Public proposal header buttons */
    .container-fluid.proposal .docs-heading-wrapper > .row > .col-4,
    .container-fluid.proposal .docs-heading-wrapper > .row > .col-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .container-fluid.proposal .docs-heading-wrapper .logo {
        margin-bottom: 12px;
    }

    .container-fluid.proposal .docs-heading-wrapper .actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-top: 0;
        text-align: left;
    }

    .container-fluid.proposal .docs-heading-wrapper .actions .btn {
        display: block;
        width: 100%;
        margin: 0 0 8px;
        white-space: normal;
    }
}

/* --------------------------------------------------------------------------
 * Mobile document billing table
 * Keep columns readable and allow horizontal touch scrolling.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .docs-main-wrapper .doc-body .embedded-bill .invoice-table {
        width: 760px;
        min-width: 760px;
    }

    .docs-main-wrapper .doc-body .embedded-bill .invoice-table .bill_col_description {
        width: 300px;
        min-width: 300px;
    }

    .docs-main-wrapper .doc-body .embedded-bill .invoice-table .bill_col_quantity {
        width: 90px;
        min-width: 90px;
        white-space: nowrap;
    }

    .docs-main-wrapper .doc-body .embedded-bill .invoice-table .bill_col_unit {
        width: 110px;
        min-width: 110px;
        white-space: nowrap;
    }

    .docs-main-wrapper .doc-body .embedded-bill .invoice-table .bill_col_rate {
        width: 120px;
        min-width: 120px;
        white-space: nowrap;
    }

    .docs-main-wrapper .doc-body .embedded-bill .invoice-table .bill_col_total {
        width: 120px;
        min-width: 120px;
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
 * Mobile document billing table swipe hint
 * -------------------------------------------------------------------------- */

.document-table-swipe-hint {
    display: none;
}

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

    .docs-main-wrapper .document-table-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        margin: 4px 0 8px;
        padding-right: 4px;
        font-size: 12px;
        line-height: 1.4;
        color: #8a969f;
        user-select: none;
        pointer-events: none;
    }

    .docs-main-wrapper .document-table-swipe-icon {
        display: inline-block;
        font-size: 16px;
        animation: document-table-swipe 1.6s ease-in-out infinite;
    }

    @keyframes document-table-swipe {
        0%, 100% {
            transform: translateX(-4px);
        }

        50% {
            transform: translateX(5px);
        }
    }
}

@media print {
    .document-table-swipe-hint {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
 * Mobile swipe hint - highlighted version below pricing total
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .docs-main-wrapper .document-table-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: fit-content;
        max-width: 100%;
        margin: 12px auto 0;
        padding: 8px 14px;
        border: 1px solid rgba(54, 132, 255, 0.25);
        border-radius: 20px;
        background: rgba(54, 132, 255, 0.07);
        color: #3684ff;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
        user-select: none;
        pointer-events: none;
    }

    .docs-main-wrapper .document-table-swipe-icon {
        display: inline-block;
        font-size: 24px;
        line-height: 1;
        font-weight: 600;
        animation: document-table-swipe-highlight 1.5s ease-in-out infinite;
    }

    @keyframes document-table-swipe-highlight {
        0%, 100% {
            transform: translateX(-5px);
        }

        50% {
            transform: translateX(7px);
        }
    }
}

/* Fine tune swipe icon vertical alignment */
@media screen and (max-width: 767.98px) {
    .docs-main-wrapper .document-table-swipe-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        position: relative;
        top: -2px;
    }
}

/* Align document detail value columns on mobile */
@media screen and (max-width: 767.98px) {

    .docs-main-wrapper .doc-dates-wrapper .x-left-lang,
    .docs-main-wrapper .doc-dates-wrapper .x-right-lang {
        width: 205px;
        min-width: 205px;
    }

    .docs-main-wrapper .doc-dates-wrapper .x-left-date,
    .docs-main-wrapper .doc-dates-wrapper .x-left-id,
    .docs-main-wrapper .doc-dates-wrapper .x-right-status {
        padding-left: 12px !important;
    }
}

/* Mobile document details: balanced label/value columns */
@media screen and (max-width: 767.98px) {

    .docs-main-wrapper .doc-dates-wrapper .x-left-lang,
    .docs-main-wrapper .doc-dates-wrapper .x-right-lang {
        width: 55%;
        min-width: 0;
    }

    .docs-main-wrapper .doc-dates-wrapper .x-left-date,
    .docs-main-wrapper .doc-dates-wrapper .x-left-id,
    .docs-main-wrapper .doc-dates-wrapper .x-right-status {
        width: 45%;
        min-width: 0;
        padding-left: 12px !important;
    }

    .docs-main-wrapper .doc-dates-wrapper .x-left-date span,
    .docs-main-wrapper .doc-dates-wrapper .x-left-id span {
        white-space: nowrap;
    }

    .docs-main-wrapper .doc-dates-wrapper .x-right-status {
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
 * Embedded pricing table visual separation
 * -------------------------------------------------------------------------- */

.docs-main-wrapper .doc-body .embedded-bill .invoice-table thead th {
    background-color: #eef1f4;
    border-color: #e1e5e8;
    font-weight: 500;
}

.docs-main-wrapper .doc-body .embedded-bill .invoice-table tbody td {
    background-color: #f8f9fa;
    border-color: #e1e5e8;
}

.docs-main-wrapper .doc-body .embedded-bill .invoice-table {
    border-color: #e1e5e8;
}

/* --------------------------------------------------------------------------
 * Dashboard - My Projects mobile table
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .dashboard-projects.table-responsive {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-projects.table-responsive > .table {
        width: 560px;
        min-width: 560px;
        margin-bottom: 0;
    }

    .dashboard-projects.table-responsive > .table th,
    .dashboard-projects.table-responsive > .table td {
        white-space: nowrap;
    }

    .dashboard-projects.table-responsive > .table td.txt-oflo {
        white-space: normal;
        min-width: 150px;
    }
}

/* --------------------------------------------------------------------------
 * Dashboard - My Projects swipe hint
 * -------------------------------------------------------------------------- */

.dashboard-projects-swipe-hint {
    display: none;
}

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

    .dashboard-projects-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: fit-content;
        max-width: 100%;
        margin: 12px auto 0;
        padding: 8px 14px;
        border: 1px solid rgba(54, 132, 255, 0.25);
        border-radius: 20px;
        background: rgba(54, 132, 255, 0.07);
        color: #3684ff;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
        user-select: none;
        pointer-events: none;
    }

    .dashboard-projects-swipe-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: -2px;
        font-size: 24px;
        line-height: 1;
        font-weight: 600;
        animation: document-table-swipe-highlight 1.5s ease-in-out infinite;
    }
}

@media print {
    .dashboard-projects-swipe-hint {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
 * Dashboard - Latest Activity mobile height
 * Allow wrapped activity entries to determine the widget height.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .dashboard-events {
        height: auto;
        min-height: 0;
    }
}

/* --------------------------------------------------------------------------
 * Embedded pricing block - visually group table, totals and swipe hint
 * -------------------------------------------------------------------------- */

.docs-main-wrapper .doc-body .embedded-bill {
    background-color: #f5f7f9;
    border: 1px solid #e1e5e8;
    border-radius: 4px;
    padding: 14px;
}

.docs-main-wrapper .doc-body .embedded-bill .invoice-table thead th {
    background-color: #e7ebef;
    border-color: #dce1e5;
}

.docs-main-wrapper .doc-body .embedded-bill .invoice-table tbody td {
    background-color: #f5f7f9;
    border-color: #e1e5e8;
}

.docs-main-wrapper .doc-body .embedded-bill .invoice-total-table td {
    background-color: #f5f7f9;
    border-color: #e1e5e8;
}

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

    .docs-main-wrapper .doc-body .embedded-bill {
        padding: 10px;
    }

    .docs-main-wrapper .document-table-swipe-hint {
        margin-top: 12px;
        margin-bottom: 2px;
    }
}

/* --------------------------------------------------------------------------
 * Project overview - mobile details layout
 * Stack project information instead of squeezing desktop columns.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    #project_details .card-body > .row > .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* Dates/details: add spacing before the former right column */
    #project_details .card-body > .row > .col-sm-6 + .col-sm-6 {
        margin-top: 20px;
    }

    /* Keep labels and values readable */
    #project_details .panel-label {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #project_details .card-body {
        min-width: 0;
    }

    /* Financial summary remains two-column, but must fit the viewport */
    #project_details table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    #project_details table td {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* --------------------------------------------------------------------------
 * Project top navigation - mobile dropdown labels
 * GrowCRM hides "Financial" and "More" on small screens but leaves the
 * dropdown caret visible. Keep both labels visible on project pages.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    [data-modular-id="project_tabs_menu_financial"] .hidden-xs-down,
    [data-modular-id="project_tabs_menu_more"] .hidden-xs-down {
        display: inline !important;
    }

}

/* --------------------------------------------------------------------------
 * Project top navigation - mobile two-column grid
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    [data-modular-id="project_tabs_menu"] {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    [data-modular-id="project_tabs_menu"] > .nav-item {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        margin: 0;
    }

    [data-modular-id="project_tabs_menu"] > .nav-item > .nav-link {
        display: block;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        text-align: left;
    }

}

/* --------------------------------------------------------------------------
 * Project overview - mobile card inner spacing
 * GrowCRM default: 25px horizontal card-body padding
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    #project_details > .card-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

}

/* --------------------------------------------------------------------------
 * Project details tab - mobile inner spacing
 * Scoped to Details only.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    #project-details-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #project-details-container > .col-sm-12 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

}

/* --------------------------------------------------------------------------
 * Project details tab - mobile OUTER tab spacing
 * Only applies when the Details tab is currently loaded.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .project .tab-body-embedded:has(#project-details-container) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

}

/* --------------------------------------------------------------------------
 * Project overview + details - unified mobile outer spacing
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    /* Overview */
    #project_details > .card-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Details */
    .project .tab-body-embedded:has(#project-details-container) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

/* --------------------------------------------------------------------------
 * Project tasks - mobile outer spacing
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .project .tab-body-embedded:has(#tasks-view-wrapper) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

}

/* --------------------------------------------------------------------------
 * Project tasks - mobile outer spacing
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .project .tab-body-embedded:has(#tasks-view-wrapper) {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

}

/* --------------------------------------------------------------------------
 * Project tasks - mobile outer spacing
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .project .tab-body-embedded:has(#tasks-view-wrapper) {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

}

/* --------------------------------------------------------------------------
 * Project tasks - mobile outer spacing
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .project .tab-body-embedded:has(#tasks-view-wrapper) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

}

/* Project tasks - mobile outer spacing fine tuning */
@media screen and (max-width: 767.98px) {
    .project .tab-body-embedded:has(#tasks-view-wrapper) {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* --------------------------------------------------------------------------
 * Project milestones - mobile inner spacing
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    #milestones-table-wrapper > .card-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

}

/* --------------------------------------------------------------------------
 * Project milestones - mobile tab inner spacing
 * Only applies while the Milestones tab is loaded.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .project .tab-body-embedded:has(#milestones-table-wrapper) {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

}

/* --------------------------------------------------------------------------
 * Project files - responsive mobile layout
 * Folders above, files below
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    /* Reduce GrowCRM's 60px tab padding for Files only */
    .project .tab-body-embedded:has(#files-folders-enabled-container) {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Desktop side-by-side layout -> vertical mobile layout */
    #files-folders-enabled-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Folder navigation becomes full width */
    #files-folders-enabled-container > .folder-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        flex: none !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e9ecef;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    /* File area becomes full width below folders */
    #files-folders-enabled-container > #files-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        flex: none !important;
        margin-left: 0 !important;
    }

    /* Keep the many file columns readable instead of squeezing them */
    #files-table-wrapper .table-responsive {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #files-table-wrapper #files-table {
        width: 850px;
        min-width: 850px;
    }

}

/* Project files - mobile folder navigation inner spacing */
@media screen and (max-width: 767.98px) {

    #files-folders-enabled-container > .folder-panel {
        box-sizing: border-box;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

}

/* --------------------------------------------------------------------------
 * Project comments - responsive mobile layout
 * Scoped to the project comments tab, including AJAX-refreshed comments.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    /* Remove GrowCRM desktop indentation only when comments are loaded */
    .project .tab-body-embedded:has(#comments-wrapper) {
        padding-left: 10px !important;
        padding-right: 10px !important;
        min-width: 0 !important;
    }

    #comments-wrapper,
    #comments-wrapper > .card-body,
    #comments-wrapper .comments {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #comments-wrapper > .card-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* New comment form */
    #comments-wrapper .comments .post-comment {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    #comments-wrapper .post-comment > .x-avatar {
        width: auto !important;
        max-width: none !important;
        margin: 0 0 10px 0 !important;
    }

    #comments-wrapper .comments .post-comment .x-message-field {
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #comments-wrapper .comments .post-comment .x-message-field textarea {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        white-space: normal !important;
        overflow-x: hidden !important;
    }

    /* TinyMCE created after activating/reloading the form */
    #comments-wrapper .x-message-field .mce-tinymce,
    #comments-wrapper .x-message-field .tox-tinymce,
    #comments-wrapper .x-message-field .mce-container,
    #comments-wrapper .x-message-field .mce-container-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Existing and AJAX-inserted comments */
    #comments-wrapper .comment-widgets,
    #comments-wrapper .comments-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #comments-wrapper .comment-widgets .comment-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 10px 5px 15px 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #comments-wrapper .comment-row > .p-2 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 8px !important;
    }

    #comments-wrapper .comment-row > .comment-text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
    }

    #comments-wrapper .comment-text .x-name,
    #comments-wrapper .comment-text .x-meta {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #comments-wrapper .comment-text .x-meta {
        text-align: left !important;
        margin-top: 3px;
    }

}

/* --------------------------------------------------------------------------
 * Project overview timeline - mobile spacing
 * More usable width for avatar + activity text.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .project-timeline .profiletimeline {
        padding-left: 8px !important;
        margin-left: 0 !important;
    }

    .project-timeline .profiletimeline .sl-item {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .project-timeline .profiletimeline .sl-left {
        width: 44px !important;
        margin-left: 0 !important;
        margin-right: 8px !important;
    }

    .project-timeline .profiletimeline .sl-right {
        margin-left: 52px !important;
        padding-left: 0 !important;
        padding-right: 8px !important;
        min-width: 0 !important;
    }

    .project-timeline .profiletimeline .sl-right .x-meta,
    .project-timeline .profiletimeline .sl-right .x-title {
        max-width: 100% !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

}


/* Project overview timeline - mobile width correction */
@media screen and (max-width: 767.98px) {

    .project-timeline .profiletimeline {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .project-timeline .profiletimeline .sl-item {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .project-timeline .profiletimeline .sl-left {
        width: 42px !important;
        margin-left: 0 !important;
        margin-right: 10px !important;
    }

    .project-timeline .profiletimeline .sl-right {
        width: auto !important;
        max-width: none !important;
        margin-left: 52px !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 4px !important;
    }

    .project-timeline .profiletimeline .sl-right > div,
    .project-timeline .profiletimeline .sl-right .x-meta,
    .project-timeline .profiletimeline .sl-right .x-title {
        width: 100% !important;
        max-width: none !important;
    }

}


/* --------------------------------------------------------------------------
 * Project overview timeline - mobile final spacing
 * Remove GrowCRM's desktop embedded padding for the overview timeline only.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    .project #embed-content-container.project-timeline {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .project #embed-content-container.project-timeline .profiletimeline {
        width: auto !important;
        max-width: none !important;
        margin-left: 20px !important;
        margin-right: 0 !important;
        padding-left: 30px !important;
    }

    .project #embed-content-container.project-timeline .profiletimeline .sl-left {
        margin-left: -50px !important;
        margin-right: 10px !important;
    }

    .project #embed-content-container.project-timeline .profiletimeline .sl-right {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}


/* --------------------------------------------------------------------------
 * Project comments - TinyMCE mobile toolbar wrapping
 * Keep the AJAX-reinitialised TinyMCE 4 toolbar inside the comment card.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    #comments-wrapper .x-message-field .mce-tinymce,
    #comments-wrapper .x-message-field .mce-container,
    #comments-wrapper .x-message-field .mce-container-body,
    #comments-wrapper .x-message-field .mce-toolbar-grp,
    #comments-wrapper .x-message-field .mce-toolbar,
    #comments-wrapper .x-message-field .mce-flow-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* TinyMCE skin defaults its containers to white-space: nowrap.
       Allow the toolbar to form several rows on narrow screens. */
    #comments-wrapper .x-message-field .mce-toolbar-grp,
    #comments-wrapper .x-message-field .mce-toolbar,
    #comments-wrapper .x-message-field .mce-flow-layout {
        white-space: normal !important;
    }

    #comments-wrapper .x-message-field .mce-toolbar .mce-btn-group,
    #comments-wrapper .x-message-field .mce-toolbar .mce-flow-layout-item {
        float: none !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    #comments-wrapper .x-message-field .mce-edit-area,
    #comments-wrapper .x-message-field .mce-edit-area iframe {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

}