@media only screen and (max-width: 600px) { /*HP*/
			  .Login_responsive{
					  margin-top:15%;
					  border-radius : 10px;
					  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
					  text-align: center;
			  }
			  
			   li > button > i{
					margin-top : -8px;
				}
				
				.collapsible{
					margin-left:2%;
					margin-right:2%;
				}
				
				.containerku{
					margin-top : 2%;
					margin-left: 4%;
					margin-right: 4%;
					margin-bottom: 8%;
				}
				
				.grand-total{
					margin-top : -5px;
					font-size : 17px;
				}
					
			  
			}
		@media only screen and (min-width: 600px){ 
			.containerku{
				margin-top : 10px;
				margin-left: 4%;
				margin-right: 4%;
				margin-bottom: 8%;
			}
			
			.grand-total{
				margin-top : -5px;
				font-size : 45px;
			}
			
			 .Login_responsive{
					display: block;
					margin-top:5%;
					margin-left: auto;
					margin-right: auto;
					width: 25%;
					border-radius : 10px;
					box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
					text-align: center;
			  }
			  
			   li > button > i{
					margin-top : -11px;
				}
				.collapsible{
					margin-left:10%;
					margin-right:10%;
				}
			}
	  
		.Logo-Comp{
			display: block;
		  margin-left: auto;
		  margin-right: auto;
		  width: 30%;
		}
		
		.card-panel{
			border-radius: 25px;
		}
		.collection-item > a{
			color:#000000;
		}

		.label {
		  color: white;
		  padding-left: 7px;
		  padding-right: 7px;
		  border-radius:5px;
		}

		.success {background-color: #4CAF50;} /* Green */
		.info {background-color: #2196F3;} /* Blue */
		.warning {background-color: #ff9800;} /* Orange */
		.danger {background-color: #f44336;} /* Red */
		.other {background-color: #e7e7e7; color: black;} /* Gray */
		 
		
		.DetailTrx {
			cursor:pointer;
		}
		
		.transaksi-bottom{
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		
		.table_biasa{
			  border-radius : 5px;
			  height: 235px;
			  overflow: visible;
			  border: solid 1px #e8e8e8;
			  display:block;
			  width:100%;
			  overflow-x:auto;
			  -webkit-overflow-scrolling:touch;
			  -ms-overflow-style:-ms-autohiding-scrollbar;
		}
		
		.table_history{
			  border-radius : 5px;
			  height: 300px;
			  overflow: visible;
			  border: solid 1px #e8e8e8;
			  display:block;
			  width:150%;
			  overflow-x:auto;
			  -webkit-overflow-scrolling:touch;
			  -ms-overflow-style:-ms-autohiding-scrollbar;
		}
		
		.header-add{
			border: solid 1px #e8e8e8;
		}
		
		.editor{
			display:none;
		}
		
		.waktu{
			font-size : 60px;
		}
		
		.title-grand-total{
			margin-top : -30px;
			font-size : 20px;
		}
		.time{
			margin-top: -30px;
		}
		
		.container-login{
			margin : 20px;
		}
		
		.icon-png{
			font-size : 96px;
			background: -webkit-linear-gradient(#61c5ff, #007bff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		
		.card-2{
			height : 150px;
			width : 150px;
		}
		
		.radius-card{
			border-radius: 25px;
		}
		
.order-card {
    color: #fff;
}

.bg-c-blue {
    background: linear-gradient(45deg,#4099ff,#73b4ff);
}

.bg-c-blue-second {
    background: linear-gradient(45deg,#036ED9,#73b4ff);
}

.bg-c-green {
    background: linear-gradient(45deg,#2ed8b6,#59e0c5);
}

.bg-c-green-second {
    background: linear-gradient(45deg,#0e8c5c,#59e0c5);
}

.bg-c-yellow {
    background: linear-gradient(45deg,#FFB64D,#ffcb80);
}

.bg-c-yellow-second {
    background: linear-gradient(45deg,#f76b1c,#ffcb80);
}

.bg-c-pink {
    background: linear-gradient(45deg,#FF5370,#ff869a);
}

.bg-c-pink-second {
    background: linear-gradient(45deg,#d11963,#ff869a);
}

.bg-c-ungu {
    background: linear-gradient(45deg,#961276,#FF57B9);
}

.bg-c-item {
    background: linear-gradient(45deg,#5D6874,#c5c7ca);
}

.bg-c-blue-ungu {
    background: linear-gradient(45deg,#c5c7ca,#961276);
}


.card {
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.card .card-block {
    padding: 15px;
}

.order-card i {
    font-size: 45px;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}