@import url("forms/_modals.css");
@import url("icons/_icons.css");

* {
    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-primary-element-light-text: #000 !important;
    --color-primary-element-light: #E6E6E6 !important;
    margin: 0 !important;

    & .app-tasks {


        & .app-navigation {

            & .app-navigation-toggle-wrapper {
                top: 0;
                margin-right: -31px;

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

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

                & .button-vue[aria-expanded="false"] .icon-vue::before {

                    transform: rotateY(-180deg);

                }
            }

            & #app-navigation-vue {
                position: relative;

                li.app-navigation-entry-wrapper:has(.app-navigation-entry-link[title="Deck: Welcome to F7cloud Deck!"]) {
                   display:none;
                }

                & ._content_fpy51_21 {
                    padding: 2px;

                    & .collection .material-design-icon {
                        display: none;
                    }

                    & #defaultCalendar {
                        min-width: 85px;
                    }

                    & label,
                    .headline {
                        font-size: 13px;
                    }

                    & .label-container {
                        font-size: 12px;
                        padding-left: 2px;
                    }
                }

                & ul.app-navigation-list.app-navigation__list:has(#nc-vue-1.collection--edit) {
                    margin-top: 71px;
                }

                & ul.app-navigation-list.app-navigation__list {
                    padding: 0px;
                    background-color: #ffffff;
                    border-top-left-radius: 8px;
                    border-top-right-radius: 8px;
                    position: static;
                    margin-top: 41px;

                    & .app-navigation-entry-link:has(.material-design-icon.trash-can-outline-icon) {
                        padding-inline-start: 3px;
                    }


                    & .draggable-container {

                        & .app-navigation-entry-link[href="/index.php/apps/tasks/calendars/app-generated--deck--board-1"] {
                            & .app-navigation-entry__name {
                                display: none;
                            }

                            & .app-navigation-entry-icon::after {
                                content: 'Deck: Добро пожаловать';
                                font-size: 14px;
                                font-weight: 500;
                                display: flex;
                                position: absolute;
                                left: 30px;
                            }
                        }

                        & .app-navigation-entry__children {
                            padding-inline-start: 0px;

                            & .v-select {
                                min-width: 256px !important;
                            }
                        }
                    }



                    & #nc-vue-2 {
                        order: -1;
                        position: absolute;
                        top: 0;

                        & .app-navigation-entry-link {
                            padding: 0;
                            flex-direction: row-reverse;
                            justify-content: space-between;
                            align-items: center;
                            font-weight: 500;
                            font-size: 14px;
                            line-height: 20px;
                            color: #ffffff;

                            background-color: #70B62B;
                            border-radius: 8px;
                            height: 36px;

                            padding: 0px 8px 0px 38px;

                            & .material-design-icon.plus-icon svg {
                                display: none;
                            }

                            & .app-navigation-entry-icon:before {
                                content: '';
                                position: absolute;
                                top: 0;
                                right: 40px;
                                width: 2px;
                                height: 100%;
                                background: #ffffff;
                                pointer-events: none;
                            }

                        }

                        & .app-navigation-entry-link::before {
                            background-image: url("/themes/forbion/images/tasks/plus-white.svg");
                            content: '';
                            width: 16px;
                            height: 16px;
                            background-size: auto;
                            background-position: center;
                            background-repeat: no-repeat;
                            position: absolute;
                            right: 5%;
                        }


                        & .app-navigation-entry-link::after {
                            background-image: url("/themes/forbion/images/tasks/list-white.svg");
                            content: '';
                            width: 16px;
                            height: 16px;
                            background-size: auto;
                            background-position: center;
                            background-repeat: no-repeat;
                            position: absolute;
                            left: 5%;
                        }
                    }

                    & #nc-vue-2.app-navigation-entry-wrapper.collection--edit {
                        & .app-navigation-entry__children {
                            padding: 0;
                        }

                        & .app-navigation-entry-edit {

                          & .input-field {
                              margin-bottom: 5px;
                              margin-block-start: 0px !important;
                          }
                          & .colorpicker {
                              position: absolute;
                              opacity: 1;
                              width: 155px;
                              height: 75px;
                              background-color: #fff;
                              right: 0;
                              border-radius: 8px;
                              border: 1px solid #E6E6E6;

                              & .colorpicker__list {
                                 column-gap: 4px;
                                 background: #fff;
                                 row-gap: 4px;
                                 padding: 8px; 

                                 & > li, 
                                 .color-selector  {
                                   width: 24px !important;
                                   border-radius: 4px;
                                 }
                             }
                        } 
                      }
                    }

                }

                & ._container_fpy51_2 {
                    padding: 0px;
                    background-color: #ffffff;
                    border-bottom-left-radius: 8px;
                    border-bottom-right-radius: 8px;

                    & ._content_fpy51_21 {
                        padding: 0;
                    }

                    & .button-vue__text {
                        font-size: 14px;
                        font-weight: 500;
                        color: #000;
                    }

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

                    & .button-vue__icon .icon-vue::before {
                        background-image: url("/themes/forbion/images/tasks/settings-gray.svg");
                        content: '';
                        width: 16px;
                        height: 16px;
                        background-size: auto;
                        background-position: center;
                        background-repeat: no-repeat;
                    }
                }
            }
        }

        & #app-content-vue {
            background-color: transparent !important;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;

            &>div[collectionid],
            >div[data-v-23b39284] {
                height: calc(100% - 1px);
                padding-bottom: 0px;
            }

            & .task-list {
                padding: calc(2 * var(--default-grid-baseline)) !important;
                background-color: #ffffff;
                height: calc(100% - 38px);
                border-radius: 8px;
                


                & > div[rel="app-generated--deck--board-10"] {
                   display:none;
                }
                & .grouped-tasks:has(ol[calendar-id="app-generated--deck--board-1"]) .loadmore.reactive {
                    color: #ffffff;
                    display: none;

                }

                & .grouped-tasks.ui-droppable[rel="app-generated--deck--board-1"],
                ol[calendar-id="app-generated--deck--board-1"] {

                    & .heading {
                        position: relative;
                    }

                    & .heading__icon-bullet::after {
                        content: 'Deck: Добро пожаловать в Deck';
                        font-size: 14px;
                        font-weight: 500;
                        display: block;
                        width: 400px;
                        position: absolute;
                        left: 20px;
                        top: -2px;
                    }

                    & .heading__name {
                        display: none;
                    }

                    & .task-item[task-id="stack-1.ics"] {


                        & .task-item__subtasks .task-body__info .summary>span {
                            display: none;
                        }

                        & .task-item__subtasks .task-body__info .summary::before {
                            content: '1. Открыть для получения дополнительной информации о досках и карточках.';
                            font-size: 14px;
                            font-weight: 500;
                            display: block;
                            width: 800px;
                            color: #000;
                        }
                    }

                    & .task-item[task-id="stack-4.ics"] {


                        & .task-item__subtasks .task-body__info .summary>span {
                            display: none;
                        }

                        & .task-item__subtasks .task-body__info .summary::before {
                            content: '4. Делитесь, комментируйте и сотрудничайте!';
                            font-size: 14px;
                            font-weight: 500;
                            display: block;
                            width: 800px;
                            color: #000;
                        }
                    }

                    & .task-item[task-id="stack-3.ics"] {


                        & .task-item__subtasks .task-body__info .summary>span {
                            display: none;
                        }

                        & .task-item__subtasks .task-body__info .summary::before {
                            content: '3. Примените расширенное форматирование и ссылочный контент.';
                            font-size: 14px;
                            font-weight: 500;
                            display: block;
                            width: 800px;
                            color: #000;
                        }
                    }

                    & .task-item[task-id="stack-2.ics"] {


                        & .task-item__subtasks .task-body__info .summary>span {
                            display: none;
                        }

                        & .task-item__subtasks .task-item__body[task-id="card-2.ics"] .task-body__info .summary::before {
                            content: '2. Перетаскивайте карточки влево и вправо, вверх и вниз.';
                            font-size: 14px;
                            font-weight: 500;
                            display: block;
                            width: 800px;
                            color: #000;
                        }

                        & .task-item__subtasks .task-item__body[task-id="card-3.ics"] .task-body__info .summary::before {
                            content: 'Создайте свою первую открытку!';
                            font-size: 14px;
                            font-weight: 500;
                            display: block;
                            width: 800px;
                            color: #000;
                        }
                    }

                }
            }

            & .header {
                gap: var(--main-margin-panels);
                background-color: transparent !important;
                padding: 0px 0px var(--main-margin-panels) calc(4 * var(--default-grid-baseline) + var(--default-clickable-area) - 11px);

                & .header__input {
                    margin: 0;
                }

                & .input-field__main-wrapper {
                    input {
                        box-shadow: none;
                        /*border: 1px solid #E6E6E6;*/
                    }
                }

                &>.action-item.filter {

                    & button {
                        background-color: #ffffff;
                        border-radius: 8px;
                    }

                }

                &>.action-item.sortorder {
                    & button {
                        background-color: #ffffff;
                        border-radius: 8px;
                    }
                }
            }

        }

        & #app-sidebar-vue {
            border-radius: 8px;

            & .app-sidebar-tabs {

                & .app-sidebar-tabs__content {
                    & #tab-app-sidebar-tab-details {

                        & .property__item {
                            border: none;
                            margin: 6px 16px;
                            border: 1px solid #E6E6E6;
                            border-radius: 8px;
                            padding: 0;
                            width: auto;
                        }

                        & .component {
                            margin: 6px 16px;
                            padding: 0;
                            width: auto;
                            border: none;

                            & .component__icon {
                                display: none;
                            }

                            & .new {
                                flex-wrap: nowrap;

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

                    }
                }

                & .app-sidebar-tabs__nav {

                    & #tab-button-app-sidebar-tab-details .material-design-icon,
                    #tab-button-app-sidebar-tab-details .checkbox-content__icon svg {
                        display: none !important;
                    }

                    & #tab-button-app-sidebar-tab-details>span:has(.material-design-icon__svg)::before {
                        content: '';
                        display: block;
                        width: 20px;
                        height: 20px;
                        background-image: url('/themes/forbion/images/right-sidebar/property-icon-black.svg');
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                    }

                    & #tab-button-app-sidebar-tab-notes .material-design-icon,
                    #tab-button-app-sidebar-tab-notes .checkbox-content__icon svg {
                        display: none !important;
                    }

                    & #tab-button-app-sidebar-tab-notes>span:has(.material-design-icon__svg)::before {
                        content: '';
                        display: block;
                        width: 20px;
                        height: 20px;
                        background-image: url('/themes/forbion/images/right-sidebar/notes-icon-black.svg');
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                }

            }

            & .app-sidebar-header__description {

                & .property__item--clearable,
                .property__item {
                    border: none;
                    padding: 6px 16px;

                    & .item__content {
                        & .content__icon {
                            display: none;
                        }

                        & .content__input {
                            & input {
                                height: 36px;
                                border: 1px solid #E6E6E6;
                            }
                        }
                    }
                }

            }
        }
    }
}