@media print {
    .print-peview {
        color: #000;
    }
    a[href]:after {
        content: none !important;
    }

    html, body {
        background-color: #fff;
    }
}

@media screen and (max-width: 1400px) {
    /* Timeline */

    #timeline {
        &::before {
            left: 0px !important;
            margin-left: 0 !important;
            margin-top: 2.85rem !important;
        }

        .post-content {
            float: left;
            width: 100% !important;
            padding: 0 0 0 30px !important;
            margin: 0 0 20px !important;

            &:nth-child(odd) .post-date {
                text-align: left !important;

                &:before {
                    left: -20px;
                    top: 8px;
                    width: 20px;
                    height: 2px;
                    float: left !important;
                }
            }
        }

        > .post-content:first-child {
            padding-top: 60px !important;
        }
    }

    .container.store-page {
        max-width: 1440px;
    }
}

@media screen and (max-width: 991px) {
    .task-title-left{
        display: none;
    }

    .task-title-right{
        display: block !important;
    }

    .comment-avatar{
        padding: 0 !important;
    }

    .comment-container{
        margin: 15px 15px !important;
    }
}

@media (min-width: 991px) {
    .sidebar-toggled {
        min-height: 1420px;
        .sidebar-scroll{
            overflow: visible !important;
        }

        .navbar-custom{
            left: 70px;
        }

        .sidebar{
            position: absolute;
            overflow: visible;
            width: 70px !important;
            height: 1420px;
        }

        .brand-logo{
            display: none;
        }
        .brand-logo-mini{
            display: block;
        }

        .sidebar-menu{
            li{
                a{
                    padding: 15px 12px;
                    -moz-transition: none;
                    -o-transition: none;
                    -webkit-transition: none;
                    transition: none;

                    svg{
                        width: 2rem;
                        height: 24px;
                    }

                    .menu-text{
                        display: none;
                        padding-left: 35px;
                    }

                    span{
                        margin-left: 0;
                    }

                }
                &:hover{
                    width: 250px;
                    background-color: $sidebar-bg;
                    -webkit-transition: none;
                    transition: none;
                    border-radius: 3px;

                    > a{
                        width: 240px;
                        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
                        -webkit-box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
                    }
                    .menu-text{
                        display: inline;
                    }

                    ul{
                        display: block;
                        padding-left: 0;
                        max-height: 1000px;
                        -webkit-box-shadow: 3px 5px 10px 0 rgba(0,0,0,.075);
                        box-shadow: 3px 5px 10px 0 rgba(0,0,0,.075);

                        .menu-text{
                            padding-left: 0;
                            display: inline;
                        }
                    }
                }
                ul{
                    display: none;
                    left: 70px;
                    position: absolute;
                    width: 180px;
                    height: auto!important;
                    background-color: $white;
                    color: #7b8190;

                    li{
                        width: 180px;
                        &:hover{
                            background-color: $white;
                        }
                        a{
                            color: #7b8190 !important;
                            margin: 0;
                            padding: 10px 20px;
                            &:hover{
                                color: #383c40 !important;
                            }
                        }
                    }

                    &:hover{
                        li{
                            width: 180px;
                        }
                    }

                    svg{
                        display: none;
                    }
                }

                .badge{
                    display: none;
                }

            }


            li.expand {
                &.open > a::before {
                    display: none !important;
                }

                > a::before {
                    display: none !important;
                }
            }
        }

        .page-container{
            margin-left: 70px;
        }

        .sidebar-brand{
            padding: 20px;
            width: 70px;
        }

        .logo{
            display: none;
        }
        .logo-collapsed{
            display: block;
        }
    }
}

@media (max-width: 990px){
    .sidebar{
        z-index: 1060;

        .sidebar-brand{
            padding: 13px 25px !important;
            width: 225px !important;
            box-shadow: none !important;
        }
        .sidebar-scroll{
            border-top: 1px solid #eef6f9;
        }
        .sidebar-toggle-btn{
            float: right;
            display: inline-block !important;
            margin: 18px 5px 0 0;
        }
    }

    .sidebar-off{
        left: -250px;
        transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        -webkit-transition: all .25s ease-in-out;
    }

    .navbar{
        left: 0;
    }

    .page-container{
        margin-left: 0px !important;
    }

    .sidebar-toggled{
        .sidebar-off{
            left: 0;
        }
    }

    #pre-loader .app-loader{
        right: 44% !important;
    }

}

@media (min-width:768px) and (max-width: 1024px){
    .widget-container.col-sm-6 {
        width: 50% !important;
    }
}

@media (max-width: 767px){
    .hidden-xs{
        display: none !important;
    }

    #page-content{
        padding: 15px !important;
    }

    .message-button-list {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;

        .list-group{
            margin-bottom: 15px;
        }
    }
    .message-view{
        display: block !important;
        padding-left: 0 !important;
    }

    #pre-loader .app-loader{
        right: 38% !important;
    }

    .box-content.avatar {
        display: none !important;
    }

    .modal-mask {
        width: 100% !important;
    }

    table.dataTable tbody td {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .rise-chat-wrapper {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        height: 450px !important;
        bottom: 0 !important;
    }

    .rise-chat-body {
        &.full-height {
            height: 413px !important;
        }

        &.long {
            height: 412px !important;
        }
    }

    .custom-toolbar {
        .navbar-collapse.show{
            overflow-y: auto;
        }

        .dataTables_filter {
            float: left;
            margin-left: 0;
        }

        div.DTTT_container:first-child:not(.mr15) {
            float: left !important;
            margin: 0;
        }

        div.DTTT_container:last-child{
            margin-bottom: 10px;
        }
    }

    .open .dropdown-menu {
        margin-right: 0 !important;
    }

    #timeline:before {
        background-image: linear-gradient(to top, #E5E9EC 0.5%, #f2f4f6 1%, #f2f4f6 99%);
    }

    .kanban-col {
        width: 175px !important;
        margin: 0 10px;
    }

    .kanban-col-title {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    .kanban-item {
        padding: 5px 8px !important;
        width: 175px !important;
        margin: 0 0px 6px 0 !important;
    }

    .dataTables_filter label {
        margin: 0;
    }

    .custom-toolbar .DTTT_container:last-child {
        margin-bottom: 0;
    }

    .mini-modal {
        width: 100% !important;
    }

    .custom-toolbar .navbar-collapse {
        padding: 15px 0 0 0;
    }

    .kanban-filters-container {
        padding: 15px !important;
    }

    .cart-item-details-container {
        width: 280px !important;
    }

    .init-cart-icon {
        z-index: 9 !important;
    }

    .client-widget-section{
        /*padding: 0 !important;*/
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
    }

    /* mobile view datatable */
    .toolbar-left-top,
    .datatable-export{
        display: none;
    }
    .mr15.DTTT_container{
        margin-right: 0 !important;
        float: none !important;
        text-align: center;
    }
    .dataTables_wrapper .dataTables_filter input{
        margin-left: 0;
    }

    .proposal-preview-container{
        padding: 10px !important;
    }
    .invoice-preview-container{
        padding: 10px !important;
    }

    .item-search-box-section{
        margin-top: 5px;
        width: 100%;

        .item-search-box{
            width: 100% !important;
        }
    }

    .item-categories-filter-section{
        margin-top: 15px;
        width: 100%;

        .w200{
            width: 100% !important;
        }
    }

    .user-dropdown-menu{
        .company-switch-option{
            display: block !important;

            .nav-link{
                display: none;
            }

            .hidden-xs{
                display: block !important;
            }

            .dropdown-menu{
                position: unset !important;
                display: block;
                box-shadow: none;
                margin-top: 0;
            }
        }
    }

    .filter-section-flex-row, .filter-section-left{
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    #task-table_wrapper, #project-table_wrapper, #ticket-table_wrapper{
        .filter-form{
            .save-filter-box, .filter-cancel-box{
                width: 47% !important;
                .save-filter-button , .cancel-filter-button{
                    width: 100%;
                }
            }
            .filter-item-box{
                width: 100%;
                .filter-multi-select{
                    width: 100%;
                    .dropdown-toggle{
                        width: 98%;
                    }
                }
                .w200{
                    width: 98%;
                }

                .btn-group{
                    &.filter{
                        width: 98%;
                    }
                }
            }

            .datepicker-custom-selector{
                width: 98%;
            }
        }
    }

    .h373{
        height: auto !important;
    }

    #all_tasks_overview-widget, #my_tasks_overview-widget, #leads-overview-widget{
        height: auto !important;
        .position-absolute{
            position: unset !important;
            padding-top: 10px;
        }
    }

}

@media (max-width: 576px){
    .public-navbar{
        .navbar-collapse{
            border-top: 1px solid #eef6f9;
            .navbar-nav{
                flex-direction: row;
                float: right;
                li{
                    display: inline-block;
                }
            }
        }
    }

    .ticket-card{
        padding: 0 !important;
        .ticket-comment-container{
            margin: 10px !important;

            .avatar-sm{
                height: 30px;
                width: 30px;
            }
        }
    }
}

@media screen and (max-width: 500px) {

    /*invoices*/
    #invoice-total-section, #estimate-total-section, #order-total-section, #contract-total-section, #proposal-total-section {
        width: 100% !important;
    }

    tr.invoice-preview-header-row {
        img {
            width: 100% !important;
        }

        td {
            &.hidden-invoice-preview-row {
                width: 0 !important;
            }

            &.invoice-info-container {
                width: 55% !important;
            }
        }
    }

    .invoice-preview {
        min-width: 100% !important;
    }

    .invoice-preview-container {
        padding: 10px;

        table {
            th, td {
                padding: 8px 5px !important;
            }
        }

        .ribbon {
            left: -5px !important;
            top: -15px !important;
            width: 90px !important;
            height: 90px !important;

            span.badge {
                width: 90px !important;
                left: -20px !important;
                top: 15px !important;
            }
        }
    }

    .process-order-preview {
        min-width: 100% !important;
    }
}

@media (max-width: 500px){
    .navbar-nav{
        .sidebar-toggle-btn{
            padding-left: 4px !important;
        }
        .nav-item{
            #user-dropdown{
                padding-right: 8px !important;
            }
        }
    }

    .nav-item{
        .nav-link{
            .user-name{
                display: none !important;
            }
        }
        .dropdown-toggle{
            &:after{
                display: none;
            }
        }
    }

    #timeline-content{
        #post-form-container{
            .avatar{
                display: none !important;
            }
        }

        #timeline{
            &:before{
                display: none;
            }
            .post-content{
                padding: 0 !important;
                margin-bottom: 0 !important;

                .card{
                    margin-bottom: 0 !important;
                }

                .post-date{
                    span{
                        display: none;
                    }
                    &:before{
                        display: none;
                    }
                }
            }
        }
    }

    .title-button-group{
        margin-bottom: .5rem !important;
        .dropdown{
            display: grid !important;
        }
        .btn{
            margin: 0.65rem 0 !important;
        }
    }

    .hidden-sm{
        display: none !important;
    }

    .project-title-button-group-section{
        display: none !important;
    }

    .scrollable-tabs{
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: inherit;
        white-space: nowrap;
        width: 100%;
        height: 60px;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .project-footer-button-section{
        display: block !important;
    }

    .project-activity-section{
        margin-bottom: 50px !important;
    }

    .move-chat-icon{
        right: 45% !important;
    }

    .project-details-view{
        padding: 0 !important;
    }

    #project-tasks_list-section{
        .js-task{
            display: none;
        }
        .task-labels{
            float: left !important;
            margin-left: 0 !important;
            .badge{
                margin-top: 5px !important;
            }
        }
    }

    .task-view-modal-body{
        .container-fluid{
            padding: 0;
        }
    }

    .modal{
        .modal-content{
            border-radius: 0;
        }
    }
}

@media (max-width: 590px){
    .navbar-expand{
        .navbar-nav{
            .dropdown-menu{
                position: fixed;
                top: 58px;
                width: 100%;
                border-radius: 0;
            }
        }
    }

    .footer{
        position: absolute;
        padding-bottom: 5px !important;

        .float-start{
            float: none !important;
        }

        .float-end{
            display: flex;
            float: none !important;
            justify-content: center;
        }
    }
}

@media screen and (max-width: 530px) {
    .comment-image-box  {
        width: 100% !important;
    }
    .cart-item-details-container{
        width: 150px !important;
    }

    .message-send-button{
        display: inline !important;
    }
}

@media screen and (max-width: 440px) {
    .custom-toolbar .DTTT_container .w200, .custom-toolbar .DTTT_container .w150, .custom-toolbar .DTTT_container .w100, .custom-toolbar .DTTT_container .w175, .custom-toolbar .DTTT_container .btn, .custom-toolbar .DTTT_container .dropdown{
        width: 100%;
    }
}


@media screen and (max-width: 425px) {
    .page-title{
        .title-button-group{
            .select2-container{
                width: 100%;
            }
            #calendar-filter-dropdown{
                .DTTT_container{
                    width: 180px;
                    @media (max-width: 400px){
                        width: 100px !important;
                    }
                }
            }
            .add-btn{
                display: block;
            }
        }
    }

    #event-calendar{
        .fc-header-toolbar{
            display: block;
            text-align: center;
            .fc-button-group{
                float: left;
            }
            .fc-today-button{
                float: right;
            }
            .fc-button-group:last-child{
                float: none;
                margin-top: 15px;
            }
        }
    }

    .g-recaptcha{
        margin-left: -25px;
        -ms-transform: scale(0.8,0.8);
        -webkit-transform: scale(0.8,0.8);
        -moz-transform: scale(0.8,0.8);
        transform: scale(0.8,0.8);
    }

    .full-width-button{
        .events-title-button{
            .btn{
                width: 100% !important;
            }

            #calendar-filter-dropdown{
                width: 100%;

                .DTTT_container{
                    width: 100% !important;
                    display: unset;

                    .dropdown-menu{
                        width: 100%;
                    }
                }
            }
        }

        .clients-view-button, .estimate-request-full-button, .announcements-page{
            .btn{
                width: 100% !important;
            }

            .title-button-group{
                width: 100% !important;
                margin: 0 !important;
                float: none !important;
                padding: 0 15px;
            }

            .clients-view{
                padding: 0 0 5px 0 !important;
            }

            .dataTables_wrapper{
                .w-filter-right{
                    width: 100%;

                    #contact-table_filter{
                        margin-left: 8px;
                    }

                    .DTTT_container{
                        margin-left: 15px;
                    }

                    div.dataTables_filter{
                        input{
                            margin-left: 15px !important;
                        }
                    }
                }
            }
        }
    }

    .grid-button{
        #client-tabs, .invoices-view{
            padding-bottom: 15px;
        }

        .projects-page{
            padding-bottom: 15px;

            h1{
                padding-bottom: 5px !important;
            }
        }

        .project-details-view{
            .tab-title{
                padding-bottom: 15px;
            }
        }
        .items-page-title, .contracts-page-title, .estimate-page-title, .proposal-page-title, .notes-page-title, .time-card-page-title, .tickets-page-title, .expenses-page-title{
            padding-bottom: 15px;
        }

        .leaves-page-title{
            h1{
                padding-bottom: 10px !important;
            }

            padding-bottom: 15px;
        }

        .invoices-details-view, .ticket-view-title{
            padding-bottom: 15px !important;

            h1{
                padding-bottom: 10px;
            }

            .title-button-group{
                .dropdown{
                    display: unset !important;
                }
            }
        }

        .ticket-view-footer-button{
            .float-end{
                float: none !important;
            }
            .btn{
                width: 45%;
                font-size: 12px;
                margin: 5px !important;
                padding: 5px;
            }
        }

        .timesheet-chart-button{
            width: 100%;
            #monthly-chart-date-range-selector{
                width: 100%;
                text-align: center;
                margin: 15px 0;
            }
            .select2-container{
                width: 100%;
                margin-bottom: 15px;
            }

            .timesheet-chart-project-dropdown{
                margin-right: 0 !important;
            }
        }

        .tab-title, .page-title, .title-tab:not(.my-tasks):not(.all-tasks-kanban):not(.leads-title-section){
            width: 100%;

            .title-button-group{
                width: 100%;
                margin: 0 !important;

                .btn{
                    width: 45%;
                    margin: 15px 0 0 12px!important;
                }
            }
        }

        #reload-kanban-button{
            width: 100%;
            margin-bottom: 10px;
        }

        .dataTables_wrapper{
            .w-filter-right{
                width: 100%;

                #contact-table_filter{
                    margin-left: 8px;
                }

                .DTTT_container{
                    margin-left: 15px;
                }

                .DTTT_container.btn-group{
                    width: 100%;
                    margin-left: 0 !important;
                    padding-left: 15px;
                }

                div.dataTables_filter{
                    input{
                        margin-left: 15px !important;
                    }
                }
            }
        }

        .income-vs-expenses-chart-button{
            width: 100%;
            .select2-container{
                width: 100%;
                margin: 15px 0;
            }
            #yearly-chart-date-range-selector{
                width: 100%;
                text-align: center;
            }
        }

        .proposal-preview-button, .contract-preview-button{
            .grid-button-group{
                float: none !important;
                display: inline-block;
                width: 100%;
                margin-top: 10px;
                margin-right: 0 !important;

                .btn-success{
                    margin-right: 2px !important;
                    width: 49%;
                }
                .btn-danger{
                    width: 49%;
                    margin-right: 0 !important
                }

                .float-start{
                    width: 50%;
                    text-align: center;
                }
            }
        }
    }

    .todo-page{
        .w-filter-right{
            width: 100%;

            #todo-table_filter{
                input{
                    margin-left: 15px;
                }
            }
            .DTTT_container{
                margin-left: 15px;
                .btn-group{
                    width: 100%;
                }
            }
        }
    }

    .grid-button.all-tasks-view, .grid-button.all-tasks-kanban-view, .grid-button.leads-view{
        .title-button-group{
            padding-bottom: 10px;
        }
    }

    #project-milestones-section, #project-files-section, #project-timesheets-section, #project-invoices-section, #project-payments-section, #project-expenses-section, #project-contracts-section, #project-tickets-section, #lead-contacts, #lead-estimate-requests, #lead-files, #monthly-orders, #yearly-orders,
    #monthly-payments, #yearly-payments, #custom-payments, #client-projects-list{
        .dataTables_wrapper{
            .w-filter-right{
                width: 100%;

                .DTTT_container{
                    margin-left: 15px;
                }
                div.dataTables_filter{
                    input{
                        margin-left: 15px !important;
                    }
                }
                .DTTT_container.btn-group{
                    width: 100%;
                    margin-left: 0 !important;
                    padding-left: 15px;
                }
            }
        }
    }

    #user-roles-table_wrapper, #invoice-table_wrapper{
        .w-filter-right{
            width: 100%;
            #user-roles-table_filter{
                margin-left: 8px;
            }
            .DTTT_container{
                margin-left: 15px;
                .btn-group{
                    width: 100%;
                }
            }

            div.dataTables_filter{
                input{
                    margin-left: 15px !important;
                }
            }
        }
    }

    .gantt-view{
        .custom-toolbar{
            margin-right: 0 !important;
            .select2-container{
                width: 100%;
                margin: 10px 0 0 0 !important;
            }

            .gantt-status-filter{
                width: 100%;
                margin: 10px 0 0 0 !important;

                .dropdown-menu{
                    width: 100%;
                }
            }
        }
    }

    .leads-details-view{
        .leads-page-title{
            width: 100%;

            .title-button-group{
                width: 100%;
                margin: 0 !important;

                .btn{
                    width: 45%;
                }
            }
        }
    }

    .clients-project-page-title{
        margin-top: 6px !important;
    }

    .btn:not(.btn-lg) {
        text-align: left;
    }

    .select2-container{
        .select2-choice{
            .select2-chosen{
                text-align: left;
            }
        }
    }

}

@media (max-width: 400px){
    .user-badge{
        display: none;
    }
}

@media screen and (max-width: 400px){
    .custom-toolbar .custom-filter-search{
        width: 120px !important;
    }
    .project-activity-logs-container ul{
        padding-left: 16px !important;
    }
    .comment-form-container{
        padding: 0;
    }
    .comment-avatar{
        padding-left: 5px;
    }
    #project-timer-box .dropdown-menu {
        right: auto;
        left: 0;
    }
    .checkbox-blank, .checkbox-checked, .checkbox-un-checked{
        margin-right: 10px;
    }
}

@media screen and (max-width: 385px) {
    .cart-item-details-container{
        width: 75px !important;
    }
}

@media screen and (max-width: 363px) {
    #event-calendar div.fc-right div.fc-button-group{
        margin-top: 5px !important;
    }
}

@media screen and (max-width: 300px) {
    .cart-item-details-container{
        width: 50px !important;
    }

    #notificaion-popup-list, #messages-popup-list {
        max-height: 400px !important;
        overflow-y: scroll !important;
    }

    .invoice-preview-container {
        padding: 0;
    }

    .dataTables_filter input {
        width: 120px !important;
    }

    .task-link-btn {
        display: none;
    }
}

@media screen and (max-width: 250px) {
    .invoice-preview-container table th, .invoice-preview-container table td{
        padding: 5px 0 !important;
    }
}