.notifbtn { height:25px;width:25px;padding:2px; position:absolute;right:0px;float:right;top:-12px;left:80%;border-radius:50%;color:white;background-color:#3498db; line-height:1.5}
th {background-color:#227093;color:#FFFFFF;font-size:14px;font-weight:bold;border : 1px solid #FFFFFF;}
body         { background-color: #ecf0f1;}
a:link       { text-decoration: none;}
a:visited    {text-decoration: none;}
a:hover      {text-decoration: none;}
a:active     {text-decoration: none;}
body,td,th   {color: #000;}

#table1 {border-collapse:collapse;}
#table1 th {cursor:pointer;font-size:14px;font-weight:100;text-align:center}
#table1 th:hover {background-color:rgba(52, 152, 219,1.0);}
.noscroll::-webkit-scrollbar {display: none;}
.mtxcenter { background-color:rgba(155,210,156,0.0); width:50%;margin-left:23%;position:fixed;height:500px;   float:left; border-radius:5px;padding:15px;  
             font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100;top:50px;  }
.mtxcenter2 { background-color:rgba(155,210,156,0.0); width:70%;margin-left:13%;position:fixed;height:500px;   float:left; border-radius:5px;padding:15px;  
             font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100;top:50px;  }

.mtx { background-color:#FFFFFF; width:99.7%;position:relative;float:left;border:1px solid #ccc; border-radius:5px;padding:15px;margin-top:10px;margin-bottom:10px; 
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100;}
.mtx1{ background-color:#FFFFFF; width:33%;position:relative;margin-right:0.3%;float:left;border:1px solid #ccc; padding:15px;margin-top:10px;border-radius:5px;
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100;}
.mtx2{ background-color:#FFFFFF;width:66%;position:relative;margin-right:1%;float:left; padding:15px;margin-top:10px;border-radius:5px; 
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100;}
.mtx22{ background-color:#FFFFFF;width:65%;position:relative;margin-right:1%;float:left; padding:15px;margin-top:10px;border-radius:5px; 
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100;}

.mtx3{ background-color:#FFFFFF;width:30%;position:relative;margin-right:2%;float:left; padding:15px;margin-top:10px;border-radius:5px; 
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100;border:1px solid #CCCCCC}
.mtx4{ background-color:#FFFFFF;width:68%;position:relative;margin-right:0;float:left; padding:15px;margin-top:10px;border-radius:5px;
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100;border:1px solid #CCCCCC }
.mtx42{ background-color:#FFFFFF;width:75%;position:relative;margin-right:0;float:left; padding:15px;margin-top:10px;border-radius:5px;
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100; }

.mtx5{ width:24.5%;position:relative;margin-right:5px;float:left; padding:15px; background-color:#FFFFFF; margin-top:10px;border-radius:5px;border-radius:5px;
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100; } 
.mtx52{ width:50%;position:relative;float:left; padding:15px; background-color:#FFFFFF;border:1px solid #ccc; margin-top:10px;border-radius:5px;border-radius:5px;
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100; } 
.mtx53{ width:16%;position:relative;float:left; padding:15px; background-color:#FFFFFF; margin-top:10px;border-radius:5px;border-radius:5px;
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100; } 
 

.mtx6{ width:17.5%; background: rgb(135,204,136);
background: linear-gradient(180deg, rgba(135,204,136,1) 0%, rgba(104,191,122,1) 35%, rgba(155,210,156,1) 100%);
       position:relative;margin-right:18px;float:left; padding:10px; height:110px;border:1px solid #CCCCCC;margin-top:10px;border-radius:5px;color:#000000;border:1px solid #ccc;}
.fontx{ font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:bold;line-height:1.5; color:#666666 } 
.fonty{ font-family: 'Roboto Condensed', sans-serif;font-size:20px; color: #006699;font-weight:bold; } 
.gambarproduk    	 {border-radius:8px;width:100%;height:55%;object-fit:cover;}
.produkwrap 		 {margin-bottom:20px;height:300px;width:19%; background-color:#FFFFFF;padding:0px; 
                      border-radius:8px;float:left;position:relative;padding:5px;
		              margin-left:0.5%;margin-right:0.5%;overflow:hidden;transition: transform .2s;
					  box-shadow: 2px 3px 8px 1px rgba(0,0,0,0.75);}
.produkwrap:hover	 {background-color:#fcfcfc;}
.produkwrap:active 	 {border:2px solid #FFFFFF;transform: translateY(4px);}	
#namaproduk 		 {text-align:center;font-weight:bold;font-size:15px;color:#40739e}
#promo 				 {text-align:center;font-weight:100;font-size:13px;color:#c23616}
#hargajual 			 {text-align:center;font-weight:100;font-size:15px;font-weight:100;color:#000}
 
@media (max-width: 952px)
{
.mtxcenter { top:0px;background-color:#FFFFFF; width:100%;left:0px;margin-left:0px;position:fixed;border-radius:5px;padding: 5px;margin-top:0px;margin-bottom:10px; 
             font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100;height:100%;display:flex;align-items: center;
  			 height: 100%;top:0%;}
.mtxcenter2 { top:0px;background-color:#FFFFFF; width:100%;left:0px;margin-left:0px;position:fixed;border-radius:5px;padding: 5px;margin-top:0px;margin-bottom:10px; 
             font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100;height:100%;display:flex;align-items: center;
  			 height: 100%;top:0%;}

.mtx{ width:100%;position:relative;float:left;margin-left:0%;border:1px solid #ccc;border-radius:0px;
      overflow:scroll;padding:0px;margin-bottom:0px;padding:10px;border-radius:5px;}
.mtx1{ width:100%;margin-top:10px;position:relative;margin-right:0%;float:left;border:1px solid #ccc;; padding:10px;margin-top:10px;border-radius:5px;}
.mtx2{ width:100%;overflow:scroll;border-radius:5px;overflow:scroll;
       margin-top:10px;position:relative;margin-right:0%;float:left;border:1px solid #ccc;; padding:10px;margin-top:10px;border-radius:5px;}
.mtx2::-webkit-scrollbar {display: none;} 
.mtx1::-webkit-scrollbar {display: none;} 
.mtx::-webkit-scrollbar {display: none;} 
.mtx3{ width:100%;position:relative;margin-right:0%;float:left; padding:5px;margin-top:10px;border-radius:5px;}
.mtx4{ width:100%;position:relative;margin-right:0%;float:left; padding:5px;margin-top:10px;}
.mtx42{ width:100%;position:relative;margin-right:0%;float:left; padding:5px;margin-top:10px;}
.mtx22{ width:100%;position:relative;margin-right:0%;float:left; padding:5px;margin-top:10px;}

.mtx5{ width:100%;position:relative;margin-right:0%;float:left; padding:5px;margin-top:10px;border-radius:5px;}
.mtx6{ width:100%;background: rgb(135,204,136);
background: linear-gradient(180deg, rgba(135,204,136,1) 0%, rgba(104,191,122,1) 35%, rgba(155,210,156,1) 100%);position:relative;margin-right:0%;float:left; padding:5px;border:1px solid #CCCCCC;margin-top:10px;border-radius:5px;box-shadow: 1px 1px 2px 0px  rgba(0, 0, 0, 0.3) }
.mtx52{ width:100%;position:relative;float:left; padding:15px; background-color:#FFFFFF; margin-top:10px;border-radius:5px;border-radius:5px;
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100; } 
.fontx{ font-family: 'Roboto Condensed', sans-serif;font-size:16px;font-weight:bold; } 
.mtx53{ width:100%;position:relative;float:left; padding:15px; background-color:#FFFFFF; margin-top:10px;border-radius:5px;border-radius:5px;
       font-family: 'Roboto Condensed', sans-serif;font-size:14px;font-weight:100; } 

.produkwrap 		 {height:330px;width:100%;padding: 5px;background-color:#FFFFFF;border-radius:10px;float:left;position:relative;padding:5px;
					  margin-left:0%;margin-right:0%;margin-top:15px;}
.gambarproduk 		 {border-radius:8px;width:100%;height:55%;object-fit:cover;}
}