/*
 *
 * City University of Hong Kong
 * ----------------------------
 * Site Specific CSS
 *
 */

/* boostrap callout component */
.callout {
  background-color: #fff;
  border: 1px solid #e4e7ea;
  border-left: 4px solid #c8ced3;
  border-radius: .25rem;
  margin: 1rem 0;
  padding: .75rem 1.25rem;
  position: relative;
}

  .callout h4 {
    font-size: 1.3125rem;
    margin-top: 0;
    margin-bottom: .8rem
  }

  .callout p:last-child {
    margin-bottom: 0;
  }

.callout-default {
  border-left-color: #777;
  background-color: #f4f4f4;
}

  .callout-default h4 {
    color: #777;
  }

.callout-primary {
  background-color: #d2eef7;
  border-color: #b8daff;
  border-left-color: #17a2b8;
}

  .callout-primary h4 {
    color: #20a8d8;
  }

.callout-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  border-left-color: #28a745;
}

  .callout-success h4 {
    color: #3c763d;
  }

.callout-danger {
  background-color: #f2dede;
  border-color: #ebccd1;
  border-left-color: #d32535;
}

  .callout-danger h4 {
    color: #a94442;
  }

.callout-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  border-left-color: #edb100;
}

  .callout-warning h4 {
    color: #f0ad4e;
  }

.callout-info {
  background-color: #d2eef7;
  border-color: #b8daff;
  border-left-color: #148ea1;
}

  .callout-info h4 {
    color: #31708f;
  }

.callout-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: .75rem 1.25rem;
  color: inherit;
}

a.btn {
  text-decoration: none !important;
}

/* alert icon */
.alert-danger > p {
  margin: 5px 5px;
}

  .alert-danger > p::before {
    content: '\f071';
    font-family: 'FontAwesome';
    font-weight: 400;
    padding-right: 10px;
  }


/* cap card */
.card-body img {
  max-width: 100%;
  height: auto !important;
}

.card-body table {
  max-width: 100%;
}

.cap-body-upper p {
  margin-bottom: 0;
}

.cap-body-upper {
  line-height: normal;
  border-bottom: 1px solid #e3e6f0;
}

.cap-header-title {
  font-size: 1rem;
  font-weight: bold;
}

.cap-body-lower-title {
  color: #bf165e;
  font-weight: bold;
}

.cap-header-time {
  color: #bf165e;
}

.dataTables_paginate .pagination {
  --bs-pagination-active-bg: #bf165e;
  --bs-pagination-active-border-color: #bf165e;
}

  .dataTables_paginate .pagination .active a {
    color: #FFF !important;
  }

.navbar-expand-lg {
  padding: 0 !important;
}

.min-cap-height {
  min-height: 800px !important;
}

.z-1100 {
  z-index: 1100 !important;
}

.tag-show {
  display: block;
}

.tag-hide {
  display: none;
}

/* font size */
.fs-8 {
  font-size: 0.8rem !important;
}

.fs-10 {
  font-size: 0.6rem !important;
}


/* for asp:xxx */
.asp-checkbox label {
  display: inline-flex;
  margin-left: 10px;
}

.asp-checkbox input[type=checkbox] {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

.asp-radio label {
  display: inline-flex;
  margin-left: 10px;
  margin-right: 15px;
}

.asp-radio input[type=radio] {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
  bottom: 1px;
}

.asp-radio i {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
  bottom: 1px;
}


/* table rows */
.row-pending.odd {
  background-color: #fff8f5 !important;
}

.row-pending.even {
  background-color: #fff8f5 !important;
}

/* badges */
.bg-draft {
  background-color: gray;
}

.bg-release {
  background-color: green;
}

.bg-pending {
  background-color: lightyellow;
  color: blue
}

.bg-pending-public {
  background-color: lightyellow;
  color: blue
}

.bg-dept {
  color: #fff !important;
  background: linear-gradient(225deg, #bf165e 0%, #bf165e 75%, #7c257c 100%) !important;
}

.bg-dept-light {
  color: #bf165e !important;
  background: transparent;
  border-color: #bf165e !important;
}

/* custom audience */
.custom-eid p {
  margin: 2px 2px;
}

.card-header .fas {
  transition: .3s transform ease-in-out;
}

.card-header .collapsed .fas {
  transform: rotate(180deg);
}

.stf-checkbox input[type=checkbox] {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
  bottom: 1px;
  margin-left: 20px;
}

.stf-checkbox label {
  display: inline-flex;
  margin-left: 10px;
}

.cityu-header a
{
  color: #212529 !important;
  text-decoration: none !important;
}

.cityu-menu-list .nav-item {
  padding: 0;
}
  .cityu-menu-list .nav-item > a {
    color: #fff !important;
    text-decoration: none !important;
  }

  .cityu-menu-list .nav-item > a > p {
    margin: 2px 6px 2px 6px;
  }

.cityu-sitemap a,
.cityu-footer a {
  color: #fff !important;
  text-decoration: none !important;
}

/* datatable filter position */
@media screen and (max-width: 991px) {
  div .dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
    text-align: right !important
  }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
      justify-content: right !important
    }

  .cityu-menu-list .nav-item > a > p {
    margin: 2px 0px;
  }
}

/* --- 20240124 fontsize ---  */
.date-text {
  writing-mode: horizontal-tb;
  min-inline-size: 80px;
  text-wrap: pretty;
}

.post-title-large {
  font-weight: bold;
}

.post-title-small {
  font-weight: normal !important;
}

table.dataTable {
  font-size: 1rem;
}

  table.dataTable td:not(:first-child) {
    font-size: 0.8rem;
  }

@media screen and (max-width: 991px) {
  table.dataTable {
    font-size: 0.75rem;
  }

    table.dataTable td:not(:first-child) {
      font-size: 0.7rem;
    }
}


/* --- copy from post_form.css ---  */
.post2Web {
  display: inline-block;
  padding-left: 20px;
}

.VerFooter {
  margin-top: 36px !important;
  color: gray;
  font-size: 85%;
  font-style: italic;
}

  .VerFooter a {
    color: gray;
  }

    .VerFooter a:hover {
      color: #bf165e;
      text-decoration: none;
    }

/* --- navbar active item ---  */
.menu-color-default.menu-color-lg-cityured .nav-link.active,
.menu-color-default.menu-color-lg-cityured .nav-item:has(a.active),
.menu-color-default.menu-color-lg-cityured .nav-item:hover {
  background-color: #6b203e;
  color: #fff;
}

/*
 * --- sitemap ---
 */
.cityu-sitemap {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}

.cityu-sitemap-list > ul > li {
  padding: 5px 5px;
}

  .cityu-sitemap-list > ul > li > a {
    font-size: 0.8rem;
  }

/*
 * --- footer ---
 */
.cityu-footer-inner {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

/*
 * --- css for small screen ---
 */
@media screen and (max-width: 576px) {
  .card-body img {
    max-width: 100% !important;
  }

  .card-body table, tbody, tr, td, p {
    max-width: 100% !important;
    width: auto !important;
    padding: 0px 0px !important;
  }

    .card-body table > table, tbody, tr, td, p {
      max-width: 100% !important;
      width: auto !important;
      padding: 0px 0px !important;
    }
}

/*
 * --- css to override web template
 */
.cityu-content h2 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}