div#career-container{background-color: rgba(35, 28, 29, 1.0);} 

form#input-container{
  display: grid; 
  padding: 25px 30px;
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: 47px 47px 54px;
  column-gap: 8px; 
  row-gap: 10px;
}
#no-results{
  color: white;
  text-align: center;
  margin-bottom: 0;
  padding-top: 60px;
}
form#input-container #dropdownMenuCountries{height: 100%; cursor:pointer; position: relative; z-index:3;}
form#input-container #dropdownMenuCountries, #title-job-search {background-color: #ffffff; border-radius: 39px; display: flex; align-items:center; padding: 15px 25px; }
form#input-container #dropdownMenuCountries .selectedarea{
  color: #231c1d;
  margin-right: 5px;
  pointer-events: none;
}
#{
  font-weight: bold;
}
form#input-container #dropdownMenuCountries i {
  position: absolute;
  top: 14px;
  right: 25px;
  z-index: 1;
  pointer-events: none;
}

.dropdown{position: relative; grid-column: 1 / 5; grid-row: 2 / 3; z-index: 1;}
form#input-container > #search-job { grid-column: 1 / 5; grid-row: 1 / 2; position: relative;}
button#submit-job{
  grid-column: 1 / 5; 
  background-color: rgba(90, 176, 49, 1); 
  border-radius: 48px; 
  text-transform: uppercase;   
  font-size: 15px; 
  font-weight: bold; 
  grid-row: 3 / 4;
  margin-top: 10px;
  height: 54px;
}
.apply-button{
  background-color: rgba(90, 176, 49, 1); 
  border-radius: 48px;
  padding: 15px;
}
#title-job-search::-webkit-search-decoration,
  #title-job-search::-webkit-search-cancel-button,
  #title-job-search::-webkit-search-results-button,
  #title-job-search::-webkit-search-results-decoration {
    -webkit-appearance:none;
  }
div.jobcard-grid{
  padding: 0 30px; 
  column-gap: 8px; 
  row-gap: 8px;
}
.jobcard{
  position: relative;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.jobcard-gradient{
  position: absolute;
  background-image: linear-gradient(to bottom, rgba(35, 28, 29, 0.5), rgba(35, 28, 29, 0.5)), linear-gradient(to bottom, #47b1a3 0%, #412647 100%);
  background-size: cover; /* Resize the background image to cover the entire container */
  height: 100%;
  width: 100%;
  opacity: 0.9;
  top: 0;
  left: 0;
}
.resources-load-more-wrapper{
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: auto;
  padding: 0px 30px 96px;
  text-align:center;
}
.load-more, .cta-global{
  grid-column: 1 / 5;
  background-color: transparent; border-radius: 48px; border-color: #ffffff;
  text-transform: uppercase;
}
.resources-load-more-wrapper .resources-pagination {color:white; cursor: pointer; font-size: 16px; justify-self: center; grid-column: 1 / 5; padding: 10px 30px; margin-top: 40px;}
.resources-load-more-wrapper p {color: white; grid-row: 2/3; grid-column:1/5; font-weight: bold; font-size: 16px;  margin-top: 96px;}
.resources-load-more-wrapper .cta-global{ grid-row: 3 / 4; padding: 15px 10px;}
.resources-load-more-wrapper .cta-global a {color: white;}
.resources-load-more-wrapper .cta-global a:hover{text-decoration: none;} 
.resources-load-more-wrapper .resources-pagination button{grid-column: 1 /5;}
.resources-load-more-wrapper i {margin-left: 8px;}
.resources-load-more-wrapper .divider{background-color: white; height: 1px; width: auto; opacity: 1; transition: 0.3s;}
/* .resources-load-more-wrapper{color: white; width: 100%; } */
div#jobcard {
  cursor:pointer; 
  overflow:hidden; 
  height: auto; 
  margin-bottom: 8px; 
  padding: 30px; 
  position: relative;
}
div#jobcard{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
div#jobcard .jobcard-cta{
  text-decoration: underline;
  margin-bottom: 0;
  text-decoration-color: #fff;
  -webkit-text-decoration-color: #fff;
  -moz-text-decoration-color: #fff;
  transition-duration: 0.5s;
}
p.jobtitle {
  color:#ffffff; font-weight:600
}
.jobwhere {
  font-size:16px; flex-basis:100%; margin-bottom: 25px;
}
.job-modal .modal-title{font-size: 20px;}
.job-modal #jobwhere {text-align: center; font-size: 16px;}
.job-modal #jobwhere svg {margin-right: 20px;}
div.jobwhere, p.jobdate {color:#ffffff;}
.jobdate {color:#ffffff;font-size: 16px; display: flex; flex-direction: column;}
.jobdate div{display: flex; align-items: center; margin-bottom: 16px;}
.jobdate i {line-height:1.4em}
.jobdate .job-icon , .jobwhere svg {
  padding-right: 16px; 
}
.jobwhere{display: flex; align-items: center;}

button#submit-job:hover, .apply-button:hover{background-color:rgba(36, 139, 126, 1);}
/* div.dropdown{position: relative;} */
/* #dropdownMenuCountries span{font-size: 14px; line-height: 11.6px;} */
#dropdownMenuCountries span, #title-job-search{font-size: 16px; line-height: 11.6px;}
#dropdownMenuCountries .selectedarea, #title-job-search::placeholder{font-size: 16px; color: #231c1d; opacity: 0.5;}
.dropdown-country a {font-size: 16px; color: #000;}
ul.dropdown-country li{line-height: 1.8;}

#dropdownMenuCountries{height: 476px;}
input#title-job-search{margin-bottom: 0; width: 100%; height: 100%; border:none; height: 45px;}
.btn-apply a {text-decoration:underline;color:#5AB031;}
.btn-apply a:hover {text-decoration:none;}
p.btn-apply {text-align:center;}
p.btn-apply a{font-weight:600;font-size:18px;}
.badge.badge-custom {background:#FFECD1;color:#231C1D}
.job-modal .modal-body{padding: 20px 20px 20px;}
.job-modal .modal-title-wrapper {padding: 0 20px; margin-top: 45px;}
.modal-body.jobpost h2 {color:#5AB031; font-size: 18px;}
.modal-body.jobpost p{font-size: 14px;}
.jobareacont {background:#5AB031;color:#FFF;font-weight:700;font-size:16px}
a.load-more, {color: #5AB031;font-size: 1.8em;}
.apply-button{border-radius: 48px;}
.apply-button a {color: white; text-transform: uppercase; font-size: 15px; font-weight: bold; padding: 15px;}
.apply-button a:hover {text-decoration: none;}
a.load-more:hover, a.apply-button:hover {color: #5AB031;text-decoration: none;}
.shadowmod {box-shadow:0px 2px 2px #999}
.modal{  position: fixed; z-index: 500; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4)}
.job-modal{background-color: #231c1d; margin: 12% auto; border: 1px solid #888; width: 90%; color: #ffffff;}
.job-modal .modal-content .modal-header {display: flex; flex-direction: column; align-items: center; position: relative;}
.job-modal .modal-content span{font-size: 14px;}
.job-modal .modal-footer{padding-bottom: 45px; display: flex; flex-direction:column; align-items: center;}
.job-modal .close-modal {align-self: flex-end; margin-bottom: 6px; position: absolute; padding: 30px; margin-right: 20px; cursor: pointer;}
.job-modal .close-modal span {
  content: '';
  height: 2px;
  width: 28px;
  background-color: #fff;
  display: block;
  position: absolute;
}
.job-modal .close-bar.first {
  transform: rotate(45deg);
}
.job-modal .close-bar.second {
  transform: rotate(-45deg);
}
.job-modal .divider{
  width: 25%;
  height: 1px;
  background-color: #5AB031;
  margin-bottom: 20px;
}
div#cta-global{
  text-align: center;
}
div#cta-global a{
  color: white;
  font-size: 20px;
}
{# tablet #}
@media (min-width: 992px) {
 form#input-container{
     grid-template-columns: repeat(8, 1fr); 
     grid-template-rows: 1fr; 
     padding: 60px 40px;
  }
  form#input-container > #search-job { 
    grid-column: 1 / 5; grid-row: 1 / 2;
  }
  .dropdown{
    grid-column: 5 / 7; 
    grid-row: 1 / 2;
  }
  button#submit-job{
    grid-column: 7 / 9; 
    grid-row: 1 / 2;
    margin-top: 0;
    padding: 10px 15px;
    height: unset;
  }
  
  div.jobcard-grid{
    padding: 0 40px; 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }
  div#jobcard {
    height: 320px; 
    padding: 40px; 
  }

  .resources-load-more-wrapper{
    grid-template-columns: repeat(8, 1fr); 
    grid-template-rows:auto;
    padding-left: 40px;
    padding-right: 40px;
  }
  .load-more , .cta-global{
    grid-column: 4 / 6;
  }
  .job-modal{ margin: 4% auto;}
  .job-modal .modal-body{padding: 0 60px 40px;}
  .job-modal .modal-title-wrapper{padding: 0 60px; margin-top: 60px;}
  .job-modal .modal-title{margin-bottom: 30px; font-size: 30px;}
  .job-modal .modal-footer{padding-bottom: 60px;}
  .modal-body.jobpost h2 {font-size: 26px;}
  .modal-body.jobpost p{font-size: 16px;}
  .close-modal i {font-size: 45px;}
  .job-modal #jobwhere{margin-bottom: 40px; font-size: 20px;}
  .job-modal #jobwhere svg{margin-right: 13px;}
  .job-modal .divider{  
    margin-bottom: 40px;
  }
  .resources-load-more-wrapper p { grid-column: 2/8; font-size: 20px;}
  .resources-load-more-wrapper .resources-pagination {grid-column: 4 / 6;}
  .resources-pagination:hover > .divider {opacity: 0;}
  p.btn-apply a{font-size:20px;}
  .job-modal .modal-content span{font-size: 16px;}

}
@media (min-width: 1200px){
  form#input-container{
    padding: 60px 100px;
  }
  div.jobcard-grid{
    padding: 0 100px;
  }
  .job-modal .modal-body span, .job-modal .modal-body li , .job-modal .modal-body p,{font-size: 18px; line-height: unset;}

}
#dropdownMenuCountries i {
  transition: all 0.5s ease;
}
#dropdownMenuCountries {
height: unset;
}
.rtoate180 {
  transform: rotate(-180deg);
}

{# desktop #}
@media (min-width: 1600px) {
 form#input-container{
    grid-template-columns: repeat(12, 1fr); 
    padding-left: 110px;
    padding-right: 110px;
  }
  #dropdownMenuCountries span, #title-job-search{font-size: 14px; line-height: 11.4px;}
  #dropdownMenuCountries .selectedarea, #title-job-search::placeholder{font-size: 14px;}
  .dropdown{
    grid-column: 7 / 9; grid-row: 1 / 2;
  }
  form#input-container > #search-job { 
    grid-column: 4 / 7; grid-row: 1 / 2;
  }
  
  button#submit-job{
    grid-column: 9 / 10; 
    grid-row: 1 / 2
  }
  .resources-load-more-wrapper{
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    padding: 60px 110px 96p; 
  }
  div.jobcard-grid{
    padding: 0 110px;
  }
  .resources-load-more-wrapper p { grid-column: 3/11;}
  .resources-load-more-wrapper .resources-pagination {grid-column: 6 / 8;}
  
  .job-modal .modal-title{font-size: 40px;}
  .modal-body.jobpost p { font-size: 18px;}
  p.jobtitle {font-size:1.1em; color:#ffffff; font-weight:600}
  #jobwhere {font-size:1.1rem; text-align: center;}
  .jobdate {flex-direction: row; justify-content: space-between;}
  .jobdate div{margin-bottom: 0;}
  .job-modal{ margin: 2% auto; width: 65%;}
  .job-modal .modal-title h5{font-size: 40px;}
  .job-modal .modal-body{padding: 0 86px 62px;}
  .job-modal .modal-title-wrapper{padding: 0 86px;}
  .modal-body.jobpost h2 {font-size: 30px;}
  .jobdate p{  margin-bottom: 0;}
  .load-more, .cta-global{grid-column: 6 / 8;}
  .resources-load-more p {grid-column: 1 / 13; text-align: center;}
  ..cta-global{
  grid-row: 3 / 4;}
  .job-modal .modal-content span{font-size: 18px;}
  
  .dropdown-country a {font-size: 14px;}
  ul.dropdown-country li{line-height: 1.6;}

  div#jobcard:hover .jobcard-cta{
    text-decoration-color: transparent;
  -webkit-text-decoration-color: transparent;
  -moz-text-decoration-color: transparent;
}
  
}

form#input-container > #search-job > .fa-search{    
  position: absolute;
  align-items: center;
  top: 30%;
  right: 25px;
}

img.aflag {max-height:15px; vertical-align:baseline;}
.new-job{
  visibility: hidden;
}

#title-job-search{
height: unset;
}

.jobwhere i {line-height:1.4em;font-size:1.3rem}

.modal-title {text-align:center;font-weight:400; color:#5AB031;}
ul.dropdown-country {list-style:none !important; position: absolute; background-color: white; top: 23px;margin-top: 0;padding: 15px 25px; border-radius: 0px 0px 15px 15px; width: 100%;}
ul.dropdown-country a:hover{color: #5AB031;} 
  
div.resources-item{
/*   flex-basis: 33%; */
  display:none;
}
div.resources-item.no-active{
  display:none !important;
}
div.resources-item.active{
  display:block !important;
}

div.hide , ul.hide, button.hide, #no-results.hide{
  display:none !important;
}

.overflow-hidden{
  overflow: hidden;
}