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

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

body #content-vue {
    --color-primary-element: #70B62B !important;
    --color-primary-element-hover: #6faf2e !important;
    --color-primary-element-light-hover: #ffffff !important;

    & .app-navigation {

        background: unset;

        & #app-navigation-vue {

            position: relative;

            & .app-navigation__body {

                margin-top: 50px;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                background: #ffffff;

                & .app-navigation-new {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    padding: 0;

                    & .button-vue {

                        width: 100%;
                        margin: 0;
                        padding: 3px 35px 3px 6px;
                        background: #70B62B;
                        color: #ffffff;
                        position: relative;
                        transition: opacity .3s;

                        & .button-vue__wrapper {
                            justify-content: flex-start;
                            padding-left: 10px;
                        }

                        &::before {
                            content: '';
                            position: absolute;
                            top: 50%;
                            right: 12px;
                            transform: translateY(-50%);
                            width: 16px;
                            height: 16px;
                            background-image: url("/themes/forbion/images/close-fat.svg");
                            background-repeat: no-repeat;
                            pointer-events: none;
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            top: 0;
                            right: 37px;
                            width: 2px;
                            height: 100%;
                            background: #ffffff;
                            pointer-events: none;
                        }

                        & .button-vue__icon {
                            opacity: 0;
                            pointer-events: none;
                        }
                    }
                }
            }

            & .account-management__settings-toggle {

                margin-bottom: 0;
                padding: 8px 8px 12px;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                background: #ffffff;

                & .button-vue__wrapper {

                    & .button-vue__text {
                        margin-left: 10px;
                        white-space: normal;
                        text-align: left;
                    }
                }
            }

            & .account-management__group-list {
                overflow: auto !important;
                height: auto !important;
            }
        }

        & .app-navigation-toggle-wrapper {
            position: absolute;
            top: 8px;
            right: -17px;

            & .button-vue {

                height: 35px !important;
                min-height: 35px !important;
                max-height: 35px !important;
                width: 35px !important;
                max-width: 35px !important;
                min-width: 35px !important;

                & .material-design-icon {

                    & .material-design-icon__svg {
                        display: none;
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        width: 16px;
                        height: 16px;
                        background-image: url("/themes/forbion/images/menu-icon.svg");
                        background-repeat: no-repeat;
                        transform: translate(-50%, -50%) scale(1.1);
                    }
                }

                & .menu-icon {

                    &::before {

                        transform: translate(-50%, -50%) scale(1.1) rotateY(-180deg);
                    }
                }
            }
        }
    }
}

body #app-content-vue {
    margin-left: 8px !important;
    background: #ffffff !important;
    border-radius: 8px;

    & .user-list {
        border-radius: 8px;

        & .user-list__header {
            th {
                border-right: unset;
            }
        }

        & .user-list__body {

            tr {

                td {

                    .row__subtitle {
                        color: #000000;
                    }

                    button.action-item--single {

                        .icon-vue svg {
                            display: none;
                        }

                        .icon-vue:before {
                            content: '';
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 100%;
                            height: 100%;
                            background-size: auto;
                            background-position: center;
                            background-repeat: no-repeat;
                        }

                        &[title="Выполнено"] {
                            .icon-vue:before {
                                background-image: url('/themes/forbion/images/confirm-black.svg');
                                transform: translate(-50%, -50%) scale(1.2);
                            }
                        }

                        &[title="Редактирование"] {
                            .icon-vue:before {
                                background-image: url('/themes/forbion/images/pencil-icon-black.svg');
                                transform: translate(-50%, -50%);
                            }
                        }
                    }
                }
            }
        }
    }
}

.app-navigation--close + #app-content-vue {
    margin-left: 0 !important;
}

.button-vue:not([disabled="disabled"]) {
    transition: opacity .3s !important;

    &:hover {
        opacity: .75 !important;
    }
}

input,
textarea {
    border: 1px solid #E6E6E6 !important;
    border-radius: 8px;
}

input.vs__search {
    border: unset !important;
    padding-right: 50px;
}

body ul.vs__dropdown-menu {
    color: #000000 !important;
    padding: 10px 10px 15px !important;
    border-top: 1px solid #E6E6E6 !important;
    border-bottom: 1px solid #E6E6E6 !important;
    border-right: 1px solid #E6E6E6 !important;
    border-left: 1px solid #E6E6E6 !important;
}

.v-select {

    cursor: pointer;

    & .vs__dropdown-toggle {

        border: 1px solid #E6E6E6 !important;
        border-radius: 8px;

        & .vs__actions {
            padding-right: 20px;
        }
    }
}

.button-vue--vue-primary {

    background-color: #70B62B !important;

    & .material-design-icon__svg {
        fill: #FFFFFF;
    }

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

button.vs__clear {
    margin-right: 20px !important;
    opacity: .55;
}

.vs__selected {
    overflow: hidden;
}

.empty-content__icon {
    background: unset !important;
}