/***********************************************************
 * Tlick
 ***********************************************************/
.tlicks-box {
    /*padding: 1em 2em 1em 1em;*/
    /*padding-right: 2em;*/
}
#tlick-deck {
    display: flex;
    flex-wrap: wrap;
    /*gap: 16px;*/
    /*gap: 8px 16px;       !* row-gap column-gap *!*/
    /*row-gap: 8px;*/
    /*column-gap: 16px;*/
}
.tlick-container {
    flex: 0 0 100%; /* manages the width of the tlick-cards */
    /*flex: 0 0 calc(50% - 8px);*/
    box-sizing: border-box;
}
.tlick-container .tlick-card {
    /*margin-bottom: 0.5em;*/
    margin-bottom: 1em;
    font-size: small;
    border-radius: 16px;
    border: 0;
    /*aspect-ratio: 15 / 1;  !*configure the width to height ratio*!*/
}
.tlick-container .tlick-card:hover {
    cursor: pointer;
}
#tlick-modal .modal-header {
    background: #F4F4F4;
    border-bottom: 0;
}
#tlick-modal .modal-header > .tlick-name {
    font-size: 28px;
    font-weight: bold;
    padding-left: 4px;
}
#tlick-modal .modal-body {
    padding-top: 0;
    padding-left: 0.75em;
    padding-right: 0.75em;
}
#tlick-modal .tlick-info {
    background: #F4F4F4;
}
#tlick-modal .modal-body .row {
    padding: 1em;
}
#tlick-modal .modal-body .row > .col-12 {
    /*padding-left:  0;*/
    /*padding-right: 0;*/
}
.tlick-container .tlick-card > .card-body {
    /*padding: 1em 1.5em;*/
    padding: 0.5em 1em;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.tlick-card .tlick-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
}
.tlick-summary .tlick-name {
    font-size: 16px;
}
.tlick-summary > span > .tlick-project { /* only home page */
    text-decoration: none;
    color: inherit; /* because this is a link and we don't want it to be blue */
    font-weight: bold;
    font-size: 12px;
    opacity: 40%;
}
.tlick-summary >        .tlick-date,  /* template + project page */
.tlick-summary > span > .tlick-date { /* only home page */
    margin-top: 4px;
    font-size: 12px;
    /*font-weight: bold;*/
    opacity: 40%;
}
.tlick-description-container {
    background: #F4F4F4;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.tlick-description {
    font-weight: bold;
}
/* makes data-placeholder visible */
.tlick-description > .editable-text-area:empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
}
.tlick-action-icon {
    height: 24px;
}

.tlick-filters-container {
    flex-wrap: wrap;           /* wraps items instead of overflow */
}
/* when a filter is active, make the rest have opacity */
.tlick-filters-container:has( > .tlick-filter-pill.active ) > .tlick-filter-pill:not(.active) {
        opacity: 50%;
}
/* when no filters are active, make "completed" filter have opacity */
.tlick-filters-container:not(:has( > .tlick-filter-pill.active )) > .tlick-filter-pill.completed-pill {
    opacity: 50%;
}

.tlick-filter-pill {
    font-size: 16px;
    font-weight: normal;
    margin-left: 0.5em;
}
.tlick-filter-pill:hover {
    background: var(--g3);
}

.tlick-status-pill {
    font-size: 16px;
    font-weight: normal;
}

.personal-pill {
    color: var(--g1);
    background: var(--w1);
}
.assigned-pill {
    color: var(--g1);
    background: var(--b11);
}
.managed-pill {
    color: var(--g1);
    background: var(--a11);
    /*background: var(--a3);*/
}
.completed-pill {
    color: var(--g1);
    background: var(--a1);
}
.urgent-pill {
    color: var(--g1);
    background: var(--c2);
}



/***********************************************************
 * Note
 ***********************************************************/
#note-deck {
    /* something */
}
.notes-box {
    background: #FFF7CB;
    border-radius: 16px;
    padding: 1em;
}
.notes-box-header {
    padding-left: 10px;
    padding-right: 7px;
}
.note-card {
    /*background: transparent;*/
    background: #FFF19490;
    margin-top: 0.5em;
    font-size: 12px;
    border: 0;
    border-radius: 16px;
}
.note-card:hover {
    background: rgba(33, 37, 41, 0.1);
    cursor: pointer;
}
.note-card > .card-body {
    padding: 0.5em 1em;
}
.note-name {
    font-size: 16px;
}
#note-modal .modal-header {
    background: #fdecb6;
}
.note-description > .editable-text-area:empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
}



/***********************************************************
 * Modal
 ***********************************************************/
.modal-header,
.modal-footer {
    background: rgba(33, 37, 41, 0.03);
}
.modal-header > a:first-child {
    color: #666;
    width: 6ch;  /* Width set to 6 chars, the truncate dots count as 3 chars */
}
.modal-header > a {
    color: #054C7C;
    font-weight: bold;
}
.tlick-file-container > ul > li:not(:hover) > div.flex-center:last-child > button,
.tlick-file-container > ul > li:not(:hover) > div.flex-center:last-child > span,
.tlick-file-container > ul > li:not(:hover) > div.flex-center:last-child > a {
    display: none;
}
.tlick-add-file-button {
    padding-top: 4px;
    padding-bottom: 5px;
    margin-top: -2px;
    margin-left: 12px;
}



/***********************************************************
 * Modal Old
 ***********************************************************/
.modal-body-menu {
    margin: 4px 0 8px 0;
}
.modal-body-menu > .col-12 {
    padding-left: 0;
}
.modal-subheader {
    background: #FFF5ED;
    color: #555;
    font-weight: bold;
    border-bottom: 1px solid rgb(222, 226, 230);
    padding: 0.5em 1em;
}
.project-modal {
    /* something */
}
.project-modal-jobs {
    /* something */
}
.project-modal-subprojects {
    display: none;
}
.project-modal-files {
    display: none;
}
.project-modal-info {
    display: none;
}
.project-modal-subprojects > .list-group > .list-group-item {
    /* something */
}
.project-modal-subprojects > .list-group > .list-group-item:hover {
    font-weight: bold;
    text-decoration: underline;
}
.project-modal-subprojects-2 > .list-group > .list-group-item:hover {
    font-weight: bold;
    text-decoration: underline;
}



/***********************************************************
 * Comment
 ***********************************************************/
#comment-input {
    margin: 7px 0;
    font-size: small;
}

.comment {
    background: #F4F4F4;
    border-radius: 16px;
    padding: 0.75em 1.25em;
    margin: 7px 0;

    white-space: normal;     /* Ensures text wraps */
    word-wrap: break-word;   /* Forces breaking if needed */
    overflow-wrap: break-word;
}

/* Old comments in tlick actions */
.comment-button {
    position: relative;
    cursor: pointer;
}

.comment-box {
    background: rgb(248, 248, 249);
    position: absolute;
    display: none;
    box-sizing: border-box;
    padding: 2px;
    max-height: 175px;

    /*top: 50%;*/
    /*left: 100%; !* Places it to the right of the <td> *!*/
    /*transform: translateY(-50%); !* Centers it vertically *!*/

    /*left: 0;*/
    /*bottom: 100%; !* Places it to the top of the <td> *!*/
    /*transform: translateX(50%); !* Centers it horizontally *!*/

    /*top: 100%; !* Places it to the bottom of the <td> *!*/

    left: 0;
    bottom: 0; /* Places it to touch the bottom */

    border: 1px solid #ccc;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;

    white-space: nowrap; /* Prevents text wrapping */
    z-index: 5000;
    /*width: 200px; !* Set fixed width (optional) *!*/
    overflow-y: auto; /* Enable vertical scrolling */
}

.comment > p {
    margin: 0;
}

/*.comment-box > .comment:last-child {*/
/*    background: #E8F5EF !important;  !* lightest green *!*/
/*}*/
/* Show .comment-box when hovering over .comment-button */
/*.comment-button:hover > .comment-box {*/
/*    display: block;*/
/*}*/
/*.comment-text {*/
/*    !* ... *!*/
/*}*/
/*.comment-date,*/
/*.comment-author {*/
/*    color: #666;*/
/*}*/

.comment-add-button-container {
    background: #f5f5f5;
    position: absolute;
    display: none;
    box-sizing: border-box;

    top: 100%; /* Places it to the bottom of the <td> */
    right: 0;

    border: solid #ccc;
    border-width: 0 1px 1px 1px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.comment-add-button-container > span {
    font-size: small;
}

/* Make sure .user-action-table allows overflow */
.user-action-table {
    overflow: visible !important;
}

.tlick-action-button-container {
    display: inline-block;
}