    .mje-recruit-avatar
    {
        border-radius:50%;
        width:50px;
        height:50px;
        margin-right:10px;
    }
    
@media only screen and (min-width : 320px) {
    .mje-recruit-avatar
    {       
        width:80px !important;
        height:80px !important;    
    }
    .mje-request-default .mje-request-list .mje-recruit-item-row
    {        
        text-align:center !important;        
        display:block !important;
    }
    .mje-request-default .mje-request-list .mje-recruit-item-row .mje-recruit-name
    {
        margin: 0 !important;
        width:auto !important;
        display:block !important;
                     
    }
  
    .mje-recruit-short-description
    {
        font-size:12px;
        color:#8F8F88;
        display:block;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .mje-recruit-item-row .mje-view-detail-mobile
    {
        text-align:center !important;        
    }
    .archive-requesst-item .custom-info-recruit span:last-child
    {
        margin-left:0px;
        display:block;
    }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    .mje-request-default .mje-request-list .mje-recruit-item-row
    {        
        text-align:center !important;        
        display:block;
    }
    .mje-request-default .mje-request-list .mje-recruit-item-row .mje-recruit-name
    {   
        margin: 0 !important;
        width:auto !important;
        display:block;
    }
    .mje-recruit-short-description
    {
        font-size:12px;
        color:#8F8F88;
        display:block;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; 
    }
    .mje-recruit-item-row .mje-view-detail-mobile
    {
        text-align:center !important;
    }
    .archive-requesst-item .custom-info-recruit span:last-child
    {
        margin-left:0px;
        display:block;
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

    .archive-requesst-item .custom-info-recruit span:last-child
    {
        margin-left:10px;
        display:inline;
    }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .desktop-display-flex
    {
        display:flex;
        align-items:center;
        
    }
    .mje-request-default .mje-request-list .mje-recruit-item-row
    {
        text-align:left !important;
        align-items:center !important;
        display:flex !important;
    }
    .mje-request-default .mje-request-list .mje-recruit-item-row .mje-recruit-name
    {
        width:250px !important;
        max-width: 250px;
        display:inline-block !important;          
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;                
    }
    .mje-recruit-short-description
    {
        font-size:12px;
        color:#8F8F88;
        display:inline-block;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        margin-left:15px;

    }
    .mje-recruit-avatar
    {   
        width:50px !important;
        height:50px !important;
    }
}



/*==========  Non-Mobile First Method  ==========*/

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    
}


/* MJE Recruit - Post recruit Form */

    .has-price-field .music-area
    {
        margin-top:40px !important;
    }
    .et-form .audio-upload-area 
    {              
        margin-top:20px;
        margin-bottom:30px;
        margin-left:0px;
        margin-right:0px;
    }    
    .et-form .audio-upload-area .audio-upload
    {                        
        padding:20px 0px 20px 0px;  
        background-color:#EAE8E9;        
        border-radius: 5px;
        line-height: 0 !important;
    }  
    .et-form .audio-upload-area .audio-upload a
    {
        display:block;
        color: #898a90;        
        font-size:20px;
    }
    .choosen-files-area
    {
        margin-left:0px;
        margin-right:0px;    
        padding:10px;    
    }
    .choosen-files-area .chosen-audio-item
    {
        margin-top:10px;
    }
    .choosen-files-area .chosen-audio-item a
    {
        margin-left:5px;
        font-size:14px;
    }
    .et-form .upload-dragging {
        border: 2px dashed #898a90; /* Change border color when dragging */  
        opacity:0.5;      
      }
  
/*MJE sound player & music genre */
    .audio-player-area
    {
        width:100%;
    }
    .audio-single-player
    {
        display:block;
        margin-top:10px;
    }
    .music_genre_area
    {        
        margin-bottom:20px;
        display:flex;        
        flex-wrap: wrap;        
        align-items: center;        
    }
    .music_genre_area span
    {
        margin-top:10px;
        font-size:16px;
    }
    .audio-player-area .plyr--audio
    {
        margin-top:10px;
    }
    
/* Custom Header menu */
    #et-header .et-pull-top .custom-header-menu-container
    {
        position:relative;     
    }
    #et-header .et-pull-top .custom-header-menu-container .custom-header-menu
    {
        position:absolute;
        top:50%;  
        left:45%;  
        transform: translate(-50%, -50%);  
        height:100%;       
        display:flex;
        align-items: center;
    }
    .logged-in #et-header .et-pull-top .custom-header-menu-container .custom-header-menu
    {        
        position:absolute;
        top:60%;  
        left:45%;  
        transform: translate(-50%, -50%);  
        height:100%;       
        display:flex;
        align-items: center;
        
    }
    #et-header .et-pull-top .custom-header-menu-container .custom-header-menu a
    {
        padding:10px 20px !important;
        margin-left:10px;        
        color:#898a90;
    }
    #et-header .et-pull-top .custom-header-menu-container .custom-header-menu a:first-child
    {
        margin-left:0px;
    }
    /* Custom for homepage*/

    /* custom for all recruits page */
    .archive-requesst-item
    {
        display:flex;
    }
    .archive-requesst-item .custom-flex-profile
    {
        flex-basis:10%;
        display:flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        /*border:1px solid olivedrab; */
    }
    
    .archive-requesst-item .custom-flex-recruit
    {
        flex-basis:90%;
        padding-left:20px;
        /* border:1px solid orange; */
    }
    .archive-requesst-item .custom-flex-profile .recruitList-avatar-area
    {
        margin-bottom:10px;
    }
    .archive-requesst-item .custom-flex-profile .text-notyet
    {
        color:#AEAEAE;
        font-size:12px;
    }
    .archive-requesst-item .custom-info-recruit
    {
        margin-top:15px;
        font-size:15px;
        /* color:#10a2ef;    */
        color:#337ab7;         
    }
    .archive-requesst-item .custom-info-recruit span
    {
        margin-right:10px;
        margin-left:10px;
        margin-top:15px;
    }
    .archive-requesst-item .custom-info-recruit span:first-child
    {
        margin-right:10px;
        margin-left:0px;
    }
 
    .archive-requesst-item .request-loop-tag-wrap
    {   
        margin-top:15px;
        margin-bottom:10px; 
    }
    .archive-requesst-item .recruit-view-detail-btn
    {
        margin-top:15px;        
    }
    .archive-requesst-item .text-rate-score
    {
        color:#10a2ef;  
    }
    .archive-requesst-item .request-loop-tag-wrap .skill-name-profile
    {
        color: #2a394e;
        font-size: 12px;
        padding: 5px 15px;
        background: #dae0e6;
        border-radius: 45px;
    }
    .archive-requesst-item .custom-text-expire
    {
        font-size:12px;
        /*margin-left:10px;*/
        font-style:italic;
        display:block;
        color:#717171;
    }
    /* custom css for filter panel */
    .mjob-container-control .filter-option-container
    {
        /* border:1px solid rgb(237, 237, 237);   */
        color: rgb(93, 95, 94);
       /* padding:20px 15px !important;*/
       margin-bottom:20px;
    }
    .mjob-container-control .filter-option-container .row
    {
       border:1px solid rgb(237, 237, 237);
       margin-left:0px;
       margin-right: 0px;
       padding:15px 15px;
    }
    .mjob-container-control .filter-option-container .custom-filter-option
    {
        padding:0px 20px;
        margin-top:10px !important;        
    }
    .mjob-container-control .filter-option-container .custom-filter-option input[type='text'],
    .mjob-container-control .filter-option-container .custom-filter-option input[type='number'],
    .mjob-container-control .filter-option-container .custom-filter-option select
    {
        height:45px;        
        box-shadow: none;
        border:0;
        border-bottom: 1px solid rgba(137, 138, 144, 0.2);        
        padding:0;
    }
    .mjob-container-control .filter-option-container label
    {
        color:#717171;
        font-size:15px;
        font-weight: 600;
    }

    .mjob-container-control .filter-option-container .custom-filter-option input[type='text']:focus,
    .mjob-container-control .filter-option-container .custom-filter-option select:focus
    {
        border-bottom: 1px solid #10a2ef;
    }
    .mjob-container-control .filter-option-container .budget-range
    {
        display:flex;
        justify-content:space-around;       
    }
    .mjob-container-control .filter-option-container .budget-range .max-range
    {
        margin-left:10px;
    }
    /* css for part 2 */
     .custom-btn-show-detail
    {
        background: #10a2ef;
        color: #fff;
        padding: 4px 20px;
        border: 1px solid #10a2ef;
        display: inline-block;
        border-radius: 45px;
        text-align: center;
        font-size: 12px;       
        outline: 0;
    }
    .custom-audio-player-class
    {
        position:relative;
    }
    .audio-player-container
    {        
        position: absolute;        
        bottom:5px;
        left: 50%;
        transform: translate(-50%, -1%);
        z-index: 99;       
    }
    .audio-player-container audio
    {  
        width: 250px;
    }
    .audio-player-container .plyr__volume
    {  
        display:none;
    }
    .audio-player-container .plyr--audio
    {
        border:1px solid #CECECD;
        border-radius:10px;
    }
    
    .audio-player-area .plyr--audio
    {
        border:1px solid #EBEBEB;
        border-radius:10px;
    }
    .mje-main-wrapper .slider
    {
        position:relative;
    }
    .mje-main-wrapper .slider .custom-area-btn
    {
        position:absolute;
        bottom: 5%;
        left: 50%;        
        width:100%;
        height:auto;
        z-index:999;
        transform: translate(-50%, -50%);
        padding-left:15px;
        padding-right:15px;
        
    }
    .uploadprogressBar
    {               
        background-color:#10a2ef;                
        text-align:center; 
        border-radius: 5px;        
        padding:5px 0px;        
        color:#fff;     
        display: none;   
            
    }
    @media (min-width: 1200px) 
    {
        .mje-main-wrapper .slider .custom-area-btn
        {
            bottom:20%;
            width:700px;
        }               
    }
    @media (max-width: 768px) 
    {
        .mje-main-wrapper .slider .custom-area-btn
        {
            position: relative;
            display:flex;            
        }                
    }
    @media (max-width: 991px) 
    {
        .mje-main-wrapper .slider .search-form
        {
            top:30% !important;
        }
        .mje-main-wrapper .slider .custom-area-btn
        {
            position: absolute !important;
            bottom:12% !important;
            left:0 !important;
            display: flex;
            flex-direction: row;
            transform: none !important;
            text-align: center;
            justify-content: space-between;
            padding:0px 80px;
                        
        }
        .mje-main-wrapper .slider .custom-area-btn a
        {
            padding:10px 20px!important;
        }
        .mje-main-wrapper .slider .custom-area-btn a:first-child
        {
            margin-right:5px;
        }
        
        .mje-main-wrapper .slider 
        {            
            display:flex !important;   
            flex-direction: column !important;   
            align-items: center !important;     
            height:600px !important;           
        } 
    }
  
    /* sample demo feature css */
    .et-form .sample-demo-area
    {
       padding:10px 0px;
       margin-bottom: 20px;
    }

    .et-form .sample-demo-area label
    {
        display: block;
        margin-bottom: 10px;
    }
   
    
    .et-form .sample-demo-area input[type="radio"]
    {
        height:20px;
        width:10%;
    }
    .et-form .textNoteDemo
    {
        margin-bottom: 15px;
        font-size:13px;
        line-height: 25px;
        font-style: italic;
    }

    .recruit-sample-demo-link
    {
        margin-top:20px;
        margin-bottom:10px;
    }
 
    .recruit-sample-demo-link a i
    {
        margin-right:10px;
    }
    .sample-demo-link
    {
        margin-top:30px;
    }
    .popover
    {
        z-index: 999999 !important;
    }
    .current-order ul li
    {
        padding-bottom:10px;
    }
    
    .custom-order-box li
    {        
        margin: 10px 35px 0 23px !important;
    }
    /* end sample demo feature css */


    /* css for upload button in submit offer form */
    #custom-offer-upload-area
    {
        margin-bottom:5px;
    }
    .custom-upload-btn-offer-form
    {
        font-size:14px;        
    }
    .custom-upload-btn-offer-form i
    {
        background: #10a2ef;
        border-radius: 50%;        
        text-align: center;
        margin-left: 5px;
        color:#ffffff;
        padding:5px 6px !important;
    }
    .offer-form-progress
    {
        margin-bottom:15px;
    }
    /*end */

    /* css for overlay progress bar plupload */

    .custom-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* semi-transparent black background */
        z-index: 999999; /* Ensure it's above other content */
    }

    .custom-overlay .overlay-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
        width:500px;
    }
    .custom-overlay .custom-progress-bar
    {
        background-color:#10a2ef;                
        text-align:center; 
        border-radius: 5px;        
        padding:5px 0px;        
        color:#fff;     
        display: none;   
    }
    /* end */

    .filter-by-sample-demo span
    {
        font-weight: 400 !important;
        color: rgb(42, 57, 78) !important;
    }
    /* end css part 2 */

    /* custom css code 13th april 2024 */
    .custom-search-text-all-mjob
    {
        border:0px;
        outline:0px;
        border-bottom: 1px solid rgba(137, 138, 144, 0.2);
        margin:10px 0px 25px 0px;
        padding:10px 0px;
    }
    .custom-btn-search
    {
        padding:10px 10px;
        margin-left:5px;
        background-color:#10a2ef;
        color:#ffffff;
        outline:0px;
        border:0px;
        border-radius: 10px;
    }
    /* end custom */

    /* custom 16th May 2024 */
    /* user want to use his own banner so need to hide text banner */
    /* .mje-main-wrapper .slider .search-form h1
    {
        display:none;
    }
   .mje-main-wrapper .slider .search-form h4
    {
        display:none;
    }*/
    .mje-main-wrapper .custom-image-banner
    {
        width:300px;
        height:250px;
    }
    .search-form {
        width: 100%;
        text-align: center;
        position: absolute;
        z-index: 99;
        vertical-align: middle;
        color: #fff;
        left: 50%;
        top: 30%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
      }
      .mje-main-wrapper .slider .custom-text-icons
      {
          position:absolute;
          bottom: 5%;
          left: 50%;        
          width:100%;
          height:auto;
          z-index:999;
          transform: translate(-50%, -50%);
          padding-left:15px;
          padding-right:15px;
          display: flex;
          justify-content: space-between;
          
          color:#ffffff;
          font-size: 14px;
          font-weight: 500;
      }
      .mje-main-wrapper .slider .custom-text-icons-item
      {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;            
      }
      
      @media (max-width: 991px) 
      { 
        .mje-main-wrapper .slider .custom-text-icons
          {
              width:100%;
              justify-content: space-between;          
              padding:0px 80px;

          }                 
      }
      @media (max-width: 480px) 
      {
        .mje-main-wrapper .slider .search-form
        {
            top:32% !important;
        }
        .mje-main-wrapper .slider .search-form img
        {
            width:250px;
            height:150px;
        }
        .mje-main-wrapper .slider .custom-text-icons
        {
            width:100%;
            padding:0px 20px;
            bottom:8%;
        }
        .mje-main-wrapper .slider .custom-area-btn
        {
            width:100%;
            padding:0px 20px;
        }
      }

      @media (min-width: 1200px) 
      {
        .mje-main-wrapper .slider .custom-text-icons
        {
            font-size:18px;
        }
        .mje-main-wrapper .slider .search-form
        {
            top:30%;
        }
          
          .mje-main-wrapper .slider .custom-text-icons
          {
              width:650px;
              bottom:15%;
              padding-top:15px;
              padding-bottom:15px;
              padding-left:25px;
              padding-right:25px;                          
          } 
        
         
      }
      .mje-main-wrapper .slider .custom-text-icons-item img
      {
        width:50px;
        height:100px;
      }
      .search-form .custom_sub_title
      {
        text-transform: uppercase;
      }
      .search-form .custom_sub_title .yellowmark
      {
        color:yellow;
      }
    /* end custom 16th May 2024 */
    
    /* fix bug + custom 22th aug 2024 */
    .custom-multiple-select,
    .edit-custom-multiple-select
    {
        border-bottom:1px solid rgba(137, 138, 144, 0.2);      
    }
    .custom-multiple-select .ts-control,
    .edit-custom-multiple-select .ts-control
    {
        padding-bottom:10px !important;
    }
    
    .edit-audio-player-css .plyr--audio
    {
        height:100%;
    }
    .edit-audio-player-css .plyr--audio input[type="range"]
    {
        border-bottom: 0 !important;
    }
    .btn-remove-audio,
    .btn-revert-audio
    {
        margin-top:10px !important;
        margin-bottom: 20px !important;
    }
    .btn-revert-audio
    {
        visibility: hidden;
    }
    .audio-recovery-text
    {
        display: none;
    }
    .music-genre-single-service
    {
        margin:0px 10px;
        border-radius: 10px;
        border:1px solid #717171;
        padding:5px 10px;
    }
    /* end custom */

