#dictionary-content-wrapper{
    /*box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.8); */
      background:rgba(200, 200, 200,0.05) ;
     color: rgba(255, 255, 255, 0.9);
     margin: 0 auto;
     max-width: 650px;
     background:rgba(0, 0, 0, 0.2);
 }

#dictionary-navbar{margin-bottom: 7px;}

#dictionary-navbar #header-wrapper{
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            grid-gap: 5px;
           list-style-type: none;
          align-items: center;
          text-align:center;
        color: white;
        font-size: 14px;
      background:rgba(200, 200, 200, 0.06);
     padding: 7px 5px;

    }

#dictionary-navbar h5{font-style: italic;
                      text-shadow: 2px 3px rgba(0, 0, 0, 1);
                       padding:0  0 4px 2px;
                       color: rgba(255, 255, 255, 0.7);
                       margin: 0;
                         padding: 0;
                       margin-bottom: 4px;
                       margin-left: 10px;
                       border-bottom: 1px solid rgba(0, 0, 0, 0.5);
                       font-family: serif;
                       text-align: right;
                     

                       }

#dictionary-navbar h5 i{
                       font-size: 14px;
                       margin-right: 5px;
                       }



#dictionary-navbar #header-wrapper li{
                       cursor: pointer;
                       padding: 3px;}

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

#dictionary-navbar #search-wrapper{
    margin:5px;
    display: block;
    position: relative;

}

#dictionary-navbar input{width: 100%;
          padding: 4px;
        outline: none;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        padding-left: 15px;
        background: rgba(0, 0, 0, 0.01);
      color: aqua;
    font-size: 15px;}

#dictionary-navbar #search::placeholder{color:rgba(255, 255, 255, 0.6);}


#dictionary-navbar #search-wrapper #search-suggesstions{
    list-style: none;
     position: absolute;
    width: 98%;
    z-index: 100;
 background:#123;
padding: 10px;
border-radius: 0 0 10px 10px;
overflow-y: auto;
max-height:350px;
display:none ;}


#dictionary-navbar #search-wrapper #search-suggesstions li{
      color: lightblue;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      text-transform: capitalize;
      padding: 13px;
      font-size: 16px;
      cursor: pointer;

   }


#dictionary-navbar #more-links-wrapper{
                        color: white;
                       list-style: none;
                        margin-top:30px;
                        margin-left: 10px;
                        display: none;
                      overflow-y:auto;
                   padding-bottom: 50px;
                   max-height:400px;}

#dictionary-navbar #more-links-wrapper li{ 
                         padding: 20px 10px;
                           border-bottom: 1px solid rgba(255, 255, 255, 0.09);
                           word-spacing: 1.7px;
                           font-size: 15px;
                           cursor: pointer;
                          display: grid;
                         grid-template-columns: 10% 90%;
                         align-items: center;
                    text-align:left;
                  grid-gap: 2px;

                        }


#header-wrapper .active_link{color:rgba(100, 200, 197, 1.0);
                     border-bottom: 1px solid grey;
                  border-radius: 5px;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);}




#dictionary-wrapper{position: relative;}

#main_dictionary_content{  
        border: 1px solid rgba(255, 255, 255, 0.03);
            padding:20px 10px 1px 10px; 
          margin-bottom: 10px;}

#dictionary-wrapper #main_dictionary_content ol{
            margin-left: 10px;
            line-height: 24px;
            word-spacing: 1.5px;
           
                     }

#append_list{height:190px;}

#append_word_of_the_day{display: none;}

#dictionary-wrapper #main_dictionary_content ol li{
                      margin-bottom: 22px;
                      padding-bottom: 4px;
                      border-bottom:1px solid rgba(0, 0, 0, 0.07);
            
                        }




#dictionary-wrapper ol li .english_word{
                      text-transform: capitalize;
                      font-size: 22px;
                      font-weight: bold;
                      color:rgba(255, 255, 255, 1.0);/*rgba(0, 200, 220, 1.0)*/;

                    }

#dictionary-wrapper ol li .meaning_in_bemba{
                        text-transform: capitalize;
                         margin-left: 5px;
                         font-size: 20px;
                         color: rgba(255, 255, 255, 0.9);
                     }

#dictionary-wrapper ol li .example-link{
                        /*color:#027;*/
                        color:teal;
                        cursor: pointer;
                        font-size: 14px;
                        margin-top: 4px;
                     }



#textarea-content_wrapper{display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        padding-top: 15px;
                        grid-gap: 4px;
                        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.6);
                         padding: 20px 2px;
                         background: rgba(245, 245, 255, 1.0);
                         display: none;
                       }


#textarea-content_wrapper .textarea-titles{
	      padding: 4px;
	      text-transform: uppercase;
	      font-size: 14px;
	      font-weight: bold;
	      opacity: 0.7;
	      padding-left: 40%;

}


#textarea-content_wrapper textarea{ width: 100%;
                                   height: 550px; 
                                outline: none;
                               padding: 5px 8px;
                              font-size: 14px;
                            margin-top: 5px;
                         background: rgba(255, 255, 255, 0.3);
                       line-height: 22px;
                     word-spacing: 1.8px;}


.in_english {padding: 5px 10px;
            margin:10px auto;
            word-spacing:1.7px ;
            font-size: 17px;
            text-transform:none;
            color: rgba(255, 255, 255, 0.9);
            }

.in_english span{padding-right: 5px;
                       /*color:#149;*/
                       color:grey;
                       font-size: 13px;}


.in_bemba span{padding-right: 6px;
               /*color:#149;*/
               color:grey;
               font-size: 13px;
                   }

.in_english b{/*color: #013;*/
            color:lightblue;
              font-weight: normal;  }

.in_bemba b{/*color: #023;*/
         color: lightblue;
              font-weight: normal; }



.in_bemba {padding: 5px 10px;
            margin:10px auto;
            font-size: 17px;
            word-spacing:1.7px ;
            text-transform:none;
             color: rgba(255, 255, 255, 0.9);
            }




#randomise_btn-wrapper{text-align: center;
                        margin-bottom: 20px;
                      margin-top: 10px;
                   display: none;}

#randomise_btn-wrapper button{padding: 8px 30px;
                             font-size: 15px;
                             color: white;
                             background: #065;
                              text-transform: capitalize;
                              border-radius: 2px;
                              border: 1px solid rgba(255, 255, 255, 0.6);
                              box-shadow: 0 2px 4px 0 teal;
                              cursor: pointer;

                            }

/*quiz section*/


#next-question-alert{color: white;
                    font-size: 12px;
                    display: none;}
#sec{display: none;
     font-size: 12px;}


#quiz-instructions{padding: 10px;}

#instructions-header{font-size: 17px;
                    line-height: 26px;
                     word-spacing: 1.7px;
                  margin-bottom: 20px;}

#instructions-wrapper{margin-left: 20px;
                     line-height: 24px;
                       word-spacing: 1.7px;}

#instructions-wrapper li{margin-bottom: 20px;}

.start-quiz-btn-wrapper{text-align: center;
   padding: 10px 2px;}

.start-quiz-btn-wrapper button{padding: 8px 30px;
                             font-size: 15px;
                             color: white;
                             background:#034; /*#065*/;
                              text-transform: capitalize;
                              border-radius: 2px;
                              border: 1px solid rgba(255, 255, 255, 0.2);
                              box-shadow: 0 2px 4px 0 grey;
                              cursor: pointer;
                             word-spacing: 1.8px;}




#quiz-questions-wrapper{display: none;}


#quiz-section #timer{float: right;
                     margin-right: 10px;
                     color: aqua;
                    background:rgba(0, 76, 107, 0.1); /*#034;*/
                   padding: 2px 5px;
                   border-radius: 4px;
                 font-size: 14px;
              letter-spacing: 1px;
             border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);}

#quiz-section #question_title{
                             text-align: left;
                               margin-bottom: 22px;
                              border-bottom: 1px solid rgba(0, 100, 10, 0.1);
                            word-spacing: 1.7px;
                             color: rgba(255, 255, 255, 0.3);
                              padding: 5px 4px;}

#quiz-section #question_title span{
                             box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
                            word-spacing: 1.7px;
                             color: rgba(255, 255, 255, 0.8);
                              padding: 5px;
                             font-weight: bold;}

#quiz-section #question_title #question_number{
               color: lightblue;
             font-size: 17px;}

#quiz-section #question-wrapper{margin-bottom:17px;
                                  font-size: 17px;
                              word-spacing: 1.8px;
                             line-height: 27px;
                           margin-left: 5px;}

#quiz-section #question-wrapper span{font-weight: bold;
                                    font-size: 23px;
                                    text-transform: capitalize;
                                   word-spacing: 1.8px;
                                  margin-right: 2px;
                                 margin-left: 4px;}

#quiz-section ol{ display: grid;
                   align-items: center; 
                   margin-left: 25px;}

#quiz-section .option-list{
    margin-bottom: 20px;
    padding: 5px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
    color:rgba(255, 255, 255, 1.0)
     /*rgba(0, 0, 0, 0.15);*/
}


#quiz-section li span{margin-left: 10px;
                      font-size: 17px;
                      text-transform: capitalize;
                    }


#quiz-results-wrapper{padding: 10px 5px;
                    border:2px solid rgba(255, 255, 255, 0.1);
                    border-radius: 5px;
                    box-shadow: 0 2px 4px 0 rgba(0, 200, 100, 0.1);
                    word-spacing: 1.8px;
                    line-height: 24px;
                    display: none;
                     }
#quiz-results-wrapper h2{text-align: center;
                         opacity: 0.9;
                        font-size: 21px;}

#quiz-results-wrapper #quiz-results-info{margin: 20px 2px; text-align: center;
  font-size: 16px;}

#quiz-results-wrapper #quiz-results-info #quiz-remarks{}

#quiz-results-wrapper #quiz-results-info #scored-marks{font-weight: bold;
   font-size: 16px;}

#quiz-results-wrapper #quiz-results-info #total-marks{font-weight: bold;
   font-size: 16px;}


#quiz-results-wrapper #scored-percentage{text-align: center;
margin: 35px 2px;
}

#quiz-results-wrapper #scored-percentage span{font-weight: bold;
 font-size: 35px;
  border-radius: 20px;
 border: 2px solid #999;
 padding: 20px;
 color: aqua;
 }



#earned-points{display: none;
                  font-size: 16px;
                   line-height: 24px;
                  word-spacing: 1.7px;
                  padding: 5px 2px;
               text-align: center;}

#earned-points b{font-size: 16px;
                  color:skyblue;}


#sending-quiz-info{display: none;
                  font-size: 16px;
                   line-height: 24px;
                  word-spacing: 1.7px;
                  padding: 5px 2px;
               text-align: center;}

#sending-quiz-info b{font-size: 15px;
                  color: rgba(255, 255, 255, 0.9);}


#challenge-quiz-2nd-btn{display: none;}

                  
#pagination-btns-wrapper{padding:20px 10px;
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                       align-items: center;}

#pagination-btns-wrapper #speak-wrapper{text-align: center;}

#pagination-btns-wrapper #speak-wrapper i{ 
                                     /*color:#045; */  
                                      color: rgba(255, 255, 255, 0.7);
                                          cursor: pointer;}

#speak-pause-icon{display: none;}                                      

#pagination-btns-wrapper #speak-wait{/*color: blue;*/
                                     color: lightblue;

                                    margin-bottom: 5px;
                                    font-size: 15px;
                                    word-spacing: 1.6px;
                                    display: none;
                                    }

#pagination-btns-wrapper button{padding:4px 10px;
                                color: rgba(255, 255, 255, 0.9);
                                 font-size: 13px;
                                 /*background:linear-gradient(to bottom,rgba(0, 0, 0, 0.1), #034, teal,rgba(0, 0, 0, 0.1));*/ background:linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(22, 50, 60, 0.8), rgba(0, 0, 0, 0.2));
                               border: 1px solid rgba(255, 255, 255, 0.1);
                             outline: none;
                             text-transform: capitalize;
                             border-radius: 20px;
                             cursor: pointer;
                             }

#pagination-btns-wrapper #prev-wrapper{text-align:left;}
#pagination-btns-wrapper #next-wrapper{text-align:right;}

#message-dialog-wrapper{display: none; 
                        z-index: 9999;
                       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;
                                   background: #068; }

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


#loader_img #loading-text{color: #037;
             font-weight: bold;}




/*footer section*/
footer{
       box-sizing:border-box;
       background-color: /*rgba(215, 215, 225,0.3)*/ rgba(200, 200, 200,0.05); 
       color:rgba(255, 255, 255, 0.8); /*#034;*/
       width: 100%;
       text-align:center; 
       padding:10px;
       font-size:13px;
     line-height: 22px;
      margin-top: 50px;}


footer span {word-spacing: 2px; 
             font-size: 12.4px;}

footer a {text-decoration: none;}


footer button{ padding: 4px 25px; 
              background-color:transparent;
             color: /*#039*/ rgba(255, 255, 255, 0.9);
            outline: none;
           border: 1px solid #068;
        margin:10px auto;
    border-radius: 20px;
  word-spacing: 1.8px;
 cursor: pointer;}

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

footer{ width:100%;
        box-sizing:border-box; }
}