/* Style the app of events */
.AppEvents {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    background: rgb(255, 255, 255);
    border-top-right-radius: var(--size-07);
    border-bottom-right-radius: var(--size-07);

    width: 100%;
    height: 100%;
    max-width: 27%;
}

@media screen and (max-width: 900px){
    .AppEvents {
        display: none;

        border-top-right-radius: unset;
        border-bottom-right-radius: unset;
        border-top-left-radius: var(--size-07);
        border-bottom-left-radius: var(--size-07);

        width: 70%;
        max-width: none;

        transition: 0.2s;
        box-shadow: -7px 0px 47px rgba(57, 57, 57, 0.17);
    }
}

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

            border-radius: unset;

            width: 100%;
            max-width: none;

            transition: 0.2s;
            box-shadow: unset;
        }
    }

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

        position: relative;
        z-index: 1;

        width: 100%;

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

    @media screen and (max-width: 900px){
        .AppEvents__Tools {
            padding-top: 1.7vw;
            padding-bottom: var(--size-07);
            padding-left: 1.7vw;
            padding-right: 1.7vw;
        }
    }

        .AppEvents__Tools > .ButtonContext {
            display: none;

            min-width: calc(var(--size-17) * 1.5);

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

        @media screen and (max-width: 900px){
            .AppEvents__Tools > .ButtonContext {
                display: flex;

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

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

        .AppEvents__Tools > .ButtonInput {
            width: 100%;
            z-index: 1;
            margin-right: var(--size-17);
        }

        @media screen and (max-width: 900px){
            .AppEvents__Tools > .ButtonInput {
                height: 100%;

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

            @media screen and (max-width: 650px){
                .AppEvents__Tools > .ButtonInput {
                    margin-right: 1.7vw;
                }
            }

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

            position: absolute;
            top: calc( var(--size-17) + ( var(--size-17) * 0.35 ) );
            right: var(--size-17);
            z-index: 2;

            width: 84%;
            height: auto;
        }

        @media screen and (max-width: 900px){
            .AppEventsTools__Notifications {
                top: calc( var(--size-05) + 1.7vw );
                right: 1.7vw;
            }
        }

            @media screen and (max-width: 650px){
                .AppEventsTools__Notifications {
                    position: static;

                    width: auto;
                    height: auto;
                }
            }

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

                position: relative;
                z-index: 1;
            }

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

                    background: rgb(147, 197, 87);
                    border-radius: 100%;

                    position: absolute;
                    top: -0.1vw;
                    right: -0.1vw;
                    z-index: 1;

                    width: var(--size-04);
                    height: var(--size-04);
                }

            .AppEventsToolsNotifications__Block {
                display: none;
                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: absolute;
                top: calc(var(--size-17) + ( var(--size-17) * 0.27 ));
                right: 0px;
                z-index: 1;

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

                box-shadow: 0px 7px 77px rgba(57, 57, 57, 0.1);
            }

            @media screen and (max-width: 650px){
                .AppEventsToolsNotifications__Block {
                    border-radius: unset;
                    border: unset;
                    border-top: 1px solid rgb(237, 237, 237);

                    top: var(--size-28);
                    left: 0px;

                    height: calc(100vh - var(--size-28));

                    box-shadow: unset;
                }
            }

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

                    width: 100%;
                    height: 100%;

                    overflow-y: auto;

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

                @media screen and (max-width: 900px){
                    .AppEventsToolsNotificationsBlock__List {
                        padding-left: 1.7vw;
                        padding-right: 1.7vw;
                    }
                }

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

                        width: 100%;
                        height: 100%;

                        opacity: 0.7;
                    }

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

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

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

                        .AppEventsToolsNotificationsBlockListNoData__Value {
                            display: block;

                            text-align: center;
                            word-break: break-word;

                            width: 100%;
                        }

                    .AppEventsToolsNotificationsBlockList__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);

                        position: relative;
                        z-index: 1;

                        width: 100%;

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

                        transition: 0.4s;
                    }

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

                        .AppEventsToolsNotificationsBlockList__Item:first-child {
                            margin-top: var(--size-07);
                        }

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

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

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

                            width: 100%;

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

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

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

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

                                    opacity: 0.7;
                                    transition: 0.4s;
                                }

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

                            .AppEventsToolsNotificationsBlockListItemHeader__Title {
                                display: block;

                                text-align: left;
                                word-break: break-word;

                                width: 100%;

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

                                .AppEventsToolsNotificationsBlockListItemHeader__Title > a {
                                    font-size: var(--fotn-size);
                                }

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

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

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

                            width: 100%;
                        }

                            .AppEventsToolsNotificationsBlockListItem__Image > img {
                                border-radius: var(--size-07);

                                width: 100%;
                                height: auto;

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

                        .AppEventsToolsNotificationsBlockListItem__Description {
                            display: block;

                            text-align: left;
                            word-break: break-word;

                            width: 100%;

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

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

                            font-size: var(--font-size-context);
                            text-align: right;

                            width: 100%;
                        }

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

                    border-top: 1px solid rgb(237, 237, 237);

                    width: 100%;

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

                @media screen and (max-width: 900px){
                    .AppEventsToolsNotificationsBlock__Footer {
                        padding: 1.7vw;
                    }
                }

                    .AppEventsToolsNotificationsBlockFooter__Quantity {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        font-size: var(--font-size-context);

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

                        text-align: center;

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

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

                        .AppEventsToolsNotificationsBlockFooter__Functions > button {
                            font-size: var(--font-size-context);
                            padding-left: var(--size-04);
                            padding-right: var(--size-04);
                        }

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

        width: 100%;
        height: 100%;

        overflow: hidden;

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

    @media screen and (max-width: 900px){
        .AppEvents__Lenta {
            padding-left: 1.7vw;
        }
    }

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

            width: 100%;

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

        @media screen and (max-width: 900px){
            .AppEventsLenta__Header {
                padding-right: 1.7vw;
            }
        }

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

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

                width: 100%;

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

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

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

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

                        opacity: 0.7;
                        transition: 0.4s;
                    }

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

                .AppEventsLentaHeader__Title > h6 {
                    text-align: left;
                }

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

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

                padding-bottom: calc( var(--size-07) * 0.8 );
            }

                .AppEventsLentaHeader__Quantity > span {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    font-size: var(--font-size-context);
                    
                    background: rgb(247, 247, 247);
                    border: 1px solid rgb(237, 237, 237);
                    border-radius: var(--size-07);

                    text-align: center;

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

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

            width: 100%;
            height: 100%;

            overflow-y: auto;

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

        @media screen and (max-width: 900px){
            .AppEventsLenta__Block {
                padding-right: 1.7vw;
            }
        }

            .AppEventsLentaBlock__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-bottom: var(--size-07);

                transition: 0.4s;
            }

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

                .AppEventsLentaBlock__Item:first-child {
                    margin-top: var(--size-07);
                }

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

                    width: 100%;

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

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

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

                        transition: 0.4s;
                    }

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

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

                        width: 100%;
                    }

                        .AppEventsLentaBlockItemHeader__Title {
                            display: block;
                            text-align: left;
                        }

                    .AppEventsLentaBlockItemHeaderData__Status,
                    .AppEventsLentaBlockItemHeaderData__StatusGreen,
                    .AppEventsLentaBlockItemHeaderData__StatusRed,
                    .AppEventsLentaBlockItemHeaderData__StatusOrange,
                    .AppEventsLentaBlockItemHeaderData__StatusBlue {
                        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);
                    }

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

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

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

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

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

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

                    width: 100%;
                }

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

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

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

                    width: 100%;

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

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

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

                .AppEventsLentaBlockItem__Author {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;
                
                    width: 100%;
                }

                    .AppEventsLentaBlockItemAuthor__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-right: var(--size-07);
                    }

            .AppEventsLentaBlock__ChatsItem {
                display: flex;
                flex-direction: row;
                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-bottom: var(--size-07);

                transition: 0.4s;
            }

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

                .AppEventsLentaBlock__ChatsItem:first-child {
                    margin-top: var(--size-07);
                }

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

                    border: 1px 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-07);
                }

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

                        width: 100%;
                        height: 100%;
                    }

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

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

                            width: 100%;
                        }

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

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

                            font-size: var(--font-size-context);
                            text-align: left;
                            white-space: normal;
                            word-break: break-word;

                            width: 100%;

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

                            .AppEventsLentaBlockChatsItemData__Description > .Emoji {
                                min-width: calc(var(--icon-button-size) - (var(--icon-button-size) * 0.22));
                                max-width: calc(var(--icon-button-size) - (var(--icon-button-size) * 0.22));
                            }

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

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