*{ padding: 0;
   margin: 0;
   box-sizing: border-box;
  font-family: sans-serif;
  text-decoration: none;
  outline: none;
  }


#left-section{margin-top: 45px;}

main{  padding:5px;
       padding-top:50px;
       margin-top: 46px;
       min-height:800px;
       background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgb(22, 40, 50), rgba(0, 0, 0, 0.9)); 
    }

.active_link{color: aqua;
            border-bottom:1px solid white;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
            border-radius: 20px;}

@media screen and (max-width: 995px){
#right-section{display: none;}
#left-section{display: none;}
}


/* main  content style*/

/*left section on large  screens styles*/
#left-section{ position: fixed; 
              height:100%;
              width:25%;
              overflow-y: auto;
            padding-bottom: 200px;
          /*background:rgba(0, 0, 0, 0.95); #034rgb(0, 45, 51);*/ 
          background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgb(22, 40, 50), rgba(0, 0, 0, 0.9)); 
          color: white;
           z-index: 999;}

#side-bar-links ul li{cursor: pointer; 
                      margin-top: 48px;
                     margin-left: 15px; 
                     list-style: none;
                         font-size: 15px;
                        text-transform:capitalize;
                        word-spacing: 2px;
                       line-height: 27px;
                       border-bottom: 1px solid rgba(255, 255, 255, 0.15);
                     }


/*grid system*/

#sections-wrapper{display: grid;
                  grid-template-columns: 25% 70% 15%;
                  grid-gap: 10px;}

#dummy-left-section{ visibility: hidden; }

/*center section styles */
 #center-section{ border: 1px solid /*rgba(0, 0, 0, 0.1);*/rgba(255, 255, 255, 0.1); 
      min-height: 800px;
     position: relative;}


/* modifying the left section on medium screens*/

@media screen and (max-width:795px){
#dummy-left-section{ display:none; }

#sections-wrapper{grid-template-columns:100%;
                  grid-gap: 10px;}
}


#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: 85%;}

/*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);}


#alert-info{font-size:15px;
            font-weight: bold;
            margin-bottom: 5px;}

.alert_ok_btn{
   margin-right: 25px;
    background: #068;
     color: white;
      font-size: 14px;
   padding: 7px 20px;
   border: none;
   outline: none;
   border-radius: 3px;
  cursor: pointer;}

/*right sections style*/
#right-section{margin-right: 14px;
               position: fixed; 
              height:100%;
              width:15%;
              overflow-y: auto;
             visibility: visible;}


.load_more_posts{ text-align: center;
                padding:15px 2px;
                word-spacing: 1.6px;
                font-size: 15px;
                cursor:pointer;
                color: aqua;
                display: none;}


#loader-wrapper{text-align:center;
                padding:50px 2px;}

#loader-wrapper img{width: 45px;}

#loader-wrapper #loading-text{color:aqua;
                            font-weight: bold;
                           margin-top: 15px;
                         word-spacing: 1.9px;}




#image-preview{text-align: center;
              margin-bottom:5px;
              border: 1px solid rgba(0, 0, 0, 0.03);
              padding: 2px;
              border-radius: 3px;
             background: rgba(0, 33, 55, 0.01);
         display: none;}


#image-preview img{width: 210px;
                   height: 210px;
                   border-radius: 50%;
                  border: 3px solid white;
                  object-fit: cover;
                  padding: 3px;}


.hide-full-image{text-align: right;}

.hide-full-image i{font-size: 20px;
                 padding: 4px 10px;
               cursor: pointer;
            color: rgba(0, 0, 0, 0.7);}


.hide-full-image a{float: left;
                   color:#026;
                   margin-top: 5px;}


.hide-full-image a i{color: #034;
                     font-size: 13px;
                  padding:0 1px 0 5px;}



#full-image{ 
              border: 1px solid rgba(0, 0, 0, 0.2);
              border-radius: 3px;
             background: rgba(0, 33, 55, 0.01);}


#full-image img{width:100%;
                object-fit: cover;
                  padding: 2px;}




#post-navbar{padding:5px;
            background: rgba(200 ,200, 200,0.06);
            color:lightblue;
            margin-bottom: 0;
            position: sticky;
             top:0px;
            width: 100%;
            z-index:999;
            background: rgba(0, 0, 0, 0.9);
           width: 100%;
        transition: top 1.5s;}


#title{color: white;
     font-family: serif;
      font-style: oblique;
       text-shadow:2px;
      font-size: 19px;
    word-spacing: 1.8px;
  padding-left: 5px;
  margin-bottom: 0px;
  padding-bottom: 0;
  font-weight: bold;
 border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}


 #title i{font-size: 14px;}

.post-links-wrapper{margin-top: 4px;
                       text-align: left;
                     padding:7px 1px;
                   list-style: none;
                 display: grid;
               grid-template-columns: repeat(3, 1fr);
              text-align: center;
               align-items: center;
              grid-gap: 1px;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgb(22, 40, 50), rgba(0, 0, 0, 0.9));
            margin-left: 0; 
            }

#second-post-links-wrapper{text-align:center;
                       grid-template-columns: repeat(1, 1fr);
                        border-top: 1px solid rgba(255, 255, 255, 0.1);
                        display: none;}


.post-links-wrapper li{
                       font-size: 13px;
                   font-weight: bold;
                 cursor:pointer;
               padding: 2px;
             word-spacing: 1.6px;}


.post-links-wrapper li .fa-chevron-down{
                       font-size: 12px;
                color: rgba(255, 255, 255,0.5);}




.post-count{font-size: 11px;
               font-weight: normal;
               color: rgba(255, 255, 255, 0.8);
              padding-left: 2px;}



/*dropdowns styles*/

.dropdown-wrapper{position: relative;}

.dropdown-content{display: none;
                  position: absolute;
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgb(22, 40, 50), rgba(0, 0, 0, 0.9));
                padding:15px 8px;
                left: 0px;
                z-index: 2;
              text-align: left;
            font-weight: normal;
         width:100%;
        overflow-y: scroll;
        height:400px;
            }

@media screen and (max-width: 500px){
.dropdown-content{
         width:200px;}

}




.dropdown-content li{margin-bottom: 20px;
                  word-spacing: 1.6px;
                  border-bottom: 1px solid rgba(255,255, 255, 0.15);
                line-height: 25px;}



.post-active_link{color:aqua;
                   border: 1px solid teal;
                   border-radius: 3px;
                   box-shadow:0 2px 4px 0 rgba(0, 0, 0, 1) ;}



#sage-js-dropdown-content,#css-dropdown-content{display: none;}



.search_loader{text-align:center;
   margin:5px 0;
   padding:50px 0;
   background:rgb(245, 245, 255);
   display: none;
}

.search_loader img{ width: 25px;}



.post-search-wrapper{display: grid;
                           grid-template-columns: 80% 20%;
                            margin-bottom: 5px;
                            display: none;}

.post-search-wrapper input{width: 100%;
                                  padding: 4px;
                                  border: 1px solid rgba(255, 255, 255, 0.1);
                                  outline: none;
                                  background: inherit;
                                  color: rgba(255, 255, 255, 0.8);}


.post-search-wrapper input::placeholder{
                                  word-spacing: 1.7px;
                                  color: rgba(255, 255, 255, 0.5); }



.post-search-wrapper button{width: 100%;
                                   padding: 4px;
                                  border: 1px solid rgba(255, 255, 255, 0.1);
                                  outline: none;
                                  cursor: pointer;
                                background: rgba(0, 0,0,0.1);
                               color: rgba(255, 255, 255, 0.1);}


.load_more_post{ text-align: center;
                     padding:20px 2px 15px 2px;
                     color: skyblue;
                     word-spacing: 1.6px;
                     font-size: 16px;
                     cursor:pointer;
                  background:rgba(0, 0, 0, 0.2);
                  display: none;}

   
.no-post-alert{text-align: center;
                  padding: 50px 2px;
                  font-size: 15px;
                  font-weight: bold;
                  background: rgb(245, 245, 255);
                  word-spacing: 1.7px;}

.no-post-alert .btn-wrapper{margin-top:20px;
                              text-align: center;}
.no-post-alert .btn-wrapper button{padding: 3px 25px;
                          background: #068;
                          color: white;
                        border-radius: 20px;
                     font-weight: normal;
                   border: 2px solid white;
                 word-spacing: 1.6px;
                 cursor: pointer;
                 font-size: 14px;}




.no-post-alert{text-align: center;
                  padding: 50px 2px;
                  font-size: 15px;
                  font-weight: bold;
                  background: rgb(245, 245, 255);
                  word-spacing: 1.7px;}
.no-post-alert .btn-wrapper{margin-top:20px;
                              text-align: center;}


.no-post-alert .btn-wrapper button{padding: 4px 25px;
                          background: #068;
                          color: white;
                        border-radius: 20px;
                     font-weight: normal;
                   border: 2px solid white;
                 word-spacing: 1.6px;
                 cursor: pointer;
                 font-size: 14px;}


.post-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%;
                        text-align: left;}

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

/*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: 15px; word-spacing: 1.7px;}

.message-dialog-content .message-content{ margin-top: 10px;
                                 word-spacing: 1.6px; 
                                line-height: 20px;}

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

.delete_ok_btn{
   margin-right: 25px;
    background: #068;
     color: white;
      font-size: 14px;
   padding: 7px 15px;
   border: none;
   outline: none;
   border-radius: 3px;
  cursor: pointer;}

.cancel-delete-btn{
border: 1px solid rgba(0, 0, 0, 0.2);
 color: rgba(0, 0, 0, 0.8);
padding: 5px 15px;
outline: none;
border-radius: 3px;
 cursor: pointer;
 font-size: 14px;}



.no-post-alert{text-align: center;
                  padding: 40px 2px;
                  font-size: 15px;
                  background: rgba(0,0,0,0.1);
                  word-spacing: 1.7px;
                 color: crimson;}

.no-post-alert .btn-wrapper{margin-top:20px;
                              text-align: center;}


.no-post-alert .btn-wrapper button{
                           padding: 4px 25px;
                          background: #034;
                          color: white;
                        border-radius: 20px;
                     font-weight: normal;
                   border: 1px solid rgba(255, 255, 255, 0.1);
                 word-spacing: 1.6px;
                 cursor: pointer;
                 font-size: 14px;}

#loader-wrapper{text-align:center;
                padding:80px 2px;}

#loader-wrapper img{width: 45px;}

#loader-wrapper #loading-text{color:aqua;
                            font-weight: bold;
                           margin-top: 15px;
                         word-spacing: 1.9px;}

.recent-uploads{box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 20px;
  background: inherit;
color: whitesmoke;
word-spacing: 1.7px;
font-weight: bold;
font-size: 17px;
text-transform: capitalize;
border: 1px solid rgba(255, 255, 255, 0.1);
display: none;
}

#prepend-data{margin-bottom: 10px;}


.fade{opacity:0.1;}