/* ------- version: 2023-08-15 --------*/

/* ============================================ */
/*                   COLOR                      */
/* ============================================ */

body {
/*  background-color: #f8fafa;*/
  background-color: #FFF;
}

body.listing-page {
  background-color: #EFEFEF !important;
}

.footer {
  background-color: #111;
  color: #aaaaaa;
}

a {
  color: #ff6b7a;
}

.footer a {
  color: #e4e4e4;
}

.btn-success {
  --bs-btn-bg: #5a24b1 !important;
  --bs-btn-border-color: #5a24b1 !important;
  border-radius: 5px;
}

.btn-success:hover {
  background-color: #d13c4b !important;
  border-color: #d13c4b !important;  
}

/*--------COLOR:  nav bar --------------*/
.navbar-light .nav-link {
  color:  #666;
}

.navbar-dark .nav-link {
  color: #d0d0d0;
}

/* -------COLOR:  top-banner   --------*/
.top-banner {
  background-color: #656565;
}

.top-banner-content {
  color: #FFF;
}

/* -------COLOR:  main_content  --------*/
.main_content {
  background-color: #FFF;
  color: #444;
}

/* -------COLOR:  sidebar --------*/
.sidebar-card .card-header {
  background-color: #939393;
  color: #FFF;
}

.sidebar-card .card-body a,
.sidebar-card .list-group a
 {
  /*text-decoration:none;*/
  color: #838383;
}

.sidebar-card .card-body a:hover
.sidebar-card .list-group a:hover {
  color: #444;
}

/* ------- COLOR:  article list --------*/
.article_index h2 a,
.article_include h3 a {
  color:#585858;
}

.article_info {
  color: #999;
}

/*---------- COLOR: arrticle_include_card --- */

.article_include_card .card-title a {
  color: #444;
}

.article_include_card .card-text {
  color: #666;
}

/*----------- COLOR: article blockquote background --- */
.main_content blockquote {
  background-color: #f0fdf6 !important;
}

/* ============================================ */
/*                   FONT                       */
/* ============================================ */

body {
  font-family: Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Source Han Sans CN",Roboto,"Microsoft Yahei",sans-serif !important;
/*  font-family: 'Roboto', sans-serif;*/
/*  font-family: 'PT Serif', serif;*/
}

h1,h2,h3,h4,h5,h6 {
  /*font-family: 'PT Serif', serif;*/
  font-family: 'Roboto', sans-serif;
}

.nav-link {
  font-family: 'Roboto', sans-serif;
/*  text-transform: uppercase;*/
  font-size: 1.05rem;
  margin-left: 5px;
}

.top-banner-content {
  /*font-family: 'PT Serif', serif;*/
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: none;
}

.sidebar-card .card-header {
  font-family: 'Roboto', sans-serif;
}

.sidebar-card .card-body {
  font-family: 'Roboto', sans-serif;
}

.page-item {
  font-family: sans-serif;
}

.listing-city, .listing-entry, .listing-section-title,  .listing_pagination{
  font-family: sans-serif;
}

.footer {
  font-family: sans-serif;
}

/* -------------------------- General  ----------------------------- */

body {
  line-height: 1.55rem;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: bold !important;
}

h1 {
  font-size: calc(1.2rem + 1.45vw);
}

h1.main-title {
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

a {
  text-decoration: none;
}

.clickable {
  cursor: pointer;
}

/* -------------------------- Footer ----------------------------- */

.footer {
  margin-top: 20px;
  padding: 6em 0;
  font-size: 1em;
}

/* -------------------------- Top Banner  ----------------------------- */

.top-banner {
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  position: relative;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.top-banner-content {
  text-align: left;
}


/* ------------------- Borders & Margins --------------------------------- */

.main_content, .sidebar {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  /*padding-top: 5px;*/
}

/* ---------------------- Main Content ------------------------------ */

.main_content {
  padding: 1.75rem 2.1rem;
  font-size: 17px;
  line-height: 1.8rem;
  position:relative;
  overflow: hidden;
  text-align: left;
}

.main_content img {
  max-width: 100%;
  height: auto;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.main_content h1 {
  font-size: calc(1.2rem + 1.45vw);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.main_content h2 {
  font-size: 1.75rem;
  margin-top: 2rem;
  margin-bottom: 1.15rem;
}

.main_content h3 {
  font-size: 1.4rem;
  margin-top: 1.9rem;
  margin-bottom: 0.75rem;

}

.main_content h4,
.main_content h5 {
  font-size: 1.05rem;
  margin-top: 1.4rem;
}

.main_content strong, .main_content b {
  font-weight: bold !important;
}

.main_content .google-auto-placed, .main_content table {
  margin-bottom: 1rem !important;
}

.main_content blockquote {
  padding: 1rem;
  font-style: italic;
  background-color: #EDEDED;
  border-radius: 10px;
}

/*-------------------------- article -------------------------------*/
.article_entry {
  font-size: 17px;
  line-height: 1.8rem;
}

/* -------------------------- Sidebar ------------------------------ */

.sidebar-card {
  margin-bottom: 1rem;
  -webkit-box-shadow: 2px 2px 22px 0px rgba(230,230,230,1);
  -moz-box-shadow: 2px 2px 22px 0px rgba(230,230,230,1);
  box-shadow: 2px 2px 22px 0px rgba(230,230,230,1);
  border: 1px solid #e9e9e9;
  border-radius: 0;
}

.sidebar-card .card-header {
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 0;
}

.sidebar-card .card-body {
  font-size: 0.95rem;
}


.sidebar-card .card-body ul {
  /*margin-left: 1.2rem;*/
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  padding-left: 0;
}

.sidebar-card .card-body li {
  border-bottom: 1px solid #D5D5D5;
  list-style: none;
  padding: 0.3rem;
}

.sidebar-card .card-body li:last-child {
  border-bottom: none;
  /*padding-bottom: 8px;*/
}


/* ------------------------ Article Lists -------------------------- */

.article_include, .article_index {
  padding: 1.5rem;
  background-color: #FFF;
  -webkit-box-shadow: 2px 2px 22px 0px rgba(230,230,230,1);
  -moz-box-shadow: 2px 2px 22px 0px rgba(230,230,230,1);
  box-shadow: 2px 2px 22px 0px rgba(230,230,230,1);
  border: 1px solid #e9e9e9;
  border-radius: 0;
  margin-bottom: 1rem;
}

img.article_thumbnail {
  display:inline;
  float:left;
  margin: 0.3rem 1rem 1rem 0;
  width: 190px;
  height: 190px;
  object-fit: cover;
  object-position: center;
}

/*.article_index,
.article_include {
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #EDEDED;
}*/

.article_index:last-child,
.article_include:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.article_index h2,
.article_include h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 0.8rem;
}

.article_info {
  font-style:italic;
  margin-top: 8px;
  margin-bottom: 10px;
}

/* ----------------------- article card layouts -------------------- */
.article_include_card {
  border-radius: 0 !important;
  -webkit-box-shadow: 2px 2px 22px 0px rgba(230,230,230,1);
  -moz-box-shadow: 2px 2px 22px 0px rgba(230,230,230,1);
  box-shadow: 2px 2px 22px 0px rgba(230,230,230,1);
  border: 1px solid #e9e9e9;
}

.article_include_card .card-title {
  font-size: 20px;
  line-height: 1.65rem;
}

.article_include_card .card-text {
  font-size: 15px;
}

.article_include_card .article_info_top_card {
  /*background-color: #EDEDED;*/
  margin-bottom: 10px;
}

.article_include_card .article_info_top_card,
.article_include_card .article_info_bottom_card {
/*  background-color: #EDEDED;
  padding: 0px 8px;
  border-radius: 3px;*/
}

img.article_thumbnail_card {
  height: 200px;
  object-fit: cover;
  object-position: center;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}


/************************ begin pagination styles ************************/

/*---- old ------*/
a.page-link {
  color: #666;
}

/*---- old ------*/
.page-item.active .page-link {
  background-color: #666;
  border-color: #666;
}

div.pagination-section {
  margin: 10px auto;
  text-align: center;
}
div.pagination_wrapper {
  clear:both;
  padding: 3px;
  margin: 1.5rem auto;
}
div.pagination {
/*  padding: 5px;
  margin: 10px;*/
  background: none;
  display: inline-block;
  font-size:16px;
}
div.pagination a,
div.pagination span.current,
div.pagination span.disabled {
  padding: 3px 8px;
  margin: 1px;
  border: 1px solid #cacaca;
  text-decoration: none;
  border-radius: 2px;
}
.dark-mode div.pagination a,
.dark-mode div.pagination span.current,
.dark-mode div.pagination span.disabled {
  border: 1px solid #848484;
}
div.pagination a {
  color: #444;
  background-color: #FFF;
}
.dark-mode div.pagination a {
  color: #FFF;
  background-color: #000;
}
div.pagination a:hover, div.pagination a:active {
  border: 1px solid #666;
  color: #000;
}
.dark-mode div.pagination a:hover,
.dark-mode div.pagination a:active {
  color: #EDEDED;
}
div.pagination span.current {
  /*font-weight: bold;*/
  background-color: #7fbd42;
   border-color: #7fbd42;
  color: #FFF;
}
div.pagination span.disabled {
  color: #b1b1b1;
}



/* -------------------------- Media Queries ----------------------------- */

@media (max-width: 575.98px) {
  body {
    background: #FFF;
  }
  .cover-banner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .cover-banner-content h1 {
    font-size: 1.85rem;
  }
  .cover-banner-content h3 {
    font-size: 1.15rem;
  }
  .top-banner {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .main_content, .sidebar {
    margin-top: 0;
    margin-bottom: 0;
  }

  .main_content {
    padding: 0.95rem 0.15rem;
  }

  img.article_thumbnail {
    width: 100%;
    object-fit: cover;
    object-position: center;
    height: 25vh;
    overflow: hidden;
    margin-bottom: 1rem;
  }

}