/* Style the tasks of list */
.AppTasksFolderList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    width: 100%;

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

@media screen and (max-width: 900px){
    .AppTasksFolderList {
        padding: var(--size-07);
    }
}

    .AppTasksFolderList__Record {
        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%;

        padding: var(--size-07);
        margin-bottom: var(--size-07);

        transition: 0.4s;
    }

        .AppTasksFolderList__Record:hover {
            transition: 0.2s;
            background: rgb(250, 250, 250);
        }

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

            width: 100%;
            height: 100%;

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

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

                width: 100%;

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

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

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

                    .AppTasksFolderListRecordInformationHeader__Icon > img {
                        width: 100%;
                        height: auto;
                        max-width: var(--icon-button-size);

                        opacity: 0.7;
                        transition: 0.4s;
                    }

                        .AppTasksFolderList__Record:hover .AppTasksFolderListRecordInformationHeader__Icon > img {
                            transition: 0.2s;
                            opacity: 1.0;
                        }

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

                    width: 100%;
                }

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

                        text-align: left;
                    }

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

                        .AppTasksFolderListRecordInformationHeaderData__Status,
                        .AppTasksFolderListRecordInformationHeaderData__StatusGreen,
                        .AppTasksFolderListRecordInformationHeaderData__StatusRed,
                        .AppTasksFolderListRecordInformationHeaderData__StatusOrange,
                        .AppTasksFolderListRecordInformationHeaderData__StatusBlue,
                        .AppTasksFolderListRecordInformationHeaderData__StatusViolet {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: center;
                            
                            background: rgba(235, 235, 235, 0.4);
                            border: 1px solid rgb(225, 225, 225);
                            border-radius: var(--size-07);
                            
                            font-size: var(--font-size-context);
                            font-weight: 600;

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

                            .AppTasksFolderListRecordInformationHeaderData__StatusGreen {
                                background: rgba(157, 217, 97, 0.1);
                                border: 1px solid rgba(157, 217, 97, 0.3);
                                color: rgb(147, 197, 87);
                            }

                            .AppTasksFolderListRecordInformationHeaderData__StatusRed {
                                background: rgba(237, 57, 57, 0.1);
                                border: 1px solid rgba(237, 57, 57, 0.3);
                                color: rgb(237, 57, 57);
                            }

                            .AppTasksFolderListRecordInformationHeaderData__StatusOrange {
                                background: rgba(237, 127, 57, 0.1);
                                border: 1px solid rgba(237, 127, 57, 0.3);
                                color: rgb(237, 127, 57);
                            }

                            .AppTasksFolderListRecordInformationHeaderData__StatusBlue {
                                background: rgba(57, 127, 237, 0.1);
                                border: 1px solid rgba(57, 127, 237, 0.3);
                                color: rgb(57, 127, 237);
                            }

                            .AppTasksFolderListRecordInformationHeaderData__StatusViolet {
                                background: rgba(147, 57, 237, 0.1);
                                border: 1px solid rgba(147, 57, 237, 0.3);
                                color: rgb(147, 57, 237);
                            }

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

                white-space: normal;
                word-break: break-word;

                width: 100%;
            }

                .AppTasksFolderListRecordInformation__Name > a:hover {
                    color: rgb(57, 57, 57);
                }

        .AppTasksFolderListRecord__Data {
            display: grid;
            align-items: flex-start;
            justify-content: flex-start;

            grid-template-columns: repeat(auto-fill, minmax( 25%, 1fr ));

            width: 100%;

            gap: 1.7vw;
        }

        @media screen and (max-width: 650px){
            .AppTasksFolderListRecord__Data {
                grid-template-columns: repeat(auto-fill, minmax( 100%, 1fr ));
            }
        }

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

                width: 100%;
            }

            @media screen and (max-width: 650px){
                .AppTasksFolderListRecordData__Item:nth-of-type(2),
                .AppTasksFolderListRecordData__Item:nth-of-type(3) {
                    display: none;
                }
            }

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

                    width: 100%;

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

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

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

                        .AppTasksFolderListRecordDataItemHeader__Icon > img {
                            width: 100%;
                            height: auto;
                            max-width: var(--icon-button-size);

                            opacity: 0.7;
                            transition: 0.4s;
                        }

                            .AppTasksFolderListRecordData__Item:hover .AppTasksFolderListRecordDataItemHeader__Icon > img {
                                transition: 0.2s;
                                opacity: 1.0;
                            }

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

                        width: 100%;
                    }

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

                            background: rgb(247, 247, 247);
                            border: 1px solid rgba(237, 237, 237, 0.0);
                            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);

                            transition: 0.4s;
                        }

                            .AppTasksFolderList__Record:hover .AppTasksFolderListRecordDataItemHeader__Title > span:nth-of-type(2) {
                                transition: 0.2s;
                                background: rgb(237, 237, 237);
                                border: 1px solid rgba(227, 227, 227, 1.0);
                            }

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

                    width: 100%;
                }

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

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

                        width: 100%;

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

                    @media screen and (max-width: 650px){
                        .AppTasksFolderListRecordDataItemBlock__Dedlines {
                            flex-direction: row;
                        }
                    }

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

                            width: 100%;

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

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

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

                                .AppTasksFolderListRecordDataItemBlockDedlinesDate__Icon > img {
                                    width: 100%;
                                    height: auto;
                                    max-width: var(--icon-button-size);

                                    opacity: 0.7;
                                    transition: 0.4s;
                                }

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

                                width: 100%;
                            }

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

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

                                    width: 100%;
                                }

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

                        width: 100%;
                    }

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

                                border: 1px solid rgb(217, 217, 217);
                                border-radius: var(--size-07);

                                padding: var(--size-02);
                                margin-top: var(--size-03);
                                margin-right: var(--size-03);
                            }

                                .AppTasksFolderListRecordDataItemBlockDocuments__Item > img {
                                    width: 100%;
                                    height: auto;
                                    max-width: var(--icon-button-size);

                                    opacity: 0.7;
                                    transition: 0.4s;
                                }

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

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

                        width: 100%;
                    }

                        .AppTasksFolderListRecordDataItemBlockPerformers__Profil {
                            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: 1px solid rgb(217, 217, 217);
                            border-radius: 100%;

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

                            margin-top: var(--size-03);
                            margin-right: var(--size-03);
                        }

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

            width: 100%;
        }

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

                width: 100%;

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

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

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

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

                        .AppTasksFolderList__Record:hover .AppTasksFolderListRecordAuthorHeader__Icon > img {
                            transition: 0.2s;
                            opacity: 1.0;
                        }

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

                    width: 100%;
                }

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

                width: 100%;
            }

                .AppTasksFolderListRecordAuthorData__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: 1px solid rgb(217, 217, 217);
                    border-radius: 100%;

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

                    margin-top: var(--size-03);
                    margin-right: var(--size-03);
                }

                .AppTasksFolderListRecordAuthorData__Name {
                    color: rgb(57, 57, 57);
                    font-weight: 500;
                }

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

            width: 100%;

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

        @media screen and (max-width: 650px){
            .AppTasksFolderListRecord__Tags {
                display: none;
            }
        }

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

                background: rgba(67, 147, 237, 0.1);
                border: 1px solid rgb(67, 147, 237);
                border-radius: var(--size-07);

                color: rgb(67, 147, 237);
                font-size: var(--font-size-tags);
                font-weight: 600;
                text-align: center;

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

                transition: 0.4s;
            }

/* THE TEMPLATE */
/* <div onclick="this.querySelector( 'a' ).click();" class="AppTasksFolderList__Record">
    <div class="AppTasksFolderListRecord__Information">
        <div class="AppTasksFolderListRecordInformation__Header">
            <div class="AppTasksFolderListRecordInformationHeader__Icon">
                <img src="/assets/images/system/icons/tasks-record.svg">
            </div>
            <div class="AppTasksFolderListRecordInformationHeader__Data">
                <div class="AppTasksFolderListRecordInformationHeaderIconData__Title">
                    Задание
                </div>
                <div class="AppTasksFolderListRecordInformationHeaderData__StatusGreen">
                    В работе
                </div>
            </div>
        </div>
        <div class="AppTasksFolderListRecordInformation__Name">
            <a href="/tasks/1/L668UPEQY328S2XXOUU4ZOJAOLN2XAJMA4WAU2C5U/" data-link="false">Название задания</a>
        </div>
    </div>
    <div class="AppTasksFolderListRecord__Data">
        <div class="AppTasksFolderListRecordData__Item">
            <div class="AppTasksFolderListRecordDataItem__Header">
                <div class="AppTasksFolderListRecordDataItemHeader__Icon">
                    <img src="/assets/images/system/icons/deadlines.svg">
                </div>
                <div class="AppTasksFolderListRecordDataItemHeader__Title">
                    <span>Сроки</span><span title="Количество оставшихся дней на выполнение">7 дней</span>
                </div>
            </div>
            <div class="AppTasksFolderListRecordDataItem__Block">
                <div class="AppTasksFolderListRecordDataItemBlock__Dedlines">
                    <div class="AppTasksFolderListRecordDataItemBlockDedlines__Date">
                        <div class="AppTasksFolderListRecordDataItemBlockDedlinesDate__Icon">
                            <img src="/assets/images/system/icons/calendar.svg">
                        </div>
                        <div class="AppTasksFolderListRecordDataItemBlockDedlinesDate__Data">
                            <div class="AppTasksFolderListRecordDataItemBlockDedlinesDateData__Name">
                                Начало
                            </div>
                            <div class="AppTasksFolderListRecordDataItemBlockDedlinesDateData__Value">
                                12.06.2025
                            </div>
                        </div>
                    </div>
                    <div class="AppTasksFolderListRecordDataItemBlockDedlines__Date">
                        <div class="AppTasksFolderListRecordDataItemBlockDedlinesDate__Icon">
                            <img src="/assets/images/system/icons/calendar-deadline-red.svg">
                        </div>
                        <div class="AppTasksFolderListRecordDataItemBlockDedlinesDate__Data">
                            <div class="AppTasksFolderListRecordDataItemBlockDedlinesDateData__Name">
                                Крайний срок
                            </div>
                            <div class="AppTasksFolderListRecordDataItemBlockDedlinesDateData__Value">
                                12.06.2025
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="AppTasksFolderListRecordData__Item">
            <div class="AppTasksFolderListRecordDataItem__Header">
                <div class="AppTasksFolderListRecordDataItemHeader__Icon">
                    <img src="/assets/images/system/icons/documents.svg">
                </div>
                <div class="AppTasksFolderListRecordDataItemHeader__Title">
                    Документы
                </div>
            </div>
            <div class="AppTasksFolderListRecordDataItem__Block">
                <div class="AppTasksFolderListRecordDataItemBlock__Documents">
                    <div class="AppTasksFolderListRecordDataItemBlockDocuments__Item" title="Название документа">
                        <img src="/assets/images/system/icons/file-document.svg">
                    </div>
                    <div class="AppTasksFolderListRecordDataItemBlockDocuments__Item" title="Название документа">
                        <img src="/assets/images/system/icons/file-document.svg">
                    </div>
                    <div class="AppTasksFolderListRecordDataItemBlockDocuments__Item" title="Название документа">
                        <img src="/assets/images/system/icons/file-image.svg">
                    </div>
                </div>
            </div>
        </div>
        <div class="AppTasksFolderListRecordData__Item">
            <div class="AppTasksFolderListRecordDataItem__Header">
                <div class="AppTasksFolderListRecordDataItemHeader__Icon">
                    <img src="/assets/images/system/icons/users.svg">
                </div>
                <div class="AppTasksFolderListRecordDataItemHeader__Title">
                    Исполнители
                </div>
            </div>
            <div class="AppTasksFolderListRecordDataItem__Block">
                <div class="AppTasksFolderListRecordDataItemBlock__Performers">
                    <div title="Administrator" style="background: url( '/server/administration-panel/assets/images/system/icons/users/no-photo.svg' ); background-size: cover; background-position: center; background-repeat: no-repeat;" class="AppTasksFolderListRecordDataItemBlockPerformers__Profil"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="AppTasksFolderListRecord__Author">
        <div class="AppTasksFolderListRecordAuthor__Header">
            <div class="AppTasksFolderListRecordAuthorHeader__Icon">
                <img src="/assets/images/system/icons/author.svg">
            </div>
            <div class="AppTasksFolderListRecordAuthorHeader__Title">
                Управляющий
            </div>
        </div>
        <div class="AppTasksFolderListRecordAuthor__Data">
            <div style="background: url( '/server/administration-panel/assets/images/system/icons/users/no-photo.svg' ); background-size: cover; background-position: center; background-repeat: no-repeat;" class="AppTasksFolderListRecordAuthorData__Photo"></div>
            <div class="AppTasksFolderListRecordAuthorData__Name">
                Имя профиля
            </div>
        </div>
    </div>
    <div class="AppTasksFolderListRecord__Tags">
        <div class="AppTasksFolderListRecordTags__Item">
            Привет
        </div>
        <div class="AppTasksFolderListRecordTags__Item">
            Мир
        </div>
        <div class="AppTasksFolderListRecordTags__Item">
            Работает
        </div>
    </div>
</div> */