@media screen and (min-width: 1200px) and (max-width: 1400px) { 
    ul.client-servive-list>li {
        padding: 1rem 3rem;
        padding-left: 1rem;
        padding-right: 0;
    }
    li.client-servive-item>button.client-service-button {
        font-size: 13px;
        font-weight: 500;
        text-align: left;
    }
    h3.vendors-section-head {
        padding-left: 0;
    }
    .individual-vandors-status {
        gap: 20px;
        justify-content: flex-start;
    }
    .service-coordinatore-person {
        width: clamp(350px, 462px, 650px);
        padding: 15px;
        gap: 18px;
    }
    .service-coordinator-list {
        gap: 14px;
    }
    .individual-vandors-list, .individual-employees-list {
        padding: 1rem;
    }
    .vendors-status-informations {
        width: clamp(200px, 215px, 400px);
    }
    .client-image-box {
        left: 20%;
    }
    .avatar-upload .avatar-preview {
        width: 120px;
        height: 120px;
    }
    .avatar-upload .avatar-edit input+label {
        width: 36px;
        height: 36px;
    }
    .avatar-upload .avatar-edit input+label>img {
        margin: 9px;
        width: 50%;
    }

    .client-image-box {
        width: 120px;
        height: 120px;
    }

   
}


@media screen and (max-width: 640px) {
    .process-main {
        flex-wrap: wrap;
    }

    .col-3 {
        width: 50%;
    }
}


/*  media query for mobile screen */

@media only screen and (max-width: 600px) {

    /* login screen responsive media query css code */

    .parent-container > .right-side-container{
        display: none;

    }
    .parent-container > .left-side-container {
        padding: 24px 16px !important;
    }
    .left-side-container > .form-wrapper{
        padding: 0;
    }
    .logo-container {
        padding-bottom: 1rem;
    }
    i.close-side-menu{
        display: inline-block;
    }
    /* parcipant dashboard media query css code */

    div.siderbar-body-container {
        /* height: 100%; 
        overflow: auto; */
        width: 100%;
    }
    .collapse-side .siderbar-body-container {
        width: 100%;
    }
    .siderbar-menu-container{
        width: 0;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        transition: all 500ms;
    }
    .collapse-side .siderbar-menu-container {
        width: 100%;
        max-width: 250px;
    }
    .collapse-side .siderbar-menu-container ul li {
        width: 100%;
        overflow: hidden;
    }
    .collapse-side .siderbar-menu-container ul.sidebar-menu-box li.active-list {
        background: #1e368e;
    }

    .client-dsahboard-body-container, .clent-dashboard-main-wrapper, div.client-dashboard-information-container {
        height: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    div.client-dashboard-information-container{
        overflow: auto;
    }
    .client-dsahboard-body-container {
        padding: 0px 0 16px;
    }
    .individual-client-name {
        margin-left: 0;
    }
    nav > ol.breadcrumb-list{
        padding-left: 16px;
        margin-bottom: 0;
    }

    .avatar-upload {
        max-width: 103px;
        margin: 0px auto;
        top: 5px;
        left: 22px;
    }
    .inner-siderbar-menu-list > .innner-siderbar-list {
        margin-top: 7rem !important;
    }
    .avatar-upload .avatar-edit input+label>img {
        margin: 0;
        width: 50%;
        display: block;
        margin: 6px auto;
    }
    .avatar-upload .avatar-preview {
        width: 100px;
        height: 100px;
    }
    .avatar-upload .avatar-edit input+label {
        width: 30px;
        height: 30px;
    }
    .inner-siderbar-menu-list > .client-image-box {
        top: -15px;
    }
    header > h2.show-detail-participant {
        text-align: left;
        margin-left: 0;
    }
    .client-image-box {
        width: 100px;
        height: 100px;
    }
    .clients-individual-sidebar {
        height: auto;
        padding-top: 0rem;
    }
    .dashboard-form-container-wrapper.participant-inner-form {
        height: 100%;
        overflow: auto;
    }
    div.dashboard-registation-input>.input-register-wrapper {
        max-width: 100%;
    }
    .register-btn, .below-button-section > .cancel-button-below {
        padding: 7px 16px;
        border-radius: 5px;
        font-size: 13px;
    }
    .register-btn{
        font-size: 14px;
    }
    .inner-form-fields-box > .inner-form-fields-container {
        padding: 0px 12px 6px;
    }
    .dashboard-form-container-wrapper>.inner-form-fields-box {
      padding-left: 12px;
      padding-right: 12px;
      padding-bottom: 8rem;
      height: auto;
      overflow: initial;
    }
    .process-wrap {
        width: 100%;
        padding: 0;
    }
    .process-main > .col-3{
        width:25%;
    }
    .process-label {
        font-size: 10px;
    }
    ul.client-servive-list>li {
        padding: 6px 1rem;
        display: block;
        width: 100%;
    }
    div.breadcrumb-box {
        display: block;
    }
    div.breadcrumb-box > a {
        display: block;
        text-align: center;
        max-width: 92%;
        margin: 8px auto;
    }
    h2.data-table-heading {
        padding-left: 16px;
    }
    p.clients-uci-number {
        white-space: nowrap;
    }
    .coordinator-pic {
        max-width: 84px;
    }
    div.client-dashboard-scroll-body {
        padding-bottom: 5rem;
        overflow: initial;
    }
    .clients-individual-dashboard-info-wrapper.collapse-side>.siderbar-menu-container .logo-box img.browser-icon {
        display: none;
    }
    .clients-individual-dashboard-info-wrapper.collapse-side>.siderbar-menu-container .logo-box img.main-logo {
        display: block;
    }
    .inner-siderbar-menu-list > .innner-siderbar-list {
        padding-bottom: 0rem;
        margin-bottom: 0 !important;
    }
    .top-header-section {
        margin-bottom: 0px;
    }
    .participant-inner-form.master_form {
        padding-right: 0;
    }
    /* vendors assign css code */

    div.dashboard-registation-input.assign-provider >.input-register-wrapper.child-assign-provider {
        width: 100%;
        max-width: 100%;
    }
    div.bootstrap-select.show-tick > .dropdown-menu.show{
        position:relative !important;
    }
    .form-wrapper {
        padding: 0 6px;
    }
    .individual-vandors-list, .individual-employees-list {
       border: none;
       padding: 0;
    }
    .guage-chart ul.months-indicator-list {
        width: 332px;
    }
    .guage-chart ul.months-indicator-list>li {
        min-width: 27px;
        padding: 7px 7px;
    }
    .service-coordinatore-person {
        padding: 8px;
        gap: 12px;
    }
    .coordinator-info>span.second-part {
        word-break: break-all;
    }
    div.guage-chart-wrapper {
        padding-bottom: 16px;
    }
    .dt-scroll > .dt-scroll-body {
        max-height: calc(100vh - 398px);
    }

    /* 08/10/2024 */

    .password-eye{
        width: 100%;
    }

    .password-eye-show{
        width: 100%;
    }

    .password-eye input{
        width: 100% !important;
    }

    .checkbox-label{
        display: flex;
        gap: 5px;
    }
    
}

@media screen and (min-width: 600px) and (max-width: 992px) { 
    .parent-container > .left-side-container {
        padding: 0 !important;
    }
    .left-side-container > .form-wrapper{
        padding: 24px 16px;
    }
    .logo-container {
        padding-bottom: 1rem;
    }
    .login-page-right-container {
        margin-left: 1px;
    }
    .avatar-upload .avatar-preview {
        width: 100px;
        height: 100px;
    }
    .avatar-upload .avatar-edit input+label {
        width: 36px;
        height: 36px;
    }
    .avatar-upload .avatar-edit input+label>img {
        margin: 9px;
        width: 50%;
    }

    /* sidebar menu on iPad view css */
    i.close-side-menu{
        display: inline-block;
    }

    .siderbar-menu-container{
        width: 0;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        transition: all 500ms;
    }
    .collapse-side .siderbar-menu-container {
        width: 100%;
        max-width: 250px;
    }
    .collapse-side .siderbar-menu-container ul li {
        width: 100%;
        overflow: hidden;
    }
    .collapse-side .siderbar-menu-container ul.sidebar-menu-box li.active-list {
        background: #1e368e;
    }
    div.siderbar-body-container {
        width: 100%;
    }
    .collapse-side .siderbar-body-container {
        width: 100%
    }
    .guage-chart {
        padding-bottom: 16px;
    }
    
    /* vendors assign css code */

    div.dashboard-registation-input.assign-provider >.input-register-wrapper.child-assign-provider {
        width: 100%;
        max-width: 100%;
    }
    div.bootstrap-select.show-tick > .dropdown-menu.show{
        position:relative !important;
    }

    /* top progress bar css code */

    .process-wrap {
       width: 100%;
    }
   

}
@media screen and (min-width: 992px) and (max-width: 1200px) { 
    /* header > h2.show-detail-participant {
        max-width: 262px;
    } */
    .client-image-box {
        width: 100px;
        height: 100px;
        left: 18%;
    }
    .clients-individual-sidebar {
        padding-left: 0;
    }
    ul.innner-siderbar-list>li.client-servive-item {
        padding-left: 0;
    }
    p.clients-uci-number {
        font-size: 14px;
        padding-top: 6px;
    }
    ul.client-servive-list>li {
        padding: 0.8rem 0;
    }
    li.client-servive-item>button.client-service-button {
        color: #41616A;
        font-size: 13px;
    }
    .inner-siderbar-menu-list>.nav-pills .nav-link.active::before, li.client-servive-item>button.nav-link.active::before {
        width: 3px;
        height: 20px;
        left: 8px;
        top: 7px;
    }
    .chart-container-main-wrapper {
        flex-direction: column;
    }
    .avatar-upload .avatar-preview {
        width: 100px;
        height: 100px;
    }
    .avatar-upload .avatar-edit input+label {
        width: 36px;
        height: 36px;
    }
    .avatar-upload .avatar-edit input+label>img {
        margin: 9px;
        width: 50%;
    }
    /* top progress bar css code */

    .process-wrap {
        width: 100%;
     }

}


@media screen and (min-width: 1600px){
    div.clients-individual-sidebar{
        width: 264px;
    }
    div.inner-form-fields-box{
        width: calc(100% - 264px);
    }
    div.inner-form-fields-box.individual-participants-screen-main {
        width: 100%;
    }
}