#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#26262c;
  display:none;
}  

#mask1 {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#26262c;
  display:none;
} 

#mask2 {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#26262c;
  display:none;
} 

#mask3 {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#26262c;
  display:none;
}


#boxes .window {
  position:fixed;
  left:0;
  top:0;
  width:600px;
  height:850px;
  display:none;
  z-index:9999;
  padding:20px;
  border-radius: 5px;
  text-align: center;
}

#boxes1 .window1 {
  position:absolute;
  left:0;
  top:0;
  width:600px;
  height:850px;
  display:none;
  z-index:9999;
  padding:20px;
  border-radius: 5px;
  text-align: center;
  
  
  top: 20%; left: 20%; right: 20%; display: none; width: 600px;
}

#boxes2 .window2 {
  position:absolute;
  left:0;
  top:0;
  width:600px;
  height:850px;
  display:none;
  z-index:9999;
  padding:20px;
  border-radius: 5px;
  text-align: center;
  
  top: 20%; left: 50%; display: none; width: 550px;
}

#boxes3 .window3 {
  position:absolute;
  left:0;
  top:0;
  width:600px;
  height:850px;
  display:none;
  z-index:9999;
  padding:20px;
  border-radius: 5px;
  text-align: center;
  
  top: 20%; left: 50%; display: none; width: 550px;
}

#boxes .windows {
  position:absolute;
  left:0;
  top:0;
  width:800px;
  height:850px;
  display:none;
  z-index:9999;
  padding:20px;
  border-radius: 5px;
  text-align: center;
  
}


#boxes #dialog {
  width:500px; 
  height:auto;
  padding: 10px 10px 10px 10px;
  background-color:#ffffff;
  font-size: 15pt;
  color: white;
}

#boxes1 #dialog1 {
  width:auto; 
  height:auto;
  padding: 10px 10px 10px 10px;
  background-color:#ffffff;
  font-size: 15pt;
  color: white;
}
#boxes2 #dialog2 {
  width:550px; 
  height:auto;
  padding: 10px 10px 10px 10px;
  background-color:#ffffff;
  font-size: 15pt;
  color: white;
}

#boxes3 #dialog3 {
  width:550px; 
  height:auto;
  padding: 10px 10px 10px 10px;
  background-color:#ffffff;
  font-size: 15pt;
  color: white;
}

#boxes #dialogg {
  width:800px; 
  height:auto;
  padding: 10px 10px 10px 10px;
  background-color:#ffffff;
  font-size: 15pt;
  color: white;
}



.agree:hover{
  background-color: #D1D1D1;
}

.agree1:hover{
  background-color: #D1D1D1;
}

.agree2:hover{
  background-color: #D1D1D1;
}

.agree3:hover{
  background-color: #D1D1D1;
}

.popupoption:hover{
	background-color:#D1D1D1;
	color: green;
}
.popupoption2:hover{
	color: red;
}

.popupoption3:hover{
	color: red;
}

@media (max-width:480px) {
    
    #boxes #dialog {
  width:800px; 
  background-color:#ffffff;
  font-size: 12pt;
  color: white;
}

    #boxes1 #dialog1 {
        
 
    width: 285px;
    display: block;
    position: relative;
    
  background-color:#ffffff;
  font-size: 12pt;
  color: white;
}

    #boxes2 #dialog2 {
    width: 285px;
    display: block;


 
  background-color:#ffffff;
  font-size: 12pt;
  color: white;
}

    #boxes3 #dialog3 {
    width: 285px;
    display: block;


 
  background-color:#ffffff;
  font-size: 12pt;
  color: white;
}

}