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

#insufficient-points-alert{z-index: 9999999;}


#insufficient-points-content{padding: 10px;
                          border:4px solid rgba(0, 0, 0, 0.7);
                         max-width: 600px;
                     z-index: 9999999;}

@media screen and (max-width: 500px){
  #insufficient-points-content{width: 100%;
                              margin:10px 0;}
}

#hide-recharge-modal{display: none;}


#insufficient-points-info{
                 word-spacing: 1.6px;
                  line-height:23px;
                 text-align: left;
               font-size: 16px;}

#points-needed{font-weight: bold;
   font-size: 15px;}


/*recharging points styling */

#recharge-wrapper h4{text-transform: capitalize;
                   text-align: center;
                   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                   word-spacing: 1.6px;
                   margin-bottom: 20px;
                   margin-top: 0;
                   padding-top: 0;
                 }



#recharge-points-section{display: none;}

#recharge-wrapper .title{ font-size: 14.5px; 
                         word-spacing: 1.8px;
                        margin-bottom: 12px;}

#recharge-wrapper .title span{color: #124;}

#recharge-wrapper ul{margin-left: 14px;
                    margin-bottom: 20px;}

#recharge-wrapper ul li{font-size: 15px;
            margin:10px 0;
           word-spacing: 1.5px;}

#recharge-wrapper ul #recharge-calculations{display: none;}

#recharge-wrapper ul li b{font-size:14px;}

#recharge-wrapper ul #amount-to-pay{font-size: 18px;
                                    font-weight: bold;}

#recharge-wrapper input{border: 1px solid rgba(0, 0, 0, 0.3);
 padding-left: 7px;}

 #recharge-wrapper input::placeholder{color:rgba(0, 0, 0, 1);
  font-size: 15px;}

#recharge-wrapper button{
 padding: 3px 15px;
   outline: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
   font-size: 14px;
  cursor: pointer;
  margin-top: 25px;
  color: grey;
  width: 100%;
 word-spacing: 1.9px;}




#uploads-wrapper{padding-top:5px;
                   z-index: 999;
                  }

#uploads-wrapper-modal-content{
         /*background: rgba(0, 0, 0, 1.0);*/
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgb(22, 40, 50), rgba(0, 0, 0, 0.9)); 
          border: 1px solid rgba(255, 255, 255, 0.1);
         max-width: 500px;}

#uploads-wrapper #hide-uploads-wrapper-modal{
                         text-align: right;}


#uploads-wrapper #hide-uploads-wrapper-modal #available-points{float: left;
                    color: skyblue;}

#uploads-wrapper #hide-uploads-wrapper-modal b{
                         color: rgba(255, 255, 255, 0.8);
                         font-size: 13px;
                       font-weight: normal;}


@media screen and (min-width: 600px){
#options-wrapper{display: grid;
               grid-template-columns:100%;
               grid-gap: 60px;
                }
        }


#options-wrapper  ul{list-style-type: none;}


#options-wrapper ul li{
                     margin-bottom:40px;
                     cursor: pointer;
                  word-spacing: 2px;
                  text-transform:capitalize ;
                opacity: 1;
             border-bottom: 1px solid rgba(255, 255, 255, 0.09);
             color:white;
            display: grid;
           grid-template-columns:10% 80%;
         grid-gap: 2px;
        text-align: left;
        align-items: center;}

#options-wrapper ul li i{font-size:14px;
                        color:rgba(255, 255, 255, 0.8);}

#options-wrapper ul li sup{text-transform: capitalize;
                           color: aqua;
                           font-size: 12px;}


#uploads-wrapper .hide-post-modal{text-align: right;
                                  margin-bottom: 22px;}

#uploads-wrapper .hide-post-modal i{  
     font-size: 20px;
    opacity: 0.7;
      cursor: pointer; }


.terms_and_conditions_wrapper{padding-left: 5px;
                            margin-top: 10px;}


.terms_and_conditions_wrapper .title{ 
                                      font-size: 14.5px; 
                                     word-spacing: 1.8px;
                                   margin-bottom: 12px;}

.terms_and_conditions_wrapper .title b{ 
                                      font-size: 14.5px; 
                                     word-spacing: 1.8px;
                                      font-weight: normal;
                                   color: #045;}




.terms_and_conditions_wrapper ul li{ 
                                      font-size: 14px; 
                                     word-spacing: 1.7px;
                                   margin-bottom: 15px;
                                 text-align:left;}

.terms_and_conditions_wrapper ul li b{ color: rgba(0, 0, 0, 0.9);}



.example{padding-left: 3px; 
     color: #038;
   cursor: pointer;
 text-decoration: none;}

.terms_and_conditions_wrapper .conditons-btns {}

.conditons-btns button{
 padding: 3px 15px;
   margin:13px;
   outline: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
   font-size: 14px;
  cursor: pointer;}





.conditons-btns .accept{
      background: #057;
      color: white;
      word-spacing: 1.7px;
}

 .conditons-btns .decline{
     border: 1px solid rgba(0, 0, 0, 0.3);
     color: rgba(0, 0, 0, 0.8);
     word-spacing: 1.7px;
}



#uploads-wrapper .w3-modal-content{padding:20px; 
                  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
                 top: 0px;
                  margin-bottom: 100px;
               margin-top: 50px;
             max-width: 500px;}

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

@media screen and (max-width: 600px){
#uploads-wrapper .w3-modal-content{ width: 100%;
                                   margin: 0;
                                 margin-top: 55px;}}

#uploads-wrapper form{ display:; }

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



#uploads-wrapper .privacy_label{margin-top: 25px;}

#uploads-wrapper input{
     width: 100%;
     margin-bottom: 30px;
     border: 1px solid rgba(0, 0, 0, 0.2);
     outline: none;
     padding: 3px;
     color: rgba(0, 0, 0, 0.9);
   background: unset;}


#uploads-wrapper textarea{outline: none;
                          overflow-y: auto;}

#uploads-wrapper select{
     width: 100%;
     border: 1px solid rgba(0, 0, 0, 0.2);
     opacity: 0.4;
     outline: none;
     padding: 4px;
     font-size: 13px;}

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


#uploads-wrapper .label_file_btn{
     background:rgb(230, 230, 240);
     padding:5px 15px;
    color:#027;
     font-size: 14px;
     word-spacing: 1.9px;
     font-weight:normal;}

#uploads-wrapper .option_file{font-size: 12px;}

#uploads-wrapper label[for=photo_file]{
                      margin-top: 10px;
                     margin-bottom: 10px;}


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

#app_category_label,#app_description_label, #song_description_label,#book_description_label{margin-top: 30px; word-spacing: 1.9px;}


#product_description,#app_description, #song_description,#book_description{overflow: hidden; 
                     resize: none;
                      width: 100%; 
                      padding: 3px;
                    border: 1px solid rgba(0, 0, 0, 0.2);
                      margin-bottom: 10px;
                     font-size: 13.4px;
                 color: rgba(0, 0, 0, 0.9);}


#product_description{margin-bottom: 25px;}

#app_description,#book_description{margin-bottom:1px;}

#app_description:focus{font-size: 14px;
                      padding: 6px;}

#app_description, #product_description::placeholder{font-size: 12px ;
  opacity: 0.8; }



  label[for=product_picture]{margin-bottom:15px;}


#product_category{opacity: 0.3;}

#product_category,#product_currency{margin-bottom: 30px ;}


label[for=document_file]{margin-bottom: 0px;
                        margin-top: 10px;}

#document_post_btn{margin-top: 0px;}



#advert_post_form{display: none;}


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

#product_type{margin-bottom: 30px; opacity: 0.3;}


label[for=product_file]{margin-bottom:6px;}


#video_poster_file_label{margin-bottom: 0px;}

#video_post_btn{margin-top:0px;}

.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,#post_content,#advert_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;
                           color: rgba(0, 0, 0, 0.9);}

#post_content::placeholder{
                            font-size: 13px;
                          word-spacing: 1.8px;
                          color: rgba(0, 0, 0, 0.9);}

#advert_content::placeholder{
                             font-size: 13px;
                            color: rgba(0, 0, 0, 0.9);
                          word-spacing: 1.8px;}


#general-post-file_label{margin-bottom:5px;}

#post_form #post_btn{margin-top: 10px;}

#privacy-span{float: left;}


#advert_form #advert_url::placeholder{font-size: 11px;
                                       color: rgba(0, 0, 0, 0.9);}

.option_input{font-size: 11.3px;
             opacity: 0.8;}


#privacy-span select{display: inline;
                     width: unset;
                      padding:0;
                     opacity: 0.62;}


#poster-modal .w3-modal-content{margin-top: 48px;
                                padding: 10px 5px;}

#poster-modal .hide-post-modal i{  
     font-size: 16px;
    opacity: 0.8;
      cursor: pointer; 
    margin-bottom: 10px;
}
.close{font-size: 13px;
       padding-left: 5px;
        color: rgb(200, 33, 33);
      cursor: pointer;}

#poster-modal #img-wrapper{ border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 2px ; 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
 grid-gap: 5px;}


#poster-modal .img-item img{width:100%;
                              object-fit: cover;}

.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%;
                        overflow-y: auto;}


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

/*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;
   font-size: 14px;
   word-spacing: 1.8px; }

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