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

nav{padding:10px;
    font-size: 14px;
    width: 100%;
   position: fixed;
   top: -14px;
   /*background:rgba(0, 0, 0, 0.95);/*rgb(0, 45, 51);*/
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgb(22, 40, 50), rgba(0, 0, 0, 0.9)); 

 transition: top 1.5s;
  z-index: 10;
}

#website_name{ color:#fff;
        margin-bottom: 15px;
        font-family: serif; 
        font-size:28px;
       text-transform:capitalize;
       font-weight: bold;
       word-spacing: 2.8px;}


#website_name span{
              font-family: serif;  }

#website_name img{ width: 35px;
                  object-fit: cover;}

#website_name #profile-image img{ width: 32px;
                                 height: 32px;
                               float: right;
                              margin-top: 5px;
                          border-radius: 50%;
                        object-fit: cover;}

#website_name::after{
              content: '';
              height: 1px;
              display: block; 
               background:rgba(255, 255, 255, 0.2);
                }

nav #login-active-btn{padding:4px 60px;
                border-radius: 20px;
                border: 1px solid white;
                color: white;
                background: inherit;
                text-transform: capitalize;
                cursor: pointer;
              float: right;
             margin-top: 9px;
           font-size: 14px;
          font-family: sans-serif;
         font-weight: normal;
      display: none;}

.active_btn{color:aqua;
           border: 1px solid teal;}

nav #top-nav-bar{ display: grid;
                 grid-template-columns: repeat(6, 1fr);
                 list-style-type: none;
                 text-align: center;
                align-items: center;
                grid-gap: 2px;}

nav ul li{
           color:white;
           text-transform:capitalize;
           font-size: 13.5px;
            cursor: pointer; }


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






main{ 
      /*background:rgba(0, 0, 0, 0.9);rgb(245, 245, 255) ;*/
       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;}

::placeholder{font-size: 13px;}


nav ul li .badges{background:rgb(221 ,22, 66);
                 color: white;
                  padding: 1px 1.5px;
                 border-radius:2px;
               font-size: 10px;}


nav ul li .text-links{margin-left: 10px;}


nav ul #more-link{ display:none;
                  float: right;}

nav ul #search-link{float: right;
                   padding:3px 20px;}


#search-wrapper{margin-top: 20px;
                display:none;}

#search_input{
    width: 80%;
    margin-bottom: 0;
    display: inline; 
    padding: 4px;
    padding-left: 10px;
    background:rgba(0, 0, 0, 0.1);
    color: white;
    border: 1.5px solid rgba(254, 250, 250, 0.3);
    font-size: 14px;
    outline: none;
}

#search-btn{ width: 20%;
           padding: 4px;
         border: 1.5px solid rgba(254, 250, 250, 0.3);
          background:rgba(0, 0, 0, 0.2);
    color: white; 
   border-radius:0px 20px 20px 0px;
    font-size: 14px;
   cursor: pointer;
  outline: none;}

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

nav ul li:hover{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){

nav ul li .text-links{ display: none;}

nav ul li i{font-size: 17px;}

nav ul #more-link{ display:inline; }

#right-section{display: none;}
#left-section{display: none;}
}


@media screen and (max-width: 770px){

nav #top-nav-bar{ 
                 grid-template-columns: repeat(6, 1fr);
                grid-gap: 2px;}

.hide_small{display: none;}

}


@media screen and (max-width:500px){

nav{padding: 10px 2px;}

nav #website_name{ font-size:25px;}

nav #login-active-btn{ padding:4px 30px;
                      margin-top: 5px;
                      margin-right: 3px;}

#website_name img{ width: 30px;}

nav ul li{padding: 5px 12px;}

nav ul li i{font-size: 15px;}

 .active_link{color: aqua;
            border: none;
            box-shadow:unset;
            border-radius:unset;}

 main{margin-top: 35px;}
}

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




#welcome-text{ font-style: oblique;
              font-family: serif;
              font-size: 14px;
              margin-bottom: 10px;
              opacity: 0.7; }

#user-profile-wrapper{padding: 5px;}

#user-picture-wrapper{text-align: center; border: 1px solid rgba(255,255,255,0.1); padding: 5px;}


#user-picture-wrapper img{ width: 130px;
                          height: 130px;
                          object-fit: cover;
                           border-radius: 50%;
                            border: 2px solid rgba(255,255,255,0.4); }

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

#user-picture-wrapper img{ width: 190px;
                          height: 190px;
                          object-fit: cover;
                           border-radius: 50%;
                            border: 2px solid rgba(255,255,255,0.4); }}


#user-profile-wrapper ul li{cursor: pointer; 
                           margin-top: 48px;
                            margin-left: 15px; 
                            list-style: none;
                         font-size: 15px;
                         text-transform:capitalize;
                        word-spacing: 2px;
                    display: grid;
                         grid-template-columns: 10% 80%;
                      border-bottom: 1px solid rgba(245, 245, 250, 0.1);
                     align-items: center;
                    text-align:left;
                  grid-gap: 2px;}

#user-profile-wrapper ul li i{font-size: 13px;}


/* sidebar navigation styles  on small devices*/

nav #sidebar-section{
            padding-bottom:100px;
             padding-top:2px;
             display:none;
            margin-top: 30px;}


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

nav #sidebar-section{display: none;}}


@media screen and (max-width: 600px){

#website_name #profile-image img{ width: 30px;
                                 height: 30px;
                               float: right;
                              margin-top: 6px;
                          border-radius: 50%;
                        object-fit: cover;
                        margin-right: 2px;}}


#side-bar-wrapper{padding: 5px; display: grid;
                   grid-template-columns: repeat(2, 1fr);
                   grid-gap: 5px;}


@media screen and (max-width: 450px){
#side-bar-wrapper{
                   grid-template-columns: repeat(1, 1fr);
                   grid-gap:0;}

#side-bar-wrapper #ul_section2{padding-top: 0;}

#side-bar-wrapper #side_bar_section2_first_link{margin-top: 0; padding-top: 0;}
}


 #side-bar-wrapper ul li{cursor: pointer;
                         margin-top: 10px;
                           list-style: none;
                            font-size: 14.5px;
                            margin-bottom: 42px;
                           text-transform: capitalize;
                           word-spacing: 2px;
                         display: grid;
                         grid-template-columns: 10% 80%;
                      border-bottom: 1px solid rgba(245, 245, 250, 0.1);
                     align-items: center;
                    text-align:left;}

#side-bar-wrapper ul li i{font-size: 13px;}


#side-bar-wrapper  #search-sidebar-link{display: none;}


/*grid system*/

#sections-wrapper{display: grid;
                  grid-template-columns: 25% 50% 25%;
                  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);
      padding:5px 10px; 
      min-height: 800px;}


@media screen and (max-width: 600px){
         #center-section{padding:2px 0;}
     }


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


.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;}


/*monetise styles*/

#monetise-modal{}

#monetise-inputs-wrapper label {
                   font-weight:bold;
                   font-size: 14px;
                   word-spacing: 1.9px;
                   margin: unset;
                  margin-bottom: 5px;
                  color: rgba(0, 0, 0, 0.9);}


#monetise-inputs-wrapper input {
                   margin:unset; 
                   width:100%;
                    padding:5px;
                 border:1px solid rgba(0, 0, 0, 0.3);
                   outline: none;
                   background: unset;
                   color: unset;
                   margin-bottom: 25px;
                 }


#monetise-inputs-wrapper select{
       width: 100%;
     border: 1px solid rgba(0, 0, 0, 0.3);
     opacity: 0.8;
      outline: none;
      padding: 5px;
      font-size: 13px;
      margin-bottom: 25px;
       }



#monetise-inputs-wrapper button {border-radius:20px;
                     margin-bottom:10px;
                    padding: 8px;
                      width:100%;
                       background:#078;
                       color:white;
                      border: 2px solid white;
                     cursor: pointer;
                     font-size: 14px;
                    outline: none;
                   word-spacing: 1.6px;}

#monetise-inputs-wrapper h4{text-align: center;}


#monetise-inputs-wrapper p{padding: 4px 1px;}

#monetise-inputs-wrapper ol{border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 6px;}

#monetise-inputs-wrapper li{margin-bottom: 5px;}

#monetise-inputs-wrapper strong{

    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
}

#monetise-inputs-wrapper hr{color: rgba(0, 0, 0, 1.0);}