/*************Begin Instructions common to all pages********************/

.instructions1{
  color: rgb(58, 6, 6);
}

.instructions2{
  color: yellowgreen;
}




/************* End Instructions common to all pages********************/



: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 Styling all ion-input**************/
.ionInput{
  font-size: 1.7rem;
  text-align: center;
  color:#696969;
  width:4rem; height:3rem; border:2px solid grey; margin:2px;

}


.ionInput2{
  font-size: 1.2rem;
  text-align: center;

 margin:4px;
 border-radius:6px;



  



}
/***********End Styling all ion-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*/ 



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

/*This styling is for addition1.js*/



/*.add1-ch1-input{
font-size: 1.5rem;
text-align: center;
color:#696969;
    }*/


.hand{
  color:red;
    }
.remainder{
  color: red;
  
  font-size: 1.5rem;
  justify-content: center;
}
#gr2-add1-idexp1{

  font-size:1rem;
}
.mathsGrade2{
  /*color:#3880ff;*/
  color:white;
  font-size:1rem;
}
.languages{
  
  color:white;
  font-size:1rem;
}




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


/*Color styles to app*/

.blue{

  color:blue;
}

.gray{
  color:gray;
}

.green{
  color:green;
}

/*Font Sizes styles to app*/

.rem1Point5{

  font-size: 1.5rem;
}

.rem1Point2{

  font-size: 1.2rem;
}

/*margin Sizes styles to app*/
.margin3Rem{
  margin:3rem;
}

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

ion-content.background{
  --background: url('./image/horizontal-background-image2-reduced.jpg') no-repeat 0 0/100% 100%; 
  
  background-position: center;
  width: auto;
  height: 19%;
 
  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 styling audio element************************/                            
  .audioClass{
    border:10px solid lightsalmon;
   border-radius: 50px;
   }   
  
  /********************End styling audio element************************/