
*{
  box-sizing: border-box; 
  font-family: "poppins", serif;
  font-weight: 400;
  font-style: normal;
  /*font-style: italic;*/
}

	 
main{
  padding-top:0px;
}

.form-group input[type='text']{
    width: 100% ! important;
	background-color: white;
	background-image: url('images/');
	/*background-position:10px 10px; */
    padding: 6px 10px 6px 10px;
    margin-top:10px ! important;
    margin-left:0px ! important;
    border: 1px solid gray ! important;
}


.form-group input[type='text']:focus{
     width: 100% ! important;
    margin-left:0px ! important;
}

.topDiv{
    background: whitesmoke !important
    bottom:70px ! important;
}
	 
.dRow{
  margin: 0px !important;
}

.imgDiv{
	 width:100%;
	 margin-top:15px;
	 object-fit:contain;
	 border-radius: 5px;
   background: #FFF;

 }
 
 .infoCova{
   width:100%;
	 margin-top:15px;
	 object-fit:contain;
	 border-radius: 5px;
   background: #FFF;
 }
	

h1, em{margin-left: 10px; font-weight:bold ! important;} 
h2{font-weight:bold !important;}
 
h4{margin-left: 10px;}
 
 
 #detail{
	 background-color:#FFF;
	 text-indent: inherit;
	 border-radius: 5px;
 }	
	 
#ptito{margin-left: -10px;}

.addItemBtn{
    border-style: 8px solid #000 !important;
}

#pimg{
  width:100% ! important;
  height:100% ! important;
  margin-bottom: 10px;
  object-fit:contain;
  border-radius: 5px;
  
}	


::placeholder{
    font-size:3vw ! important;
}

 address{
    font-size: 3vw !important;
    margin-left: 20px !important;
    margin-bottom: -5px !important;
  }
  
  select{
    font-size: 3.2vw !important;
  }
  
  option{
    font-size: 3.1vw !important;
  }

  .hide{
    display: none !important;
  }

  #message{
    color: red !important;
  }
  


#alat{
	 width: 100% !important;
	 margin:0px auto !important;
	 display:block;
	 color:red;
	 font-size:3vw !important;
}
  	

#message{
	 width: 100% !important;
	 margin:0px auto !important;
	 margin-left:0px ! important;
	 display:block;
	 font-size:3vw ! important;
   color:red;
}
  
.loader {
  margin:50px auto !important;
  border: 16px solid #87bdd8;
  border-radius: 50%;
  border-top: 16px solid #b7d7e8;
  border-right: 16px solid #daebe8;
  border-bottom: 16px solid #87bdd8;
  border-left: 16px solid #b7d7e8;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.note{
	margin-top:-40px;
	display: none !important;
}
	
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
	
	

.appBtn, .mBtn{
     background: #04014A !important;
     width:100% !important;
     color:white ! important;
     border-radius: 16px !important;
}	


.appBtn:hover{
    background:green !important;
    color:white ! important;
}		



.wan{
    color:red ! important;
    font-size:3vw ! important;
}

  
  #shareP{
     margin-top:-65px ! important;
 }
 
 
 /* For Desktop View */
@media screen and (min-width: 1025px) {


.nav-tabs{margin-left:-40px;}

.topDiv{margin-top:0px;}
	
#dRow{
  margin: 10px !important;
  margin-left: 0px !important;

}

#dCova{margin-top: 100px;}
	
.infoCova{margin-top: 114px !important;}
	
#ml{
	margin: 40px;
	margin-top: 10px;
}
	
h1{font-size:1.2vw !important;}
h2{font-size:1.1vw;}
h3{font-size:1.1vw !important;}
h4{font-size:1vw;}

#myList{
 font-size:1.2vw !important;
}

::placeholder{
    font-size:0.8vw ! important;
}

#pimg{
  width:100% ! important;
  height:100% ! important;
  margin-bottom: 10px;
  object-fit:contain;
  border-radius: 5px;
  
}	
 
.imgDiv{
	 width:100%;
	 margin-top:15px;
	 object-fit:contain;
	 border-radius: 5px;
 }
 
 
 #detail{
	 margin-top:10px;
 }
	
#checkDiv{margin-top: -38px; margin-bottom: 10px;}
 

#message{
  margin-left: 0px !important;
  font-size: 1vw !important;
}

#alat{
  font-size:1vw !important;
}


  ::placeholder{
    font-size: 0.8vw !important;
  }
  
  select{
    font-size: 1vw !important;
  }
  
  option{
    font-size: 1vw !important;
  }
  address{
    font-size: 1vw !important;
  }

.appBtn, .mBtn{
    width:50% !important; 
}	

 #chatP, .dWhats{
     position:absolute ! important;
     top:40 ! important;
    font-size:3vw ! important;
 }
 
 #shareP{
     margin-top:0px ! important;
 }

}


/* For Tablet Landscape View  */
@media only screen and (min-device-width: 641px)
and (max-device-width: 1024px) {
	
#ptito{font-size: 2.5vw;}
	
.nav-tabs{margin-left:-10px;}


.topDiv{
    margin-top:20px;
}
	

#dRow{
  margin-top: 0px;
}

#dCova{margin-top: 50px ! important;}
	
.infoCova{margin-top:50px ! important;}
		
#ml{
  margin: 10px;
  font-size: 1.8vw;
  margin-top: 10px;
}	
	
h1{font-size:1.6vw !important;}
h2{font-size:1.8vw !important;}
h3{font-size:1.1vw !important;}
h4{font-size:1.6vw;}

#myList{
 font-size:1.4vw !important;
}



.form-group input[type='text']{
    width: 100% ! important;
	background-color: white;
	background-image: url('images/');
	/*background-position:10px 10px; */
    padding: 6px 10px 6px 10px;
    margin-top:10px ! important;
    margin-left:0px ! important;
    border: 1px solid gray ! important;
}


.form-group input[type='text']:focus{
    width: 100% ! important;
    margin-left:0px ! important;
}

#pimg{
  width:100% ! important;
  height:100% ! important;
  margin-bottom: 10px;
  object-fit:contain;
  border-radius: 5px;
  
}	
 
.imgDiv{
	 width:100%;
	 margin-top:15px;
	 object-fit:contain;
	 border-radius: 5px;
 }
 
 #detail{
	 margin-top:10px;
	 margin-left:10px;
 }
 
 .detailDiv{
	 margin-left:130px;
	 padding-right:270px;
	 margin-bottom:200px;
 }
 
 #checkDiv{
     font-size:1.2vw;
     margin-top:-47px;
     margin-left:10px;
     margin-bottom:20px;
 }
 

  .appBtn, .mBtn{
    width:50% !important;
    font-size: 2vw !important;
  }	
  
  #placeOrder{
     width: 45% !important;
  }
  
   #message{
      font-size: 1.2vw !important;
    }
  
    #alat{
	    font-size:1.2vw !important;
   }
  	
  ::placeholder{
    font-size: 1.1vw !important;
  }
  
  select{
    font-size: 1.4vw !important;
  }
  
  option{
    font-size: 1.4vw !important;
  }
  address{
    font-size: 1.1vw !important;
  }
 
 .btn-info{
    font-size:1.2vw; 
 }
 
  
 #shareP{
     margin-top:-65px ! important;
 }
 
 p{font-size:1.2vw;}
 
 
}
	 
	 
	 
/* For Tablet Portrait View */
@media only screen and (min-device-width: 421px)
and (max-device-width: 640px) {
	

	
#ptito{font-size: 3.4vw;}
	
.nav-tabs{margin-left:-10px;}


.topDiv{
    margin-top:0px;
}
	

#dRow{
  margin-top: 0px;
}

#dCova{margin-top: 70px ! important;}
	
.infoCova{margin-top:70px ! important;}
		

#ml{
	margin: 10px;
	font-size: 2.4vw;
	margin-top: 10px;
}
	
h1{font-size:2.8vw !important;}
h2{font-size:2.8vw !important; margin-top: 20px ! important;}
h3{font-size:2vw !important;}
h4{font-size:2.2vw;}

#myList{
 font-size:1.8vw !important;
}

#pimg{
  width:100% ! important;
  height:100% ! important;
  margin-bottom: 10px;
  object-fit:contain;
  border-radius: 5px;
  
}	
 
.imgDiv{
	 width:100%;
	 margin-top:15px;
	 object-fit:contain;
	 border-radius: 5px;
 }
 
 #detail{
	 margin-top:10px;
	 margin-left:10px;
 }
 
 
 #checkDiv{
     font-size:2.6vw;
     margin-top:-51px;
     margin-left:10px;
     margin-bottom:20px;
 }

 
  .appBtn, .mBtn{
    width:50% !important;
    font-size: 2vw !important;
  }	

  
  ::placeholder{
    font-size: 1.8vw !important;
  }

  address{
    font-size: 1.8vw !important;
  }
  
  select{
    font-size: 2vw !important;
  }
  
  option{
    font-size: 2.2vw !important;
  }
 
 .btn-info{
    font-size:2vw; 
 }
 
 #shareP{
     margin-top:-64px ! important;
 }
 
 p{font-size:2vw;}
 	
	
	
}


/* For Mobile Screen */
@media only screen and (max-width: 420px) {
	
.fa-cart-plus{font-size:4vw ! important;}

.form-group input[type='text']{
    width: 100%;
	background-color: white;
	background-image: url('images/');
	/*background-position:10px 10px; */
    padding: 6px 10px 6px 10px;
    margin-top:10px ! important;
    margin-left:0px ! important;
    border: 1px solid gray ! important;
}


.form-group input[type='text']:focus{
    width: 100% ! important;
    margin-left:0px ! important;
}


#ptito{font-size:4.5vw;}
	
.nav-tabs{margin-left:-10px;}


.topDiv{margin-top:160px;}
	

#dRow{
  margin-top: 40px;
}

#dCova{margin-top:0px ! important;}
	
.infoCova{margin-top: 1px;}
		


#ml{
	margin: 10px;
	font-size: 3.4vw;
	margin-top: 10px;
}
	
h1{
    font-size:4.5vw !important;
    margin-left:0px ! important;
}

h2{font-size:4.2vw !important;}
h3{font-size:3.4vw !important;}
h4{font-size:3.2vw;}

#myList{
 font-size:3.2vw !important;
}

  
#pimg{
  width:100% ! important;
  height:100% ! important;
  margin-bottom: 10px;
  object-fit:contain;
  border-radius: 5px;
  
}	
 
.imgDiv{
	 width:100%;
	 margin-top:0px ! important;
	 object-fit:contain;
	 border-radius: 5px;
 }
 
 #detail{
	 margin-top:10px;
 }
 
 
 #checkDiv{
     font-size:3.2vw;
     margin-top:-51px;
     margin-left:10px;
     margin-bottom:20px;
 }
 

 .btn-info{
    font-size:3.2vw; 
 }
 

 #pay{
     margin-bottom:100px ! important;
 }
 
  #message{
    margin-top: 0px !important;
    margin-left: 0px !important;
  }

  ::placeholder{
    font-size: 3vw !important;
  }
  
  address{
    font-size: 3vw !important;
  }
  
  select{
    font-size: 3vw !important;
  }
  
  option{
    font-size: 3.2vw !important;
  }
  
  
 #chatP, .dWhats{
    margin-top:-30px ! important; 
    font-size:9vw ! important;
 }
 
 #shareP, #shareBtn{
     margin-top:-17px ! important;
 }

 p{font-size:3vw;}
 
 .inst{
   font-size:3vw ! important;
 }
 
 .sPM{
   font-size:4vw ! important;
   font-weight:bold ! important;
 }
 
}
