/* Style the tasks of view */
.AppTasksView {
    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){
    .AppTasksView {
        padding: var(--size-07);
    }
}

    .AppTasksView > .AppComponentComments {
        margin-top: var(--size-17);
    }

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

        width: 100%;

        grid-column: span 2;
    }

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

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

        /* border-bottom: 1px solid rgb(237, 237, 237); */

        width: 100%;

        /* padding-bottom: var(--size-07); */
        margin-top: var(--size-17);
    }

        .AppTasksView__Item:nth-of-type(1) {
            margin-top: unset;
        }

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

            position: relative;
            z-index: 1;

            width: 100%;

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

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

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

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

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

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

                width: 100%;
            }

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

            width: 100%;
        }

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

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

                width: 100%;

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

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

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

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

                    width: 100%;
                    height: 100%;

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

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

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

                        .AppTasksViewItemBlockDeadlineItem__Icon > img {
                            width: var(--icon-view-size);
                            height: auto;
                            max-width: var(--icon-view-size);
                        }

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

                        width: 100%;
                    }

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

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

                            width: 100%;
                        }

            .AppTasksViewItemBlock__Description {
                display: block;

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

                text-align: left;
                white-space: normal !important;
                word-break: break-word !important;

                width: 100%;
                min-height: var(--size-7);

                padding: var(--size-07);

                box-sizing: border-box;
            }

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

                    user-select: text;
                    cursor: text !important;
                }

            .AppTasksViewItemBlock__Files,
            .AppTasksViewItemBlock__Performers {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;

                width: 100%;
            }

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

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

                    width: 100%;

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

                    transition: 0.4s;
                }

                    .AppTasksViewItemBlockFiles__Item:hover,
                    .AppTasksViewItemBlockPerformers__Item:hover {
                        transition: 0.2s;
                        background: rgb(245, 245, 245);
                    }

                    .AppTasksViewItemBlockFiles__Item:nth-of-type(1),
                    .AppTasksViewItemBlockPerformers__Item:nth-of-type(1) {
                        margin-top: unset;
                    }

                    .AppTasksViewItemBlockFilesItem__Header,
                    .AppTasksViewItemBlockPerformersItem__Header {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-items: flex-start;

                        width: 100%;

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

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

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

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

                                opacity: 0.7;
                                transition: 0.4s;
                            }

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

                        .AppTasksViewItemBlockPerformersItemHeader__Photo,
                        .AppTasksViewItemBlockManagmentItemProfil__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(237, 237, 237);
                            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);
                        }

                        .AppTasksViewItemBlockFilesItemHeader__Data,
                        .AppTasksViewItemBlockPerformersItemHeader__Data,
                        .AppTasksViewItemBlockManagmentItemProfil__Data {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            justify-content: center;

                            width: 100%;
                        }

                            .AppTasksViewItemBlockFilesItemHeaderData__Title,
                            .AppTasksViewItemBlockPerformersItemHeaderData__Name,
                            .AppTasksViewItemBlockManagmentItemProfil__Name {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: flex-start;

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

                                width: 100%;
                            }

                            .AppTasksViewItemBlockFilesItemHeaderData__Size,
                            .AppTasksViewItemBlockPerformersItemHeaderData__Type,
                            .AppTasksViewItemBlockManagmentItemProfil__Type {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: flex-start;

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

                                width: 100%;
                            }

                    .AppTasksViewItemBlockFilesItem__Functions,
                    .AppTasksViewItemBlockPerformersItem__Functions {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: flex-end;

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

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

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

                width: 100%;
            }

                .AppTasksViewItemBlockPerformersReports__Item {
                    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);

                    position: relative;
                    z-index: 1;

                    width: 100%;

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

                    .AppTasksViewItemBlockPerformersReports__Item:nth-of-type(1) {
                        margin-top: unset;
                    }

                    .AppTasksViewItemBlockPerformersReportsItem__Loading {
                        display: none;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        background: rgba(255, 255, 255, 0.9);
                        border-radius: var(--size-07);

                        position: absolute;
                        top: 0px;
                        left: 0px;
                        z-index: 2;

                        width: 100%;
                        height: 100%;

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

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

                    .AppTasksViewItemBlockPerformersReportsItem__Statistics {
                        display: flex;
                        flex-direction: row;
                        align-items: flex-start;
                        justify-content: space-between;

                        width: 100%;

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

                        .AppTasksViewItemBlockPerformersReportsItemStatistics__Status,
                        .AppTasksViewItemBlockPerformersReportsItemStatistics__StatusGreen,
                        .AppTasksViewItemBlockPerformersReportsItemStatistics__StatusRed,
                        .AppTasksViewItemBlockPerformersReportsItemStatistics__StatusBlue {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: center;
                            
                            background: rgba(235, 235, 235, 0.4);
                            border: 0.017cm 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);
                        }

                            .AppTasksViewItemBlockPerformersReportsItemStatistics__StatusGreen {
                                background: rgba(157, 217, 97, 0.1);
                                border: 0.017cm solid rgb(157, 217, 97);
                                color: rgb(147, 197, 87);
                            }

                            .AppTasksViewItemBlockPerformersReportsItemStatistics__StatusRed {
                                background: rgba(237, 57, 57, 0.1);
                                border: 0.017cm solid rgb(237, 57, 57);
                                color: rgb(237, 57, 57);
                            }

                            .AppTasksViewItemBlockPerformersReportsItemStatistics__StatusBlue {
                                background: rgba(57, 127, 237, 0.1);
                                border: 0.017cm solid rgb(57, 127, 237);
                                color: rgb(57, 127, 237);
                            }

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

                            position: relative;
                            z-index: 1;
                        }

                    .AppTasksViewItemBlockPerformersReportsItem__Header {
                        display: flex;
                        flex-direction: row;
                        align-items: flex-start;
                        justify-content: space-between;

                        width: 100%;

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

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

                            width: 100%;
                        }

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

                                background: url( '/server/administration-panel/assets/images/system/icons/users/no-photo.svg' );
                                background-size: cover;
                                background-position: center;
                                background-repeat: no-repeat;
                                border: 1px solid rgb(237, 237, 237);
                                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);
                            }

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

                                    text-align: left;
                                }

                                .AppTasksViewItemBlockPerformersReportsItemHeaderProfilData__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%;
                                }

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

                                width: 100%;
                            }

                    .AppTasksViewItemBlockPerformersReportsItem__Description {
                        display: block;

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

                        text-align: left;
                        white-space: normal !important;
                        word-break: break-word !important;

                        width: 100%;

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

                        box-sizing: border-box;
                    }

                        .AppTasksViewItemBlockPerformersReportsItem__Description * {
                            font-size: var(--fotn-size) !important;
                            white-space: normal !important;
                            word-break: break-word !important;

                            width: auto !important;

                            cursor: text;
                        }

                        .AppTasksViewItemBlockPerformersReportsItem__Description 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;

                            cursor: default;
                        }

                            .AppTasksViewItemBlockPerformersReportsItem__Description a:hover {
                                transition: 0.2s;
                                color: rgb(237, 57, 57);
                            }

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

                        width: 100%;
                    }

                        .AppTasksViewItemBlockPerformersReportsItem__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);
                        }

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

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

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

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

                width: 100%;

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

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

                .AppTasksViewItemBlockManagment__Item {
                    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%;
                    height: 100%;

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

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

                        width: 100%;

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

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

                            width: 100%;
                        }

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

                        width: 100%;
                    }

                        .AppTasksViewItemBlockManagmentItem__Status,
                        .AppTasksViewItemBlockManagmentItem__StatusGreen,
                        .AppTasksViewItemBlockManagmentItem__StatusRed,
                        .AppTasksViewItemBlockManagmentItem__StatusBlue {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: center;
                            
                            background: rgba(235, 235, 235, 0.4);
                            border: 0.017cm 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);
                        }

                            .AppTasksViewItemBlockManagmentItem__StatusGreen {
                                background: rgba(157, 217, 97, 0.1);
                                border: 0.017cm solid rgb(157, 217, 97);
                                color: rgb(147, 197, 87);
                            }

                            .AppTasksViewItemBlockManagmentItem__StatusRed {
                                background: rgba(237, 57, 57, 0.1);
                                border: 0.017cm solid rgb(237, 57, 57);
                                color: rgb(237, 57, 57);
                            }

                            .AppTasksViewItemBlockManagmentItem__StatusBlue {
                                background: rgba(57, 127, 237, 0.1);
                                border: 0.017cm solid rgb(57, 127, 237);
                                color: rgb(57, 127, 237);
                            }

                .AppTasksViewItemBlockManagment__Item > .AppPatternsOptions {
                    max-width: unset;
                }

            .AppTasksViewItemBlock__Report {
                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-07);
            }

                .AppTasksViewItemBlockReport__Item {
                    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-07); */
                    margin-top: var(--size-07);
                }

                    .AppTasksViewItemBlockReport__Item:nth-of-type(1) {
                        margin-top: unset;
                    }

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

                        width: 100%;

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

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

                            width: 100%;
                        }

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

                        width: 100%;
                    }