body 
{
}


/* https://www.w3schools.com/howto/howto_css_navbar_image.asp */

.ia-img {
    /* The image used */
    background-image: url('../../images/IaBlueBanner.jpg');
    min-height: 380px;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Needed to position the navbar */
    position: relative;
}

/* Position the navbar container inside the image */
.container {
    position: absolute;
    margin-top: 90px;
    margin-left: 50px;
    width: auto;
}

/* The navbar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

    /* Navbar links */
    .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 4px 25px;
        text-decoration: none;
        font-size: 12px;
    }

    .topnav a:hover {
       background-color: #ddd;
       color: black;
    }

div.SurahSearch {
    background-color: #0181FF;
    color: #E0E0E0;
    text-align: center;
}


div.audioAyah {
    text-align: center;
}


div.wfwBvRow {
   width: 10%;
   float:right;
   border: 1px double #FFFFFF;
}

.wrappergrid {
	margin: 2%;
}



div.wfwBvLeft, {
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: left; /* Horizontal center alignment */

    clear:both;
    color: white;
    height: 17px;
    overflow: hidden;
    padding: 3px 1.8%;
    width: 7%;
    height: 45px;
}


div.wfwBvEnglish {
    align-items: center; /* Vertical center alignment */
    justify-content: left; /* Horizontal center alignment */
    border: 1px solid #999999;
    clear:both;
    color: white;
    background-color: darkcyan;
    height: 17px;
    overflow: hidden;
    padding: 4px ;
    width: 100%;
    height: 45px;
}

div.wfwBvTranslit {
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
    clear: both;
    border: 1px solid #999999;
    color: grey;
    background-color: lightcyan;
    overflow: hidden;
    padding: 4px;
    width: 100%;
    height: 45px;
}

div.wfwBvArabic {
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
    clear: both;
    border: 1px solid #999999;
    color: green;
    background-color: ivory;
    font-size: x-large;
    overflow: hidden;
    padding: 4px;
    width: 100%;
    height: 45px;
}

div.wfwBvRoot {
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
    clear: both;
    border: 1px solid #999999;
    color: green;
    background-color: lightyellow;
    font-size: 30px;
    overflow: hidden;
    padding: 4px;
    width: 100%;
    height: 45px;
}
    .wfwRootA:link {
        text-decoration: none;
    }
    .wfwRootA:hover {
        text-decoration: underline;
    }


.BtnArabic {
    border: none;
    color: darkgreen;
    background-color: ivory;
/*    padding: 15px 32px;*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    margin: 4px 2px;
    cursor: pointer;
}

.BvTableDiv {
	float: right;
	border-style: solid;
	border-color: #888888;
	width: max-content;
	
}

fieldset.cat1-a {
    text-align: right;
    font-size: 100%;
    color: black;
    background-color: #FFFFFF;
}



#alphaheader {
    text-align: center;
    font-size: 100%;
    color: black;
    background-color: #888888;
}

#alpha {
    display: inline-block;
    margin: auto;
    padding: 10px;
    width: 100%;
    border: 1px solid #999999;
}


#alpha1 {
    width: 90%;
    font-size: 100%;
    color: black;
    background-color: #FFFFFF;
    border: 1px solid #999999;
}

#ltr1 {
    float: right;
    text-align: center;
    font-size: 100%;
    color: black;
    background-color: #FFFFFF;
    border: 1px solid #999999;
}

#NLP-ack {
    display: inline-block;
    text-align: left;
    margin: auto;
    padding: 20px;
    width: 100%;
    border: 1px solid #999999;
    background-color: #888888;
}

.P-ack {
    margin-left: 15px;
}

.donate {
    text-align: left;
    margin: auto;
    padding: 20px;
    width: 20%;
}

.donate-container {
  font-family: arial;
  font-size: 16px;
  margin: 25px;
  width: 100%;
  height: 200px;
  outline: dashed 1px black;
  
}

.donate-child {
  width: 340px;
  height: 150px;
  text-align:center;
  background-color: #80ff80; layer-background-color: #80FF80;
  /* Center horizontally*/
  margin: 0 auto;
}