@import "common-includes/functions";
@import "common-includes/variables";
@import "common-includes/mixins";
@import "custom/pagination";
@import "custom/shareblock"; 
@import "rtl/blogview_rtl"; 
// .outer-blog {
//     width: 90%;
//     margin: 0 auto;
// }
body {
    background: $gray-300;
}

.blHead {
    margin-bottom: 5px; 
}
.blog-view{
    .blog-cnt{
        font-size: 14px;
        color: $gray-600;    
        padding: 10px 0 0 0;
        p{
            font-size: 15px;
        }
    }
}

.srch-blog{
    border: none;
    padding: 6px 20px;
    height:42px;
}
.right-section{
    .blog_categories {
        background: $white;
        padding: 15px;
    }
    .recent_post{
        background: $white;
        padding: 12px;
    }
    .archives{
        background: $white;
        padding: 15px;
    }
    .tags{
        background: $white;
        padding: 15px;
    }
}
#content-wrapper{
    margin-bottom: 2%;
}
h3{font-size: 18px;}
.leftPanelInner {
    .blog_view {
        padding: 0;
        margin: 0 0 7px 0;
        // border: 1px solid darken($border-color,8%);
        .blog-cnt{
            p {
                font-size: 15px;
            }
        }
    }
}
.container.blog-details {
    max-width: 749px;
    .img_pane{
        margin-bottom: 17px;
    }
}
.cnt_blk{
    span{
        display: block;
        font-size: 16px;
        right: 30px;
        color: #9b9b9b;
    }
    h3 {

      margin-top: -6px;
      padding: 15px 0 5px 0;

      a { 
        color: lighten($primary,14%);
        font-size: 20px;
        font-weight: $font-weight-medium;
        &:hover {
            color: $primary;
        }
      }

    }
    .links_pane {
        display: block;
        color: lighten($dark, 55%); 
        padding: 0 0 10px 0;
    }
}
.bdr-btm{
    border-bottom: solid 1px #e4e4e4;
}
.blog-list{
    .img_pane {
        overflow: hidden; 
        // width: 277px;
        // height: 194px; 
        // position: absolute;
        img {
            width: 100%;
        }
    }
    .detail-sec{
        // margin-left: 277px;
        padding: 0 20px;  
        .link-btn{
            color: #b4b4b4 !important;
            border-radius: 3px;
            display: block;
            padding-top: 12px;
        }
    }
}
.blog-detail-list { 
    padding: 5px 10px;
    background: lighten($dark, 97%);
    .blog-entry {
        display: block;
        font-size: 16px;
        color: #9b9b9b;
    }
}
.blog_category{
    font-weight: $font-weight-medium; 
}
.pager{
    padding: 10px 0;
    ul{
        display:inline-block;
        width: auto!important;
        li{
            display:inline-block;
            padding-right: 5px;
            a{
                border: 1px solid lighten($dark, 87%);
                color: lighten($dark, 20%);
                display: inline-block;
                margin-right: 5px;
                text-align: center;
                border-radius: 3px;
                -moz-border-radius: 3px;
                color: lighten($dark, 23%);
                padding: 3px 8px;
                font-size: rem(15);
                line-height: 19px;
                &.active{
                    border: 1px solid $primary;
                    background-color: $primary !important;
                    color: $light !important;
                }
            }
        } 
    }
    span {
        font-size: rem(13);
        color: lighten($dark, 55%);
    }
}
.rightBx {
    padding: 10px;
}
#reload_icon_captcha1 {
    margin: 0;
}
.captcha {
    .form-control{
        height:30px;
    }
}
.blog_categories, .recent_post,.archives {
    ul{
        padding: 6px 0;
        li{
            font-size: rem(13);
            a{
                color: lighten($primary,10%);
                display: block;
                font-size: 13.5px;
                font-weight: 400;
                padding: 7px 0; 
                &:hover {
                    color: $secondary;
                }
                &.active{color: $primary;}
            }
        }
    } 
}
.tags{
    ul{
        padding: 6px 0;
        li{
            display: inline-block;
            a{
                font-size: rem(13);
                margin-right: 5px;
                color: $light;
                padding: 3px 6px;
                display: inline-block;
                margin-bottom: 5px;
                border-radius: 20px;
                font-weight: $font-weight-medium;
            }
        }
    }
}
.s{
    a{
        color: $light;
        padding: 9px 5px 9px 10px;
        display: block; 
        background: $primary;
        text-transform: uppercase;
        position: relative;
        font-weight: $font-weight-medium;
        text-align: center;
    }
}
.blog_search,.blog_categories,.archives,.tags,.recent_post{
    h4{
        font-weight: $font-weight-medium;
        padding: 0;
    }
}
.blog_search{
    margin-bottom: 7px;
    border: solid darken($border-color,8%); 
    border-width: 1px 0 1px 1px;
    .btn{
        height: 42px;
        border-radius: 0px;
        font-size: 14px;
        font-weight: 700;
        padding: 6px 3px;  
    }
}
.links_pane a{
   color: #7c8999;
    font-weight: $font-weight-medium;
}
.comments span:before{
    margin-right: 5px;
}
.blog-entry{
    padding: 5px;
}
.comment_view {
    padding: 15px 0 18px;
    font-size: 14px;
    color: #9b9b9b;
        border-bottom: solid 1px #ddd;
}
.comment_reply{
    .date{
    font-size: 14px;
    color: #9b9b9b;
}
    h4 {
        padding: 10px 0;
        margin: 0px;
        
    }
    >ul{
        >li {
            position: relative;
            >.content{
                color: #555;
                position: relative;
                font-size: 13px;
                //font-weight: $font-weight-medium;
                
            }
            .content{
                margin-top: 15px;
                .content{
                    margin: 15px 0 0 15px;
                }
                .img-block{
                    
                    img{
                        margin:0 auto;
                    }
                }
            }
        }
    }
}

.form-fields{
    label {
        font-size: 14px;
    }
}

.blog-search-error {
    color: #f00;
    padding-top: 5px;
}
.category-icon {
    font-size: 26px;
    margin-top: -8px;
    margin-right: 8px;
    color: #999999 !important;
}
.banner-share {
    position: absolute ;
    // right: -60px ;
    top: 36px ;
    z-index: 999;
    background: $white;
        padding: 5px;
      @include box-shadow(1px 1px 20px 1px rgba(0, 0, 0, 0.05));
    span{
        display: block;
        a{
         height: 30px;
    width: 30px;
    display: block; 
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    font-size: 15px;
    padding: 7px 0 0 7px;
    color: $gray-700;
    margin-bottom: 12px;
            background: $white;
        }
    }
    .share{

        a{
             font-weight: $font-weight-bold;
            &:hover{
                color: $primary;
            }
        }
    }

    .fb{

        a{
            
            &:hover{
                color: #3d5b99;
            }
        }
    }

    .gp{

        a{
            
            &:hover{
                color: #e25714;
            }
        }
    }
    .pinit{

        a{
            
            &:hover{
                color: #e25714;
            }
        }
    }
    .twit{

        a{
            
            &:hover{
                color: #00aced;
            }
        }
    }
    
}

.share-icon{
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 20px !important;
    color: #999;
    cursor: pointer;
}

@include media-breakpoint-up(lg) { 
    .rightPanelInner{
        float: right;
        width: 24.4%;
    }
}
@include media-breakpoint-down(sm) { 
    .blog-list{
         .img_pane {
            overflow: hidden;
            width: 100%;
            height: auto;
            position: static;
        }
        .detail-sec{
            margin-left: 0;
            padding: 13px 0 0 0;
        }
    }
    .comment_reply > ul > li{
        margin-left: 0;
    }
    .comment_reply > ul > li .content .img-block{
        width: 100%;
        height: 60px;
        margin: 15px 0;
        text-align: left;
        position: static;
        img{
            width: 60px;
                float: left;
        }
    }
}
@include media-breakpoint-down(md) {
    .right-wraper{
       
        display: none;
    }
    .blog_search h4{
        font-size: rem(12);
        font-weight: $font-weight-bold;
        padding-bottom: 13px;
    }
    .search-block{
        padding-right: 87px;
        .btn{
            top: -10px;
            right: 0;
            position: absolute;
            padding: 9px 15px;
        }
    }
    .rightBx{
        padding: 0;
    }
    .banner-share{
        display: none;
        right: 0;
        top: 47px;
    }
    .banner-share span a {
        box-shadow: 0 0 5px 1px rgba(0,0,0,0.05);
    }
}
.blog-perview{
    img{
            padding: 20px 0 0px 0;
    }
    padding: 20px !important;
    p{
        font-size: 16px;
        padding: 15px 0 0 0;
            color: #9b9b9b;
            span{
                padding: 0px !important;
                    display: inline;
            }

    }
    h4{
    font-size: 24px;
    color: #7c899a;
    padding: 20px 0 5px 0
    }
    ul{
        li{
            span{
                
            }
        }
    }

}
 .blog-form-area{
          background: $white;
        @include box-shadow(1px 1px 20px 1px rgba(0, 0, 0, 0.05));
        padding: 12px;
        margin: 17px 0 0 0;
    }
.circle-bg{
    width: 67px;
    height: 67px;
    background: #b2b2b2;
}
.comment_reply ul li ul {
@include media-breakpoint-down(xs) {
    margin:0px;
    }
    @include media-breakpoint-down(sm) {
    margin:0px;
    }
}
@include media-breakpoint-down(md) {
    .leftPanelOuter {
        margin-bottom: 5px;
    }
}
@include media-breakpoint-down(sm) {
    .blog-view {
        padding: 15px;
    }
    .padd25 {
        padding: 15px;
    }
    .pagination-bottom {
        margin: 0 0 5px 0;
    }
    .pagination {
        margin: 0;
    }
}



.rtl {
    .blog_search {
        border-width: 1px 1px 1px 0;
    }
    // .blog-list .detail-sec {
    //     margin-left: 0;
    //     margin-right: 277px;
    // }
}