@media only screen and (max-width: 765px) {
    .sidebar {
        display: none;
    }

    body {
        overflow-y: auto;
    }

    .navbar-nav {
        display: block;
    }

    .navbar-dark .navbar-nav .active > .nav-link {
        color: #000;
    }

    .navbar-dark .navbar-nav .nav-link {
        color: #444;
        font-size: 13px;
    }

    .home-section {
        width: 100%;
        left: 0px;
    }

    .navbar-dark .navbar-toggler {
        background-color: #1e417c;
        color: #fff;
        padding: .125rem .375rem;
    }

    .drag-area {
        width: 100%;
        height: 55vh;
    }

    .videos-upload h3 {
        padding: 0px 30px;
        line-height: 22px;
        font-size: 14px;
    }

    .btn-server {
        padding: 2px 2px !important;
        font-size: 10px !important;
        margin: 0 2px !important;
        border-radius: 0;
        width: 55px;
    }

    .btn-upload {
        width: 120px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 5px;
    }

        .btn-upload .fa-cloud-upload {
            font-size: 18px !important;
            left: 8px;
            top: 7px;
        }

    .edit-title {
        width: 60%;
    }

    .video-thumbnail .width-25 {
        margin-left: 0px;
    }

    .video-thumbnail .fa-check {
        margin-right: 2px;
        margin-left: 5px;
    }

    .move-delete {
        width: 32%;
        margin: 7px 2px;
    }

        .move-delete li a {
            font-size: 12px;
            padding: 6px 5px;
        }

        .move-delete .fa-sign-out {
            font-size: 14px !important;
        }

        .move-delete .fa-trash-o {
            font-size: 15px !important;
            margin: 0 4px;
        }

    .server-status.f-right {
        margin-top: -18px;
        margin-bottom: 8px;
    }

        .server-status.f-right span {
            width: 100%;
            float: left;
        }

    .folder-sync {
        width: 230px;
        margin: 10px 0;
    }

    .table thead th {
        vertical-align: bottom;
        border-bottom: 0px solid #dee2e6;
    }

    .form-check.position-relative {
        height: 50px;
        min-width: 30px;
    }

    .video-thumbnail {
        min-width: 210px;
    }

    .width-25 {
        min-width: 50px !important;
    }

    .video-thumbnail-title {
        width: 210px;
    }

    .server-upload {
        min-width: 250px;
    }

    .video-data-grid table tbody tr td {
        font-size: 12px;
        line-height: 16px;
    }

    .video-data-grid table tbody tr input[type=checkbox], input[type=radio] {
        width: 13px !important;
        height: 13px !important;
        margin-top: 9px;
    }

    .video-thumbnail-title {
        line-height: 15px;
        font-size: 12px;
    }

    .video-upload-content {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .home-section {
        overflow-y: auto;
    }

    .padding-top-10 {
        padding-top: 10px;
    }

    /*modal video player css style*/

    .modal-lg, .modal-xl {
        max-width: 95% !important;
        margin: 1rem 0.5rem;
    }

    .serverdiv {
        width: 50%;
        float: left;
        border-right: 0px solid #cdcdcd;
        margin-right: 0;
    }

        .serverdiv .margin-right-10 {
            display: none;
        }

        .serverdiv span {
            margin-right: 0.1rem;
            font-size: 0.75rem;
        }

    .serverplayer {
        width: 45%;
        float: left;
        margin: 0.2rem;
        margin-top: 0.45rem;
    }

    .playfrom {
        width: 45%;
        float: left;
        font-size: 0.7rem;
    }

    .playserver {
        width: 44%;
        float: left;
    }

        .playserver.form-control {
            margin-top: -8px;
            font-size: 0.9rem;
        }

    .iconsdiv {
        width: 3%;
        float: right;
    }

    .btn-addquestion {
        float: right;
        margin-right: 1rem;
    }

    .video-player video {
        width: 100%;
        height: auto;
        background-color: #000;
    }

    .video-player {
        width: 100%;
    }

    .modal-videoplayer-structure {
        overflow-y: auto;
        max-height: 77vh;
        min-height: 77vh;
        padding: 0rem;
    }

    .searchbar {
        width: 74%;
        float: left;
    }

    .questiondiv.active .duration {
        width: 17%;
        padding: 1px 10px;
    }

    .duration {
        width: 16%;
    }

    .addquestionsection {
        position: relative;
        width: 100%;
    }

    .header-title-status {
        display: block;
        flex-flow: row;
    }

    .flex-grow-0.margin-right-10 {
        width: 100%;
        float: left;
    }

    .folder-sync .server-retry {
        position: absolute;
        bottom: 3px;
        right: 3px;
    }

    .width-100 .width-70 {
        width: 95% !important;
    }

    .question-title {
        float: left;
        margin: 0.5% 1% 0 0;
        font-size: 0.9rem;
    }

    .player-header.modal-header .close {
        color: #707070;
        font-size: 1.2rem;
        margin-top: 2px;
    }

    .timer {
        float: right;
        margin: 0.5% 1% 0 0;
        font-size: 0.8rem;
        margin-right: 2%;
    }

    .modal-header .close {
        margin-top: -3px;
    }

    .btn-addquestion {
        width: 45%;
    }

    .quepreview-section {
        width: 100%;
    }

    .ck-width {
        width: 100%;
    }

    .tab-header .move-delete {
        width: 28%;
        margin: 11px 2px;
    }

    .quepreview-section {
        min-height: auto;
        max-height: initial;
        overflow-y: auto;
    }

    .modal-videoplayer-structure .folder-structure {
        min-height: auto;
    }

    .td_type, .mb-type {
        display: none;
    }

    .td_lastmodifiedon, .mb-lastmodified {
        display: none;
    }

    .question-text-ellipsis {
        height: 67px;
        -webkit-line-clamp: 3;
    }

    #panel-fullscreen {
        display: none;
    }

    .categories {
        font-size: 1rem;
    }

    .Breadcrumbs__label {
        font-size: 14px;
    }

    .lecture-hub .title-header {
        font-size: 1.1rem !important;
        margin-left: -4px !important;
    }

    .btn.btn-addquestion {
        display: none;
    }

    .folder-structure {
        display: none;
    }

    .mbl-folder-structure {
        display: block;
        padding: 0.5rem 0.65rem;
        position: relative;
    }

    .Breadcrumbs {
        min-width: 100% !important;
        max-width: 100%;
    }

    .mbl-video-count img {
        display: none;
    }

    .panel-container {
        margin-left: -15px;
    }

    .resizer-x {
        display: none;
    }
}

@media (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    .navbar-nav {
        display: block;
    }

    .navbar-dark .navbar-nav .active > .nav-link {
        color: #000;
    }

    .navbar-dark .navbar-nav .nav-link {
        color: #444;
        font-size: 13px;
    }

    .navbar-dark .navbar-toggler {
        background-color: #1e417c;
        color: #fff;
        padding: .125rem .375rem;
    }

    .drag-area {
        width: 100%;
        height: 90vh;
    }

    .server-status {
        width: 100%;
        text-align: right;
    }

    .move-delete {
        width: 15%;
        margin: 7px 2px;
    }

    .home-section {
        overflow-y: auto;
    }

    .server-status label {
        text-align: left;
        display: flex;
    }


    /*modal video player css style*/
    .serverdiv {
        width: 46%;
        float: left;
        border-right: 1px solid #cdcdcd;
        margin-right: 1rem;
    }

    .serverplayer {
        width: 49%;
        float: left;
        margin: 0 0.5rem;
        margin-bottom: 10px;
    }

    .btn-addquestion {
        width: 25%;
    }

    .questiondiv.active .duration {
        width: 9%;
        padding: 1px 10px;
    }

    .duration {
        width: 9%;
    }

    .folder-sync {
        width: 230px;
        margin: 5px 0;
        float: right;
    }

    .td_type, .mb-type {
        display: none;
    }

    .td_lastmodifiedon, .mb-lastmodified {
        display: none;
    }

    .question-text-ellipsis {
        height: 52px;
        -webkit-line-clamp: 2;
    }

    .categories {
        font-size: 1rem;
    }

    .lecture-hub .title-header {
        font-size: 1.1rem !important;
        margin-left: -4px !important;
    }

    .btn.btn-addquestion {
        display: none;
    }

    .Breadcrumbs__label {
        font-size: 14px;
    }

    .Breadcrumbs {
        min-width: 100% !important;
        max-width: 100%;
    }
}


@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait ) {

    .col-md-3.folder-structure {
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
        max-width: 35%;
    }

    .col-md-9.video-upload-content {
        -ms-flex: 0 0 65%;
        flex: 0 0 65%;
        max-width: 65%;
    }

    .padding-15 {
        padding: 10px 5px !important;
    }

    .folder-structure a {
        font-size: 12px;
    }

    .tree1 li {
        font-size: 12px;
    }

    .sidebar {
        width: 45px;
    }

    .home-section {
        left: 45px;
        width: calc(100% - 45px);
    }

    .sidebar i {
        text-align: left;
        margin-left: 7px;
    }

    .sidebar .logo-details #btn {
        right: -8px;
    }

    .indicator {
        margin-right: 2px;
    }

        .indicator.bx {
            font-size: 10px;
            border-radius: 50px;
        }

    .drag-area {
        height: 40vh;
    }

    .videos-upload h3 {
        font-size: 14px;
        line-height: 22px;
        padding: 0 30px;
    }

    .tab-width-100 {
        -ms-flex: 0 0 95%;
        flex: 0 0 95% !important;
        max-width: 95% !important;
        margin: 0 auto;
    }

    .form-check.position-relative {
        height: 50px;
        min-width: 30px;
    }

    .table thead th {
        vertical-align: bottom;
        border-bottom: 0px solid #dee2e6;
    }

    .video-data-grid table tbody tr input[type=checkbox], input[type=radio] {
        margin-top: 12px;
    }

    .folder-structure {
        overflow-x: hidden;
    }

    .video-thumbnail {
        min-width: 210px;
    }

    .width-25 {
        min-width: 50px !important;
    }

    .video-thumbnail-title {
        width: 160px;
    }

    .server-upload {
        min-width: 250px;
    }

    .video-data-grid table tbody tr td {
        font-size: 12px;
        line-height: 14px;
    }

    .home-section {
        overflow-x: hidden;
    }

    .tree-structure .width-85 {
        width: 80%;
        float: left;
    }

    .tree-structure .width-15 {
        padding: 4px 8px;
    }

    /*modal video player css style*/
    .serverdiv {
        width: 34%;
        float: left;
        border-right: 1px solid #cdcdcd;
        margin-right: 0.5rem;
    }

        .serverdiv span {
            margin-right: 0.2rem;
            font-size: 0.8rem;
        }

    .playfrom {
        width: 45%;
        float: left;
        font-size: 0.9rem;
    }

    .serverplayer {
        width: 25%;
        float: left;
    }

    .btn-addquestion {
        width: 60%;
        font-size: 13px;
    }

    .video-player {
        width: 100%;
        right: 0%;
        transition: all 0.5s ease;
    }

        .video-player video {
            width: 100%;
            height: auto;
            background-color: #000;
        }

    .addquestionsection {
        position: relative;
        width: 100%;
    }

    .importsection .btn-import {
        float: right;
        margin-top: 6% !important;
        min-height: 32px;
        max-height: 32px;
    }

    .questiondiv.active .duration {
        width: 7%;
    }

    .duration {
        width: 7%;
    }

    .quepreview-section {
        width: 100%;
        max-height: auto;
        min-height: auto;
    }

    .td_type, .mb-type {
        display: none;
    }

    .td_lastmodifiedon, .mb-lastmodified {
        display: none;
    }

    .question-text-ellipsis {
        height: 66px;
        -webkit-line-clamp: 3;
    }

    .row.margin-0 {
        flex-flow: row;
    }
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .padding-15 {
        padding: 10px 5px !important;
    }

    .folder-structure a {
        font-size: 12px;
    }

    .tree1 li {
        font-size: 12px;
    }

    .form-check.position-relative {
        height: 50px;
        min-width: 30px;
    }

    .video-thumbnail {
        min-width: 210px;
    }

    .width-25 {
        min-width: 50px !important;
    }

    .video-thumbnail-title {
        width: 160px;
    }

    .server-upload {
        min-width: 250px;
    }

    .video-data-grid table tbody tr td {
        font-size: 12px;
        line-height: 14px;
    }

    .home-section {
        overflow-x: hidden;
    }

    .table thead th {
        border-bottom: 0px solid #dee2e6;
    }

    .btn-server {
        margin: 0 4px !important;
        width: 55px;
    }

    .btn-upload {
        width: 120px !important;
    }

    .tree-structure .width-85 {
        width: 80%;
        float: left;
    }

    .tree-structure .width-15 {
        padding: 4px 8px;
    }

    /*modal video player css style*/

    .serverdiv {
        width: 31%;
    }

    .playfrom {
        width: 42%;
        float: left;
    }

    .btn-addquestion {
        width: 50%;
    }

    .searchbar {
        width: 70%;
        float: left;
    }

    .importsection .btn-import {
        margin-top: 18% !important;
    }

    .questiondiv.active .duration {
        width: 20%;
    }

    .duration {
        width: 20%;
    }

    .td_type, .mb-type {
        display: none;
    }

    .td_lastmodifiedon, .mb-lastmodified {
        display: none;
    }

    .question-text-ellipsis {
        height: 52px;
        -webkit-line-clamp: 2;
    }
}