@import url("https://fonts.googleapis.com/css?family=Nunito");
/* Page Body Edits */
html {
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
}

body {
  margin-bottom: 7rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.6;
  font-family: "Noto Sans TC", sans-serif;
}

/* Table Settings */
.table thead th {
  padding: 0.5rem !important;
}
.table tbody td {
  padding: 0.5rem !important;
  border-width: 1px;
  border-style: solid;
}
.table tbody td.fieldData img {
  display: block;
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  height: auto;
  margin: 0.5rem auto 1rem auto !important;
}
.table tbody td.fieldData p {
  margin: 0 auto;
}

/* Font Settings */
p, a, td, li, span:not(.text-muted), button.btn {
  font-size: 0.9rem;
}

a.navbar-brand {
  font-size: 1.125rem;
}
a.navbar-brand img {
  height: 2rem;
  width: auto;
  margin-right: 0.5rem;
}

h2 {
  font-size: 1.8rem;
}

/* Button Settings */
.btn,
.text-pointer {
  cursor: pointer;
}

.text-pointer:hover,
.text-pointer:active {
  border-bottom: 1px solid;
  transition: 0.15s ease-out;
}

.keywordBtn:hover,
.keywordBtn:active {
  background-color: transparent !important;
}

/* Main Content Area */
.crop-text {
  line-clamp: 3;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5rem;
  /* fallback */
  max-height: 4.5rem;
  /* fallback */
}

#displayMainContent {
  font-family: "Lora", sans-serif;
  font-size: 1.05rem;
  word-wrap: break-word;
}
#displayMainContent img {
  max-width: 90%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#displayMainContent p, #displayMainContent a {
  font-size: 1.05rem;
  word-wrap: break-word;
}
#displayMainContent p:last-of-type {
  margin-bottom: 0;
}

.additions, .relatives {
  padding: 5px 10px;
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
}

.additions:not(:last-child),
.relatives:not(:last-child) {
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
}

.additions:not(:first-child) .relatives:not(:first-child) {
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Post Card Adjustments */
.card-left-image {
  max-width: 100%;
  max-height: 35vh;
  object-fit: contain;
  border-radius: 0.5rem;
}

/* Input Fields */
#fieldSearch {
  display: none;
  border-radius: 0.5rem;
}

input.pageInput.pageInput {
  width: 5rem;
}

.small-placeholder-text::placeholder {
  font-size: 0.75rem;
}

/* Pagination */
ul.pagination li {
  margin: 0.25rem;
}

.pagination {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: center;
  -webkit-justify-content: center;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}

/* Footer */
.footer {
  position: absolute;
  bottom: 0;
}

/* Media Queries For Desktops */
@media (min-width: 768px) {
  .border-md-right {
    border-width: 1px;
    border-right-style: solid;
  }
}
@media (min-width: 992px) {
  .lg-only {
    display: none;
  }
}
/* Media Queries For Mobile Phones */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
  }

  .table thead th,
.table tbody td {
    width: auto;
  }

  .postMetaData p,
.postMetaData span {
    font-size: 0.75rem;
  }

  .card-left-image {
    max-height: 50vh;
  }
}