/* ------- version: 2025-07-27 --------*/

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

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

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

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

a {
  color: #80be43;
}

.footer a {
  color: #80be43;
}

/*--------COLOR:  Site Color --------------*/
.text-color-site-color {
  color: #80be43 !important;
}
.bg-color-site-color {
  background-color: #80be43 !important;
}
.border-color-site-color {
  border-color: #80be43 !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: #80be43;
  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: 'Roboto', sans-serif;
/*  font-family: 'PT Serif', serif;*/
}

.main_content {
  font-family: 'Inter', sans-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;
}

/* -------------------------- navbar ----------------------------- */

.navbar-brand:not(:first-child) {
	margin-left: 6px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.navbar-toggler {
	font-size: 18px;
	border: none;
}
.navbar-toggler:hover {
	border: none !important;
}

.navbar-toggler {
	background-color: #b5d893;
}

nav.my-nav {
	/* background-color: #FFF !important; */
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0), 0 2px 3px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0), 0 2px 3px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0), 0 2px 3px rgba(0, 0, 0, 0.06);
}

.dark-mode nav.my-nav {
	background-color: #000 !important;
}

nav .navbar-nav {
	font-size: 1.0em;
	/*font-weight: bold;*/
	text-transform: uppercase;
}

.dark-mode .navdrawer-header {
	background-color: #424242;
}
.dark-mode .navdrawer.show .navdrawer-content {
	background-color: #9f9f9f;
}

/* ------------------------- nav links -------------------------- */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	color: #fff;
	font-weight: bold;
	background-color: #7fbd42;
}

.dark-mode .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	background-color: #5c8d2d;
}

.dark-mode .navbar-toggler:not(:disabled):not(.disabled) {
	color: #FFF;
}

.dark-mode .navbar-toggler-icon {
	color: #FFF !important;
}

.mobile-only .nav-pills .nav-link {
	border-radius: 0;
	background-color: #000000;
  border: 1px solid #ebecef;
	color: #FFF;
}

.dark-mode .offcanvas {
	background-color: #5c5c5c;
}

.dark-mode .offcanvas .nav-link {
	color: #FFF !important;
}


nav .navbar-nav .nav-link {
    color: #80be43 !important;
    /* font-size: 15px; */
    font-weight: bold;
    margin-left: 5px;
    /* border-radius: 2px; */
    /*padding: 4px 9px;*/
    /* background-color: #8ab95b; */
    /* opacity: 1 !important; */
}

.dark-mode nav.my-nav .navbar-nav .nav-link {
	/* background-color: #5c8d2d; */
}

.dark-mode nav.my-nav .navbar-nav .nav-link a {
	/* color: #FFF !important; */
}

.nav-pills .nav-link:hover {
	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;
  position:relative;
  overflow: hidden;
  text-align: left;
}

.article_entry 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;
}

.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.7rem;
}

/* -------------------------- 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: 10px;
  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-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;
}

/* ----------------------- begin back to top button --------------------------- */
#backtotop {
	position: fixed;
	right:0px;
	bottom:15px;
	display:none;/*hid the button first*/
}
#backtotop a {
	text-decoration:none;
	border:0 none;
	display:block;
	width:70px;
	height:59px;
}
#backtotop a:hover {
	opacity:.8; /*mouse over fade effect*/
}
.clrb {
	clear:both;
}
#maindiv {
	width:800px;
	border:1px solid #999;
	margin:auto;
	padding:20px;
}
/* ----------------------- end back to top button --------------------------- */

/* ------------------------- Begin Cryptocurreny List -------------------- */
.table-striped tbody tr:nth-of-type(odd) {
	background-color: #f2f2f4;
}
.price-table td {
	font-size: 0.9rem !important;
}
.crypto-list-page-section {
	margin-top: 20px;
	padding: 35px;
}
.crypto-list-table {
	font-size: 15px;
}
.crypto-list-table-big td {
	font-size: 14px;
}
.crypto-list-table-big td .crypto-list-name {
	font-size: 17px;
}
.crypto-list-rank {
	color: #a2a2a2;
}
.crypto-list-name {
	font-size: 16px;
	font-weight: bold;
}
.crypto-list-symbol {
	font-size: 0.9em;
	color: #a2a2a2;
}
.crypto-price-change {
	color: #7ebd42;
	font-weight: bold;
}
.crypto-price-drop {
	color: #d14836 !important;
	font-weight: bold;
}
tr.crypto-list-more {
	display: none;
}
.crypto-list-more-or-less {
	font-size: 0.95em;
	color: #666;
}
.dark-mode .crypto-list-more-or-less {
	color: #dbdbdb;
}
.crypto-list-more-or-less:hover {
	text-decoration: none;
	cursor: pointer;
}

.crypto-list-table-big td, .crypto-list-table-big th {
    padding: 7px 5px;
}

/* ------------------------- End Cryptocurrency List --------------------- */
.right-align {
	text-align: right;
}

.left-align {
	text-align: left;
}

.section-title {
    font-size: 20px;
    margin-bottom: 10px;
		color: #444;
}

.section-title .fa {
	color: #7fbd42;
}

.shadow-box {
	background-color: #FFF;
	box-shadow: 0 1px 1px #bdbdbd;
	-moz-box-shadow: 0 1px 1px #bdbdbd;
	-webkit-box-shadow: 0 1px 1px #bdbdbd;
	border-radius: 10px;
}

.dark-mode .shadow-box,
.dark-mode .card,
.dark-mode .card-body,
.dark-mode .list-group-item  {
	background-color: #505050 !important;
	color: #ededed !important;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	border: none;
}

.mobile-only {
	display: none;
}

.page-section {
	margin: 0;
	padding-left: 0px 5px 0px 5px; 
}

h1.timeline-Header-title {
   font-size: 21px !important;
   margin-bottom: 10px !important;
   font-family: 'Roboto', sans-serif !important;
   font-weight: bold !important;
}

[v-cloak] { display: none; }

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

@media (max-width: 575.98px) {
  .mobile-only {
		display: block;
	}
  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;
  }
	.section-title {
		font-size: 18px;
		margin-bottom: 10px;
	}
	.section-title .fa {
		display: none;
	}
  .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;
  }

  div.listing-city, div.ad-box, div.listing-entry-textbox,
  div.listing-city-link_box, div.listing-entry {
    margin: 8px 0px;
  }
  div.ad-box {
    padding: 8px 0;
    overflow: hidden;
  }
	.crypto-list-page-section {
		padding: 10px;
	}
	.crypto-list-table-big td, .crypto-list-table-big th {
		padding: 3px 3px;
		font-size: 13.4px;
	}  

}

@media (min-width: 1200px) {
  .container {
    max-width: 1222px;
  }  
}