@media (max-width: 1300px) {
    .chat-block {
        .chat-sidebar {
            width: 350px;
        }
    }
}

@media (max-width: 1200px) {
    .header {
        .menu-toggle-btn {
            display: block;
        }

        .header-mobile-buttons {
            a.header-menu-btn {
                display: block;
            }
        }

        .header-menu {
            opacity: 0;
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
            position: fixed;
            left: -110%;
            top: 0;
            bottom: 0;
            overflow: auto;
            width: $menu-width;
            background: white;
            z-index: 999;
            padding: 0 30px;
            transition: all .2s;

            &-header {
                display: flex !important;

                img {
                    width: 100px;
                }
            }

            .dropdown {
                display: block;
            }

            ul.navbar-nav {
                display: block;
                margin-left: 0;

                li {
                    a {
                        color: black;
                        padding: 15px 30px !important;
                        height: auto !important;
                        margin-left: 0 !important;
                        border-right: 4px solid transparent;
                        border-left: 4px solid transparent;
                        border-radius: $border-radius * 10;

                        &:before {
                            display: none !important;
                        }

                        .sub-menu-arrow {
                            margin-left: auto !important;
                        }

                        &:hover {
                            color: black;
                            background: darken(white, 5%) !important;
                        }

                        &.active {
                            background: rgba($primary, .15) !important;
                            color: $primary !important;
                            border-left-color: $primary;
                            border-right-color: $primary;
                        }
                    }

                    .nav-sub-menu {
                        visibility: visible !important;
                        opacity: 1 !important;
                        width: auto !important;
                        position: static !important;
                        padding: 0 !important;
                        margin-top: 0 !important;
                        display: none;
                        transform: scale(1) !important;

                        &:after {
                            display: none !important;
                        }

                        ul {
                            box-shadow: none !important;
                            border: none !important;
                            padding: 0 !important;
                            border-radius: 0 !important;

                            li {
                                a {
                                    padding-left: 58px !important;
                                }

                                ul {
                                    li {
                                        a {
                                            padding-left: 70px !important;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &.open {
                        & > .nav-sub-menu {
                            display: block;
                        }
                    }
                }
            }

            &.open {
                left: 0;
                opacity: 1;
            }
        }
    }

    .sidebar {
        z-index: 1001;
    }

    .page-header, .bg-image {
        & > .container {
            max-width: 100% !important;
            padding: 0;
        }
    }

    .layout-wrapper {
        margin-left: 0;

        .content {
            & > .container {
                max-width: 100% !important;
                padding: 0;
            }
        }
    }

    body.rtl .layout-wrapper {
        margin-left: 0;
        margin-right: 0;
    }

    .content-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
    }


    .menu {

        .menu-close-btn {
            display: block;
        }

        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
        @include absolute-menu;

        &.open {
            left: 0 !important;
            opacity: 1;
        }

        &-body {
            overflow: auto;
            border-radius: 0 !important;

            .dropdown {
                background-color: #f5f4fe;
            }

            ul li > a.active .nav-link-icon {
                background-color: white;
            }
        }
    }

    body.rtl {
        .menu {
            left: auto !important;
            right: -110% !important;

            &.open {
                right: 0 !important;
            }
        }
    }

    body.header-menu {
        .menu {
            &-body {
                ul {
                    li {
                        a {
                            display: flex;
                            align-items: center;
                            padding: 10px 20px;

                            .nav-link-icon {
                                margin-right: .8rem;
                            }

                            .sub-menu-arrow {
                                margin-left: auto;
                                font-size: 10px;
                            }

                            & + ul {
                                li {
                                    a {
                                        padding-left: 50px !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .sidebar {
        a.btn-sidebar-close {
            display: flex !important;
        }
    }
}

@media (max-width: 1000px) {
    .chat-block {
        .chat-content {
            display: none;
            padding-left: 30px;
            padding-right: 30px;
            padding-bottom: 20px;

            .chat-header {
                padding: .5rem 1.5rem;
            }

            .mobile-chat-close-btn {
                display: block;
            }

            &.chat-mobile-open {
                display: flex;
                background-color: white;
                position: absolute;
                right: 0;
                left: 0;
                top: 0;
                height: 100vh;
                max-width: 100%;
                z-index: 2;
                bottom: 0;
            }
        }

        .chat-sidebar {
            flex: 1;
            border-right: none;
            max-width: 100% !important;
        }
    }
}

@media (max-width: 768px) {
    .header {
        .logo {
            display: none !important;
        }

        .header-mobile-buttons {
            margin-left: auto;

            a.actions-btn, a.search-bar-btn {
                display: flex;
            }
        }

        .search-form {
            .close-header-search-bar {
                display: block;
            }
        }

        .header-bar {
            opacity: 0;
            position: fixed;
            background: white;
            right: 0;
            left: 0;
            top: -$header-height * 2;
            height: $header-height - 1;
            z-index: 9;
            transition: all .2s;
            padding: 0 20px;

            &.open {
                opacity: 1;
                top: 0;
            }
        }
    }

    .card {
        .card-body {
            padding: 1.2rem;
        }
    }

    .preloader {
        img {
            width: 140px;
        }

        .preloader-icon {
            width: 35px;
            height: 35px;
        }
    }

    .chat-block {
        .chat-content {
            border-radius: $border-radius;

            .message-item {
                padding-left: 0 !important;

                &.me {
                    padding-right: 0 !important;
                }
            }

            .messages .message-item .time {
                display: none;
            }

            .messages .message-item .message-item-content {
                max-width: 100%;
                background-color: darken(white, 5%);
            }
        }
    }

    .buyer-profile-cover {
        height: auto !important;
    }

    .toast-top-right {
        top: 1rem;
        right: 1rem;
    }

    .toast-top-left {
        top: 1rem;
        left: 1rem;
    }

    .header {
        .search-form {
            display: none;
            margin-right: 0;
            position: fixed;
            background-color: rgba(black, .15);
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            padding: 1.5rem;

            &.show {
                display: block;
            }
        }

        .page-title {
            margin-right: 20px;
        }
    }

    footer {
        padding: 15px 20px;

        .nav {
            display: none;
        }
    }

    .table-responsive-stack tr {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-bottom: 3px solid #ccc;
        display: block;
    }
    /*  IE9 FIX   */
    .table-responsive-stack td {
        float: left \9
    ;
        width: 100%;
    }

    .sidebar {
        & > ul.nav {
            display: flex;

            li.nav-item {
                border: none;
            }
        }
    }

    .fc {
        .fc-toolbar {
            &.fc-header-toolbar {
                & > div {
                    float: none !important;

                    .fc-button-group {
                        float: none !important;
                    }

                    &.fc-left {
                        display: flex;
                        justify-content: center;
                        margin-bottom: 15px;
                    }

                    &.fc-right {
                        margin-bottom: 5px;
                    }
                }
            }
        }
    }
}

@media (max-width: 600px) {

    .dataTables_wrapper {
        .dataTables_filter {
            display: block;
        }

        .dataTables_length {
            margin-bottom: 15px;
        }

        div.dataTables_paginate ul.pagination {
            justify-content: center !important;
            margin-top: 15px !important;
        }
    }

    .timeline {
        .timeline-item {
            display: block;

            &:before {
                display: none;
            }

            .avatar {
                margin: auto;
                margin-right: auto !important;
                text-align: center;
                display: table;
                margin-bottom: 20px;
            }
        }
    }
}

@media (max-width: 540px) {
    .menu {
        width: 100% !important;
        right: 0;

        &-body {
            padding: 20px;
        }
    }

    .chat-block {
        height: calc(100vh - 185px);
    }

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

    .sidebar {
        width: 100%;
    }

    .wizard > .steps > ul > li {
        float: none;
        width: 100%;
        margin-bottom: 10px;
    }

    .wizard > .content {
        background: none;
    }

    .wizard > .content > .body {
        position: static;
        padding: 1.2rem;
    }
}
