body {
  font-family: "Kanit", "Noto Sans TC", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
tr,
td,
div,
b,
span {
  font-family: "Kanit", "Noto Sans TC", sans-serif;
}

.search-filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

input[type="text"],
select,
button {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#jobList {
  background-color: #fff;
  padding: 15px 25px;
  border-radius: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.job-item:last-child {
  border-bottom: none;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.loading-spinner {
  display: none;
  position: absolute;
  right: 10px;
  top: 30px;
}

.loading-spinner img {
  width: 40px;
  height: 40px;
}

.job-details {
  color: #4d4d4d;
}

.job-details p {
  margin: 10px 0;
}

.job-details p a {
  color: #09cef6;
}

.job-item {
  border-bottom: 1px solid #eaeaea;
  padding: 20px 0;
  cursor: pointer;
  position: relative;
}

.job-row {
  display: flex;
  align-content: center;
  align-items: center;
}

.job-item h3 {
  margin: 0 10px;
  font-size: 18px;
  width: 26.4em;
}

.job-item p {
  margin: 5px 0;
  margin-bottom: 1em;
}
.job-details {
  display: none;
  padding: 10px;
  border-top: 1px solid #eaeaea;
  margin-top: 15px;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  border-radius: 5px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

a.apply_button {
  padding: 10px 20px;
  margin: 10px 0;
  background-color: #014b85;
  color: #fff;
  text-decoration: none !important;
  font-size: 16px;
  letter-spacing: 0em;
  font-weight: 600;
  border-radius: 25px;
  display: inline-block;
}

.label-employment {
  color: #4f4f4f;
  font-size: 17px;
  font-weight: 400;
  width: 10.2em;
  text-align: left;
}

.label-organization {
  color: #4f4f4f;
  font-size: 17px;
  font-weight: 400;
  width: 10.1em;
  text-align: left;
}

.label-city {
  color: #4f4f4f;
  font-size: 17px;
  font-weight: 400;
  width: auto;
  text-align: left;
}

.form-group {
  margin-bottom: 15px;
}
.kkcompany_job_list {
  width: 100%;
  max-width: 1100px;
  margin: 25px auto;
  letter-spacing: 0px;
}
#filters {
  color: #09cef6;
}
input#searchKeyword,
select#contractDetailsFilter,
select#organizationFilter,
select#cityFilter {
  color: #09cef6;
  padding: 0px 20px 0 20px;
  height: 45px;
  border-width: 1px;
  border-style: solid;
  border-color: #09cef6;
  border-radius: 30px;
  background-color: #000000;
  box-shadow: none;
  box-sizing: border-box;
  transition: all 0.2s linear;
  font-family: "Kanit", Sans-Serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  outline: none;
}
select#contractDetailsFilter,
select#organizationFilter,
select#cityFilter {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='26' height='17' viewBox='0 0 26 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 3.02197L13 15.522L25.5 3.02197L23 0.521973L13 10.522L3 0.521973L0.5 3.02197Z' fill='%2323BEFF'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: 90%;
  background-position-y: 55%;
  background-size: 0.6em;
  margin: 0 5px;
  width: calc(50% / 3);
}
input#searchKeyword::placeholder {
  color: white;
}
input#searchKeyword:focus,
input#searchKeyword:focus-visible {
  outline: none;
}
input#searchKeyword {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_229_758)'%3E%3Cpath d='M24.6582 21.6162L19.79 16.748C19.5703 16.5283 19.2725 16.4062 18.96 16.4062H18.1641C19.5117 14.6826 20.3125 12.5146 20.3125 10.1562C20.3125 4.5459 15.7666 0 10.1562 0C4.5459 0 0 4.5459 0 10.1562C0 15.7666 4.5459 20.3125 10.1562 20.3125C12.5146 20.3125 14.6826 19.5117 16.4062 18.1641V18.96C16.4062 19.2725 16.5283 19.5703 16.748 19.79L21.6162 24.6582C22.0752 25.1172 22.8174 25.1172 23.2715 24.6582L24.6533 23.2764C25.1123 22.8174 25.1123 22.0752 24.6582 21.6162ZM10.1562 16.4062C6.7041 16.4062 3.90625 13.6133 3.90625 10.1562C3.90625 6.7041 6.69922 3.90625 10.1562 3.90625C13.6084 3.90625 16.4062 6.69922 16.4062 10.1562C16.4062 13.6084 13.6133 16.4062 10.1562 16.4062Z' fill='%2323BEFF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_229_758'%3E%3Crect width='25' height='25' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: 95%;
  background-position-y: 50%;
  background-size: 0.8em;
  width: 50%;
}
button#resetFilters {
  color: #09cef6;
  padding: 0 20px;
  height: 45px;
  border-width: 1px;
  border-style: solid;
  border-color: #09cef6;
  border-radius: 30px;
  background-color: #000000;
  box-shadow: none;
  box-sizing: border-box;
  transition: all 0.2s linear;
  font-family: "Kanit", Sans-Serif;
  font-size: 16px;
  font-weight: 400;
  padding-top: 0px;
  line-height: 20px;
  text-decoration: none;
}

@media screen and (min-width: 576px) {
  #resetFilters {
    margin-right: 0;
  }
}
@media screen and (max-width: 1079.98px) {
  .label-city {
    width: calc(50% / 3);
  }

  .label-organization {
    width: calc(50% / 3);
  }

  .label-employment {
    width: calc(50% / 3);
  }

  .job-item h3 {
    width: 43%;
  }
}
/* mobile screen */
@media screen and (max-width: 575.98px) {
  input#searchKeyword,
  select#contractDetailsFilter,
  select#organizationFilter,
  select#cityFilter {
    width: 100%;
  }

  .loading-spinner {
    top: 50%;
  }

  .label-city {
    display: none;
  }

  .label-organization {
    display: none;
  }

  .label-employment {
    display: none;
  }

  .search-filter-container {
    flex-direction: column;
    gap: 10px;
  }

  #searchKeyword {
    margin-left: 10px;
  }

  .job-item h3 {
    max-width: 100%;
  }
}