#searchjob-section .bor-box {border: 1px solid var(--clr-gray-3); border-radius: 1rem;}

#searchjob-section-body-header,#searchjob-section-body-LR {display: grid; gap: 2rem; grid-template-columns: 955px 305px;}
#searchjob-Leftside, #searchjob-Rightside{gap:2rem; display: flex; flex-direction: column;}
#searchjob-section-head{max-width: 955px;}
#searchjob-section-head .head-tag{padding: 2px 20px; background-color: var(--clr-gray-1); color: #555; font-size: 20px; border-radius: 5px; height: 28px; line-height: 24px;}
#searchjob-section-head .head-tag:hover, #searchjob-Rightside .trend-tag a:hover{background-color: var(--clr-gray-4);}


.icon-sortup {
    display: block;
    width: 16px;
    height: 16px;
    background: url("../images/intern/icon-sort-up.svg") top center no-repeat;
    background-size: cover;
}

#searchjob-section .button-group {position: relative;}
#searchjob-section .ddForm {
    background: #fff;
    font-size: var(--font-default);
    border: 1px solid #dbdfec;
    color: var(--clr-gray-5);
    text-align: left;
    border-radius: 1rem;
    padding-inline: 15px;
}
.sort-dd{width: 340px; max-height: 40px;}

#searchjob-section .ddForm.dropdown-toggle::after {
    display: none;
}

#searchjob-section .dropdown-menu {
    width: 100%;
    border-radius: 1rem;
    top:0.5rem !important;
}
.right-banner img{
    border-radius: 1rem;
    /*max-height: 530px;*/
    width: 100%;
    max-height: 610px;
}



#searchjob-Rightside .sjr-header{ padding-bottom: 1rem; border-bottom: 1px solid var(--clr-gray-3); font-size: 22px;}
#searchjob-Rightside .trend-tag, #searchjob-Rightside .trend-tag-mobile{gap: 4px;}
#searchjob-Rightside .trend-tag a, #searchjob-Rightside .trend-tag-mobile a{padding: 4px 12px; border: 1px solid var(--clr-gray-4); background-color: #fff; border-radius: 8px; font-size: 18px;min-height: 3rem;}
#searchjob-Rightside .trend-tag a:hover, #searchjob-Rightside .trend-tag-mobile a:hover {
    color: var(--clr-black-1);
}


#searchjob-Rightside .sjr-works-by-province a{max-height: 26px; font-size: 22px; line-height: 26px; color: var(--clr-black-1)}
#searchjob-Rightside .sjr-works-by-province a:hover{background-color: var(--clr-gray-2); padding-inline: 8px;}
#searchjob-Rightside .sjr-works-by-province .text-primary{font-weight: bold;}


.joblist-pos{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}



.reccom-job-box{
    background-color: #fff;
    border-radius: 16px;
    padding: 20px 15px;
    box-shadow: 0 16px 32px rgba(12, 12, 13, 10%);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: #333;
    cursor: pointer;/**/
}

.reccom-job-box:hover{
  box-shadow: 2px 4px 20px rgba(154, 170, 207, 50%);
}

.joblist-logo-company{display: flex; gap: 1.2rem;}
.joblist-logo-company figure{width: 8rem; height: 8rem; border-radius: 6px; border: 1px solid #dbdfec; display: flex;
  align-items: center; overflow: hidden;}
.joblist-logo-company figure img{ 
  /*border-radius: 8px;
  border: 1px solid #d9d9d9;*/
  object-fit: cover;
}
.reccom-job-box-upper{display: flex;  gap: 1.6rem; padding-bottom: 8px;/**/}

.joblist-detail{display: flex; justify-content: space-between; gap: 15px;}
.joblist-name-urgent-updatetime {display: flex; justify-content: space-between;}
.joblist-name-urgent {display: flex; gap: 4px;}
.joblist-name-urgent span  {font-weight: 600; font-size:24px;}
.joblist-name-urgent span a{color: #333;}
.joblist-name-urgent .joblist-updatetime-md-upper span a{color:#777; font-size: 20px; font-weight: normal;}
/*.joblist-name-urgent span a:hover{text-decoration: underline !important;}*/

.Urgently {color: #ff1111; height: 24px; padding: 2px 8px; border: 1px solid #ff1111; border-radius: 5px; display: flex; align-items: center; font-size: 20px; background-color:#FFF1F1;
    ;}
.joblist-company-name, .joblist-company-name a, .joblist-company-name a:hover{color: #333; font-size: 22px;}
.joblist-time-urgent-sign-bookmark{display: flex; gap: 1.6rem; /*align-items: center;*/}
.joblist-time-urgent{display: flex; align-items: center; gap: 1.6rem;}
.joblist-updatetime-md-upper, .joblist-updatetime-sm-lower {color: #318FE8; font-size: 20px; align-items: center; gap: 5px; height: 19px; }
.joblist-updatetime-md-upper a, .joblist-updatetime-sm-lower a, .joblist-updatetime-md-upper a:hover, .joblist-updatetime-sm-lower a:hover{color: #318FE8}
.joblist-updatetime-md-upper {display: flex;}
.joblist-updatetime-sm-lower{display: none;}

.icon-updatetime {background: url(../images/intern/icon-clock-g.svg) top center no-repeat;   width: 16px; height: 16px;}

.icon-location {background: url(../images/intern/icon-loc.svg) top center no-repeat;   width: 11px; height: 14px;}
.icon-salary {background: url(../images/intern/icon-salary.svg) top center no-repeat;  width: 17px; height: 14px;}



.icon-bookmark-outline {background: url(../images/intern/bookmark-g.svg) top center no-repeat; /*background-size: cover;*/  width: 14px; height: 20px; display: block;}
.icon-bookmark-fill {background: url(../images/intern/bookmark-over.svg) top center no-repeat; /*background-size: cover;*/  width: 14px; height: 20px; display: block;}
/*.icon-bookmark-outline:hover, .icon-bookmark-fill {background: url(../images/intern/bookmark-over.svg) top center no-repeat; background-size: cover;  width: 14px; height: 20px; display: block;}*/
.btn-bookmark {background-color: transparent;border: 0 solid transparent;    height: 16px; /*margin-top: -10px;*/ padding-inline: 0;}

.joblist-loc-sal{display: flex; flex-wrap: wrap; gap: 12px; font-size: 22px; padding-bottom: 32px;}
.position-location,.position-salary{display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center;}

.position-location span:last-child {
    white-space: nowrap; 
    width: 380px; 
    overflow: hidden;
    text-overflow: ellipsis; 
  }
.position-location a, .position-location:hover{color:#333;}  


.reccom-job-box-footer{/*border-top: 1px solid var(--clr-gray-3);*/ padding-top:0; display: flex; align-items: center; justify-content: space-between; /*gap: 1.6rem;*/}

.joblist-tag{display: flex;  gap: 1rem; align-items: center; margin-top: 0; flex-wrap: wrap;}
.joblist-tag span{padding: 2px 20px; border-radius: 3rem; border: 1px solid #F1F4F8; background-color: #F1F4F8; font-size: 20px;}



.joblist-detail-button {
    color: #fff;
    height: 34px;
    padding: 0 40px;
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-size: 2.2rem;
    position: relative;
    background-image: linear-gradient(to right, #ff1111, #ff1111);
    -webkit-backface-visibility: hidden;
    z-index: 1;
   white-space: nowrap;
   border: 0px solid #ff1111;
  }
  .joblist-detail-button:after {
    position: absolute;
   content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #ff0000, #C90808);
    transition: opacity 0.5s ease-out;
    z-index: 2;
    opacity: 0;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(154, 170, 207, 80%);
  }
  .joblist-detail-button:hover:after {
    opacity: 1;
    z-index: 2;
  }
  .joblist-detail-button span {
    position: relative;
    z-index: 3;
  }
  /*.joblist-cpn-loc-sal{padding-left: 110px;padding-bottom: 15px;}*/
  .joblist-detail-section .joblist-company-name{margin-top: 0.4rem;}
  .joblist-detail-section .joblist-loc-sal{margin-top: 1.2rem;}
  .badge-sign ul{display: flex; gap: 0.8rem; justify-content: end;}
  .badge-sign ul li{width: 24px; height: 24px;}
  /*#searchjob-section .dropdown-item div {}*/
  
  #searchjob-section .dropdown-item label {
    cursor: pointer;
    font-size: var(--font-default);
    color: var(--clr-gray-5);
    padding: 8px 10px;
  }
  #searchjob-pagination{margin-top: 4rem;}

  #searchjob-section-body-LR .banner1280 .banner-deco{box-shadow: 2px 3px 16px rgba(154, 170, 207, 25%); border: none !important;}

  .job-hilight-box{padding-bottom: 3rem; border-bottom: 1px solid #dbdfec; margin-bottom: 3rem;}
  .job-hilight-box ul{display: grid; /*grid-template-columns: repeat(4, 23.4375%);*/ grid-template-columns: repeat(4, 1fr); gap: 2rem;}

  .job-hilight-card {
    background-color: #fff;
    box-shadow: 2px 2px 16px rgba(154, 170, 207, 25%);
    padding: 15px;
    border-radius: 0.8rem;
    display: flex;
    flex-direction: column;
    /*flex-wrap: wrap;*/
    color: #333;
    height: 310px;
    cursor: pointer;
    
}
.job-hilight-card:hover{
  box-shadow: 2px 4px 20px rgba(154, 170, 207, 50%);
}
.job-hilight-card .position-location span:last-child {
  width: 240px;
}

.job-hilight-card .joblist-name-urgent-updatetime{justify-content: end;}

.job-hilight-card .reccom-job-box-upper{margin-bottom: 1.6rem;}
.job-hilight-card .joblist-updatetime-md-upper{font-size: 18px;}

.job-hilight-card .joblist-time-urgent-sign-bookmark{margin-bottom: 0.8rem; gap: 1.2rem;}
.job-hilight-card .joblist-name-urgent{margin-bottom: 0.8rem; /*line-height: 28.77px;*/}
.job-hilight-card .joblist-company-name{margin-bottom: 1.6rem; height: 19px;}
.job-hilight-card .position-location{height: 19px;}
.job-hilight-card .joblist-loc-sal {gap: 1.6rem; padding-bottom: 0;}
.job-hilight-card .Urgently{font-size: 18px;}

.joblist-not-found{min-height: 200px; padding-bottom: 4rem; display: flex; align-items: center;}

.reccom-jobpost-name{font-size: 28px;}
.reccom-jobpost-name a{font-weight: bold; color: #333; margin-bottom: 8px;}
.more-reccom-job{
    color: #fff;
    padding: 1.6rem 3.2rem;
    text-decoration: none;
    border-radius: 1.6rem;
    font-size: 3.2rem;
    position: relative;
    background-image: linear-gradient(to right, #ff4141, #b50c0c);
    -webkit-backface-visibility: hidden;
    z-index: 1;
    white-space: nowrap;
    width: 200px;
    border: transparent;
    height: 7.2rem;
}
.more-reccom-job span {
    position: relative;
    z-index: 3;
}

.more-reccom-job:after
 {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient(to right, #ff284f, #8f418e); */
    background-image: linear-gradient(to right, #ff1111, #C90808);
    transition: opacity 0.5s 
ease-out;
    z-index: 2;
    opacity: 0;
    box-shadow: 2px 4px 6px rgba(154, 170, 207, 40%);
}



@media (min-width: 991px)  {
  /*.joblist-time-urgent{flex-direction: column; gap: 1rem;}*/
  .joblist-detail-device{display: none;}
  .joblist-name-urgent span  {max-width: 430px;}
  }
  

@media (min-width: 768px) {
   #searchjob-Rightside .banner1280.row{display: none;}
}

@media (max-width: 1280px) {
#searchjob-section-body-header,#searchjob-section-body-LR {display: grid; gap: 2rem; grid-template-columns: 74.609375% 23.828125%;}
#searchjob-section-head{max-width: 74.609375%;}
.job-hilight-card .position-location span:last-child {
  width: 200px;
}
}
@media (max-width: 1200px) {
    .job-hilight-box ul {
    overflow-x: auto;
    grid-template-columns: repeat(4, 305px);
    padding: 8px;
    margin-left: -8px;
    }
    .job-hilight-card .position-location span:last-child {
      width: 240px;
    }
}

@media (max-width: 991px) {
  #searchjob-section-body-header, #searchjob-section-body-LR {
    grid-template-columns: 65% 33%;}
  #search-job-box.sjb-4-search-work-page .search-job-box-2ndrow li:first-child,#search-job-box.sjb-4-search-work-page .search-job-box-2ndrow li:nth-child(2){
    grid-column: span 4;
  }/**/
  #search-job-box.sjb-4-search-work-page .search-job-box-2ndrow .ddm-salary li:first-child, #search-job-box.sjb-4-search-work-page .search-job-box-2ndrow .ddm-salary li:nth-child(2),
  #search-job-box.sjb-4-search-work-page .search-job-box-2ndrow .ddm-education li:first-child, #search-job-box.sjb-4-search-work-page .search-job-box-2ndrow .ddm-education li:nth-child(2){
    grid-column: unset;
  }
  #search-job-box .search-job-box-2ndrow #call-area-collapse.ddForm span, #search-job-box .search-job-box-2ndrow #call-jobs-collapse.ddForm span{
    padding-left: 20px !important; /* */
  }
  
  /*.joblist-name-urgent-updatetime {justify-content: end;}*/
  /*.reccom-job-box-upper{flex-direction: column;}*/
  /*.joblist-detail-section .joblist-name-urgent, .joblist-detail-section .joblist-company-name, .joblist-detail-section .joblist-loc-sal{display: none;}*/

  .joblist-name-urgent-updatetime{justify-content: end; flex-direction: column-reverse;gap: 8px;}
  .joblist-detail-device{margin-top: 1.6rem; display: flex; flex-direction: column; gap: 1.6rem;}
  .joblist-detail-section .joblist-company-name, .joblist-detail-section .joblist-loc-sal{margin-top: 0;}
  .searchjob-section-head-1stline.d-flex{display: none !important;}

  .joblist-updatetime-md-upper{font-size: 18px;}
  .Urgently{font-size: 16px;}
  .joblist-name-urgent span {font-size: 22px;}
  .joblist-company-name, .joblist-loc-sal {font-size: 22px;}

  .reccom-jobpost-name{font-size: 24px;}
  
}

@media (max-width: 840px) {
    .searchjob-section-head-2ndline.d-flex{display: block !important;}
    .sort-dd{margin-top: 1.5rem;}
}



@media (min-width: 768px) and (max-width: 991px) {
/*.joblist-time-urgent{flex-direction: column; gap: 1rem;}*/
#searchjob-section-body-header, #searchjob-section-body-LR {gap: 1rem;}
}





@media (max-width: 767px) {
    .sort-dd{width: 100%;}
    #searchjob-section-body-header,#searchjob-section-body-LR {grid-template-columns: repeat(1, 1fr);}
    #searchjob-section-head{max-width: 100%;}
    
    #search-job-box.sjb-4-search-work-page .search-job-box-2ndrow li:first-child,#search-job-box.sjb-4-search-work-page .search-job-box-2ndrow li:nth-child(2){
      grid-column: span 2;
    }/**/
      .joblist-time-urgent-sign-bookmark{width: 100%;align-items: start;}
  .joblist-time-urgent{flex-direction: column; gap: 1rem; align-items:start; flex: 1 1 auto !important;}
  .badge-sign ul{justify-content: start;}
  .btn-bookmark {margin-top: 0;  }
   /* .joblist-loc-sal {flex-direction: column; padding-bottom: 0;}*/
    /*.reccom-job-box-footer{display: none;}*/
    #searchjob-Leftside .banner1280.row{display: none;}
    #searchjob-Leftside .right-banner {margin-inline: auto;}
    #searchjob-Leftside .right-banner img {width: auto;}

    #searchjob-Rightside .right-banner, #searchjob-Rightside .searchjob-Right-Trending{display: none;}  
    #searchjob-pagination{margin-top: 2rem; margin-bottom: 2rem;}

    .job-hilight-card .joblist-time-urgent {align-items: end;}
    .reccom-job-box-upper{gap: 16px;}
    .more-reccom-job{
    width: 100%;
    height: 5.2rem;
    padding: 0.8rem 3.2rem;
    }
}

@media (max-width: 576px) {
  #search-job-box.sjb-4-search-work-page .search-job-box-2ndrow li:first-child .ddForm,#search-job-box.sjb-4-search-work-page .search-job-box-2ndrow li:nth-child(2) .ddForm{
    font-size: 22px;
  }/**/
  .position-location span:last-child {width: 330px;}
  .joblist-not-found{flex-direction: column;}
  .joblist-not-found div:last-child{text-align: center;}

}

@media (max-width: 420px) {
  .position-location span:last-child {width: 300px;}

}

@media (max-width: 380px) {
  .position-location span:last-child {width: 260px;}
  #search-job-box.sjb-4-search-work-page .search-job-box-2ndrow li:first-child,#search-job-box.sjb-4-search-work-page .search-job-box-2ndrow li:nth-child(2){
    grid-column: unset;
  }

}

@media (max-width: 350px) {
  .position-location span:last-child {width: 220px;}
  /*#searchjob-section-body-LR { grid-template-columns: repeat(1, 100%);}*/
.joblist-name-urgent span{
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge-sign ul li{width: 20px; height: 20px;}

}

