/*
Name- spaces:Means all classes common to the app that must be in app.css file- prefix withh app
app-

*/

/* Begin Headings*/

.app-heading{

  font-size: 1.3rem;
  color:rosybrown;
margin:0.5rem;
}

.app-heading-instruction{

 
  color:green;

}
/*End-Headings*/


/*Begin-App Input*/

.app-input{
  height:2rem;
  border-radius: 3px;
 
}

/*End-App Input/



/*Begin-App Text*/

.app-text{
  font-size: 1rem;
}

/*End-App Text*/

:root {
    --ion-safe-area-top: 20px;
    --ion-safe-area-bottom: 22px;
}

header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 1.25em;
    text-transform: uppercase;
}

section {
    margin-top: 1em;
    margin-bottom: 2.5em;
}

section:not(.full-width),
.full-width>header {
    padding: 0 10px;
}

/*Next and previous page arrows for all pages in the app*/
.pageArrows{
    font-size: 2rem;   
    text-decoration:none;
}

.leftArrowButton{
    float: left;
 
   
}

.rightArrowButton{
    float: right;
}


 /*******************Begin Input***********************/
 input{
    border:2px solid grey;
    /* This padding-top:0.8rem; solves the problem of Wrong Symbols and hand not inline with input*/
   /*padding-top:0.8rem;*/
  }

  /*******************Begin Input***********************/




/*Begin  language drop down style*/  

  /*https://jsfiddle.net/potherca/L4qn33oh/*/
  .containerSelect {
  position: relative;
  height: 1rem;

  /************************/

}

select {
  position: absolute;
 /*************************/
   width: 8.2rem;
border: 2px gray solid;


}
/*************************/
option{
    font-size:1rem;

}
.select:hover::after {
  color: #f39c12;


}
   

/*End language drop down style*/ 


/***************begin second button this has  been used yet************/
/*https://codepen.io/kitsune/pen/beBJBb*/
.app-bttn {
    width: 35px;
    height: 35px;
    line-height: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    position: relative;
    /*I added  padding-top:1rem; because I added to input  padding-top:0.8rem; */
   /* padding-top:1rem;
    display: grid;*/
   
    
  }
  .app-bttn:after {
    transition: 0.3s all ease;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border-radius: 3px;
    border: 3px solid #B15947;
  
  }
  .app-bttn:before {
    content: '';
    position: absolute;
    border-radius: 3px;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    /*background: #fff;*/
    /*z-index: -1;*/
  }
  .app-bttn:hover:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .app-bttn:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  .app-bttn:active:before {
    background-color: #f1481b;
  }
  .app-bttn:active:after {
    border-color: #f1481b;
  }
  
  
  /*************End secon  button  this has  been used yet*********************/

/********************Begin wrongSymbol, hand and correctSymbol************************/
 
  .wrongSymbol{
    
     color:red; 
     font-size: 1.5rem;
    
    
  
    }
    
    
    .hand{
    color:red;
   font-size: 2rem;  
   
    /*        
    margin-left:7rem;
    margin-top: -1rem;*/

    /*margin:1rem;*/
          
    }
       
      
    .correctSymbol{
     display: none;
   /* color:green;*/
    /*font-size: 3rem;
    margin-top: -2rem;
    margin-left: 4rem;*/
                   
    }
  /********************End wrongSymbol, hand and correctSymbol************************/

  
  /********************Begin styling audio element************************/                            
  .audioClass{
    border:10px solid lightsalmon;
   border-radius: 50px;
   }   
  
  /********************End styling audio element************************/


/********************Begin border lines around Hewadings************************/

  /*.mainHeadingsBorders{
    border:2px solid coral;
    width: 100%;
    text-align:center;
    border-radius:5px;
  }*/


  .hr{

    border-bottom: 2px solid coral;
   
   /* width:100%;
    text-align: center;*/
    
  }
  /********************End border lines around Hewadings************************/




  /*****Begin styles for all colour shapes on the top in each page********/

ion-content.background{
  --background: url('./image/english-background-image2.jpg') no-repeat 0 0/100% 100%; 
  
  background-position: center;
  width: auto;
  height: 17%;
 
  z-index: 2;
  background-size: cover;
  
    
    }





    /*****End styles for all colour shapes on the top in each page********/

    /*for this code : <ion-content  class="background ion-padding ion-margin ion-tex-center"> </ion-content>*/








    

/* Begin This is to handle the footer page numbering. Incase error is noticed, prev and next class can be removed from the anchor tag in the footer
and the div and the span inside the anchor tag should be removed, then it will naturally fit*/
/* Next & previous buttons */
.prev, .next {
  position: absolute;
 top: 50%;
 border-radius: 0 3px 3px 0;
 
 margin-top: -22px;
   
 }
 
 
 .next {
   right: 0;
   border-radius: 3px 0 0 3px;
 }
 
 
 .prev:hover, .next:hover {
   /*background-color: rgba(0,0,0,0.8);*/
 color: rgba(0,0,0,0.8);
 }
 
 /*End This is to handle the footer page numbering. Incase error is noticed, prev and next class can be removed from the anchor tag in the footer
 and the div and the span inside the anchor tag should be removed, then it will naturally fit*/