.blog-item{background-color:#fff;border-radius:8px;height:340px;border-radius:5px;box-shadow:0 0 16px rgba(0,0,0,.3)}
.blog-item:hover{box-shadow:0 0 16px rgba(0,0,0,1);transition:.5s}

.blog-img{width: 100%;height: 200px;overflow: hidden;position:relative;border-radius: 4px 4px 0 0}
.blog-img img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:100%;width:100%;object-fit:cover}
.loaded {opacity:1!important;transition:1s}

.blog-cat{height:14px;line-height:14px;font-size:14px;margin:12px 8px; color: #000;}
.blog-title{height:40px;font-size:16px;margin:12px 8px;line-height:20px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}
.blog-item a{text-decoration:none;color:#0073d7}
.blog-item a:hover{color:#DC1478!important}

.article{background-color:#fff;overflow:hidden;display:block}
.article-img{height:350px;width:100%}
.article-img img{height:350px;width:auto;border-radius:4px 4px 0 0;;transition:0.75s}
.article-analytics{margin:8px;border-top:2px solid #dceaeb;font-size:15px;color:#192734 }
.article-analytics span{margin:0 2%;font-size:15px}
.article-title{font-size:20px;margin:12px}
.article-post{margin:12px}
.article-social{margin:12px 12px;padding:12px 0;border-top:1px solid #dceaeb}

.author-pic{width:100px!important;height:100px!important}
.comment-pic{height:50px!important;width:50px!important}
.blog-comment{border:1px solid #dcdcdc;margin:8px 0px;border-radius:8px;padding:8px;width:100%}
.blog-fix{width:500px; display:flex;overflow:hidden}
.blog-replies{max-height:250px;overflow-y:auto;border-left:1px solid #DC1478;margin:0 4px 12px 32px;padding:0 4px 0 0;scrollbar-width:thin}
.thread{width:12px;background-color:#DC1478;height:1px;border-radius:8px 0}

.trait-head{font-size:16px;font-weight:bold}
.trait{border-bottom:1px solid #dcdcdc;padding:4px 0;line-height:15px;font-size:14px}
.trait:hover{background-color:#dcdcdc}
.trait .col-3{display:flex;justify-content:center;align-items:center}
.trait input{height:16px;width:16px}

.temp-head{border:2px solid #dcdcdc;padding:2px;font-size:16px;line-height:16px;font-weight:bold}
.temp{border:1px solid #dcdcdc;border-top:none;padding:2px;font-size:13px;line-height:13px}

#chart {padding:20px}
.chart-table {width:100%;height:250px}
.charttitle {text-align:center}
.bars td {vertical-align:bottom;padding:4px}
.bars div:hover {opacity:0.6}
.legend {vertical-align:bottom;padding-left:20px;text-align:left}
.legbox {display:block;clear:both}
.xaxisname {margin:5px;color:#fff;font-size:77%;padding:5px;float:left}
.chol {background:#ff0000}
.mel {background:#00d77d}
.san {background:#ffd000}
.phl {background:#00c3ff}