body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(12px + 1vw);
  margin: calc(8px + 1vw);
background-color:#e6e6e6
}

button,select {
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(12px + 1vw)
}

select
{
padding: calc(8px + 1vw);
background-color: skyblue
}

option
{
padding:2px 
}

table
{
  width: 100%;    
  background-color: white;
  border: 1px solid black;
  border-collapse: collapse
  
}

th,td
{
text-align: left ;
border: 1px solid black;
padding: calc(8px + 1vw);
border-collapse: collapse
}

.button {

  border: none;

  padding: calc(8px + 1vw);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 1vw;
  cursor: pointer
} 

.skyBlueButton
{
 background-color: skyblue;//#4CAF50;
  color: black
}

.skyBlueButton:hover {
  background-color: blue;   
  color: white    
}

.whiteButton {
  background-color: white;
  color: black
} 

.link
{
color:blue;
text-decoration:underline
}

.ayatBox
{
background-color:white;
padding:1vw
}

.icon
{
  width: calc(12px + 1vw);    
  height: calc(12px + 1vw)
}

.icon2
{
  width: calc(36px + 3vw);    
  height: calc(36px + 3vw)
}

.arrow
{
 border: solid gray;
 border-width: 0 1vw 1vw 0;
 display: inline-block;
 padding: 1vw
}

.downArrow
{
transform: rotate(45deg);
}

.upArrow
{
transform: rotate(-135deg);
}