*{box-sizing: border-box;
   padding: 0;
    margin: 0;}

body{background: rgba(0, 0, 0, 0.1);}

#title{padding: 5px;
      margin-bottom: 15px;
      font-size: 18px;
      font-weight: bold;
    opacity: 0.6;
    text-align: center;
   word-spacing: 4px;
   text-transform: uppercase;
   text-decoration: underline;
   text-decoration-color: rgba(0, 0, 0, 0.3);
   font-family:serif;
   font-style: oblique;
  }



#home{float: left;
     padding-left:5px ;
        font-size: 12px;
       color: #079;
      text-decoration: underline;
      text-decoration-color: rgba(0, 17, 151, 0.4);
     cursor: pointer;
    font-weight: normal;
    text-transform: unset;
   opacity:1;
   word-spacing:1.7px;
 margin-top: 5px;}


#blog-search-wrapper{margin:10px auto;
             padding: 1px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          }

#blog-search-wrapper input{width: 80%;
                   padding: 4px;
                   padding-left: 10px;
                  border-radius:20px 0 0 20px;
                   border:1px solid rgba(0, 0, 0, 0.3) ;
                 outline: none;
              margin-bottom: 10px;
           font-size: 14px;}


#blog-search-wrapper input::placeholder{font-size: 12px;
                                 opacity: 0.7;}

#blog-search-wrapper  button{width: 20%;
                   padding: 4px;
                  border-radius: 0 20px 20px 0;
                 border:1px solid rgba(0, 0, 0, 0.3) ;
               color: #fff;
             outline: none;
            cursor: pointer;
         color: rgba(0, 0, 0, 0.7);
         font-size: 14px;
         background: rgb(240, 240, 253);
         }

main{padding:10px;
      background-color:rgb(245, 245, 255);

     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
   margin-top: 1px;} 

@media screen and (min-width: 750px){


main{ margin:auto 15%;
    padding:40px;
      background-color:rgb(245, 245, 255);

     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);}

        }


.active_element{
            background: rgb(123 ,142, 137);}


 .blog-wrapper{box-shadow:0px 1px 0px 1px rgba(0, 0, 0, 0.1); padding-bottom: 20px; margin-bottom: 0;
 }

 .blog-wrapper .blog-header-info{ padding: 4px; }


.blog-wrapper .blog-header-info .website_name{ color:#034; text-transform: capitalize; font-size: 12px;}

.blog-wrapper .blog-header-info .time{ color:#034; float: right; opacity: 0.8; font-size: 11px;  padding:5px 3px;}


.blog-wrapper .blog-title{
    padding:4px 1px; 
    text-align: justify;
    margin-bottom: 2.4px;
   margin-top: 2px;
   font-size: 15.5px;
   font-weight: bold;
   opacity: 0.8;
   }

.blog-wrapper .content-wrapper{ 
    padding:4px  10px; 
    text-align: justify;
    margin-bottom: 20px;
   margin-top: 10px;
   font-size: 14.3px;
   line-height:26px;
   word-wrap: break-word;
   }
.blog-wrapper .content-wrapper .read-more{ 
color:rgba(18 ,99, 193,0.8);
 cursor: pointer; 
  font-size: 14.5px;
 padding-left: 5px;
  display: block;}

.blog-wrapper .post-image-wrapper{
 height: 320px; 
  margin-top: 2px;
   display: none;}

/*reducing the image height on small devices*/
@media screen and (max-width: 500px){

.blog-wrapper .post-image-wrapper{ height: 210px;}

.blog-wrapper .post-action-text{display: none;}


.side-bar-wrapper  .search-sidebar-link{display: block; margin-top: 20px;}

.side-bar-wrapper  .my-profile-sidebar-link{
margin-top: 30px;}}

.blog-wrapper .post-image-wrapper img{ 
    width:100% ;
    object-fit: cover;
    height: inherit;
    border: 1px solid white;}

 .blog-wrapper .post-video-wrapper{ height: 100%;  margin-top: 2px; display: none;} 

.blog-wrapper .post-video-wrapper video{ width: 100%; height: inherit;}

.blog-wrapper .post-document-file-wrapper{  margin-top: 2px; text-align: center; border: 1px solid rgba(222,223,250,0.6); display: none;}

.blog-wrapper .post-document-file-wrapper img{ width: 200px; }

.blog-wrapper .post-actions-wrapper{display: grid;
                       grid-template-columns: repeat(3, 1fr);
                       grid-gap: 5px;
                      }

.blog-wrapper .post-actions-wrapper button{ width: 100%; font-size: 12px; border: none; outline: none;
   color:#034; border-radius: 20px; cursor: pointer; }

.blog-wrapper .post-actions-wrapper button i{  padding-right: 3px;
  font-size: 11px; }

.blog-wrapper .post-actions-wrapper .download-wrapper{
   text-decoration:none; display: none;}


.blog-wrapper .post-actions-wrapper .views-btn{margin-top: 25px; display: none;}


.blog-wrapper .post-actions-wrapper .comment-btn{margin-top: 25px;
  display: none;}

.blog-wrapper .post-actions-wrapper .share-btn{margin-top: 25px;
  display: none;}

.blog-wrapper .post-actions-wrapper .save-btn{display:none; background:rgba(0, 55, 45, 0.8); color: white;}


.blog-wrapper .post-actions-wrapper .post-like-wrapper{ margin-left: 4px; }

.blog-wrapper .post-actions-wrapper .post-more-wrapper{ margin-right: 4px; }

.blog-wrapper .post-actions-wrapper button .counts{ font-size: 11px; padding-left: 3px;}


.post-comment-textarea-wrapper { margin-top: 10px; display: grid;  grid-template-columns:80% 20%;
margin-top: 20px; display: none;
 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-left: 28px;}

.post-comment-textarea-wrapper .comment-textarea-div{margin-left: 5px;}

.post-comment-textarea-wrapper .comment-btn-div{margin-right: 5px;}

.post-comment-textarea-wrapper textarea{width:100%;
                                  height: 30px; 
                                  outline: none;
                                 resize: none;
                                 overflow: hidden;
                                 padding:3px 10px;
                                 border: 2px solid rgba(0, 0, 0, 0.2);

                                  }

.post-comment-textarea-wrapper input, textarea::placeholder{font-size: 11px;}

.post-comment-textarea-wrapper  button{width:100%;
                               height: 30px;
                               border: 1px solid rgba(0, 0, 0, 0.2);
                               background:rgba(0, 0, 0, 0.2);
                              color:/*rgb(240, 240, 250)*/rgba(245,245,250);
                              outline: none;
                              cursor: pointer;
                               }


.load-comments{ margin-left: 35px; }





.message-dialog-wrapper{display: none; 
                        z-index: 999;
                       position: fixed;
                        top: 0;
                        left: 0;
                        background: rgb(0, 0, 0);
                        background: rgba(0, 0, 0, 0.5);
                        width: 100%;
                        height: 100%;
                        
                        }


.message-dialog-content{background: rgb(250, 250, 255);
                        padding: 10px 25px;
                      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
                     margin: 5% auto;
                   width: 80%;}

/*modifyng the modal size on big devices*/

@media screen and (min-width: 700px){
.message-dialog-content{
                     margin: 5% auto;
                   width: 50%;}
               }

.message-dialog-content .message-title{ font-weight: bold; font-size: 14px;}

.message-dialog-content .message-content{ margin-top: 10px; }

.message-dialog-btn-wrapper{ margin-top: 30px; padding-bottom:15px ;}

.message-dialog-btn-wrapper button{ padding: 5px 15px;
                                    border: none;
                                     outline: none;
                                     border-radius: 3px;
                                     cursor: pointer;
                                      }


.message-dialog-btn-wrapper .ok-btn{margin-right: 25px; }

.message-dialog-btn-wrapper .cancel-btn{border: 1px solid rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.8);}



#load-more-posts-wrapper{text-align: center;
                       margin: 30px auto;
                       font-size: 13px;}

#load-more-posts-wrapper  #see-more-posts{ 
     color: /*rgb(19 ,139, 144)*/ rgba(255, 255, 255, 1.0); cursor: pointer;
   word-spacing: 1.8px;
   background: rgb(123 ,142, 137);
  padding: 5px 15px;
  border-radius: 20px;}
a{text-decoration: none;}


.search-all-wrapper{
                   text-align: center;
                   background:rgba(245, 245, 255, 1.0);
                   padding: 30px;
                  }
.search-all-wrapper button{ padding: 3px 20px;
                           background: #079;
                            outline: none;
                            border: none;
                            border-radius: 20px;
                            color: white;
                             word-spacing: 1.9px;
                             font-size: 13px; 
                             cursor: pointer;
                            }


.post-now-wrapper{
                   text-align: center;
                   background:rgba(245, 245, 255, 1.0);
                   padding: 30px;
                  }
.post-now-wrapper button{ padding: 3px 20px;
                           background: #079;
                            outline: none;
                            border: none;
                            border-radius: 20px;
                            color: white;
                             word-spacing: 1.9px;
                             font-size: 13px; 
                             cursor: pointer;
                            }


/*blog edit style*/

label{opacity: 0.7;
      font-size:13px;
      display: block;
      font-weight:bold;
      word-spacing: 1.9px;
       }


input{width: 100%;
     margin-bottom: 30px;
      border: 1px solid rgba(0, 0, 0, 0.1);
     outline: none;
     padding: 3px;}


textarea{outline: none;}

button[type=submit]{border-radius:20px;
                     margin-bottom:10px;
                     margin-top: 35px;
                    padding: 7px;
                      width:100%;
                       background:#278;
                       color:white;
                      border: 2px solid white;
                     cursor: pointer;
                     font-size: 14px;
                    outline: none;}


.file_labels{width: 100%;
     border: 1px solid rgba(0,0,0,0.2);
      margin-bottom: 30px;
     padding: 3px;
     cursor: pointer;
      }


.label_file_btn{
     background:rgb(230, 240, 245);
     padding:5px 15px;
    color:#000;
     font-size: 13px;
     word-spacing: 1.9px;
     font-weight:normal;}

.option_file{font-size: 12px;}

.blog-headline{font-size: 11px;}

#blog_title{font-size: 14px;}

#characters{float: right;
            font-size: 11px;
             font-weight: normal;
           opacity: 0.9;
       }

#characters i{padding-right: 2px;
            font-size: 10px;
           opacity:1;}

#blog_content{overflow: hidden; 
              resize: none;
            width: 100%; 
            padding: 5px;
            border: 1px solid rgba(0, 0, 0, 0.2);
            margin-bottom: 30px;
           height: 120px;
          font-size: 14px;}


#blog_content::placeholder{font-size: 11px;
                            opacity: 0.6;}




/*upload progress bar styling*/

.uploader-wrapper{display: none;}


.progress-bar_wrapper{background: #f2f2f2;
                     border: 1px solid rgba(0, 0, 0, 0.3);
                     border-radius: 20px 0 0 20px;
                    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
                     margin:5px auto 20px auto;}

.progress-bar{background:#1a73e8;
              color: white; 
              padding:2px 0;
               border-radius: 20px 0 0 20px;
              text-align: center;
             font-size: 14px;
            }

.file_uploading{opacity: 0.8;
                word-spacing: 1.9px;
                 font-size: 12px;}

.file-size{ text-align: center;
            padding: 6px;
            margin-bottom: 20px;
            border: 1px solid rgba(0, 0, 0, 0.2); 
           word-spacing: 1.9px; 
        opacity: 0.8;
        font-size: 17px;
       font-weight: bold;}


.progress-file-size,.total-file-size{ font-size: 18px; }



.normal-font{ font-weight: normal; 
              font-size: 12px;}

.of{font-weight: normal; 
    font-size: 12.5px;
   padding: 1px 7px;}

 #filename{ text-align: center;
            padding: 8px;
            margin-top: 20px;
            border: 1px solid rgba(0, 0, 0, 0.2); 
           word-spacing: 1.9px; 
        opacity: 0.8;
        font-size: 14px;}

.target{ margin:5px auto 10px auto;
        text-align: center;
        border: 1px solid rgba(0, 0, 0, 0.1);  
      display: none;
      word-spacing: 1.9px;
    color: black;
   font-size: 13.5px;}




 .hide-post-modal{ text-align: right;}
 .hide-post-modal i{  
     font-size: 20px;
    opacity: 0.7;
      cursor: pointer; }


.w3-modal-content{ padding: 20px; 
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
                top: 0px;
                  margin-bottom: 100px;}

@media screen and (min-width: 800px){
.w3-modal-content{ width: 50%;
                  
                   }

}