form#bp-doc-form {
    display: none;
}

form#bp-doc-form {width: 100%;}



.single-item.groups #buddypress #object-nav ul li#nav-tasks-groups-li a::before {
    background-image: url('../icons/check.svg');
    filter: none;
}
#bp-task-form {
    width: 100%;
    display: none;
}
#bp-task-form.loading {
    opacity: 0.7;
    cursor: progress;
}
#bp-task-form .actions {
    margin-top: 20px;
}
#bp-task-form .actions button {
    margin-right: 20px;
}

.bp-tasks-wrapper {
    width: 100%;
}

.bp-tasks-wrapper ul.bp-docs-list {
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 20px;
    list-style: none;
}

.bp-tasks-wrapper .entries-facets {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    justify-content: right;
    margin-top: 15px;
}

.bp-tasks-wrapper .entries-facets .entries-single-facet:nth-child(1) {
    flex-grow: 1;
}
.bp-tasks-wrapper .entries-facets .entries-single-facet:nth-child(1) input {
    width: 100%;
}

.bp-tasks-wrapper .entries-facets .entries-single-facet select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5"><polygon points="0,0 10,0 5,5" style="fill:%23333;" /></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 5px;
    padding: 10px;
    box-sizing: border-box;
    width: 125px;
}

.doc_title:hover {
    text-decoration: none;
}

/* Media query for mobile devices */
@media (max-width: 680px) {
    .bp-tasks-wrapper .entries-facets label {
        display: none;
    }
    /*.bp-tasks-wrapper .entries-facets {*/
    /*    flex-direction: column; !* Stack items vertically *!*/
    /*}*/
    /*.bp-tasks-wrapper .entries-facets .entries-single-facet {*/
    /*    display: flex;*/
    /*    align-items: center;*/
    /*    gap: 10px;*/
    /*    width: 100%;*/
    /*}*/
    /*.bp-tasks-wrapper .entries-facets .entries-single-facet input,*/
    /*.bp-tasks-wrapper .entries-facets .entries-single-facet select {*/
    /*    flex-grow: 1;*/
    /*}*/

}

.bp-tasks-wrapper .bp-docs-list .doc-item  {
    border: 1px solid var(--contrast-4);
    position: relative;
}



.bp-tasks-wrapper .bp-docs-list {
    border:  0;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  {
    padding: 30px;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  .bp-doc-details {
    /*display: flex;*/
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  .bp-doc-details .bp-doc-title {
    color: var(--contrast-2);
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  .bp-doc-details .doc-status {
    background: url("../icons/incomplete.svg") no-repeat 0 0;
    background-size: 20px;
    display: inline-block;
    min-width: 20px;
    height: 20px;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  .bp-doc-details .doc-status.bp-doc-action {
    cursor: pointer;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item .completed .bp-doc-details .doc-status {
    cursor: default;
    background: url("../icons/complete.svg") no-repeat 0 0;
    background-size: 20px;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  .bp-doc-details .bp-task-description {
    margin-bottom: 0;
    font-style: italic;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  .bp-doc-details .bp-task-description a {
    font-size: 13px;
    cursor: pointer;
    font-style: normal;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  .bp-doc-details .bp-task-description .description-content-original {
    display: none;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  .bp-doc-details .bp-doc-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    font-size: 13px;
    gap: 5px;
    margin: 0;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  .bp-doc-details .bp-doc-actions a {
    cursor: pointer;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  .bp-doc-details .bp-doc-meta {
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    font-size: 13px;
    gap: 20px;
    margin: 0;
}

.bp-tasks-wrapper .bp-docs-list > .doc-item  .bp-doc-details .bp-doc-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.single-task {
    margin-top: 20px;
    flex-grow: 1;
}


.single-task .task-title {
    display: inline-block;
    padding-left: 10px;
}

.single-task .task-description {
    margin-bottom: 30px;
}

.single-task .commentlist {
    margin-left: 0;
}

/* Doc Section Styles */


.bp-tasks-wrapper .bp-docs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bp-tasks-wrapper .bp-docs-list .doc-item {
    border: 1px solid var(--contrast-4);
    padding: 25px;
    margin-bottom: 1.2em;
    position: relative;
    background: #fff;
}

.bp-tasks-wrapper .bp-docs-list .doc-item .bp-doc-title {
    font-weight: 700;
    color: var(--contrast-2);
    margin-bottom: 8px;
    font-size: 1.2em;
}

.bp-tasks-wrapper .bp-docs-list .doc-item .bp-doc-description {
    font-style: italic;
    margin-bottom: 10px;
    color: var(--contrast-3);
}


.bp-tasks-wrapper .bp-docs-list .doc-item .bp-doc-actions {
    position: absolute;
    top: 8px;
    right: 12px;
    display: flex;
    gap: 8px;
    font-size: 13px;
}


/* Responsive for mobile */
@media (max-width: 680px) {
    .bp-tasks-wrapper .bp-docs-list .doc-item {
        padding: 15px;
    }

    p.bp-doc-meta {left: 16px;}

        p.bp-doc-title {
            margin-bottom: 22px !important;
        }
}


.mce-btn.mce-active button, .mce-btn.mce-active:hover button, .mce-btn.mce-active i, .mce-btn.mce-active:hover i {
    color: #2b2b2b !important;
}

form#bp-doc-form .actions {
    margin-top: 20px;
}

a.bp-doc-action.doc_title {
    text-decoration: none;
    cursor: pointer;
}


.export-loading {
    margin-left: 10px;
    font-size: 0.9em;
    color: #666;
}
.export-loading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: #2b2b2b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}   
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}