.container-custom-job{ 
  width:100%;
  display:flex;
  justify-content:center;
}
.container-custom-job .container-custom-job-components{ 
  width:950px;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  padding:10px;
  background-color:#fff;
  border-radius:10px;
  gap:10px;
  min-width:0;
}

.container-custom-job .cs-location-select{ 
  box-sizing:border-box;
  flex:0 0 25%;    
  max-width:25%;
  width:auto;
  height:58px; 
  padding:5px 15px; 
  border-radius:8px; 
  cursor:pointer;
  border:0;
  background-color:#f3f3f3;
  font-size:16px;
  color:#6b7280;
}

.cs-location-select{
  -webkit-appearance:none; 
  -moz-appearance:none; 
  appearance:none;
  padding-right:48px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px;
}
.cs-location-select::-ms-expand{ display:none; }
@media (forced-colors: active){
  .cs-location-select{ background-image:none; padding-right:10px; }
}

.container-custom-job .sj-jobctrl{ 
  position:relative; 
  flex:1 1 75%;       
  max-width:75%;
  min-width:0;        
}

.cs-open-job { 
    padding: 10px 30px;
    white-space: nowrap;
    border-radius: 8px;
    height: 100%;
    border: 1px solid #e7ca00;
    color: #fff;
    font-weight: 700;
    background-color: #e7ca00;
    cursor: pointer;
}
.cs-open-job:hover{
    background-color: #fff;
    color: #e7ca00;
}



@media screen and (max-width: 767px)
{
    .container-custom-job .container-custom-job-components {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .container-custom-job .cs-location-select {
        width: 100%;
        max-width: 100%;   
        min-height: 56px;
    }

    .container-custom-job .sj-jobctrl {
        max-width: 100%;
        width: 100%;
    }

    .cs-open-job
    {
        width: 100%;
        max-width: 300px;
    }
}


.container-custom-job .sj-jobsel{
  display:flex; 
  align-items:center; 
  gap:10px; 
  width:100%;
  min-width:0;
  padding:8px 10px; 
  border:0;
  border-radius:8px; 
  background:#f3f3f3;
  cursor:pointer; 
  text-align:left;
}
.container-custom-job .sj-jobsel__thumb{
  width:40px; 
  height:40px; 
  border-radius:6px; 
  background:#fff;
  display:inline-block; 
  background-size:cover; 
  background-position:center; 
  flex:0 0 40px;
}
.container-custom-job .sj-jobsel__title{
  font-size:16px; 
  color:#6b7280;
  flex:1 1 auto; 
  min-width:0; 
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis;
}

.container-custom-job .sj-jobpanel[hidden]{ display:none; }
.container-custom-job .sj-jobpanel{
  position:absolute; 
  z-index:50; 
  left:0; 
  right:0; 
  margin-top:6px;
  max-height:420px; 
  overflow:auto; 
  border:1px solid #e5e7eb; 
  border-radius:8px; 
  background:#fff; 
  padding:6px;
}

.container-custom-job .sj-jobpanel .sj-job{
  display:flex; 
  align-items:stretch;
  gap:12px; 
  width:100%; 
  text-align:left; 
  padding:10px;
  border:1px solid #e5e7eb; 
  border-radius:8px; 
  background:#fff; 
  cursor:pointer; 
  outline:none;
  min-height:60px;
}
.container-custom-job .sj-jobpanel .sj-job + .sj-job{ margin-top:8px; }
.container-custom-job .sj-jobpanel .sj-job img{
  width:60px; 
  height:60px; 
  object-fit:cover; 
  border-radius:6px; 
  flex:0 0 60px;
}
.container-custom-job .sj-jobpanel .sj-job .sj-job__title{
  font-size:14px;
  line-height:1.3;
  color:#111827;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;   
  line-clamp:2;           
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;     
  max-height:calc(1.3em * 2);
}
.container-custom-job .sj-jobpanel .sj-job .sj-job__salary{
  font-size:14px; 
  line-height:1.3; 
  color:#1723b9;
}

.cs-job-details{
  flex:1 1 auto;
  display:flex; 
  flex-direction:column; 
  justify-content:space-between;
  min-height:60px; 
  padding:2px 0;
}

.container-custom-job .sj-jobpanel .sj-job[aria-selected="true"],
.container-custom-job .sj-jobpanel .sj-job.is-selected{
  background:#f3f4f6; 
  border-color:#3b82f6;
}

.container-custom-job .cs-job-select{ display:none; }
