body { font-family: Myriad Pro ;background-color: whitesmoke; 
 margin:0;
 overflow-x: hidden;
 } 
 
  @font-face {
    font-family: Amiri-colored;
    font-style:normal;
    font-weight:bold;
    src:url(polices/amiri-quran-colored.ttf) format("truetype");
  } 
  
 @font-face {
    font-family: DroidNash-colored;
    font-style:normal;
    font-weight:400;
    src:url(polices/DroidNaskh-Regular-Colored.ttf) format("truetype");
  }  
  
 @font-face {
    font-family: KacstOne-colored;
    font-style:normal;
    font-weight: 100;
    src:url(polices/KacstOneColored.ttf) format("truetype");
  }  
 @font-face {
    font-family: Simple-colored;
    font-style:normal;
    font-weight:400;
    src:url(polices/SimpleNaskhi-colored.ttf) format("truetype");
  }
 
 
		#affichage {	font-size:3em; color:blue;	    /*margin-top: -20px; */width: 95%;    min-height: 250px;
		    background: #f2f2f2;
    padding-block: 10px;
		}
		#arabe { color:black;	}
		#options	{
			/* width: 95%; */
			/* background-color: teal;  */
			padding: 1rem;    border-radius: 10px;	    
			max-width: 850px;
			margin: 0 auto;
			display: grid;
			gap: 1rem;
		}
		.chapitreLabel {     padding: 1rem; color: white;    font-weight: bold;   
		/* display: inline-table; */
		font-size: large;
    /* float: left;	 */
	}
	
	.infoUtile	{	font-size:large;	/*line-height:auto;*/}
	
		#recherche {	padding:8px;	}
		#rech {padding:8px; border:none;background-color: white;
    border-radius: 10px;}
		#langueRech {	padding-block: 7px;
    padding-inline: 10px;border-style: solid;	}
		.droiteAgauche { direction:rtl;	}
		#touslivres	{    margin-top: 9px;}
		.langueFR {border-left-color: blue;    border-block-color: white;		border-right-color: red;}
		.langueAR {border-color: green;  }
		
		#footer_boutons
		{
			 position: fixed;
            bottom: 2%;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            max-width: 600px;
            background-color: #f7f7f7f7;
            border-radius: 30px;
            padding: 5px;
            box-shadow:0px 1px 4px 3px rgba(0, 0, 0, 0.2);
				/* height: 20px; */
				
				   display: flex;
            justify-content: space-between;
            align-items: center;
			
		}
		.bouton { 
		/* padding:12px; position: fixed;  bottom: 40px;     */
		 color: white;
		border: none;
		padding: 15px;
		cursor: pointer;
		border-radius: 50%;   
			font-size: large;    
		font-weight: bold;
		}
		
		 .bouton:hover 
		 {
            background-color: #0056b3;
			
        }
		
		  #left-buttons {
            display: flex;
        }
        #left-buttons .bouton {
            margin-right: 5px; /* Margin between left buttons */
            margin-left: 10px; /* Margin between left buttons */
        }
		#boutonListeMot {	
		/* left: 10%; */
		 /* padding:15px;  border-radius: 15px;    border: outset;	    font-size: initial;    font-weight: bold;	 */
		background-color:#31313108;
		}
		
		#lancerGO 
		{	
		/* right: 10%; */
		border: solid #dddddd 3px;	 box-shadow: 1px 1px 3px 2px #656565c7;
	
		 margin-left: auto;
		margin-right: 5px; /* Slight margin to the right */
		background-color: darkgreen;
		}
		.bouton#lancerGO:active { 	transform: scale(1.1); background-color:green; }
		.bouton#boutonListeMot:active { 		background-color:white;}
		button, #police	{	 cursor: pointer;	}
		
		
		
		td { 
		/* padding: 5px ; */
    padding-inline: 10px;
	border-bottom-style: inset;}
	table {	font-size:40%; 	    margin-top: 20px;}
		tr td:first-child, tr th:first-child {	color:black; }
		select { padding:1em; border-radius: 15px; background-color:transparent;}
		select#choixLangue {
			/* float:right; */
			margin-inline:10px;    margin-block: 5px;
			    max-width: 120px;
				    background-color: floralwhite;
			}
		footer { text-align:center;     margin: -8px;  /*bottom: 0; */ border-top-style: ridge; 
		/* background-color: #807900;	background: rgb(157,122,8); */
		background: rgb(157,122,8);
		background: linear-gradient(190deg, rgba(157,122,8,1) 0%, rgba(128,121,0,1) 50%);
		color:white;}
		.invisible {	
		display: none;		
		/* visibility:hidden; */
		}
		.visible {	/*visibility: visible;	*/	text-decoration:none;   font-size: 25px;    color: darkslategrey;}
		.visiblemaiscache {	visibility: hidden; /*font-size: xxx-large;*/	}
		.err {    font-size: small;  color: indianred; display:inline-block;}
	
	#police 
	{
		padding: 7px 10px;
		
    /* border-style: outset; */
    background-color: white;
	}
	
	#parametres
    {
          padding: 10px;
          text-align: center;
          z-index: 1; /* Pour ne pas que l'image passe au dessus de lui */
          position: inherit;
          
    }
        #parametres a 
        {
                text-decoration: none;
                color: black;
                padding-right: 15px;
        }
	
	.icone {	    border-radius: 30px;
    border-style: none;
    padding-inline: 15px;
    padding-block: 10px;
	margin-inline: 5px;    margin-top: 10px;
	}
	.qourane {	    background-color: powderblue;		}		.qouraneRacine {	    background-color: aliceblue;		}	.hadith	{	background-color: #fcf09d;		}
	#modalPerso	 {text-align:center;}
	.modal {	 	padding:	30px 10px !important;	}
	
	.numChap {	font-size:initial;	color:initial;	    background-color: lightgreen;    padding: 10px;    border-radius: 10px;}

.option1-chapitreDebut,
.option1-chapitreDebut * {
  box-sizing: border-box;
}

.option1-chapitreDebut button {
	outline: none;
    -webkit-appearance: none;
    background-color: rgba(0, 0, 0, 0.1);
    border: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 3rem;
    cursor: pointer;
    position: relative;
	    vertical-align: bottom;
    /* margin-top: 3px; */
    /* margin-bottom: -5px; */
}

.option1-chapitreDebut button:before,
.option1-chapitreDebut button:after {
  /* display: inline-block; */
  position: absolute;
  content: '';
  width: 0.8rem;
  height: 2px;
  background-color: black;
  transform: translate(-50%, -50%);
  /* margin-top: -5px; */
}
.option1-chapitreDebut button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.option1-chapitreDebut input[type=number] {
    max-width: 3rem;
    padding: 0.3rem;
    border: solid #ddd;
    border-width: 0 0px;
    font-size: 1rem;
    height: 3rem;
    text-align: center;
	margin-top:3px;
	    margin-inline: -3px; /* pour gagner de l'espace en largeur sur mobile */
}
  
 .option1-chapitres {
	    display: flex;
    margin: 0 auto;
 }
 .option2-langue, .option3-modeAffichage {
	/* display: grid; */
 }	 
  
 #chapitreFin
 { 
	visibility:hidden;
 } 
  
 /* ul { */
  /* list-style-type: none; */
  /* margin: 0 auto; */
  /* padding: 0; */
  /* overflow: hidden; */
  /* border: 1px solid #e7e7e7; */
  /* background-color: #f3f3f3; */
  /* max-width: 800px; */
/* } */

/* li { */
  /* float: left; */
/* } */

/* li a { */
  /* display: block; */
  /* color: #666; */
  /* text-align: center; */
  /* padding: 14px 16px; */
  /* text-decoration: none; */
/* } */

/* li a:hover:not(.active) { */
  /* background-color: #ddd; */
/* } */

li a.active {
  color: white;
  background-color: #04AA6D;
      border-bottom: solid ; /* black */
	      font-weight: bold; 
} 
 
 #traitenbas	{	    
 
    height: 7px;
    position: relative;
    top: 0;
    margin: 0px;
    padding-block: 2px;
    /* bottom: 0; */
 }
 
.caseArabe, .caseArabe a, .lienArabe, .lienArabe a
{ 
	direction: rtl;
	text-decoration:none;
	color:black;
	/* float:right; */
	/* font-family: Amiri-colored; /*DroidNash */ 
} 
  
td > .lienArabe {	    float: right; 	}
 .amiri {
 font-family: Amiri-colored !important;}  
 .DroidNash {
 font-family: DroidNash-colored !important;}  
 .Simple {
 font-family: Simple-colored !important;}
 .KacstOne {
 font-family: KacstOne-colored !important;}
 
  input[type="checkbox"]
  {
    transform: scale(1.3);
  }
  
  /* CHARGEMENT LORS D'APPUI DES BOUTONS */
.dots 
{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top:50%;
	
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,teal 94%,#0000) top/16px 16px no-repeat,
    conic-gradient(#0000 30%,teal);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 16px),#000 0);
  animation:dots_anim 1s infinite linear;
  display:none;
}

@keyframes dots_anim{ 
  100%{transform: rotate(360deg)}
}

.couleur_qrachidah {	background-color:darkgoldenrod;	}
.couleur_qasas {	background-color:darkolivegreen;	}
.couleur_qwadihah {	background-color:dodgerblue;	}
.couleur_mincha {	background-color:steelblue;	}


.imageLivreFond	{		   z-index: -1;    position: absolute;	
/* opacity:0.6;	 */
 height:160px;}

@media only screen and (min-width: 768px) 
{
 #options { 
 /* grid-template-columns: repeat(2, 1fr); */
    display: flex;
        max-width: 600px;
 }
 
 .imageLivreFond	{	left:10%;	height:150px;margin-top: -2px;}
}

mark {	background-color:#f5f5f5d1;	    padding-inline: 5px;}

/* -------------------------------------------------- RESPONSIVE ---------------------------------------------- */

@media only screen and (min-width: 1000px) 
{	/* For desktop: */
          
	table {	font-size:45%;	}
	
	.bouton {	
	/* bottom:20px;	 */
	padding:16px;
	}
	
	#boutonListeMot {	
	/* left: 30%; */
	}
	#lancerGO { 	
	/* right: 30%;	 */
	}
	
	
	select#choixLangue {	    max-width: 180px;}
	
	 .imageLivreFond	{	left:15%;	}
}

@media only screen and (min-width: 1200px) 
{	/* For desktop: */
          
	table {	font-size:50%;	}
	
	  #parametres    {     margin-left:20%;    margin-right:20%;      /*padding: 0px; */}
	  
	   .imageLivreFond	{	left:24%;	}
}

@media only screen and (max-width: 700px) 
{	/* For mobile or tablet: */
          
	/* select#choixLangue {	    width: 140px;	margin-inline:0px;} */
	.chapitreLabel {	font-size: medium;	    padding: 0.5rem;}
	.option1-chapitreDebut input[type=number] {
    max-width: 2.5rem;
	}
	.option1-chapitreDebut button {
		    width: 1.5rem;
	}
	
	#options{
	margin-inline: 5%;
	}
}

@media only screen and (max-width: 500px) 
{
	select#choixLangue {	    max-width: 140px;	margin-inline:0px;}
	
}

/* iPad */
@media only screen and (min-width: 600px) and (max-width: 900px)
{	
	.option1-chapitres {	flex-direction: column;	}
	#chapitreFin	{	text-align: end;	}
}

.topnav {
  overflow: hidden;
  background: linear-gradient(190deg, rgba(157,122,8,1) 0%, rgba(128,121,0,1) 50%);
  margin: 0 auto;
  max-width: 1000px;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
    background-color: #ffff00d1;
    color: black;
    /* border: solid 1px white; */
}

.topnav a.active {
  /* background-color: #04AA6D; */
  color: white;
  font-weight: bold;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}