textarea.article-suggest:focus{
  outline: none;
}
textarea.article-suggest{
  padding: 10px;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #e4e4e4;
}

#articles-loading{
  padding: 3rem;
}
#articles-loading .loading-txt{
  margin-top: 1rem;
  font-weight: bold;
  font-size: 15px;
  color: #d2d2d2;
}

.btn-article{
  display: block;
  width: 100%;
  padding: 5px 17px;
  font-weight: bold;
  font-size: 14px;
  color: #979797;
  border: none;
  background-color: #ffffff;
  /*
  border-left: 2px solid;
  border-color: #e5e5e5;
  */
  white-space: nowrap;
  border-radius: 25px;
  box-shadow: rgb(100 100 111 / 27%) 0px 3px 5px 1px;
}.btn-article:hover{
  text-decoration: none;
}

/*
ul li:first-child .btn-article{
  border-left: 2px solid;
  border-color: #e5e5e5;
}
ul li:last-child .btn-article{
  border-color: #ffffff;
}
*/


.article-category{
  font-weight: bold;
  font-size: 16px;
  opacity: 0.3;
}
.nav-articles ul{
  display: flex;
  background-color: #f7f7f7;
  padding: 8px;
  border-radius: 25px;
}
.nav-articles ul li{
  position: relative;
  margin-right: 10px;
  list-style: none;
  cursor: pointer;
}

.nav-articles ul li .btn-article.active{
  color: #ffffff;
  background-color: #6E9C80;
  border-color: #6E9C80;
}
#article-current{

}
.nav-articles ul li .btn-article.current{
  color: #6e9c80;
}
.nav-articles ul li .btn-article:hover .dropdown{
  display: block;
}
.nav-articles ul li .dropdown{
  position: absolute;
  display: none;
  padding: 10px;
  top: 100%;
  left: 0px;
  min-width: 200px;
  background-color: #ffffff;
  border-radius: 25px;
  box-shadow: rgb(100 100 111 / 27%) 0px 3px 5px 1px;
  z-index: 10;
}
.nav-articles ul li .dropdown button{

  display: block;
  width: 100%;
  padding: 5px 17px;
  font-weight: bold;
  font-size: 14px;
  color: #979797;
  text-align: left;
  border: none;
  background-color: #ffffff;
  /*
  border-left: 2px solid;
  border-color: #e5e5e5;
  */
  white-space: nowrap;
  border-radius: 25px;
}.nav-articles ul li .dropdown button:hover{
  color: #ffffff;
  background-color: #6E9C80;
  border-color: #6E9C80;
}
.nav-articles ul li .dropdown a{

  display: block;
  width: 100%;
  padding: 5px 17px;
  font-weight: bold;
  font-size: 14px;
  color: #979797;
  text-align: left;
  border: none;
  background-color: #ffffff;
  /*
  border-left: 2px solid;
  border-color: #e5e5e5;
  */
  white-space: nowrap;
  border-radius: 25px;
}.nav-articles ul li .dropdown a:hover{
  color: #ffffff;
  background-color: #6E9C80;
  border-color: #6E9C80;
  text-decoration: none;
}


.article:hover{
  border-color: #80cd9e;
  text-decoration: none;
}
.article:hover .btn-read{
  color: #fff;
  background-color: #80cd9e;
  border-color: #80cd9e;
}
.article{
  display: block;
  margin: 15px 0px;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  transition: 0.4s;
  background-color: #ffffff;
  overflow: hidden;
}.article .head{
  display: flex;
  align-items: center;
  min-height: 100px;
  max-height: 100px;
  overflow: hidden;
}.article .head .thumbnail{
  height: auto;
  width: 100%;
}.article .body{
  padding: 15px;
}.article .body .title{
  font-weight: bold;
  font-size: 18px;
  color: #484848;
}.article .body .tags{
  /*margin-top: 5px;*/
}.article .footer{
  padding: 15px 20px;
  border-top: 1px solid #e9e9e9;
}.article .footer .info{
  color: #a3a3a3;
}.article .tag{
  display: inline-block;
  padding: 2px 0px;
  margin-right: 5px;
  font-style: italic;
  font-size: 12px;
  color: #b9b9b9;
  border-radius: 4px;
}.article .btn-read{
  padding: 5px 10px;
  font-size: 14px;
  color: #a0a0a0;
  background-color: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 0px 0px 10px 0px;
  transition: 0.4s;
}
.article .readtime-title{
  font-size: 14px;
  color: #6e9c80;
  opacity: 0.6;
}
.article .fa-tags{
  margin-right: 5px;
  font-size: 10px;
  color: #c4c4c4;
}
.article .fa-bars{
  margin-right: 5px;
  font-size: 10px;
  color: #6e9c80;
}
.article .category{
  font-weight: bold;
  font-size: 15px;
  color: #6e9c80;
}
.article .author{
  margin-right: 5px;
  font-size: 14px;
  color: #c4c4c4;
  padding-right: 5px;
  border-right: 1px solid #e5e5e5;
}
.article .readtime{
  font-weight: bold;
  font-size: 13px;
  color: #6e9c80;
}


.articles-search{
  min-width: 20px;
  min-height: 37px;
}
.articles-search input{
  padding: 7px 15px;
  padding-right: 50px;
  padding-left: 35px;
  font-size: 15px;
  /*color: #a0a0a0;*/
  color: #6e9c80;
  border: 1px solid #dcdcdc;
  border-radius: 20px;
  transition: width 0.4s;
}.articles-search input::placeholder{
  font-style: italic;
}
.articles-search button{
  position: absolute;
  padding: 8px 15px;
  top: 4px;
  right: 19px;
  border: none;
  color: #80cd9e;
  background-color: rgba(255,255,255,255);
  border-radius: 20px;
}.articles-search button:hover{
  color: #58b07a;
}
.articles-search .search-list{
  position: absolute;
  width: calc(100% - 30px);
  background-color: #c4c4c4;
  z-index: 100;
}

.article-search{
  padding: 6px 8px;
  border: 2px solid #6e9c80;
  border-radius: 20px;
  overflow: hidden;
}

.searchbox{
  display: flex;
  align-items: center;
}

.articles-search:hover ~ img{
  opacity: 1;
}
.articles-search img.setu{
  top: 8px;
  left: 23px;
  height: 22px;
  position: absolute;
  opacity: 0.6;
}
.searchbox input.text{
  padding: 0px;
  border: none;
}

.article-suggest{
  font-style: italic;
  font-size; 14px;
  color: #989898;
  background-color: rgba(255,255,255,255);
  border: none;
  transition: 0.4s;
}
.article-suggest i{
  color: #ffcd00;
  margin-left: 5px;
}

.article-footer{
  padding: 20px 0px;
  margin-top: 50px;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}.article-footer .brand{
  display: flex;
  align-items: center;
}.article-footer .tagline{
  font-size: 17px;
  color: #6c6c6c;
}.article-footer .social{
  position: relative;
  bottom: -20px;
  text-align: right;
}.article-footer .social a{
  margin-left: 5px;
  color: #2084de;
}
.article-subfooter{
  font-size: 15px;
  color: #979797;
}
.article-subfooter a{
  color: #007bff;
}

.article-author.image{
  width: 70px;
  height: 70px;
  border-radius: 100%;
}

.web-article.text a{
  color: #007bff;
  text-decoration: underline;
}
.web-article.header{
}
.web-article.footer{
  margin-top: 20px;
  padding-left: 15px;
  border-left: 5px solid #fad3ea;
}
.web-article.title{
  margin-bottom: 10px;
  text-align: left;
  font-weight: bold;
  font-size: 30px;
  color: #444444;
}
.web-article.readtime{
  display: inline-block;
  font-size: 14px;
  color: #6e9c80;
}
.web-article.category{
  display: inline-block;
  color: #6e9c80;
}.web-article.category i{
  display: inline-block;
  font-size: 11px;
}
.web-article.category .icon{
  display: inline-block;
}
.web-article.category .name{
  display: inline-block;
  margin-left: 5px;
  font-weight: bold;
  font-size: 14px;
}
.web-article.pipe{
  display: inline-block;
  margin: 0px 5px;
}
.web-article.date{
  display: inline-block;
  text-align: left;
  font-size: 14px;
  color: #b7b7b7;
}
.web-article.tags{
  padding-bottom: 10px;
  text-align: left;
}
.web-article.tags .fa-tags{
  margin-right: 10px;
  font-size: 13px;
  color: #c4c4c4;
}
.web-article.tag{
  display: inline-block;
  margin-right: 10px;
  padding: 0px;
  font-weight: bold;
  font-size: 13px;
  color: #d9d9d9;
  transition: 0.3s;
  cursor: pointer;
}.web-article.tag:hover{
  color: #80cd9e;
  border-color: #80cd9e;
}
.web-article.thumbnail{
  /*margin-bottom: 30px;*/
  width: 100%;
  border-radius: 10px;
}
.web-article.text{
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.web-article .credit{
  font-size: 13px;
}
.web-article.img-author{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.web-article.img-author.sm{
  width: 30px;
  height: 30px;
}
.web-article.name-author{
  font-weight: 500;
  font-size: 19px;
  color: #444444;
}
.web-article .all-articles{
  padding-left: 5px;
  font-size: 14px;
  color: #6e9c80;
  border-left: 1px solid #c4c4c4;
}.web-article .all-articles:hover span{
  opacity: 1;
}.web-article .all-articles span{
  opacity: 0;
  transition: 0.3s;
}.web-article a.all-articles:hover{
  text-decoration: none;
}
.web-article.name-author.sm{
  font-size: 14px;
  margin-bottom: 0px;
}
.web-article.info-author.sm{
  font-size: 10px;
  color: #c4c4c4;
  margin-bottom: 0px;
}
.web-article.info-author{
  margin-bottom: 10px;
  font-size: 13px;
  color: #c4c4c4;
}
.web-article.bio{
  font-size: 15px;
  color: #949494;
}
.web-article img{
  max-width: 100%;
  border-radius: 5px;
}
.web-article .image-bg{
  padding: 15px;
  width: 100%;
  text-align: center;
  background-color: #666666;
  border-radius: 5px;
}
.web-article .image-bg img{
  max-width: 60%;
}
.web-article ul.ordered{
  padding-left: 18px;
  list-style: none;
}
.web-article .code{
  padding: 10px;
  font-size: 14px;
  background-color: #F8F7FA;
  border: 1px solid #ebebeb;
  border-radius: 3px;
}

.web-article .quote{
  padding: 15px;
  border-left: 10px solid #efefef;
}
.web-article .quote i{
  color: #224472;
}

.web-article .warning{
  padding: 15px;
  border-left: 10px solid #ffeb00;
}
.web-article .warning i{
  margin-bottom: 15px;
  font-size: 30px;
  color: #ffeb00;
}
.web-article .warning .title{
  font-size: 18px;
  font-weight: bold;
  color: #000000;
}
.web-article .warning .text{
  font-size: 16px;
  color: #000000;
}

.web-article .checklist i{
  color: #2085de;
}

.web-article iframe{
  margin: auto;
  margin-top: 20px;
  display: block;
  border: none;
}