body .region-content .heading3-with3 h3 {
  padding: 10px 0px !important;
}

body .region-content .heading3-with3 {
  margin-top: 50px !important;
}

body .region-content .heading2 h3 {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    margin: 30px 0px;
}


.itsc_table-header-bg th {
  background-color: #84B8C9 !important;
  color:#ffffff !important;
}

.itsc-table-border  table {
  border: 1px solid !important;
}

.itsc-table-border  th {
  border: 1px solid !important;
}


.itsc-table-border  td {
  border: 1px solid !important;
}

.itsc-table-content-center table{
  text-align: center !important;
}

.itsc-table-content-center th {
  text-align: center !important;
}

.itsc-table-content-center td {
  text-align: center !important;
}


.footer-menu a {
  color: #2b6297 !important;
}

.img-center img{
    display: block !important;
    width: 100% !important;
}


a.btn-warning {
  background-color: #ed9c28 !important;
}

a.btn-warning:hover {
  background-color: #be7d20 !important;
}


h5 {
  color: #a57f52 !important;
  font-size: 1em !important;
  padding-top: 15px;
}

h6 {
  font-size: 1em !important;
  color: #000000 !important;
  font-weight: 600 !important;

}

p {
  margin: 0 0 20px !important;
}

body .region-content ul, body .region-content ol {
  line-height: 1.8em !important;
}


.header-data-pc.table-layout ul.menu-lists, .header-data-mobile.table-layout ul.menu-lists {
  display: table;
  width: 100%;
}

.itsc-warning {
  color: #b30000;
}

.itsc-narrow-content {
  max-width: 120rem;
  margin: auto !important;
}


.itsc-description .block-body {
  /*background-color: #f3f0e2;*/
 background-color: lightsteelblue;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.itsc-service-heading {
  font-size: 2.7em;
  font-weight: 900;
  line-height: 1.35em;
 /* color: #003366;*/
  color: #808080;
  text-transform: uppercase;
  padding-bottom: 15px;
}


.itsc-service .field__label {
  font-size: 1.5em !important;
  color: #036;
  line-height: 1em !important;
  margin-top: 15px;
}

.itsc-service-extra .field__label {
  font-size: 1.3em !important;
  font-weight: 900;  
  color: #808080;
  line-height: 1.3em !important;
  margin-top: 12px;
  text-transform: uppercase;    
}

.itsc-service-extra .field__item {
  font-size: 1.2em !important;
}


/* homepage service catalog image zoom effect when hover*/
.itsc-home-sc .image {
  height: 250px; /* [1.1] Set it as per your need */
  width: 250px;
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.itsc-home-sc .image img {
  transition: transform .5s ease;
}

.itsc-home-sc .image:hover img {
  transform: scale(1.3);
}

/* hide images of service catalog on homepage on mobile devices */
@media (max-width: 991px) {
    .itsc-home-sc .image {
        display: none;
    }
}


/* Links Grouping */
.itsc-link-group-header{
  background-color: #84B8C9;
  color: #FFFFFF;
  font-weight: 700;
  padding: 15px;
  margin-bottom: 20px;
}

/* accordion */
.accordion-title {
  background-color: #84B8C9 !important;
  color: #FFFFFF !important;  
}

.hkust-simple-text .accordion-title {
 /* background-color: lightsteelblue !important; */
  font-size: 0.8em !important;
}

.hkust-simple-text .accordion-content {
 font-size: 0.8em !important;
}


/* for Cybersecurity Page */
.itsc-cybersecurity-block .description {
  border: solid;
  border-width: 1px;
  border-color: #D0D0D0;
}

/* Event Listing */
.itsc-event-category a {
    margin-top: 15px;
    margin-bottom: 11px;
    text-transform: uppercase;
    color: #94771e !important;
    font-weight: 700;
}


.itsc-event-list-view .views-row {
  display: block;
  padding: 27px 0;
  border-width: 1px;
  border-color: #D0D0D0;
  border-bottom-style: solid;
}

.itsc-event-list-view .field-content .datetime {
  font-size: 0.93em !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: #94771E;
}

.itsc-event-list-view .views-field-title {

  font-size: 1.29em !important;
  font-weight: 700 !important;
  margin-top: 11px;

}

.itsc-event-list-view .views-field-title .a {

  color:#2b6297;
  text-decoration: none;
}

.itsc-event-year-view  .view-header {
   text-transform: uppercase;
   color: #036;
   line-height: 1.25em;
   font-size: 1.28em;
   font-weight: 700;
   margin: 15px auto;
}

.itsc-event-year-view .view-content .item-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.itsc-event-year-view .view-content .item-list li {
  margin-left: 0;
}

.itsc-event-year-view .view-content {
  color: #838D8F;
  font-size: 0.92em;
  font-weight: bold;
  text-transform: uppercase;
}

.itsc-event-year-view .view-content a {
  color: #838D8F;
  text-decoration: underline;
  font-weight: bold;
  text-transform: uppercase;
}

.imagemap {
      position: relative;
}




.chatbot-toggler {
  position: fixed;
  bottom: 30px;
  right: 35px;
  outline: none;
  border: none;
  height: 50px;
  width: 50px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #3333ff;
  transition: all 0.2s ease;
}
body.show-chatbot .chatbot-toggler {
  transform: rotate(90deg);
}
.chatbot-toggler span {
  color: #fff;
  position: absolute;
}
.chatbot-toggler span:last-child,
body.show-chatbot .chatbot-toggler span:first-child  {
  opacity: 0;
}
body.show-chatbot .chatbot-toggler span:last-child {
  opacity: 1;
}
.chatbot {
  position: fixed;
  padding-top: 0px !important;
  right: 35px;
  bottom: 90px;
  height: 590px;
  width: 650px;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
  transform-origin: bottom right;
  box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
              0 32px 64px -48px rgba(0,0,0,0.5);
  transition: all 0.1s ease;
}
body.show-chatbot .chatbot {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  z-index: 9999;
}
.chatbot header {
  padding: 10px 0;
  position: relative;
  text-align: center;
  color: #fff;
  background: #3333ff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  height: 55px !important;
}

.chatbot header.minimized {
    position: unset !important;
    top: 0;
    z-index: 490;
}

.chatbot header span {
  position: absolute;
  right: 15px;
  top: 50%;
  display: none;
  cursor: pointer;
  transform: translateY(-50%);
}
.chatbot header h2 {
  margin-top: 6px !important;
  font-size: 2.4rem;
}


.chatbot h2 {
  margin: auto;
  font-size: 2.4rem;
  padding: 10px 0;
  position: relative;
  color: #fff;
  background: #3333ff;
  font-weight: bold;
  height: 55px !important;
}


.chatbot .chatbox {
  overflow-y: auto;
  height: 510px;
  padding: 30px 20px 100px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
  width: 6px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 25px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 25px;
}
.chatbox .chat {
  display: flex;
  list-style: none;
}
.chatbox .outgoing {
  margin: 20px 0;
  justify-content: flex-end;
}
.chatbox .incoming span {
  width: 32px;
  height: 32px;
  color: #fff;
  cursor: default;
  text-align: center;
  line-height: 32px;
  align-self: flex-end;
  background: #724ae8;
  border-radius: 4px;
  margin: 0 10px 7px 0;
}
.chatbox .chat p {
  white-space: pre-wrap;
  padding: 12px 16px;
  border-radius: 10px 10px 0 10px;
  max-width: 75%;
  color: #fff;
  font-size: 0.95rem;
  background: #724ae8;
}
.chatbox .incoming p {
  border-radius: 10px 10px 10px 0;
}
.chatbox .chat p.error {
  color: #721c24;
  background: #f8d7da;
}
.chatbox .incoming p {
  color: #000;
  background: #f2f2f2;
}
.chatbot .chat-input {
  display: flex;
  gap: 5px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 3px 20px;
  border-top: 1px solid #ddd;
}
.chat-input textarea {
  height: 55px;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  max-height: 180px;
  padding: 15px 15px 15px 0;
  font-size: 0.95rem;
}
.chat-input span {
  align-self: flex-end;
  color: #724ae8;
  cursor: pointer;
  height: 55px;
  display: flex;
  align-items: center;
  visibility: hidden;
  font-size: 1.35rem;
}
.chat-input textarea:valid ~ span {
  visibility: visible;
}

@media (max-width: 490px) {
  .chatbot-toggler {
    right: 20px;
    bottom: 20px;
  }
  .chatbot {
    right: 0;
    bottom: 0;
    height: 100%;
    border-radius: 0;
    width: 100%;
  }
  .chatbot .chatbox {
    height: 90%;
    padding: 25px 15px 100px;
  }
  .chatbot .chat-input {
    padding: 5px 15px;
  }
  .chatbot header span {
    display: block;
  }
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v136/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v135/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOc7TOVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

body .mobile-apps-wrapper {
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}
body .mobile-apps-wrapper .mobile-app {
  flex: 0 0 calc(25% - 30px);
  margin: 15px;
  padding: 20px;
  background-color: #f1f1f1;
}
body .mobile-apps-wrapper .mobile-app .info {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 20px;
}
body .mobile-apps-wrapper .mobile-app .info > * {
  display: table-cell;
  vertical-align: middle;
}
body .mobile-apps-wrapper .mobile-app .info .icon {
  padding-right: 5px;
}
body .mobile-apps-wrapper .mobile-app .info .name {
  padding-left: 8px;
  font-size: 18px;
  font-weight: 800;
  color: #003366;
}
body .mobile-apps-wrapper .mobile-app .download {
  display: flex;
  margin-left: -5px;
  margin-right: -5px;
}
body .mobile-apps-wrapper .mobile-app .download .qr-code {
  margin: 5px;
}
body .mobile-apps-wrapper .mobile-app .download .qr-code:before {
  content: 'Download';
  display: block;
  height: 33%;
  overflow: hidden;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
body .mobile-apps-wrapper .mobile-app .download .qr-code.apple:before {
  background-image: url(/files/mobile-apps/apple.png);
}
body .mobile-apps-wrapper .mobile-app .download .qr-code.google:before {
  background-image: url(/files/mobile-apps/google.png);
}
body .mobile-apps-wrapper .mobile-app .download .qr-code img {
  display: block;
}


main fieldset:not(.webform-radios-other--wrapper):not(.radios--wrapper) legend,
main form fieldset:not(.webform-radios-other--wrapper):not(.radios--wrapper) legend {
  font-size: 1.14em !important;
  font-weight: inherit !important;
  color: inherit !important;
  border-bottom: none !important;
  text-transform: inherit !important;
  margin: 0;
}

body .region-content .itsc-narrow-content .hkust-simple-text {
  overflow: hidden;
  font-size: 1.13em;
}

body .layout-container {
  overflow-y: auto;
}
body.cke_editable {
  padding: 0 10px;
}