.error-message {

  color: orange;

}

a.remove-keyword {

  margin-left: auto;

}

.keyword-balloon {

  /* z-index: -1; */

  background-color: #000000;

  border-radius: 5px;

  opacity: 0.5;

  /* position: absolute; */

  padding: 5px 15px;

}

.keyword-button {

  display: flex;

  gap: 8px;

  color: #ffffff;

  max-width: 150px;

  /* min-width: 100px; */

  span {

    /* min-width: 50px; */

    max-width: 100px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    vertical-align: text-top;

    padding-top: 2px;

  }

}



.search-keywords {

  margin-top: 20px;

  position: relative;

}



/* .circle-button {

    cursor: pointer;

    background-color: #cfcfcf;

    color: #4c4c4c6e;

    width: 14px;

    height: 14px;

    border-width: 0px;

    border-radius: 50%;

    font-family: "Open Sans";

    font-weight: 600;

    font-size: 14px;

    text-align: center;

    line-height: 12px;

    min-width: 14px;

    padding: 0px;

    margin: 5px 0px 5px 5px;

} */

button.circle-button {

  margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

  min-width: 0;



  cursor: pointer;

  background-color: #cfcfcf;

  color: #4c4c4c6e;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  position: relative;

}

button.circle-button:hover {

  background-color: #4f2783;

  color: #ffffff;

}



button.circle-button:before {

  content: " ";

  position: absolute;

  display: block;

  width: 2px;

  left: 8px;

  top: 5px;

  bottom: 5px;

  transform: rotate(45deg);

  background-color: #fff;

}



button.circle-button:after {

  content: " ";

  position: absolute;

  display: block;

  height: 2px;

  top: 8px;

  left: 5px;

  right: 5px;

  transform: rotate(45deg);

  background-color: #fff;

}





ul.main-nav-menu {

  padding-right: 200px;

}



.keyword-balloon-container {

  margin-bottom: 20px;

}



/* div.item.case-item {

  .image-wrapper {

    height: 100%;

  }

  .button-container {

    height: 75%;

    display: flex;

    gap: 20px;

  }



}  */



.d-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: 20px;

}



.grid-col-1 {

  grid-template-columns: 1fr;

}



.grid-col-2 {

  grid-template-columns: repeat(2, 1fr);

}



.site-footer .footer-wrapper .fit-logo-2 {

  width: 300px;

  height: auto;

  object-fit: contain;

}



.site-footer .footer-wrapper .fit-logo-1 {

  width: 600px;

  height: auto;

  aspect-ratio: 461 / 81;

  object-fit: contain;

}

/* class for academic-card if href is set */

.academic-card.academic-card-link {

  cursor: pointer;

}



p:has(> i.icon){

  display: flex;

  align-items: flex-start;

  gap: 20px;

}



.language-not-find {

  color: #d4d4d4 !important;

  cursor: not-allowed;

}



.icon {

  margin-top: 8px;

  flex-shrink: 0;

  display: block;

  width: 30px;

  height: auto;

  aspect-ratio: 30/40;

  background-repeat: no-repeat;

  background-position: center top;

  background-size: contain;

}



.icon.icon-location {

  background-image: url("../icons/icon-location.svg");

}

.icon.icon-phone {

  background-image: url("../icons/icon-phone.svg");

}

.icon.icon-mail {

  background-image: url("../icons/icon-mail.svg");

}



.display-none {

  display: none;

}



.small-text {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

}



.card p:has(> .small-text),

.professor-card p:has(> .small-text)

{

  padding-right: 0;

  line-height: 32px;

}



.card p .small-text {

  line-height: 32px;

  color: #42454d;

}

.professor-card p .small-text {

  line-height: 32px;

  color: #3d3d3d;

}



.card li .small-text,

.professor-card li .small-text 

{

  line-height: 34px;

}



.grey-text {

  color: #9e9e9e;

}



h6 {

  font-family: "Open Sans";

  font-weight: 600;

  font-size: 22px;

  line-height: 34px;

}



.card:not(.bordered-box ) {

  border-left: 3px solid #4f2783;

  margin-left: -27px;

  padding-left: 24px;

}



.bordered-box {

  .title {

    margin-bottom: 28px;

  }

}



h6.subtitle {

  font-family: "Myraid Pro";

  font-weight: 600;

  font-size: 20px;

  line-height: 20px;

  color: #929292;

}



.space-top-28-20 {

  margin-top: 28px;

}



.space-top-11-5 {

  margin-top: 11px;

}



.media-delete {

  display: none;

  &.active {

    display: block;

  }

  color: red;

  position: absolute;

  right: 10px;

  font-weight: 500;

  font-size: 20px;

  cursor: pointer;

}



.wpcf7-submit.btn {

    cursor: pointer;

    background-color: #01a4a7;

    color: white;

    padding: 15px 15px;

    min-width: 146px;

    border-width: 0px;

    border-radius: 5px;

    font-family: "Open Sans";

    font-weight: 300;

    font-size: 18px;

    text-align: center;

}

.wpcf7-submit.btn:hover {

  background-color: #4f2783;

}



.director-card .title {

  font-family: "Open Sans";

  font-weight: 600;

  font-size: 22px;

  line-height: 34px;

}

.director-card .subTitle {

  font-family: "Myraid Pro";

  font-weight: 600;

  font-size: 20px;

  line-height: 20px;

  color: #929292;

}

.director-card p {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 20px;

  line-height: 34px;

}

.director-card .more {

  font-family: "Myraid Pro";

  font-weight: 500;

  font-size: 18px;

  line-height: 34px;

  color: #01a4a7;

}

.director-card small {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

  line-height: 32px;

}

.director-card span {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

  line-height: 34px;

}

.director-card span.small {

  color: #929292;

}

ul.profile-ul {

  display: flex;

  flex-wrap: wrap;

  gap: 0px;

}

ul.profile-ul li {

  width: calc((100% - 10px) / 2);

  display: flex;

  align-items: center;

}

ul.profile-ul li:before {

  content: "·";

  color: #929292;

  font-size: 30px;

  margin-right: 12px;

  font-weight: 400;

  position: relative;

  top: 0;

}

h3.card-title {

  margin-top: 4px;

  margin-bottom: 15px;

  padding-bottom: 18px;

  border-bottom: 2px solid #ededed;

}

.director-card p {

  padding-right: 20px;

}

.director-card h5 {

  margin-top: 29px;

  margin-bottom: 9px;

}



.section-hero-wrapper:after {

    content: '';

    background: #00000057;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

}



.home-academic-section .academic-grid {

  gap: 50px;

}



.contact-wrapper div:has(.contact-form) {

  width: 60%;

}



.wpcf7-spinner {

  display: none;

}



div.wpcf7-response-output {

  line-height: 26px;

  padding: 20px !important;

  background: #01a4a7;

  border: none !important;

  border-radius: 6px;

  color: #fff;

  font-weight: 500;

  margin: 0 !important;

}



.contain-float-menu {

  z-index: 2;

}



.site-header .main-nav .main-nav-menu li .float-menu-wrapper {

  width: calc(100% + 20px);

}



a.space {

  width: 20.3px;

}



.button-group {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

}



/* .cases-search-section .search-container {

  display: flex;

  justify-content: center;

  gap: 20px;

} */

.cases-search-section .search-container {

  display: flex;

  justify-content: center;

  gap: 20px;

  a {

    min-width: 146px;

  }

  /* margin-left: calc(10% + 250px); */

}

.cases-search-section .search-text-container {

}





.cases-search-section .search-container input,

.cases-search-section .search-container div.keyword-input {

  width: 100%;

  max-width: 564px;

}



@media (max-width: 1350px) {

  .cases-search-section .search-container {

    /* justify-content: end; */

    /* margin-left: 0; */

  }

}



.section {

  li:before {

      content: "·";

      color: #929292;

      font-size: 30px;

      margin-right: 12px;

      font-weight: 400;  

      position: relative;

      top: 0.15em

  }

  li {

    font-family: "Open Sans";

    font-weight: 300;

    font-size: 20px;

    line-height: 34px;

    color: #929292;

  }

  .case-menu-item {

    li:before {

      all: initial;

    }

  }



  .section-col.section-col-1.filter-menu {

    width: 329px;

  }



  .search-approach,

  .search-disease-or-condition

  {

    li::before {

      top: 0;

      font-weight: 300;

    } 

  }



  .tall-disease-or-condition {

    align-items: start !important;

    line-height: 25px !important;

    padding: 10px 0 !important;

  }



  .tall-approach {

    align-items: start !important;

    line-height: 25px !important;

    padding: 10px 0 !important;

  }





  .select .float-menu ul {

    display: flex;

    flex-direction: column;

    gap: 1px;

    li {

      font-family: "Open Sans";

      font-weight: 300;

      font-size: 18px;

      line-height: 45px;

      color: #929292;

    }

  }

  .select .float-menu ul li {

    display: flex;

    align-items: center;

  }

  .select .float-menu ul li:before {

    content: "·";

    color: #929292;

    font-size: 50px;

    margin-right: 12px;

  }

  .select.active .float-menu {

    pointer-events: all;

    opacity: 1;

  }

  .select.active label {

    z-index: 4;

  }

  .select.active label .arrow {

    transform: rotate(180deg);

  }

}



.end-cases-detail {

  margin-bottom: 153px;

}



.section.section-single-activity {

  margin-top: 150px;

  margin-bottom: 150px;

  .container {

    display: grid;

    grid-template-columns: 1fr;

    gap: 50px;

    .section-single-activity-description {

      display: grid;

      grid-template-columns: 1fr;

      gap: 20px;

    }

  }

}



.part-card .part-text {

  min-height: 70px;

}



@media (max-width: 1200px) {

  .part-card .part-text {

    min-height: 40px;

  }

  .filter-menu.scrollable {

    max-height: 780px;

    overflow-y: auto;

  }

  h6.subtitle {

    line-height: 34px;

  }

  .space-top-28-20 {

    margin-top: 20px;

  }

  .space-top-11-5 {

    margin-top: 5px;

  }

  .director-card .subTitle {

    font-size: 20px;

    line-height: 34px;

  }

  .director-card small {

    font-size: 18px;

    line-height: 32px;

  }

  h3.card-title {

    font-size: 26px;

  }

  ul.profile-ul li {

    width: 100%;

  }

  .cases-search-section .search-container {

    gap: 10px;

  }

  .cases-search-section .search-container input {

    width: 100%;

    max-width: auto;

  }

  .button-group {

    gap: 10px;

  }

  .select .float-menu ul {

    gap: 0px;

  }

  .select .float-menu ul li:before {

    font-size: 40px;

  }

  .end-cases-detail {

    margin-bottom: 94px;

  }

  .bordered-box {

    .title {

      margin-bottom: 28px;

    }

  }

}



@media (max-width: 975px) {

  /* .cases-search-section .search-container {

    display: grid !important;

    grid-template-columns: 1fr;

  }

  .cases-search-section .search-container input {

    max-width: 100% !important;

  }

  .button-group {

    justify-content: end;

  } */

}



@media (max-width: 768px) {

  .cases-search-section .search-container {

    flex-wrap: wrap;

    justify-content: start;

  }

  .cases-search-section .search-container input {

    max-width: 100%;

    min-width: 100%;

  }

  .part-card .part-text {

    min-height: 41px;

  }

  div.keyword-balloon-container {

    width: fit-content;

  }

  .small-text {

    font-size: 21px;

  }

  .card .small-text {

    line-height: 34px !important;

  }

  .card p:has(> .small-text) {

    line-height: 34px !important;

  }

  .professor-card .small-text {

    line-height: 36px !important;

    color: #929292 !important;

  }

  h6.subtitle {

    font-weight: 500;

    font-size: 21px;

  }



  .media-description p {

      font-size: 20px;

      line-height: 34px;

  }

  .wpcf7-submit.btn {

    font-size: 21px;

    padding: 13px 49px;

  }

  .director-card .subTitle {

    font-weight: 500;

    font-size: 21px;

    line-height: 34px;

  }

  .director-card p {

    font-size: 21px;

    line-height: 36px;

  }

  .director-card .more {

    font-weight: 400;

    font-size: 21px;

    line-height: 34px;

  }

  .director-card small {

    font-size: 21px;

    line-height: 34px;

  }

  .director-card span {

    font-size: 21px;

    line-height: 34px;

  }

  .cases-list-section .section-col-2 .items {

    grid-template-columns: repeat(2, 1fr);

  }

  .contactUs-form-section div:has(.contact-form) {

    width: 100%;

  }

  li {

    font-size: 21px;

    line-height: 36px;

  }

  .select .float-menu ul {

    li {

      font-size: 20px;

      line-height: 45px;

    }

  }

  .select .float-menu ul li:before {

    font-size: 40px;

  }



  .end-cases-detail {

    margin-bottom: 94px;

  }



  .site-footer .footer-wrapper .fit-logo-1 {

    width: 336px;

  }

  .site-footer .footer-wrapper .fit-logo-2 {

    width: 160px;

  }

}

@media (max-width: 490px) {

  .cases-list-section .section-col-2 .items {

    grid-template-columns: 1fr;

  }

  .button-group {

    flex-direction: column;

    gap: 10px;

    button {

      width: 100%;

    }

  }

}



@media (max-width: 420px) {

  .site-footer .footer-wrapper .site-map li {

    width: 100%;

    flex: 100% !important;

  }

}