* {
    font-family: 'Raleway' !important;
    font-variant-numeric: lining-nums;
    font-weight: 500;
}

body {
    --color-primary-element: #70B62B !important;
    --color-primary-element-hover: #6faf2e !important;
    --color-primary-element-light-hover: #ffffff !important;
    --color-element-assistant-icon: linear-gradient(62.63deg, #70B62B -10.69%, #A5DE6C 19.33%, #7AC035 45.64%, #A5DE6C 74.09%, #70B62B 108.45%) !important;
    --color-element-assistant: linear-gradient(62.63deg, #70B62B -10.69%, #A5DE6C 19.33%, #7AC035 45.64%, #A5DE6C 74.09%, #70B62B 108.45%) !important;
    ;

    & .app-navigation-toggle-wrapper {
        top: 0 !important;

        & button .button-vue__icon .icon-vue::before {
            background-image: url("/themes/forbion/images/files/close-sidebar-gray.svg") !important;
            content: '';
            width: 20px;
            height: 30px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;

        }

        & button[aria-expanded="false"] .button-vue__icon .icon-vue::before {
            transform: scale(1.1) rotateY(-180deg);
        }

        & .button-vue__icon .icon-vue svg {
            display: none;
        }
    }


    & #content-vue {
        background-color: #ffffff !important;
        border-radius: 8px !important;

        & #app-content-vue {
            background-color: transparent !important;

            & > .session-area__top-bar {
               order:1;
            }

            & > .session-area__chat-area {
               order:4;
            }

            & > .session-area__disclaimer {
               order:2;
            }

            & > .input-area {
              order:3;
              & .rich-contenteditable .rich-contenteditable__input{
                     border: 1px solid #E0E0E0 !important;
                     border-radius: 23px !important;
              }
            
            }

            & > .footer {
                order:5;
            }
            

            & .session-area__chat-area {
                & .empty-content__icon {
                    & .material-design-icon.assistant-icon svg {
                       display:none;
                    }

                    & .material-design-icon.assistant-icon::before {
                           background-image: url("/themes/forbion/images/header/assistant-colored-icon.svg") !important;
                           content: "";
                           width: 64px;
                           height: 64px;
                           background-size: contain;
                           background-repeat: no-repeat;
                           background-position: center;
                           display: block;
                    }
                }
            }
            & .assistant-wrapper {
                margin: 16px !important;
                height: 96% !important;

                & .assistant-form.form {
                    max-width: 100%;
                    gap: 16px !important;

                    & .assistant-bubble {
                        & span svg {
                            display: none;
                        }

                        & .assistant-bubble__label {
                            font-weight: 500;
                            font-size: 24px;
                            line-height: 26px;
                            color: #000 !important;

                        }
                    }

                    & .task-type-select.task-custom-select {

                        &>button.button-vue,
                        >.action-item .button-vue.button-vue--secondary.action-item__menutoggle,
                        >.action-item .button-vue.button-vue--secondary.action-item__menutoggle .button-vue__wrapper {
                            height: 36px !important;
                        }

                        &>.action-item .button-vue.button-vue--secondary.action-item__menutoggle,
                        >button.button-vue {
                            background-color: #F0F1F4;
                        }

                        & .categorySelected,
                        .button-vue--primary.action-item__menutoggle {
                            border: 1px solid #F0F1F4 !important;
                        }

                        & .button-vue__text {
                            font-weight: 500;
                            font-size: 14px;
                            line-height: 20px;
                        }

                        & .material-design-icon.image-outline-icon svg,
                        .material-design-icon.file-icon svg, 
                        .material-design-icon.message-outline-icon svg {
                            display: none;
                        }

                        & .material-design-icon.message-outline-icon::before {
    content: '';
    background-image: url(/themes/forbion/images/assistant/chat-ai-gray.svg);
    width: 16px;
    height: 16px;
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}

& .categorySelected .material-design-icon.message-outline-icon::before {
    content: '';
    background-image: url(/themes/forbion/images/assistant/chat-ai-white.svg);
    width: 16px;
    height: 16px;
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}

                        & .material-design-icon.image-outline-icon::before {
                            content: '';
                            background-image: url("/themes/forbion/images/assistant/picture-gray-icon.svg");
                            width: 16px;
                            height: 16px;
                            background-size: auto;
                            background-position: center;
                            background-repeat: no-repeat;
                        }

                        & .categorySelected .material-design-icon.image-outline-icon::before {
                            content: '';
                            background-image: url("/themes/forbion/images/assistant/picture-white.svg") !important;
                            width: 16px;
                            height: 16px;
                            background-size: auto;
                            background-position: center;
                            background-repeat: no-repeat;
                        }

                        & .material-design-icon.file-icon::before {
                            content: '';
                            background-image: url("/themes/forbion/images/assistant/folder-gray-icon.svg");
                            width: 16px;
                            height: 16px;
                            background-size: auto;
                            background-position: center;
                            background-repeat: no-repeat;
                        }

                        & .categoryWithSubSelected .material-design-icon.file-icon::before {
                            content: '';
                            background-image: url("/themes/forbion/images/assistant/folder-white-icon.svg") !important;
                            width: 16px;
                            height: 16px;
                            background-size: auto;
                            background-position: center;
                            background-repeat: no-repeat;
                        }

                    }

                    & .task-input-output-form {
                        &>.container {
                            margin: 0 !important;
                            gap: 16px;

                            & .app-navigation {

                                background-color: #F5F5F5 !important;
                                border-radius: 8px;

                                & #app-navigation-vue {
                                    & .app-navigation-list {
                                        padding: 0 !important;
                                        gap: 5px !important;

                                        & .app-navigation-new>button {
                                            background-color: #70B62B !important;
                                            height: 36px !important;

                                            & .button-vue__text {
                                                color: #ffffff;
                                            }

                                            & .material-design-icon.plus-icon svg path {
                                                color: #ffffff;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            & .app-navigation-new .material-design-icon.plus-icon svg {
                display: block;
            }

            & .app-navigation-list {
                & .empty-content__description::before {
                    content: 'Вы еще ничего не создали.';
                    color: #808080;
                    position: absolute;
                    left: 12px;
                }

                & .empty-content__description {
                    color: transparent;
                    position: relative;
                }

                & .empty-content__name,
                .empty-content__icon {
                    color: transparent;
                    display: none;
                }


            }

            & .app-navigation-new .material-design-icon.plus-icon::before {
                background-image: none;
            }

            & .session-area__top-bar {
                height: 36px !important;

                & .rich-text--wrapper p {
                    display: none;
                }
            }

            & .session-area__chat-area {
                padding: 0 !important;

                & .text-input.text-field.field::before {
                    content: 'Опишите документ, который вы хотите, чтобы помощник сгенерировал';
                    margin-bottom: 10px;
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #808080;
                }

                & .text-input.text-field.field {
                    margin-top: 24px;

                    & .rich-contenteditable.editable-input {
                        margin-top: 16px;
                    }

                    & #text-input, 
                    #input-input {
                        width: 80%;
                        border: 1px solid #E0E0E0;
                        height: 36px !important;
                        border-radius: 23px;
                    }

                    & button.choose-file-button {
                        width: 18%;
                        height: 36px !important;
                        border: 1px solid #F0F1F4;
                        background-color: #F0F1F4;
                        

                        & .button-vue__icon {
                            & .material-design-icon.file-document-outline-icon svg {
                                display: none;
                            }

                            & .material-design-icon.file-document-outline-icon::before {
                                background-image: url("/themes/forbion/images/assistant/folder-gray-icon.svg") !important;
                                content: '';
                                width: 16px;
                                height: 16px;
                                background-size: contain;
                                background-repeat: no-repeat;
                                background-position: center;
                            }
                        }

                        & .button-vue__text {
                            font-weight: 500;
                            font-size: 14px;
                            line-height: 20px;
                        }
                    }
                }

                & .text-input.text-field.field label {
                    display: none;
                }

                & .rich-contenteditable.editable-input {

                    
                    & .rich-contenteditable__input--empty#text-input[title="Presentation script"]::before {
                        content: 'Напишите текст для вашей презентации здесь' !important;
                    }

                    & .rich-contenteditable__input--empty#text-input[title="Инструкции"]::before {
                        content: 'Введите сообщение...' !important;
                    }
                }

            }

            & .footer {

                & .button-vue__wrapper {

                    width: 100px;

                    & .button-vue__icon::after {
                        content: 'Создать';
                        color: #ffffff;
                        margin-left: 5px;
                    }

                    & span.button-vue__text {
                        display: none;
                    }

                }

            }
        }
    }

    & .v-popper__popper {

        & button[title="Generate an Office text document from a prompt"] {

            & .action-button__longtext-wrapper {
                & .action-button__longtext {
                    display: none;
                }
            }

            & .action-button__longtext-wrapper::before {
                content: 'Создать текстовый документ';
                color: #000;

            }

        }

        & button[title="Generate an Office spreadsheet document from a prompt"] {

            & .action-button__longtext-wrapper {
                & .action-button__longtext {
                    display: none;
                }
            }

            & .action-button__longtext-wrapper::before {
                content: 'Создать таблицу';
                color: #000;

            }

        }

        & button[title="Generate a slide deck from a presentation script"] {

            & .action-button__longtext-wrapper {

                & .action-button__longtext,
                .action-button__text {
                    display: none;
                }
            }

            & .action-button__longtext-wrapper::before {
                content: 'Создать презентацию';
                color: #000;

            }

        }

    }
}