
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modalAcci{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  box-shadow: 11px -8px 10px -9px rgba(0,0,0,0.49);
-webkit-box-shadow: 11px -8px 10px -9px rgba(0,0,0,0.49);
-moz-box-shadow: 11px -8px 10px -9px rgba(0,0,0,0.49);
}

/* Modal Content */
.modal-contentAcci{
  background-color: white;
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 95%;
}

/* The Close Button */
.closAcci{
  color: red;
  float: right;
  font-size: 3vw;
  font-weight: bold;
}

.closAcci:hover,
.closAcci:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#myBtnAcci{
  Background:whitesmoke ! important;
  color:black ! important;
  padding:10px 10px 10px 10px;
  width:100% ! important;
  height:100% ! important;
  border-radius:8px;
  border-style:none;
  align-items: center ! important;
  justify-content: center ! important;
  align-content: center ! important;
}

#myBtnAcci:hover {
    background-color: #FFC000 ! important;
    color: black ! important;
    
    .material-icons{
      background-color: white ! important;
    }
}


.material-icons{
  padding:0px ! important;    
 
}


#hedd{
    font-size:4.2vw;
}



#ticket{color:black;}
#ticket:hover{color:black;}
	
#formtext{font-size: 1vw;}

.form-control{
  background:white ! important;
}

label{ font-size: 3vw ! important; margin-bottom:-4px ! important;}

.mAci{
    width:40px;
    height:40px;
    border-radius:50px;
    background:#f0ecec80;
    padding:0px ! important;
}
	
#mylB{
  Background:#04023aff;
  color:white;
}

#mylB:hover {
  background-color: green;
  color: white;
}

.billCard {
    margin-top:25px ! important;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    box-shadow: var(--z-shadow);
    border-radius: 12px;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    box-shadow: 5px 5px 10px 5px rgba(0,0,0, .1); 
 
}

.billCard:hover {
    box-shadow: var(--z-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--z-border-strong);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    box-shadow: 5px 5px 10px 5px rgba(0,0,0, .1); 
 
}

.billCard-soft {
    background: linear-gradient(180deg, #fff, #F8F7F4);
}

.billCard img{
  width: 20% !important;
}


.billCard {

h2{
  font-size: 1.2vw !important;
  font-weight: bold !important;
  color: #010149 !important;
}
p{
  font-size: 0.9vw !important;
}

}


a, p{
  color:black ! important;
  font-weight:500 ! important;
}

#bilH1{
  padding-top:30px ! important;
}

.wrapRow{
  display:flex ! important;
  gap: 20px ! important;
}


#billLogo{
  width:10% ! important;
}



@media screen and (min-device-width: 1025px){

	
	
/* The Modal (background) */
.modalAcci{
  padding-top:38px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 

}

	
#mYmodal-contentAcci{
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 50%;
  border-radius:12px; 
  margin-bottom:70px;
  align-content: center;
  align-items: center;
	
}
	
	
#formE{
	width:90%;
	margin: 0px auto;
}
	
#formtext{ font-size: 1.2vw;}

#select{
	font-size:1vw ! important; 
}

label{ font-size: 1vw ! important; margin-bottom:-4px ! important;}
	
::placeholder, .btn-lg{font-size: 1.3vw;}
	
#formtext, label{ font-size: 1.2vw;}

#hD{
    font-size:1.8vw !important;
    margin-top:-50px ! important;
    margin-left:-60px ! important;
}
	
#ph{font-size:0.8vw !important; 
}
	
.lab{ font-size: 1vw;}
	
#ticket{font-size:1.4vw;}
	


 #mybTnDiv{
  width: 100%;
}

#mylB{
 width:50%;
}


.closAcci{
  font-size: 2vw;
  font-weight: bold;
}


#bilH1{
 font-size:2vw ! important;
 padding-top:30px ! important;
}
  


#billLogo{
  width:50% ! important;
}

#myBtnAcci{
  font-size: 1vw ! important; 
}

.material-icons, .mAci{
   font-size:3vw ! important;  
}

}



/* For Tablet Landscape View  */
@media only screen and (min-device-width: 641px)
and (max-device-width: 1024px) {
	
/* The Modal (background) */
.modalAcci{
  
  padding-top:30px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 

}

	
#mYmodal-contentAcci{
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 50%;
  border-radius:12px; 
  margin-bottom:80px;
  align-content: center;
  align-items: center;
}
	
	
#formE{
	width:100%;
	margin: 0px auto;
}
	   
#formtext{
	font-size: 1.8vw ! important;
	width: 80%; 
	margin: 0px auto;
}

#select{
	font-size:1.3vw ! important; 
}
	
::placeholder, .btn-lg{font-size: 1.8vw ! important;}
	

label{ font-size: 1.3vw ! important;}


#hD{
    font-size:2vw ! important;
    margin-top:-30px ! important;
    margin-left:0px ! important;
}

#ph{font-size:1.3vw !important;}
	
	
#mybTnDiv{
  width: 80%;
  margin: 0px auto;
}

#billLogo{
  width:8% ! important;
}


#myBtnAcci{
   font-size: 1.5vw ! important; 
}

.material-icons, .mAci{
   font-size:5vw ! important;  
}

}


	 
/* For Tablet Portrait View */
@media only screen and (min-device-width: 421px)
and (max-device-width: 640px) {
		
/* The Modal (background) */
.modalE {
  
  padding-top:25px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 

}

	
#mYmodal-contentAcci{
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 60%;
  border-radius:12px;
  margin-bottom:100px;
  align-content: center;
  align-items: center;
}
	

	
#formE{
	width:100%;
	margin: 0px auto;
	margin-bottom:20px;
	
}
	   
#formtext{
	width: 80%; 
	font-size:2vw; 
	margin: 0px auto;
}

#select{
	font-size:1.8vw ! important; 
}

	

label{ font-size: 1.8vw ! important;}

	
#mybTnDiv{
  width: 80%;
  margin: 0px auto;
}
	
::placeholder{font-size: 2.2vw ! important;}

#hD{
    font-size:2.2vw ! important;
    margin-top: -30px ! important;
    margin-left:0px ! important;
}

#ph{font-size:1.8vw !important;}

.btn-lg{font-size:2.8vw;}


	
.closE {
    font-size:4vw;
}


#billLogo{
  width:8% ! important;
}


#myBtnAcci{
   font-size: 1.5vw ! important; 
}

.material-icons, .mAci{
   font-size:6vw ! important;  
}

}
	
	

@media screen and (max-width: 420px) {
	
	
	
/* The Modal (background) */
.modalAcci{
  padding-top: 45px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 

}

	
#mYmodal-contentAcci{
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 95% ! important;
  border-radius:12px; 
  margin-bottom:150px;
  align-content: center;
  align-items: center;
}
	

	
#formE{
	width:100%;
    margin: 0px auto;
	margin-bottom:20px;
	
}
	   
#formtext{
	width: 100%; 
	font-size:2.2vw !important; 

}

label{ font-size: 2.8vw ! important;}


::placeholder {
	font-size:4vw !important ;
}

#hD{font-size:4.2vw;}
	
#ph{font-size:2.5vw !important;}
	
#mybTnDiv{
  width: 100%;
}
	


.closAcci{
    font-size:7vw ! important;
}

#myBtnAcci{
   margin-top:0px;
   width:100% ! important;
   height:100% ! important;
   font-size:4vw ! important;
}

.mAci{
   font-size:10vw ! important;  
}

#mylB{
  font-size:4vw;
}


.wrapRow{
  display:flex ! important;
  gap: 20px ! important;
}

#billLogo{
  width:98% ! important;
}


#bilH1{
 font-size:5.5vw ! important;
}

#billP{
  font-size:3vw ! important;
}


}

