/* Style the app of component for comments */
.AppComponentComments {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    width: 100%;
}

    .AppComponentComments__Header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        margin-bottom: var(--size-03);
    }

        .AppComponentCommentsHeader__Icon {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-right: var(--size-04);
        }

            .AppComponentCommentsHeader__Icon > img {
                width: 100%;
                height: auto;
                max-width: var(--icon-button-size);
                
                opacity: 0.7;
                transition: 0.4s;
            }

                .AppComponentComments:hover .AppComponentCommentsHeader__Icon > img {
                    transition: 0.2s;
                    opacity: 1.0;
                }

        .AppComponentCommentsHeader__Title {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            width: 100%;
        }

            .AppComponentCommentsHeader__Title > span:nth-of-type(1) {
                text-align: left;
            }

            .AppComponentCommentsHeader__Title > span:nth-of-type(2) {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;

                background: rgb(245, 245, 245);
                border-radius: var(--size-07);

                font-size: var(--font-size-context);

                padding-top: var(--size-02);
                padding-bottom: var(--size-02);
                padding-left: var(--size-04);
                padding-right: var(--size-04);
            }

    .AppComponentComments__Data {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        background: rgb(255, 255, 255);
        border: 1px solid rgb(237, 237, 237);
        border-radius: var(--size-07);

        width: 100%;
    }

        .AppComponentCommentsData__List {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;

            width: 100%;
        }

            .AppComponentCommentsData__List > .AppDataBrowser__Warning {
                padding: var(--size-07);
            }

            .AppComponentCommentsDataList__Loading {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-items: center;

                width: 100%;
            }

                .AppComponentCommentsDataList__Loading > img {
                    width: 100%;
                    height: auto;
                    max-width: var(--icon-loading-size);
                }

            .AppComponentCommentsDataList__Item {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;

                border-bottom: 0.017cm solid rgb(245, 245, 245);

                width: 100%;

                padding: var(--size-07);
            }

                .AppComponentCommentsDataList__Item:last-child {
                    border-bottom: unset;
                }

                .AppComponentCommentsDataListItem__Header {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;

                    width: 100%;

                    margin-bottom: var(--size-04);
                }

                    .AppComponentCommentsDataListItemHeader__Photo {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;

                        /* background: url( '/assets/images/photo-test.jpeg' );
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat; */
                        border: 0.017cm solid rgb(217, 217, 217);
                        border-radius: 100%;

                        width: var(--size-27);
                        height: var(--size-27);
                        min-width: var(--size-27);
                        min-height: var(--size-27);

                        margin-right: var(--size-04);
                    }

                    .AppComponentCommentsDataListItemHeader__Data {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: flex-start;

                        width: 100%;
                    }

                        .AppComponentCommentsDataListItemHeaderData__Name {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: space-between;

                            width: 100%;
                        }

                            .AppComponentCommentsDataListItemHeaderData__Functions {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: flex-end;

                                position: relative;
                                z-index: 1;
                            }

                        .AppComponentCommentsDataListItemHeaderData__Date {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-start;

                            color: rgba(127, 127, 127);
                            font-size: var(--font-size-context);

                            width: 100%;
                        }

                .AppComponentCommentsDataListItem__Content {
                    display: block;
                    
                    text-align: left;
                    white-space: normal !important;
                    word-break: break-word !important;

                    width: 87%;

                    padding-left: calc( var(--size-27) + var(--size-04) );
                }

                @media screen and (max-width: 650px){
                    .AppComponentCommentsDataListItem__Content {
                        width: 100%;
                        padding-left: unset;
                    }
                }

                    .AppComponentCommentsDataListItem__Content * {
                        font-size: var(--fotn-size) !important;
                        white-space: normal !important;
                        word-break: break-word !important;
                        
                        width: auto !important;
                    }

                    .AppComponentCommentsDataListItem__Content a {
                        /* display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: flex-start; */

                        color: rgb(67, 147, 237);
                        font-size: var(--font-size);
                        white-space: nowrap;
                        word-break: normal;
                    }

                    .AppComponentCommentsDataListItem__Content > .Emoji {
                        min-width: calc( var(--icon-button-size) + ( var(--icon-button-size) * 0.17 ) );
                        max-width: calc( var(--icon-button-size) + ( var(--icon-button-size) * 0.17 ) );
                        vertical-align: -.4em;
                    }

                .AppComponentCommentsDataListItem__Files {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    justify-content: flex-start;

                    border: 2px dotted rgb(220, 220, 220);
                    border-radius: var(--size-07);

                    width: 100%;

                    padding: var(--size-04);
                    margin-top: var(--size-07);
                }

                    .AppComponentCommentsDataListItem__Files > a {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: flex-start;

                        font-size: var(--font-size-context);

                        margin-right: var(--size-07);
                        margin-bottom: var(--size-04);
                    }

                        .AppComponentCommentsDataListItem__Files > a > img {
                            width: 100%;
                            max-width: var(--icon-button-size);

                            margin-right: var(--size-02);
                        }

/* HTML THE TEMPLATE */
/* <div class="AppComponentComments">
    <div class="AppComponentComments__Header">
        <div class="AppComponentCommentsHeader__Icon">
            <img src="/assets/images/system/icons/comments.svg">
        </div>
        <div class="AppComponentCommentsHeader__Title">
            <span>Комментарии</span>
            <span>17</span>
        </div>
    </div>
    <div class="AppComponentComments__Data">
        <div class="AppComponentCommentsData__Form">
            <div class="AppComponentCommentsDataForm__Emoji" data-display-status="false">
                <div class="AppComponentCommentsDataFormBlockEmoji__Last">
                    <div class="AppComponentCommentsDataFormBlockEmojiLast__Title">
                        Часто используемые
                    </div>
                    <div class="AppComponentCommentsDataFormBlockEmojiLast__List">
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/1.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/2.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/3.svg"></button>
                    </div>
                </div>
                <div class="AppComponentCommentsDataFormBlockEmoji__Default">
                    <div class="AppComponentCommentsDataFormBlockEmojiDefault__Title">
                        Смайлы
                    </div>
                    <div class="AppComponentCommentsDataFormBlockEmojiDefault__List">
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/1.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/2.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/3.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/4.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/5.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/6.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/7.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/8.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/9.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/10.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/11.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/12.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/13.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/14.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/15.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/16.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/17.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/18.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/19.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/20.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/21.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/22.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/23.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/24.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/25.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/26.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/27.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/28.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/29.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/30.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/31.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/32.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/33.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/34.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/35.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/36.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/37.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/38.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/39.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/40.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/41.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/42.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/43.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/44.svg"></button>
                        <button class="ButtonNulled"><img src="/assets/images/system/emoji/45.svg"></button>
                    </div>
                </div>
            </div>
            <div class="AppComponentCommentsDataForm__Block">
                <button class="ButtonNulled"><img src="/assets/images/system/icons/smiles.svg"></button>
                <div class="AppComponentCommentsDataFormBlock__Input" contenteditable="true"></div>
                <div class="AppComponentCommentsDataFormBlockInput__Placeholder">Написать комментарий...</div>
                <button onclick="this.parentNode.parentNode.parentNode.querySelector( '.AppComponentCommentsData__Files' ).querySelector( 'input' ).click();" class="ButtonNulled"><img src="/assets/images/system/icons/files-attach.svg"></button>
            </div>
            <button class="ButtonNulled"><img src="/assets/images/system/icons/send.svg"></button>
        </div>
        <div class="AppComponentCommentsData__Files">
            <input type="file" multiple hidden>
            <div class="AppComponentCommentsDataFiles__Loading">
                <img src="/assets/images/system/themes/taskgate-loading.svg">
            </div>
            <div class="AppComponentCommentsDataFiles__Header">
                <div class="AppComponentCommentsDataFilesHeader__Icon">
                    <img src="/assets/images/system/icons/cloud.svg">
                </div>
                <div class="AppComponentCommentsDataFilesHeader__Title">
                    Вложения
                </div>
            </div>
            <div class="AppComponentCommentsDataFiles__List"></div>
        </div>
        <div class="AppComponentCommentsData__List">
            <div class="AppComponentCommentsDataList__Item">
                <div class="AppComponentCommentsDataListItem__Header">
                    <div class="AppComponentCommentsDataListItemHeader__Photo"></div>
                    <div class="AppComponentCommentsDataListItemHeader__Data">
                        <div class="AppComponentCommentsDataListItemHeaderData__Name">
                            <a href="" data-link="false">Имя профиля</a>
                            <div class="AppComponentCommentsDataListItemHeaderData__Functions">
                                <button class="ButtonFunction"><img src="/assets/images/system/icons/context.svg"></button>
                            </div>
                        </div>
                        <div class="AppComponentCommentsDataListItemHeaderData__Date">
                            9:04 | 16.06.2025
                        </div>
                    </div>
                </div>
                <code class="AppComponentCommentsDataListItem__Content" data-comment-full="">
                    Какой то комментарий Какой то комментарий Какой то комментарий Какой то комментарий Какой то комментарий 
                    Какой то комментарий Какой то комментарий Какой то комментарий Какой то комментарий... <a href="" data-link="false">Показать полностью</a>
                </code>
                <div class="AppComponentCommentsDataListItem__Files">
                    <a href="" target="_blank" download="Отчет по работам.pdf" data-link="false"><img src="/assets/images/system/icons/file-document.svg">Отчет по работам.pdf</a>
                    <a href="" target="_blank" download="Отчет по работам.pdf" data-link="false"><img src="/assets/images/system/icons/file-document.svg">Отчет по работам.pdf</a>
                    <a href="" target="_blank" download="Отчет по работам.pdf" data-link="false"><img src="/assets/images/system/icons/file-document.svg">Отчет по работам.pdf</a>
                    <a href="" target="_blank" download="Отчет по работам.pdf" data-link="false"><img src="/assets/images/system/icons/file-document.svg">Отчет по работам.pdf</a>
                </div>
            </div>
        </div>
    </div>
</div> */