@import 'assets/scss/colors';

@media print {
    .print-peview {
        color: $black;
    }

    a[href]:after {
        content: none !important;
    }

    html,
    body {
        background-color: $white;
        color: $black;
    }
}

@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;
        }
    }

    .subscription-details-view,
    .invoice-details-view,
    .order-details-view,
    .contract-details-view {
        .file-grid-view-container {
            max-width: 126px;
        }
    }

    .install-pwa-button {
        display: none !important;
    }
}

@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;
    }

    .content-sidebar {
        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;
    }

    .modal-dialog {
        margin: 0;
    }

    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,
    .contract-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-left,
    .filter-section-right,
    .filter-section-flex-row {
        flex: none !important;
        width: 100%;
        display: block !important;
    }

    #task-table_wrapper,
    #project-table_wrapper,
    #ticket-table_wrapper {
        .filter-form {
            .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;
    }

    .h379 {
        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;

            span {
                &.me-5 {
                    margin-right: 0 !important;
                }
            }
        }
    }

    .ticket-details-container {
        &.d-flex {
            display: block !important;

            .details-view-right-section {
                width: auto;
                margin-left: 0 !important;
            }
        }
    }
}

@media (max-width: 576px) {
    .public-navbar {
        .navbar-collapse {
            border-top: 1px solid #eef6f9;

            .navbar-nav {
                flex-direction: row;
                float: right;

                li {
                    display: inline-block;
                }
            }
        }

        .navbar-toggler {
            padding: 21px 15px;
        }
    }

    #file-manager-sidebar {
        display: none !important;
    }

    #view-details-button {
        display: none;
    }

    .folder-item {
        .item-name {
            display: block;
            width: 75%;
        }
    }

    .file-manager-more-menu {
        display: inline !important;
    }

    #file-manager-items-box {
        padding-right: 0 !important;
    }

    .rise-cart-wrapper {
        height: 450px !important;
        bottom: 72px !important;
        box-shadow: 0px -5px 10px -5px rgba(0, 0, 0, 0.2) !important;
        z-index: 100 !important;
    }

    .rise-chat-wrapper:not(&.rise-cart-wrapper) {
        width: 100% !important;
        height: calc(100vh - 72px) !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        z-index: 1060 !important;
        box-shadow: none !important;

        .rise-chat-body {
            height: calc(100vh - 215px) !important;
        }
    }

    .init-chat-icon {
        bottom: 100px !important;
    }

    .init-cart-icon {
        right: 20px !important;
    }

    .move-cart-icon {
        top: 80px !important;
        right: 42.5% !important;
    }

    .public-view {
        .mobile-bottom-menu {
            display: none !important;
        }

        .init-chat-icon {
            bottom: 20px !important;
        }

        .rise-cart-wrapper {
            bottom: 0 !important;
        }

        .move-cart-icon {
            top: 155px !important;
        }
    }

    #place-order-form,
    #invoice-details-section,
    #estimate-details-section {
        .add-item-btn {
            margin-bottom: 20px;
        }
    }

}

@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,
    .contract-preview,
    .proposal-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: 5px !important;
        display: inline-block !important;
        width: auto !important;

        .dropdown {
            display: grid !important;
        }

        .btn {
            margin: 0.65rem 0 !important;
        }
    }

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

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

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

    .reports-tabs {
        .scrollable-tabs {
            padding-left: 15px !important;
            width: 95%;

            .dropdown-menu {
                &.show {
                    position: fixed !important;
                    top: 30px;
                    left: 20px !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 {
        overflow: hidden;

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

    .modal-footer {
        padding: 15px !important;
    }

    .sidebar-toggled {
        .sidebar {
            width: 100%;

            .sidebar-toggle-btn {
                margin: 0;
                padding: 21px 15px;
                color: $light-default-text-color;
            }
        }
    }

    .card {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    .navbar-custom {
        background-color: transparent;
    }

    .fixed-top {
        position: relative;
    }

    .fixed-top.shadow-sm {
        box-shadow: none !important;
    }

    .page-container {
        margin-top: 10px !important;

    }

    .scrollable-page {
        margin-bottom: 72px;
    }

    body.sidebar-toggled {
        overflow: hidden !important;
    }

    .mobile-bottom-menu {
        .dropdown-menu {
            .dropdown-divider {
                display: none;
            }

            .dropdown-item {
                border: none !important;

                &.btn-success,
                &.btn-danger {
                    color: $white;
                }
            }
        }
    }

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

    .filter-section-right {
        .filter-item-box {
            width: 100% !important;
            padding-right: 10px;

            label {
                width: 100% !important;

                .form-control {
                    width: 100% !important;
                    margin-left: 0;
                }
            }
        }

        #gantt_view_selector_section {
            .select2-container {
                width: 100% !important;
            }
        }
    }

    .filter-section-left {
        .filter-item-box:not(.show-hide-filter-button-box) {
            display: flex !important;

            &.bookmarked-filter-button-wrapper {
                display: inline-block !important;
            }

            &.smart-filter-dropdown-box {
                display: inline-block !important;
                width: 80%;

                .smart-filter-dropdown-container {
                    .smart-filter-dropdown {
                        width: 100% !important;
                        text-align: left;

                        &::after {
                            position: absolute;
                            right: 12px;
                            margin-top: 9px;
                        }
                    }
                }
            }

            .btn-group {
                width: 100% !important;
            }

            .dropdown {
                &.filter-multi-select {
                    width: 100% !important;

                    .dropdown-toggle {
                        width: 100% !important;
                    }
                }
            }

            .select2-container {
                width: 100% !important;
            }
        }

        .filter-item-box {
            &.show-hide-filter-button-box {
                float: right !important;
            }
        }
    }

    #kanban-filters {
        .filter-section-left {
            .filter-item-box {
                &:first-child {
                    width: auto !important;
                }
            }
        }
    }

    .payment-received-chart {
        .payment-chart-button-section {
            float: unset !important;

            .select2-container {
                width: 100% !important;

                .select2-choice {
                    width: 100% !important;
                    display: inline-block;
                    margin: 5px 0 !important;
                }
            }

            #payment-chart-date-range-selector {
                width: 100%;

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

    .filter-form {
        .filter-item-box {
            display: block !important;
            margin: 10px 0 !important;

            .select2-container,
            .datepicker-custom-selector {
                width: 100% !important;
            }

            .filter-multi-select {
                width: 100% !important;

                .dropdown-toggle {
                    width: 100% !important;
                }
            }

            &.btn-group {
                display: flex !important;
            }

            .btn-group {
                width: 100%;

                .dynamic-range-filter {
                    width: 100%;

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

                &.filter {
                    width: 100% !important;
                }
            }

            &.save-filter-box {
                width: 48% !important;
                margin-right: 12px !important;

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

            &.filter-cancel-box {
                width: 48% !important;
                margin: 0 !important;

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

        .save-filter-box,
        .filter-cancel-box {
            display: inline-block !important;
            width: unset !important;
            margin: 0 5px 0 0 !important;
        }
    }

    #kanban-filters {
        .custom-filter-search {
            width: 100% !important;
        }
    }

    .navbar-custom {
        border: none;
    }

    .sidebar {
        .sidebar-scroll {
            border-top-color: $light-default-border !important;
        }

        #personal-language-icon {
            padding: 21px 15px !important;
        }
    }

    #calendar-filter-dropdown,
    .dynamic-range-filter {
        .dropdown-menu {
            width: 100%;
        }
    }

    .dataTable.nowrap {
        td {
            white-space: normal !important;
        }
    }

    .details-view-container {
        .info-section {
            text-align: left !important;
            margin-top: 15px;
        }

        .p15 {
            padding: 0 !important;
        }

        #page-content {
            padding: 0 !important;
        }

        .table-responsive {
            padding: 0 !important;
        }
    }

    .invoice-preview-container {
        border: none !important;
        box-shadow: none !important;
    }

    .preview-editor-button-group {
        display: grid !important;
        padding: 0 !important;

        .btn {
            margin: 0 0 10px 0 !important;
        }
    }

    .tab-pane {
        .chart-date-range-button {
            .btn-group {
                width: 100% !important;
                margin: 0 !important;
            }
        }
    }

    .dashboard-edit-section {
        #widget-container-area {
            position: unset;
            width: auto;
            padding-right: 0;
        }

        #widget-row-container {
            margin-left: 0;

            .page-title {
                display: grid;

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

    #file-manger-title-bar {
        padding-bottom: 0 !important;

        .title-button-group {
            .btn:not(#view-details-button) {
                display: block;
                margin: 15px !important;
            }
        }
    }

    .grid-button {
        .grid-button-xs {
            .btn {
                width: 47%;

                &:first-child {
                    margin-right: 15px !important;
                }
            }
        }
    }

    #gantt-filters {
        .filter-section-right {
            .btn {
                width: 100%;
                margin-left: 0 !important;
                margin-top: 10px;
            }
        }
    }

    .w-100-xs {
        width: 100%;
    }

    .m0-xs {
        margin: 0 !important;
    }

    .modal {
        z-index: 1060;
    }

    .summation-section {
        margin-bottom: 10px;
    }

    table.dataTable {
        &.xs-hide-dtr-control {
            &.dtr-inline {
                &.collapsed {
                    tbody {
                        tr {
                            td {
                                &.dtr-control {
                                    padding-left: 10px !important;

                                    &:before {
                                        display: none !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        &.no-title {
            thead {
                th {
                    display: none;
                }
            }
        }
    }

    .datatable-tools {
        .datatable-export {
            .dt-buttons {
                margin-top: -5px;
                margin-bottom: 0 !important;
            }
        }

        .col-md-3 {
            border-bottom: 1px solid $light-default-border;
            margin-bottom: 20px;
            padding-bottom: 20px;
        }

        .dataTables_info {
            padding-top: 5px !important;
        }
    }

    .xs-full-width {
        padding: 0 !important;

        .card {
            border: none !important;
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;

            &.xs-no-bottom-margin {
                margin-bottom: 0 !important;
                padding-bottom: 15px !important;
            }
        }



        .card {
            border: none !important;
        }

        .ticket-comments-section {
            padding: 0 !important;

            #comment-form-container {
                .p15 {
                    padding: 0 !important;
                }
            }
        }

        &#page-content {
            padding: 0 !important;
        }

        .modal-body {
            padding: 0 !important;

            .title-button-group {
                margin: 0 !important;
                float: unset !important;
            }
        }

    }

    .round-btn-xs {
        padding: 6px 9px !important;
    }

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

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

    .bootstrap-timepicker-widget {
        &.dropdown-menu {
            &.open {
                z-index: 1060 !important;
            }
        }
    }

    #client-settings-form {
        .form-switch {
            .form-check-input {
                margin-left: 10px !important;
            }
        }
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .note-editor {
        .note-editable {
            font-size: 16px !important;
        }
    }

    .list-status-border {
        border-left: 5px solid !important;
    }

    .note-editor {
        .note-toolbar {
            .note-btn-group {
                margin-right: 0;

                .btn-fullscreen,
                .btn-codeview {
                    display: none;
                }

                &.note-font {
                    .note-btn {
                        &:last-child {
                            display: none !important;
                        }
                    }
                }
            }
        }
    }
}

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

            .notification-dropdown {
                height: 80%;

                #notificaion-popup-list {
                    max-height: calc(100vh - 216px);
                    overflow-y: auto;
                }
            }
        }
    }

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

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

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

    .sidebar {
        bottom: 72px !important;

        .sidebar-scroll {
            height: calc(100vh - 137px) !important;
        }
    }
}

@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%;
    }

    .find-more-items-btn {
        width: 100%;
        margin-top: 10px;
    }
}


@media screen and (max-width: 430px) {
    .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:not(.buttons-excel):not(.buttons-print) {
                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:not(.buttons-excel):not(.buttons-print) {
                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 {

        .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;
                }
            }
        }

        .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;
                margin-left: 0 !important;
            }

            .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% !important;
                margin: 0 !important;
            }
        }

        #reload-kanban-button {
            width: 100%;
        }

        .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 {
            .accept-reject-button {
                margin-top: 20px !important;
            }

            .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;

                    .btn {
                        width: 98%;
                        margin-top: 10px;
                    }
                }

                .float-end {
                    width: 50%;

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

    .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;
    }

    .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;
    }
}

@media screen and (max-width: 885px) {
    #file-details-box {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1400px) {
    .col-md-3 {
        &.widget-container {
            width: 50%;
        }
    }
}

@media screen and (max-width: 1140px) {
    .ticket-details-container {
        .comment-container {
            .comment-image-box {
                width: auto;
            }
        }

        .details-view-right-section {
            width: 300px;
        }
    }
}