/*for mobile device*/
@media only screen and (min-width: 320px) and (max-width: 520px) {
    /*sidebar*/
   .sidebar{
     top: 0rem;
   }
   #pms #sidebarMenu{
     overflow-y: auto;
   }
   .custom-screenshot-padding{
       float: unset!important;
   }
   /*dashboard css */
   .custom-padding-wrap{
       padding: 0px 15px!important;
   }
   #pms .main-header-wrap{
       padding: 0px 5px;
       width: calc(100% - 79px);
   }
   #pms .navbar .Logo-main{
      width: 79px;
   }
   .navbar-toggler{
      color: #fff;
      padding: 20px 0px 0px 0px;
   }
   .navbar-toggler:focus{
       box-shadow: unset;
    }
    .project-details-wrap{
       width: 110px;
    }
   .screen-shot-col .main-col-wrap .left-img-wrap img{
       width: 45px;
   }
   .screen-shot-col .main-col-wrap .left-img-wrap h3{
       font-size: 15px;
   }
   .common-heading-title{
      margin-top: 16px!important;
   }
   .common-heading-title p{
       margin-bottom: 0px;
   }
   .project-detail-wrap{
       margin-bottom: 15px;
       padding: 12px;
   }
   .project-detail-wrap .project-name-wrap .left-wrap h4{
       font-size: 17px;
   }
   .project-detail-wrap .project-name-wrap .right-wrap p{
       text-align: center;
   }
   .dashboard-project-detail .project-title-wrap img{
       top: 0px;
   }
   .team-member-wrap{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     flex-wrap: wrap;
   }
    .team-member-wrap .members-wrap{
      margin: 11px 8px 0px 8px;
    }
   .edit-project-modal .modal-content{
      max-width: 100%;
    }
    .add-team-member-wrap .modal-content{
      max-width: 100%;
    }
    .assign-to-wrap .modal-content{
        max-width: 100%;
    }
   /*login page css */
   .formstyle{
      width: 95%;
   }
   .sectionform .h2margin{
       text-align: center;
   }
   .section2{
       border: 0px;
   }
   .imgpadding .imgsec{
       height: auto;
   }
   /*add project page css */
   .btn-wrap{
       flex-direction: column;
   }
   .btn-wrap .cancel-btn{
       width: 100%;
       margin-bottom: 10px;
   }
   .btn-wrap .add-btn{
       width: 100%;
       margin-bottom: 10px;
   }
   /*user details page css */
    .dataTables_length{
        text-align: left!important;
        margin-bottom: 10px;
        padding-left: 12px;
    }
    .dataTables_filter{
        text-align: left!important;
    }
    .dataTables_info{
        text-align: left!important;
        padding-left: 15px;
    }
    #dealer_details_paginate .pagination{
        justify-content: flex-end!important;
    }
    #pms main{
        padding: 0px 15px;
    }
    .modal.drawer .modal-dialog{
        max-width: 285px;
    }
    .action-modal .modal-body ul li{
        width: 100%;
    }
    .action-modal .modal-content{
        max-width: 95%;
    }
    /*screenshot pro css */
    .main-dropdown-group{
        width: 100%;
        margin-bottom: 15px; 
    }
    .custom-screenshot-padding .main-dropdown-group .dropdown{
        flex-direction: column;
    }
    .custom-screenshot-padding .main-dropdown-group .dropdown .form-select{
        margin-bottom: 10px;
    }
    /*add project css */
    .add-task-wrap{
        padding: 0px;
    }
    .common-modal .modal-content{
        max-width: 100%;
    }
    /*report css */
    .report-wrap{
        padding: 25px 8px;
    }
    .report-wrap .top-main-wrap .right-side-wrap p{
        text-align: right;
    }
    .report-wrap .time-wrap .break-wrap{
        width: 150px;
    }
    /*notification css */
    .dropdown-content{
        left: -206px;
        min-width: 340px;
        width: 150px;  
    }
    .dropdown-content .notification-content .content-wrap-main h4{
        margin-right: 10px;
    }
    /*Detail report */
    .mychart-wrap{
        width: 100%!important;
       right: 0!important;
    }
    .time-sheet-wrap .table{
        width: 1000px;
    }
    .third-col-wrap{
        margin-top: 30px;
    }
    .middle-col-main{
        margin-top: 15px;
    }
    .middle-col-main .round-bg-wrap{
        margin: 8px 11px;
    }
    .task-sheet-head p{
        margin: 40px 0px 10px;
    }
    /*task detail report */
    .task-detail-report-main .top-custom-wrap{
        flex-direction: column;
        align-items:flex-start;
    }
    .task-detail-report-main .top-custom-wrap .custom-span span{
        width: 150px;
    }
    .detail-hours-main{
        padding-top: 0px;
    }
    .task-detail-footer{
        flex-direction: column;
    }
    .task-detail-footer .main-bg{
        width: 100%;
        flex-direction: column;
    }
    .task-detail-footer .main-bg .check-wrap{
        width: 100%;
        margin: 10px 0px;
    }
    .task-detail-footer .main-bg:before{
        display: none;
    }
    .task-detail-footer .main-bg:after{
        display: none;
    }
    .task-detail-footer .main-bg .timer-detail-wrap{
        margin-bottom: 10px;
        border-radius: 6px;
        flex-flow: wrap;
    }
    .task-detail-footer .main-bg .timer-detail-wrap .common-wrap-timer{
        padding: 0px;
    }
    .task-detail-footer .main-bg .timer-detail-wrap .common-wrap-timer p{
        text-align: center;
    }
    .task-detail-report-main .detail-hours-wrap{
        margin: 9px 5px;
    }
    /*attendence css*/
    .header-select-wrap{
        width: 100%;
        display: flow-root;
    }
    .header-select-wrap .form-select{
       margin-bottom: 8px;
    }
    .attendence-team-main{
        display: flex;
       align-items: center;
       justify-content: center;
       flex-flow: wrap;
    }
    /*project report css */
    .profile-table-img{
        margin-left: 0px!important;
    }
    .task-detail-wrap{
       width: 1000px;
    }
    .progress-wrap .custom-progress-bar{
        flex-direction: column;
    }
    /*user profile css */
    .user-profile-wrap .user-detail-main ul li{
        width: 100%!important;
    }
    .user-profile-wrap{
        padding: 15px;
    }
    /*team member modal css */
    .team-members-wrap .up_member{
        width: 137px;
        line-break: anywhere;
    }
    /*pagination css */
    div.dataTables_wrapper div.dataTables_paginate ul.pagination{
        justify-content: flex-end!important;
        float: left;
    }
    /* image crop modal */
    .ct-image-upload-popup .vertical-alignment-helper{
        width: 90%;
        margin: auto;
    }
    .ct-image-upload-popup .vertical-alignment-helper .modal-dialog{
        margin: 0px;
    }
    /*date range css */
    .daterangepicker{
        top: 10rem!important;
        right: 28px!important;
        left: 14px!important;
    }
    /*zoom screenshot css */
    .zoom-screenshot-modal .modal-content{
        max-width: 100%;
    }
    .zoom-screenshot-modal .modal-dialog{
        margin: 20px 0px;
    }
    .zoom-screenshot-modal .footer-zoom-screenshot{
        flex-direction: column;
        padding: 10px 10px;
    }
    .footer-zoom-screenshot .custom-left-profile{
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-zoom-screenshot .emp-task-details{
        width: 100%;
    }
    .footer-zoom-screenshot .emp-task-details h3{
        margin-bottom: 15px;
        line-height: 1.5;
    }
    .footer-zoom-screenshot .emp-task-details{
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .footer-zoom-screenshot .card-footer-wrap{
        width: 100%;
    }
}
/*for extra medium devices*/
@media only screen and (min-width: 354px) and (max-width: 520px) {
    .daterangepicker{
        top: 8rem!important;
        right: 22px!important;
        left: auto!important;
    }
}
/*for mobile device*/
@media only screen and (min-width: 521px) and (max-width: 767px) {
    /*dashboard css */
    .project-details-wrap{
        width: 110px;
    }
   /*sidebar*/
   .sidebar{
      top: 0rem;
    }
    #pms #sidebarMenu{
        overflow-y: auto;
    }
    .modal.drawer .modal-dialog{
        max-width: 435px;
    }
    .common-heading-title{
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .project-detail-wrap{
        margin-bottom: 15px;
        padding: 12px;
    }
    .project-detail-wrap .project-name-wrap .left-wrap h4{
        font-size: 17px;
    }
    .project-detail-wrap .project-name-wrap .right-wrap p{
        text-align: center;
    }
    .team-member-wrap{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
      }
    .team-member-wrap .members-wrap{
         margin: 11px 8px 0px 8px;
    }
    .dashboard-project-detail .project-title-wrap img{
        top: 0px;
    }
    /*login css */
    .sectionform .h2margin{
        text-align: center;
        margin: 19px 0px;
    }
    .formstyle{
        width: 95%;
    }
    /*user details page css */
    .dataTables_length{
        text-align: left!important;
        margin-bottom: 10px;
        padding-left: 12px;
    }
    .dataTables_filter{
        text-align: left!important;
    }
    .dataTables_info{
        text-align: left!important;
        padding-left: 15px;
    }
    #dealer_details_paginate .pagination{
        justify-content: flex-end!important;
    }
    #pms main{
        padding: 0px 15px;
    }
    .user-listing-main tbody tr td .thumbnail{
        margin-right: 0px;
    }
    .action-modal .modal-body ul li{
        width: 45%;
    }
    /*screenshot pro*/
    .main-dropdown-group{
        width: 70%;
    }
    /*Detail report */
     .mychart-wrap{
        width: 100%!important;
       right: 0!important;
    }
    .first-col-wrap{
       height: auto;
    }
    .time-sheet-wrap .table{
        width: 1000px;
    }
    .middle-col-main .round-bg-wrap{
        margin: 8px 11px;
    }
    .third-col-wrap{
        margin-top: 30px;
    }
    .task-sheet-head p{
        margin: 40px 0px 10px; 
    }
    /*task detail report */
    .task-detail-report-main .top-custom-wrap{
        flex-direction: column;
        align-items:flex-start;
    }
    .task-detail-report-main .top-custom-wrap .custom-span span{
        width: 150px;
    }
    .detail-hours-main{
        padding-top: 0px;
    }
    .task-detail-footer{
        flex-direction: column;
    }
    .task-detail-footer .main-bg{
        width: 100%;
        flex-direction: column;
    }
    .task-detail-footer .main-bg .check-wrap{
        width: 100%;
        margin: 10px 0px;
    }
    .task-detail-footer .main-bg:before{
        display: none;
    }
    .task-detail-footer .main-bg:after{
        display: none;
    }
    .task-detail-footer .main-bg .timer-detail-wrap{
        margin-bottom: 10px;
        border-radius: 6px;
    }
    .task-detail-footer .main-bg .timer-detail-wrap .common-wrap-timer{
        padding: 0px;
    }
    .task-detail-footer .main-bg .timer-detail-wrap .common-wrap-timer p{
        text-align: center;
    }
    .task-detail-report-main .detail-hours-wrap{
        margin: 9px 5px;
    }
    /*attendence css*/
    .header-select-wrap{
        width: 100%;
    }
    .attendence-team-main{
        display: flex;
       align-items: center;
       justify-content: center;
       flex-flow: wrap;
    }
    /*user profile css */
     .user-profile-wrap .user-detail-main ul li{
        width: 48%!important;
    }
    /*project report css */
    .task-detail-wrap{
       width: 1000px;
    }
    /*pagination css */
    div.dataTables_wrapper div.dataTables_paginate ul.pagination{
        justify-content: flex-end!important;
        float: left;
    }
    /*date range css */
    .daterangepicker{
        right: 22px!important;
    }
    /*zoom screenshot css */
    .zoom-screenshot-modal .modal-content{
        max-width: 100%;
    }
    .zoom-screenshot-modal .modal-dialog{
        margin: 20px 0px;
    }
    .zoom-screenshot-modal .footer-zoom-screenshot{
        flex-direction: column;
        padding: 10px 10px;
    }
    .footer-zoom-screenshot .custom-left-profile{
        width: 100%;
        align-items: flex-start;
    }
    .footer-zoom-screenshot .emp-task-details{
        width: 100%;
    }
    .footer-zoom-screenshot .emp-task-details h3{
        margin-bottom: 5px;
        line-height: 1.5;
    }
    .footer-zoom-screenshot .emp-task-details{
        width: 100%;
        margin-bottom: 10px;
    }
    .footer-zoom-screenshot .card-footer-wrap{
        width: 100%;
    }
}
/*for ipad device*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    #pms #sidebarMenu{
        overflow-y: auto;
    }
    /*dashboard css */
    #pms .custom-main-padding{
        padding-left: 0px!important;
    }
    .project-details-wrap{
        width: 110px;
    }
    .project-detail-wrap .project-name-wrap .left-wrap h4{
        font-size: 17px;
    }
    .project-detail-wrap .project-name-wrap .right-wrap p{
        text-align: center;
    }
    .project-detail-wrap{
        padding: 12px;
    }
    .dashboard-project-detail .project-title-wrap img{
        top: 0px;
    }
    /*login page css */
    .sectionform .h2margin{
        text-align: center;
        margin: 19px 0px;
    }
    /*add project css*/
    #main-div{
        padding-left: 10px!important;
    }
    /*user details page css */
    .dataTables_length{
        text-align: left!important;
        margin-bottom: 10px;
        padding-left: 12px;
    }
    .dataTables_filter{
        text-align: left!important;
    }
    .dataTables_info{
        text-align: left!important;
        padding-left: 15px;
    }
    #dealer_details_paginate .pagination{
        justify-content: flex-end!important;
    }
    .modal-content{
        max-width: 60%; 
    }
    /*screenshot pro css */
    .custom-screenshot-padding{
        padding-left: 65px!important;
    }
    .main-dropdown-group{
        width: 70%;
    }
    /*report css */
    .report-wrap .top-main-wrap .right-side-wrap p{
        text-align: right;
    }
    .report-wrap .time-wrap .break-wrap{
        width: 135px;
    }
    /*Detail report */
    .mychart-wrap{
        width: 100%!important;
        right: 0!important;
    }
    .middle-col-main .round-bg-wrap{
        margin: 8px 11px;
    }
    .third-col-wrap{
        margin-top: 15px;
    }
    .time-sheet-wrap .table{
        width: 1000px;
    }
    /*task detail report */
    .task-detail-report-main .top-custom-wrap{
        flex-direction: column;
        align-items:flex-start;
    }
    .task-detail-report-main .top-custom-wrap .custom-span span{
        width: 150px;
    }
    .detail-hours-main{
        padding-top: 0px;
    }
    .task-detail-footer{
        flex-direction: column;
    }
    .task-detail-footer .main-bg{
        width: 100%;
    }
    .task-detail-footer .main-bg .timer-detail-wrap .common-wrap-timer{
        padding: 0px;
    }
    .task-detail-footer .main-bg .check-wrap{
        padding: 12px 20px 12px 15px;
    }
    .task-detail-footer .main-bg .timer-detail-wrap{
        padding: 1px 5px;
    }
    .task-detail-footer .main-bg .timer-detail-wrap .common-wrap-timer p{
        text-align: center;
    }
    /*user profile css */
     .user-profile-wrap .user-detail-main ul li{
        width: 32%!important;
    }
    /*attendence css*/
    .header-select-wrap{
        width: 100%;
    }
    /*project report css */
    .task-detail-wrap{
        width: 1000px;
    }
    /*date range css */
    .daterangepicker{
        right: 22px!important;
    }
    /*zoom screenshot css */
    .zoom-screenshot-modal .modal-content{
        max-width: 80%;
    }
    .zoom-screenshot-modal .modal-dialog{
        margin: 20px 0px;
    }
    .zoom-screenshot-modal .footer-zoom-screenshot{
        flex-direction: column;
        padding: 10px 10px;
    }
    .footer-zoom-screenshot .custom-left-profile{
        width: 100%;
        align-items: flex-start;
    }
    .footer-zoom-screenshot .emp-task-details{
        width: 100%;
    }
    .footer-zoom-screenshot .emp-task-details h3{
        margin-bottom: 5px;
        line-height: 1.5;
    }
    .footer-zoom-screenshot .emp-task-details{
        width: 100%;
        margin-bottom: 10px;
    }
    .footer-zoom-screenshot .card-footer-wrap{
        width: 100%;
    }
}
/*for ipad pro  device*/
@media only screen and (min-width: 991px) and (max-width: 1250px) {
    #pms #sidebarMenu{
        overflow-y: auto;
    }
    #pms .custom-main-padding{
        padding-left: 55px!important;
    }
    .project-details-wrap{
        width: 110px;
    }
    .project-detail-wrap{
        margin-bottom: 15px;
    }
    /*login page css */
    .sectionform .h2margin{
        text-align: center;
        margin: 19px 0px;
    }
     /*add project css*/
    #main-div{
        padding-left: 55px!important;
    }
    /*screenshot pro css */
    .custom-screenshot-padding{
        padding-left: 65px!important;
    }
    /*Detail report */
    .mychart-wrap{
       width: 100%!important;
       right: 0!important;
    }
    .first-col-wrap{
        height: auto;
    }
    /*task detail report */
    .task-detail-report-main .top-custom-wrap{
        flex-direction: column;
        align-items:flex-start;
    }
    .task-detail-report-main .top-custom-wrap .custom-span span{
        width: 150px;
    }
    .task-detail-footer{
        flex-direction: column;
    }
    .task-detail-footer .main-bg{
        width: 100%;
    }
    .task-detail-footer .main-bg .check-wrap{
        width: 41%; 
        padding: 10px;
    }
    /*attendence css*/
    .header-select-wrap{
        width: 60%;
    }
    .time-sheet-wrap .table{
        width: 1000px;
    }
    /*date range css */
    .daterangepicker{
        right: 22px!important;
    }
}