.app-todo .content-area.content-left {
        float: left
    }

    .app-todo .content-area.content-right {
        float: right
    }

    .app-todo .content-area .app-wrapper .app-search {
        position: relative
    }

        .app-todo .content-area .app-wrapper .app-search .search-icon {
            position: absolute;
            top: 15px;
            left: 15px;
            color: #bdbdbd
        }

        .app-todo .content-area .app-wrapper .app-search .app-filter {
            max-width: calc(100% - 3rem);
            margin-bottom: .5rem;
            padding: .2rem .2rem .2rem 2.75rem;
            border: none;
            border-radius: .4rem;
            background-color: #fff;
            box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)
        }

            .app-todo .content-area .app-wrapper .app-search .app-filter:focus {
                border-bottom: none !important;
                box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2) !important
            }

    .app-todo .content-area .app-wrapper .todo-header {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        padding: 1rem 1.5rem 1rem 0;
        border-bottom: 1px solid #e0e0e0;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

        .app-todo .content-area .app-wrapper .todo-header .todo-action {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 275px;
            -webkit-box-pack: end;
            -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
            justify-content: flex-end;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center
        }

            .app-todo .content-area .app-wrapper .todo-header .todo-action .delete-tasks, .app-todo .content-area .app-wrapper .todo-header .todo-action .select-action, .app-todo .content-area .app-wrapper .todo-header .todo-action .sort-task {
                margin-left: 1rem
            }

        .app-todo .content-area .app-wrapper .todo-header .header-checkbox [type=checkbox] + span:not(.lever):before, .app-todo .content-area .app-wrapper .todo-header .header-checkbox [type=checkbox]:not(.filled-in) + span:not(.lever):after {
            margin-left: 2.65rem;
            opacity: .5;
            border-radius: 4px !important
        }

    .app-todo .content-area .app-wrapper .delete-task, .app-todo .content-area .app-wrapper .delete-tasks, .app-todo .content-area .app-wrapper .sort-task {
        cursor: pointer
    }

    .app-todo .content-area .app-wrapper .collection {
        margin: 0;
        border: 0
    }

        .app-todo .content-area .app-wrapper .collection .collection-item {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            padding-bottom: 2px;
            padding-left: 0;
            /*cursor: pointer*/
        }

            .app-todo .content-area .app-wrapper .collection .collection-item:hover {
                background: #eeeeee;
            }

            .app-todo .content-area .app-wrapper .collection .collection-item .list-left {
                margin: 0 .5rem
            }

                .app-todo .content-area .app-wrapper .collection .collection-item .list-left label {
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox;
                    display: flex;
                    flex-direction: column;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -webkit-flex-direction: column;
                    -ms-flex-direction: column
                }

                .app-todo .content-area .app-wrapper .collection .collection-item .list-left .favorite {
                    cursor: pointer
                }

            .app-todo .content-area .app-wrapper .collection .collection-item .todo-move {
                margin-left: .5rem
            }

            .app-todo .content-area .app-wrapper .collection .collection-item .list-content {
                width: 85%;
                margin-right: 1rem
            }

                .app-todo .content-area .app-wrapper .collection .collection-item .list-content .list-title-area {
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: justify;
                    -webkit-justify-content: space-between;
                    -ms-flex-pack: justify;
                    justify-content: space-between
                }

                .app-todo .content-area .app-wrapper .collection .collection-item .list-content .list-title {
                    font-weight: 700
                }

                .app-todo .content-area .app-wrapper .collection .collection-item .list-content .list-desc {
                    /*font-size: .9rem;*/
                    line-height: 1.35rem;
                    /*    display: -webkit-box;
                    overflow: hidden;*/
                    margin-top: .25rem;
                    text-overflow: ellipsis;
                    color: #515151;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    margin-bottom: .5rem;
                }

                .app-todo .content-area .app-wrapper .collection .collection-item .list-content .badge {
                    font-size: .8rem;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox;
                    display: flex;
                    padding-right: 8px;
                    color: #616161;
                    border-radius: 2px
                }

                    .app-todo .content-area .app-wrapper .collection .collection-item .list-content .badge i {
                        font-size: 1.25rem;
                        line-height: 1.5rem;
                        margin-right: .25rem !important
                    }

            .app-todo .content-area .app-wrapper .collection .collection-item .list-date {
                font-size: .8rem;
                white-space: nowrap;
                color: #616161
            }

            .app-todo .content-area .app-wrapper .collection .collection-item .delete-task i.material-icons, .app-todo .content-area .app-wrapper .collection .collection-item .favorite i.material-icons, .app-todo .content-area .app-wrapper .collection .collection-item .todo-move i.material-icons {
                cursor: pointer;
                color: #bdbdbd
            }

            .app-todo .content-area .app-wrapper .collection .collection-item .todo-move i.icon-move {
                font-size: 22px;
                margin-top: 15px;
                cursor: move
            }

            .app-todo .content-area .app-wrapper .collection .collection-item [type=checkbox] + span:not(.lever):before, .app-todo .content-area .app-wrapper .collection .collection-item [type=checkbox]:not(.filled-in) + span:not(.lever):after {
                margin-left: 3px;
                opacity: .5;
                border-radius: 4px !important
            }

    .app-todo .content-area .app-wrapper .no-data-found {
        display: none !important
    }

        .app-todo .content-area .app-wrapper .no-data-found.show {
            display: block !important
        }

.todo-compose-sidebar {
    position: fixed;
    z-index: 1003;
    top: -1px;
    right: 2rem;
    bottom: 0;
    left: auto;
    width: 24.8rem;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: translateX(110%);
    -ms-transform: translateX(110%);
    transform: translateX(110%);
    opacity: 0;
    background-color: #fff;
    box-shadow: -8px 0 18px 0 rgba(25,42,70,.13)
}

    .todo-compose-sidebar.show {
        -webkit-transform: translateX(9%) translateY(1px);
        -ms-transform: translateX(9%) translateY(1px);
        transform: translateX(9%) translateY(1px);
        opacity: 1
    }

    .todo-compose-sidebar .card {
        box-shadow: none
    }

        .todo-compose-sidebar .card .card-header {
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center
        }

            .todo-compose-sidebar .card .card-header .close-icon {
                cursor: pointer
            }

                .todo-compose-sidebar .card .card-header .close-icon i {
                    font-size: 1.2rem
                }

                .todo-compose-sidebar .card .card-header .close-icon:focus {
                    outline: 0
                }

    .todo-compose-sidebar .edit-todo-item .file-field {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }

        .todo-compose-sidebar .edit-todo-item .file-field .btn-file {
            line-height: 2rem;
            height: 2rem
        }

    .todo-compose-sidebar .edit-todo-item select option {
        font-weight: 700;
        width: 50px;
        height: 32px
    }

    .todo-compose-sidebar .edit-todo-item .dropdown-content {
        width: 185.91px !important
    }

    .todo-compose-sidebar .quill-wrapper .snow-container {
        padding: 1rem;
        border: 1px solid #e0e0e0;
        border-radius: 4px
    }

        .todo-compose-sidebar .quill-wrapper .snow-container .ql-snow, .todo-compose-sidebar .quill-wrapper .snow-container .ql-toolbar {
            border: none
        }

            .todo-compose-sidebar .quill-wrapper .snow-container .ql-toolbar .btn {
                font-size: .8rem;
                line-height: .9;
                width: auto;
                margin-left: .8rem;
                padding: .467rem 1rem;
                color: #fff
            }

                .todo-compose-sidebar .quill-wrapper .snow-container .ql-toolbar .btn:hover {
                    color: #fff
                }

        .todo-compose-sidebar .quill-wrapper .snow-container .ql-tooltip {
            left: 0 !important
        }

            .todo-compose-sidebar .quill-wrapper .snow-container .ql-tooltip input[type=text] {
                width: 100px
            }

    .todo-compose-sidebar .quill-wrapper .ql-editor.ql-blank::before {
        left: .3rem
    }

    .todo-compose-sidebar .quill-wrapper .ql-editor {
        min-height: 7.93rem;
        padding: 0
    }

    .todo-compose-sidebar .assignDate .date-icon, .todo-compose-sidebar .assignto .date-icon {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 53px;
        height: 36px;
        margin: 12px 12px 0;
        padding: .3rem;
        border: 1px solid #9e9e9e;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .todo-compose-sidebar .assignDate .avatar, .todo-compose-sidebar .assignto .avatar {
        margin-right: 10px
    }

        .todo-compose-sidebar .assignDate .avatar img, .todo-compose-sidebar .assignto .avatar img {
            margin-top: 11px
        }

    .todo-compose-sidebar .select2-search__field {
        width: 0 !important
    }

    .todo-compose-sidebar .select2-selection__rendered li[title=API] {
        background-color: #9c27b0
    }

    .todo-compose-sidebar .select2-selection__rendered li[title=Paypal] {
        background-color: #ffc107
    }

    .todo-compose-sidebar .select2-selection__rendered li[title=Invoice] {
        background-color: #4caf50
    }

    .todo-compose-sidebar .select2-container--default.select2-container--disabled .select2-selection--multiple {
        border: none;
        background-color: transparent
    }

    .todo-compose-sidebar .add-todo, .todo-compose-sidebar .update-todo {
        background-color: #2196f3
    }

.todo-overlay {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: hidden;
    opacity: 0
}

    .todo-overlay.show {
        visibility: visible;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        opacity: 1;
        background-color: rgba(0,0,0,.2)
    }

body.dragging, body.dragging * {
    cursor: move !important
}

.dragged {
    position: absolute;
    z-index: 2000;
    opacity: .5
}

@media (max-width:1244px) {
    .app-todo .content-area .app-wrapper .collection .collection-item .list-content {
        width: calc(100% - 7.5rem)
    }
}

@media (max-width:900px) {
    .content-area {
        margin-top: -110px !important
    }

        .content-area.content-left, .content-area.content-right {
            z-index: 1;
            float: none !important;
            width: 100%
        }

    .sidebar .sidebar-content .sidenav-trigger {
        top: 88px
    }
}