@media screen and (min-width: 768px) {
.sidebar{
    transform:none ;
}
}
/*for tablet*/
@media screen and (max-width: 991px) {
    .table-responsive table, .table-responsive thead,
    .table-responsive tbody, .table-responsive th,
    .table-responsive tr, .table-responsive td {
        display: block;
        
    }
    .table-responsive thead tr {
        display: none;
    }
    .table-responsive tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    
    }
    .table-responsive td {
        border: none;
        border-bottom: 1px solid #dadada;
        position: relative;
        padding-right: 30%;
        white-space: normal;
        min-height: 40px;
    }
    #my-project .table-responsive td:before{
        width:50%;
    }
    #my-project .table-responsive td {
        padding-right: 50%;
    }
    #my-project .table-responsive.Notified-project td {
        padding-right: 30%;
    }
        .table-responsive td:last-child {
            border-bottom: none;
        }
        .table-responsive .profile-td {
            width: 100%;
        }

    .table-responsive td:before {
        position: absolute;
        top:50%;
        right: 10px;
        transform: translateY(-50%);
        width: 30%;
        padding-left: 10px;
        white-space: nowrap;
        text-align: right;
        font-weight: bold;
    }
    .table-responsive td:before{
        content: attr(data-bs-original-title);
    }
    #my-project .table-responsive td,
    #Project-reports .table-responsive td,
    #WholeTimePeople .table-responsive td,
    #WholeTimeWork .table-responsive td,
    #ForecastTimeWork .table-responsive td {
        /*text-align:left;*/
        display: block;
    }
  
    #List-functions .modal-dialog{
        max-width: 600px;
    }

    .btn-record,.btn-showMore{
        font-size: 12px;
        padding: 8px;
    }
        .card-body .btn-showMore span, .btn-showMore i {
            font-size: 12px;
        }
    #Project-reports .table-responsive td, #ForecastTimeWork .table-responsive td, #WholeTimeWork .table-responsive td {
        padding-right: 50%;
    }
        #Project-reports .table-responsive td:before, #ForecastTimeWork .table-responsive td:before, #WholeTimeWork .table-responsive td:before {
            width: 50%;
            white-space: break-spaces;
        }
 

    
  
}
/*For Mobiles*/
@media screen  and (max-width: 767px) {

    .table-responsive table, .table-responsive thead,
    .table-responsive tbody, .table-responsive th,
    .table-responsive tr, .table-responsive td {
        display: block;
        /*text-align: left;*/
    }
    #edit-project .table-responsive td::before{
        width:40%
    }
    #edit-project .table-responsive td {
        padding-right: 40%;
    }
 
 
    

    #login .card{
        width:auto!important;
    }
    .sidebar {
        width: 75%;
        transform: translateX(100%);
        transition: all .1ms;
        visibility: hidden;
    }
    .open-sidebar {
        transform: none;
        transition: all 0.5s cubic-bezier(0.250, 0.250, 0.750, 0.750);
        visibility: visible;
    }

    .setting-list{
        margin-right: 10px;
    }
    .user-profile:link,.user-profile:visited{
        margin-top:-10px;
    }
    .form-label, .col-form-label, .form-control {
        font-size: 12px;
    }
    .paginate-table p {
        font-size: 12px;
    }
    .card-header h5 {
        font-size: 18px;
    }
    select option {
        font-size: 10px;
    }
    .closed span:first-of-type {
        transform: rotate(45deg) translate(5px, 5px);
        background: red;
    }
    .closed span:nth-of-type(2) {
        opacity: 0;
    }
    .closed span:last-of-type {
        transform: rotate(-45deg) translate(5px, -5px);
        background: red;
    }
    .font12{
        font-size: 12px;
    }
    .box-search{
        display: none;
    }
    .custom-file-input {
       width: 100%;
    }
    .form-check-label{
        font-size:14px;
    }
   
}