/*STYLE INFO
-------------------------------------------------------------------------
Style:  topic.css
Site:   https://thinkingtaiwan.com.tw/;
Author: junsuwhy
-------------------------------------------------------------------------
Color:
    Main   : 00B4B4  //Dark Grass Green;
    Hover  : 77BB58  //Grass Green ;
    Border : 558E41  //Darker Grass Green ;
    Body background: #f5f5f5;  //Screw Black ;
    作者 bg: rgba(90,196,87,0.1) //screw grass green;

    New Color: #00B4B4 // Aqua Blue color


-------------------------------------------------------------------------
/** For Topic **/


/** belong header **/
.node-type-topic:not(.page-node-edit) .breadcrumb, 
.node-type-topic:not(.page-node-edit) .page-header,
.node-type-topic:not(.page-node-edit) .print-link {
  display: none !important; 
}

/** overwrite structure*/ 
.main-container>.row {
  margin: 0;
}
.main-container>.row>section.col-sm-12 {
  padding: 0;
}
.node-type-topic:not(.page-node-edit) .region-content,
.node-type-topic:not(.page-node-edit) .view-content,
.node-type-feature-article:not(.page-node-edit) .region-content,
.node-type-feature-article:not(.page-node-edit) .view-content
{
  border-top: none;
}

/** overwrite element */
.region-content .node .field-name-body img {
  height: auto !important ;
  width: unset;
  max-width: unset;
}
.logo img {
  max-width: 84px;
}
@media (max-width:839px){
  .logo.navbar-btn img{
    opacity: unset;
    height: 44px;
    padding-top: 2px; 
    padding-bottom: 2px; 
  }
  
  header#navbar,
  header#navbar .container {
    background: black;
  }
}

body.maintenance-page #logo img {
  width: 48px;
}


/** overwrite - global - RWD*/ 

@media (min-width: 840px) and (max-width: 959px) {
  .main-container, .region-footer {
    width: auto;
  }
  .menu-block-2 {
    width: 100vw;
    margin-left: calc( 50% - 50vw);
  }
  #block-menu-block-2>div>ul:not(.contextual-links-trigger) {
    display: flex;
    justify-content: space-between;
  }
  #block-menu-block-2>div>ul:not(.contextual-links)>li {
    position: relative;
  }
  #block-menu-block-2>div>ul>li:not(.first):before {
    position: absolute;
    left: -33%;
  }

}

/** Overwrite - Google Search */
.gsc-search-button>button.gsc-search-button {
  opacity: 0;
}
@media (min-width: 769px) {
  .gsc-search-button>button.gsc-search-button {
    opacity: initial;
    margin-top: -4px;
    background: transparent;
    border: 0 solid transparent;
  }
  .gsc-search-button>button.gsc-search-button svg {
    transform: translateX(-14px);
    transition: transform .5s;
  }
  #block-block-6:hover .gsc-search-button>button.gsc-search-button svg {
    transform: translateX(25px);
  }
}

@media (max-width: 768px) {
  #block-block-6 .gsc-control-cse {
    margin: 0;
  }
  #block-block-6 #gsc-iw-id1 {
    margin-top: 0;
  }
  #block-block-6 #gsc-iw-id1 input {
    font-size: unset;
  }
}

/** Overwrite - Element */

.region-content .node .field-name-body .image-caption-container {
  border: none;
  padding: 0;
}
.region-content .node .field-name-body .image-caption {
  font-size: 15px;
  color: #6f6f6f;
  padding-top: 15px;
  line-height: 20px;
}


.node-type-topic:not(.page-node-edit) .field-name-field-topic-cover-readonly {
  margin-left: calc( 50% - 50vw);
  width: 100vw;
  position: relative;
  overflow: hidden;
  max-height: 570px;
  display: flex;
  align-items: center;
}


.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-field-topic-image:after,
.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-field-topic-image-mobile:after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
}



.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-field-topic-image-mobile img {
  width: 100vw;
  height: auto;
}

.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-field-topic-image-mobile {
  position: inherit;
}

.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-field-topic-image{
  z-index: -1;
  position: absolute;
}
.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-fieldset {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-title {
  color: white;
}

.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-title h1 {
  margin-bottom: 15px;
  text-align: center;
}

.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-body {
  display: none;
}

.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-nothing {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
}
.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-nothing .field-content{
  display: block;
  width: 40px;
  height: 40px;
  bottom: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  transition: bottom .5s;
}


.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-nothing .field-content::after {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  border-left: 4px solid #00B4B4;
  border-bottom: 4px solid #00B4B4;
  transform: rotate(-45deg)translate(-5px, 20px);
}

.node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-nothing .field-content:hover {
  bottom:  10px;
}

.node-type-topic:not(.page-node-edit) .field-name-body {
  margin: 40px 20px;
}

.node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles {
  width: 100%;
  padding: 0 20px;
}

.node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles .view-content {
  border: none !important;
}
.node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles .view-content .views-row {
  width: 100%;
  padding: 20px 0;
}

.node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles .view-content .views-field-field-topic-image, 
.node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles .view-content .views-field-field-topic-image img {
  width: 100%;
  height: auto;
}

.node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles .view-content .views-row h2 a {
  font-weight: bolder; 
  font-size: 20px;
  line-height: 30px;
  display: block;
}

.node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles .view-content .views-field-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-height: 70px;
  margin-bottom: 8px;
}

@media (min-width: 769px) {
  .node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-row {
    position: inherit;
  }
  .node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-field-topic-image-mobile {
    z-index: -1;
    position: absolute;
  }
  .node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-field-topic-image {
    position: inherit;
  }
  
  .node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-field-topic-image img {
    width: 100vw;
    height: auto ;
  }
  .node-type-topic:not(.page-node-edit) .view-id-topic_page_cover_block .views-field-body {
    display: block;
    color: white;
  }

  .node-type-topic:not(.page-node-edit) .field-name-body {
    display: none;
  }

  .node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles {
    margin-top: 40px;
    padding: 0;
  }
  .node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles .view-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  } 
  .node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles .view-content .views-row {
    width: 300px;
    margin-right: 15px;
  }
  .node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles .view-content .views-row:nth-child(3n) {
    margin-right: 0;
  }

}

@media (min-width: 769px) and (max-width: 959px) {
  .node-type-topic:not(.page-node-edit) .view-id-topic_list_topic_articles .view-content {
    justify-content: space-around;
  }
}

/** type feature-article */

/** Clear old */
body.node-type-feature-article:not(.page-node-edit) .region-content .node .field-name-field-policy .field-items:after, 
body.node-type-feature-article:not(.page-node-edit) .region-content .node .field-name-field-supplement .field-items:after, 
body.node-type-feature-article:not(.page-node-edit) .region-content .node .field-name-field-attribute .field-items:after, 
body.node-type-feature-article:not(.page-node-edit) .region-content .node .field-name-field-author .field-items:after {
  content: "";
}
 

/** Structure */
body.node-type-feature-article:not(.page-node-edit) #block-system-main>div {
  display: flex;
  flex-wrap: wrap;
}
body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>* {
  width: 100%;
}
body.node-type-feature-article:not(.page-node-edit) section>.page-header {
  display: none !important;
}
body.node-type-feature-article:not(.page-node-edit) .group-left {
  order: 1;
}

body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>.group-footer {
  max-width: 660px;
  order: 2;
  margin: 0;
}


/** Elements */

body.node-type-feature-article:not(.page-node-edit) .field-label {
  color: #6f6f6f;
  font-size: 14px;
  line-height: 34px;
}

/** Element: Upper header */
body.node-type-feature-article:not(.page-node-edit) .group-upper-header {
  text-align: left;
}
body.node-type-feature-article:not(.page-node-edit) .group-upper-header .field-name-field-ref-topic {
  margin-top: 12px;
  padding-bottom: 12px;
}
body.node-type-feature-article:not(.page-node-edit) .group-upper-header .field-name-field-ref-topic .field-label {
  display: none;
}
body.node-type-feature-article:not(.page-node-edit) .group-upper-header .field-name-field-ref-topic .field-item a {
  font-size: 16px;
}
body.node-type-feature-article:not(.page-node-edit) .group-upper-header .field-name-field-ref-topic .field-item:after {
  content: " ";
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 4px;
  margin-top: 12px;
  width: 40px;
  border-radius: 2px;
  background-color: #00B4B4;
}

body.node-type-feature-article:not(.page-node-edit) .main-container h1 {
  font-size: 30px;
  margin: 30px 0;
}


body.node-type-feature-article:not(.page-node-edit) .group-upper-header .node-field-name-body-teaser {
  margin-bottom: 28px;
  font-size: 15px ;
  line-height: 22px;
  color: #00B4B4;
}

/** Elements of top block */
body.node-type-feature-article:not(.page-node-edit) .group-upper-header {
  text-align: center; 
}

body.node-type-feature-article:not(.page-node-edit) .breadcrumb {
  display: none;
}

/** Element-Cover image */
body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>.group-header {
  position: relative;
  margin-left: calc( 50% - 50vw );
  margin-right: calc( 50% - 50vw );
  width: 100vw;
  overflow: hidden;
  max-height: 570px;
  display: flex;
  align-items: center;
}
body.node-type-feature-article:not(.page-node-edit) .field-name-field-topic-image img, 
body.node-type-feature-article:not(.page-node-edit) .field-name-field-topic-image-mobile img {
  height: auto;
  width: 100vw;
}
body.node-type-feature-article:not(.page-node-edit) .field-name-field-topic-image-mobile {
  z-index: 0;
  position: inherit;
}
body.node-type-feature-article:not(.page-node-edit) .field-name-field-topic-image {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: auto;
}

body.node-type-feature-article:not(.page-node-edit) .group-left>div>.field {
  display: block !important;
  float: none !important;
}


/** Element left sidebar*/

body.node-type-feature-article:not(.page-node-edit) .group-left .field-name-field-author .field-item {
  float: none;
}
body.node-type-feature-article:not(.page-node-edit) .group-left>div>.field {
  margin-bottom: 30px;
} 
body.node-type-feature-article:not(.page-node-edit) .group-left>div>.field.field-name-post-date {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 24px;
  color: #a7a7a7;
}
body.node-type-feature-article:not(.page-node-edit) .group-left .field-name-field-ref-topic a{
  color: #00B4B4;
}
body.node-type-feature-article:not(.page-node-edit) .group-left .field-name-field-tag .field-items {
  display: flex;
  flex-wrap: wrap;
}
body.node-type-feature-article:not(.page-node-edit) .group-left .field-name-field-tag .field-item {
  padding: 9px;
}
body.node-type-feature-article:not(.page-node-edit) .region-content #block-system-main  .group-left .share-buttons-list li{
  padding-left: 0;
}
body.node-type-feature-article:not(.page-node-edit) .region-content #block-system-main  .group-left .share-buttons-list li:before {
  content: "";
}

/** Elements in footer */
body.node-type-feature-article:not(.page-node-edit)  .group-footer .field-name-field-author-block-readonly .views-field-field-photo img {
  border-radius: 50%;
}
body.node-type-feature-article:not(.page-node-edit)  .group-footer .field-name-field-author-block-readonly .view-content {
  border-top: 2px solid #00B4B4;
  padding-top: 28px;
}
body.node-type-feature-article:not(.page-node-edit)  .group-footer .field-name-field-author-block-readonly .views-row {
  display: flex;
}
body.node-type-feature-article:not(.page-node-edit)  .group-footer .field-name-field-author-block-readonly .views-fieldset {
  margin-left: 23px;
}
body.node-type-feature-article:not(.page-node-edit)  .group-footer .field-name-field-author-block-readonly h5.field-content{
  margin-top: 0; 
}

body.node-type-feature-article:not(.page-node-edit) .group-footer .field-name-field-author-article-readonly .view-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-top: none;
}

/** Element author other image */
body.node-type-feature-article:not(.page-node-edit) .group-footer .view-id-block_more_articles .cover-images.views-fieldset {
  width: calc( 100vw - 30px);
  height: calc( 100vw - 30px);
  position: relative;
  overflow: hidden;
}
body.node-type-feature-article:not(.page-node-edit) .group-footer .view-id-block_more_articles .cover-images.views-fieldset .field-content img {
  max-width: 100%;
  height: auto;
  position: absolute;
}
body.node-type-feature-article:not(.page-node-edit) .group-footer .views-field-field-topic-image img {
  z-index: 3;
}
body.node-type-feature-article:not(.page-node-edit) .group-footer .views-field-field-topic-image-mobile img {
  z-index: 2;
}
body.node-type-feature-article:not(.page-node-edit) .group-footer .views-field-field-insert img {
  z-index: 1;
}

body.node-type-feature-article:not(.page-node-edit) .group-footer .field-name-field-author-article-readonly .view-content .views-row .views-field-field-insert img {
  width: 100%;
  height: auto;
}
body.node-type-feature-article:not(.page-node-edit) .group-footer .field-name-field-author-article-readonly .view-content .views-row .views-field-title h3 a{
  font-size:16px;
  line-height: 24px;
  margin: 12px 0;
  display: block;
  font-weight: bolder;
}
@media (min-width: 960px) {
  body.node-type-feature-article:not(.page-node-edit) #block-system-main>div {
    display: grid;
    grid-template-columns: 300px 660px;
  }
  body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>.group-upper-header,
  body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>.group-header {
    grid-column: 1 /  3;
  }
}
@media (min-width: 769px) {
  /** Structure */
  body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>*:not(.group-header) {
    padding-left: 10px;
    padding-right: 10px;
  }
  body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>*:not(.group-header) {
    padding-left: 0 ;
    padding-right: 0;
  }
  body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>.group-left {
    grid-row: 4 / 7;
    /* width: 300px; */
    padding: 36px 50px;
  }
  body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>.group-right {
    grid-column: 2 / 3;
  }
  body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>.group-footer {
    grid-column: 2 / 3;
  }
  body.node-type-feature-article:not(.page-node-edit) .group-left {
    order: 0;
    align-self: stretch;
  }
  
  body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>.group-footer {
    max-width: 660px;
  }
  .group-left-inner {
    position: sticky;
    top: 40px;
  }

  /** Elements */

  /** Element-Cover image */
  body.node-type-feature-article:not(.page-node-edit) .field-name-field-topic-image-mobile {
    z-index: -1;
    position: absolute;
  }
  body.node-type-feature-article:not(.page-node-edit) .field-name-field-topic-image {
    z-index: 0;
    position: inherit;
  }

  body.node-type-feature-article:not(.page-node-edit) .region-content .node .field-name-body .image-caption-container img {
    max-width: 660px;
  }

  body.node-type-feature-article:not(.page-node-edit) .group-footer .field-name-field-author-article-readonly .view-content .views-row {
    max-width: 200px;
  }

  /** Element author other image */
  body.node-type-feature-article:not(.page-node-edit) .group-footer .view-id-block_more_articles .cover-images.views-fieldset {
    width: 200px;
    height: 200px;
  }
}

@media (min-width: 769px) and (max-width: 959px) {
  /** left sidebar */
  body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>.group-left {
    width: auto;
    padding: 0;
  }
  body.node-type-feature-article:not(.page-node-edit) .group-left {
    order: 1;
  }
  
  body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>.group-footer {
    max-width: max-content;
    order: 2;
    margin: 0;
  }

  /** main content */
  .body.node-type-feature-article:not(.page-node-edit) #block-system-main>div>.group-right {
    max-width: max-content;
  }
}

/** table problem for iOS */
@supports (-webkit-touch-callout: none) {
  .main-container .region-content .node .field-name-body table {
    width: auto !important;
  }
}


/** Element: Editor for feature-article */
body.page-node-edit.node-type-feature-article .field-widget-text-textarea-with-summary {
  width: 662px;
}

/** New Element style: pagination */
.pagination {
  display: flex;
  justify-content: center;
}
.region-content #block-system-main .node .pagination>li {
  padding: 0;
  text-indent: 0;
}
.region-content #block-system-main .node .pagination>li:before {
  content: "";
}
.pagination>li {
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
}
.pagination>li.prev, 
.pagination>li.next {
  border: #00B4B4 solid 1px;
  border-radius: 50%;
  position: relative;
}
.pagination>li>a,
.pagination>li>a:hover,
.pagination>li>a:focus,
.pagination>li.active>a,
.pagination>li.active>a:hover,
.pagination>li.active>a:focus,
.pagination>li>span,
.pagination>.disabled>span,
.pagination>.disabled>span:hover {
  background: none;
  border: none;
}
.pagination>li>a,
.pagination>li>span {
  font-size: 18px;
  color: black;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pagination>li>a:hover,
.pagination>li.active>a,
.pagination>li.active>a:hover,
.pagination>li.active>a:focus { 
  color: #00B4B4;
}
.pagination>li.prev>a, 
.pagination>li.next>a{
  color: #00B4B4;
  font-size: 30px;
  position: absolute;
  left: 50%;
  top: 17px;
  transform: translate(-50%, -50%);
}
.pagination>li.active {
  position: relative;
}
.pagination>li.active:after {
  content: " ";
  display: block;
  width: 30px;
  height: 2px;
  bottom: 0;
  background-color: #00B4B4;
  left: 20px;
  position: absolute; 
  transform: translate(-50%);
}
.pagination>li.active>a {
  font-weight: bolder;
  color: #00B4B4;
}

/** New Element: Aqua color Link */
.aqua-link a, 
a.aqua-link, 
a.aqua-plus-link, 
.aqua-plus-link a {
  color: #00B4B4;
}
.aqua-link a:hover, 
a.aqua-link:hover, 
a.aqua-plus-link:hover, 
.aqua-plus-link a:hover {
  text-decoration: underline;
}