#job-listings .loader{background: rgba(255, 255, 255, 0.8); justify-content: center; align-items: center;}
[v-cloak] {display: none;}
.job-list{margin-top:0; background-color: #F7F7F7;}
.job-list__outer{padding: 4rem 0;}

/*=== LEFT SIDE ===*/
.job-list__left-top-content{display: flex; gap: 2rem; justify-content: space-between; padding-bottom: 2.4rem;}
.job-list__gradient{display: block; height: 1px; background: linear-gradient(90deg, rgba(200, 199, 204, 0.50) 0%, rgba(200, 199, 204, 0.00) 100%); width: 100%;}
.job-list__filter-cross-icon,.job-list__selected-tag-cross{display: block; width: 1.35rem; height: 1.8rem; background-image: url("/~/media/Images/R/rolls-royce-careers-v3/icons/icon-cross.svg"); background-size: cover; background-repeat: no-repeat; background-position: center;}
.job-list__filter-clear{display: flex; align-items: center; gap: .4rem;}
.job-list__filter-clear-text{font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: 24px; color: #4E5D65; display:none;}
.job-list__left-dd{margin-top: 2.4rem;}
.job-list__left-dd .job-list__gradient{margin-top: 2.4rem;}
.job-list__left-dd-trigger{display: flex;margin-bottom: 1.6rem; color: #4E5D65;font-size: 1.2rem;font-style: normal;font-weight: 400;line-height: 1.4rem; letter-spacing: .1rem;text-transform: uppercase; justify-content: space-between;}
.job-list__left-bottom :last-child .job-list__gradient{display: none;}
.job-list__mobi-trigger{display: flex; align-items: center; justify-content: space-between;border-radius: .4rem;border: 1px solid #DFDFDF;background: #FFF; padding: 2rem !important; margin-bottom: 2rem;}
.job-list__mobi-trigger-text{color: #1E3643;font-size: 1.6rem;font-style: normal;font-weight: 500;line-height: 2.4rem;}
.job-list__mobi-trigger-icon{display: flex;}
.job-list__left{display: none; padding: 3.2rem; background-color: #fff; }
.job-list__no-item{ font-size: 1.6rem; }

/*=== Dropdown ===*/
#content-wrapper .job-list .job-list__left-dd-box > li:before{ content: none; }
#content-wrapper .job-list .job-list__left-dd-box{padding-bottom: 0;}
.job-list__left-dd-box > li{margin-bottom: 1.2rem !important; padding: 0 !important;}
.job-list__left-dd-box :last-child{margin-bottom: 0 !important;}
.job-list__left-dd-box > li > .job-list__dd-label {color: #1E3643;font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: 2.4rem; position: relative; padding-left: 3.6rem; cursor: pointer; display: block;}
.job-list__left-dd-box > li > .job-list__dd-label::before{ content: "";position: absolute;height: 2.4rem;width: 2.4rem;border: 1px solid #C8C7CC;border-radius: .4rem;top: 0;left: 0; } 
.job-list__dd-checkbox{display: none;}
.job-list__dd-checkbox:checked + .job-list__dd-label::before{background-color: #10069F;background-image: url(/~/media/Images/R/rolls-royce-careers-v3/icons/icon-check.svg);background-position: center center;background-repeat: no-repeat;}
.job-list__left-dd-trigger:hover{color: #4E5D65;}
.job-list__left-dd-icon{height: 1.2rem; width: 1.2rem; display: flex; align-items: center; justify-content: center; position: relative; transition: rotate .3s ease-in-out;}
.job-list__left-dd-icon::before{content: "\e904";position: absolute;font-family: icomoon;color: #4E5D65;font-size: .65rem;line-height: normal;display: block;top: 50%;left: 16%;transform: translate(-50%, -50%); rotate: 90deg;}
.open-filters .job-list__left-dd-icon{rotate: -180deg;}


/*=== RIGHT SIDE ===*/
.job-list__right-bottom{display: flex; flex-direction: column; gap: 1.2rem;}
.job-list__results-count{color: #1E3643;font-size: 1.6rem;font-style: normal;font-weight: 500;font-family: "RRPioneer-Medium";line-height: 2.4rem;}
.job-list__right-top{margin-bottom: 2rem; display: flex; justify-content: center; align-items: center;}
.job-list__selected-tags{display: none;}

/*=== Job Card ===*/
.job-list__job-tags{display: flex; gap: .8rem; flex-wrap: wrap;}
.job-list__job{background: #fff;padding: 3.2rem !important;border-radius: .4rem;border: 1px solid #DFDFDF; display: flex; justify-content: space-between;gap: 2.4rem; transition: all .3s ease-in-out;}
.job-list__job-title{margin-bottom: 2.4rem; color: #1E3643;font-family: 'RRPioneer-LightCondensed-new';font-size: 2rem;font-style: normal;font-weight: 300;line-height: normal;letter-spacing: .28rem;}
.job-list__job-tag{color: #4E5D65;font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: 2.2rem;}
.job-list__job-tag span{ color: #C8C7CC; width: .4rem; display: inline-flex; margin-left: .8rem;}
.job-list__job-button{display: none;}
.job-list__job:hover .job-list__job-button{opacity: 1;}
.job-list__job:hover{border: 1px solid #006DFF;}

.job-list__bottom-clear{border-radius: .4rem;border: 1px solid #4E5D65;background: #FFF;flex: 1 1 0;padding: 1.2rem 0;text-align: center;color: #4E5D65;}
.job-list__bottom-clear:hover{color: #4E5D65;}
.job-list__bottom-apply{border-radius: .4rem;background: #10069F;flex: 1 1 0;padding: 12px 0;text-align: center;color: #fff;}
.job-list__bottom-apply:hover{color: #fff}
.job-list__bottom-buttons{display: flex;justify-content: space-between;gap: 1.2rem;font-size: 1.6rem;font-style: normal;font-weight: 500;line-height: 2.4rem;position: fixed;width: 100%;left: 0;bottom: 0;padding: 2.4rem 2rem;background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);backdrop-filter: blur(2rem); padding-top: 0;}
.job-list__left-bottom {scrollbar-width: none;-ms-overflow-style: none;}
.job-list__left-bottom::-webkit-scrollbar {display: none;}

.job-list__bottom-buttons::before {content: "";position: absolute;top: 0;left: 0;transform: translateY(-100%);width: 100%;height: 24px;background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);backdrop-filter: blur(2rem);pointer-events: none;}

/*==== Pagination ==== */
.pagination_section{overflow:hidden;}
#content-wrapper .pagination__list ul{display:flex; justify-content:center; align-items:center; margin-top:6.4rem;}
#content-wrapper .pagination__list ul .pagination__list-item{margin-bottom:0;line-height:0;padding-left:1.6rem}
#content-wrapper .pagination__list ul .pagination__list-item:first-child{padding-left:0;}
.pagination__list-item:has(.action-button-left){rotate:-180deg;}
#content-wrapper .pagination__list ul .pagination__list-item::before{content:none;}
.pagination__list .pagination__number {font-size: 17.996px;font-style: normal;font-weight: 400;line-height: normal;text-transform: uppercase;color: #4E5D65;}
.pagination__list .icon-nav-mid {color: #4E5D65; font-size: 1.8rem; line-height: normal; padding: 0.3rem;}
.pagination__list .pagination__number.active{color:#006DFF;}


/* ======= Scrollbar ======= */
#content-wrapper ::-webkit-scrollbar {width: 0.4rem;background-color: transparent;height: 8rem;}

#content-wrapper ::-webkit-scrollbar-track {background: transparent;}

#content-wrapper ::-webkit-scrollbar-thumb{background: #4E5D65;border-radius: 60px;}


@media all and (min-width: 768px){
  .job-list__outer{padding: 10rem 0;}
  .job-list__left{padding: 3.2rem; background-color: #fff; display: block;}
  .job-list__job-title{font-size: 2.4rem; line-height: 3.2rem; }
  .job-list__job-tag{font-size: 1.6rem;line-height: 2.4rem;}
  .job-list__right-bottom{gap: 3.1rem;}
  .job-list__job-tags{gap: 1.2rem;}
  .job-list__job-tag span{ width: .5rem; margin-left: 1.2rem;}
  .job-list__results-count{font-size: 1.8rem;color: #4e5d65;}
  .job-list__right-top{margin-bottom: 3.2rem; justify-content: space-between;}
  .job-list__job-button{height: 7.2rem; width: 6rem; background-color: #006DFF; border-radius: .4rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all .3s ease-in-out;}
  .job-list__mobi-trigger{display: none;}
   /*=== selected tags ===*/
  .job-list__selected-tags{max-width: 80%;display: flex;gap: 1.2rem;flex-wrap: wrap;justify-content: flex-end;}
  .job-list__selected-tag{border: 1px solid #CDDAE6;background: #fff;box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.08);padding: .9rem 1.6rem; display: flex;align-items: center;gap: 1rem;}
  .job-list__selected-tag-text{color: #10069F;font-size: 1.4rem;font-style: normal;font-weight: 500;line-height: 2.6rem;}
  .job-list__bottom-buttons{ display: none; }
  .job-list__filter-clear-text{display: block;}
  #content-wrapper .job-list .job-list__left-dd-box{max-height:20.5rem;overflow:auto; margin-right: -12px; padding-right: 1.2rem;}
}

@media all and (min-width: 767.98px) and (max-width: 1023.99px){
  .job-list__left{margin-right: 1.5rem;}
}

@media all and (max-width: 767.98px){
.job-list__left{display: block;top: 9rem;left: 0;position: fixed;width: 100%;z-index: 999;height: calc(100vh - 9rem);transform: translateY(100%);transition: all .3s ease-in-out;}
.open-filters.job-list__left{transform: translateY(0);} 
.job-list__left-bottom{block-size: 100%;bottom: 0;position: relative;overflow: auto;height: calc(100vh - 24.2rem);overflow-x: clip;}
}