@keyframes MenyesuaikanTinggi{
	to { 
	width:100%;
	}
}
@keyframes megar{
	to {
		opacity:1;
		padding:10px;;
	}
}
@keyframes tampil{
	to { opacity:1; }
}

@keyframes menghilang{
	to { opacity:0; }
}

@keyframes slider{
	to { width:100%; }
}


body, html {
	margin: 0;
	padding: 0;
  	height: 100%;
  	width: 100%;
  	overflow: auto;
}

.MyBox{
	display: flex;
	flex-flow: row;
	justify-content: space-around;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-top: 10%;
	background-image: linear-gradient(to bottom, #617798, white);
}

.MyFrame{
	position: absolute;
	left: 10px;
	top:10px;
	width: 100%;
	background-color: grey;
	height: 100%;
}

/* Design Struktur Tabel */

.Tabel {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}

.Tabel td, .Tabel th {
  border: 1px solid #ddd;
  padding: 8px;
}

.Tabel tr:nth-child(even){background-color: #f2f2f2;}

.Tabel tr:hover {background-color: #ddd;}

.Tabel th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #4169E1;
  color: white;
  text-align: center;
}

/* Batas design struktur tabel */

/* Design Struktur TabelKecil */

.TabelKecil{
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}

.TabelKecil td, .TabelKecil th {
  border: 1px solid #ddd;
  padding: 2px;
  font-size: 12px;
}

.TabelKecil tr:nth-child(even){background-color: #f2f2f2;}

.TabelKecil tr:hover {background-color: #ddd;}

.TabelKecil th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #4169E1;
  color: white;
  text-align: center;
  font-size: 14px;
}

.TabelKecil th:first-child{
	border-radius: 10px 0px 0px 0px;
}

.TabelKecil th:last-child{
	border-radius: 0px 10px 0px 0px;
}

/* Batas design struktur TabelKecil */


.GroupLogin img{
	margin-top: 20px;

}

.GroupLogin{
	box-sizing: border-box;
	width: 300px;
	height: 300px;
	background-image: linear-gradient(#617798, white, #617798);
	display: flex;
	align-items: center;
	flex-flow: column;
	border: solid 1px #E5E5E5;
	border-radius: 50%;
	box-shadow: rgba(0,0,0, 0.8) 0px 0px 8px;
}

.KotakInput30{
	padding: 5px;
	width:30%; 
	border:none;
	border-radius: 5px; 
	font:Verdana, Arial, Helvetica, sans-serif; 
	color:white; 
	font-size:11px; 
	background-color:#3399FF;
	box-sizing: border-box;
}

.KotakInput30:focus{
	background-color: #000066;
}

.KotakInputStandar{
	padding: 5px;
	width:100%; 
	border:none;
	border-radius: 5px; 
	font:Verdana, Arial, Helvetica, sans-serif; 
	color:white; 
	font-size:11px; 
	background-color:#3399FF;
	box-sizing: border-box;
}

.KotakInputStandar:focus{
	background-color: #000066;
}

.KotakInput{
    margin: 0;
    padding: 1em;
    background: #fff;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    outline: none;
    border: 1px double #ccc;
    border-radius: 10px;
    box-shadow: rgba(0,0,0, 0.2) 0px 0px 8px;
}

.GroupLogin .KotakInput{
	width: 175px;
    margin: 0;
    padding: 9px;
    font: normal Verdana, Tahoma, sans-serif;
    outline: none;
    border: none;
    border-radius: 5px;
    box-shadow: rgba(0,0,0, 0.2) 0px 0px 8px;
}

.GroupLogin .UserID, .GroupLogin .UserPass{
	border: none;
}

.UserID{
	border:1px solid grey;
	display: inline-block;
	border-radius: 5px;
	border: solid 1px #E5E5E5;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	margin: 5px;
}

.UserID::before{
  content: '';
  background-image:url('../img/icn-user.png');
  width: 33px;
  height: 33px;
  background-size: cover;
  display: inline-block;
  float: left;
  margin-right: 5px;
}

.MenuUserProfil{
	display: none;
	margin: 5px;
	width: 170px;
	padding: 2px;
	position: absolute;
	left:5px;
	top: 60px;
}

.MenuUserProfil div{
  	box-shadow: rgba(0,0,0, 0.5) 0px 0px 8px;	
  	padding: 5px;
  	font: normal 12px/100% Verdana, Tahoma, sans-serif;
  	color: white;
	font-weight: bold;
}

.MenuUserProfil div:hover{
	cursor: pointer;
	background-image: linear-gradient(#617798, white);
	font-weight: bold;
	color: brown;
}

.MenuUserProfil div:active{
	background-image: linear-gradient(#617798, blue);
	color: white;
}

.UserProfil::before{
  content: '';
  background-image:url('../img/icn-user.png');
  width: 33px;
  height: 33px;
  background-size: cover;
  display: inline-block;
  float: left;
  margin-right: 10px;
}

.UserProfil{
  color: white;
  font: normal 18px/100% Verdana, Tahoma, sans-serif;
  line-height: 30px;
  text-transform: uppercase;
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  box-shadow: rgba(0,0,0, 0.5) 0px 0px 8px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.UserProfil:hover{
	cursor: pointer;
	background-image: linear-gradient(#617798, white);
	font-weight: bold;
	color: #617798;
}

.Clear{
	clear: left;
}

.UserProfil:active{
	background-image: linear-gradient(#617798, blue);
	color: white;
}

.UserPass{
	border:1px solid grey;
	display: inline-block;
	border-radius: 5px;
	border: solid 1px #E5E5E5;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	margin: 5px;
}

.UserPass::before{
  content: '';
  background-image:url('../img/password.png');
  width: 33px;
  height: 33px;
  background-size: cover;
  display: inline-block;
  float: left;
  margin-right: 5px;
}

.ContainerAll{
	display: flex;
	justify-content: space-around;
}

.Tombol{
    border:none;
    margin: 2%;
    background-color: #4169E1;
    color: lightcyan;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 5px 5px 10px grey;  
    width: 10%;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.Tombol:hover{
        box-shadow: 5px 5px 10px #4169E1;
        cursor: pointer;
        color: yellow;
}

.Tombol:active{
        box-shadow: 5px 5px 10px grey;
        cursor: pointer;
        color: #4169E1;
        background-color: yellow;
}


.TombolLogin{
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	font: normal 13px/100% Verdana, Tahoma, sans-serif;
	border:1px solid grey;
	padding: 9px;
	border-radius: 5px;
	background-color: #617798;
	color:white;
	width: 235px;
	text-transform: uppercase;
	margin: 5px;
	font-weight: bold;
}

.TombolLogin:hover{
	cursor: pointer;
	background-color: #4169E1;
}

.TombolLogin:active{
	background-color: red;
}

.TombolDetail:hover{
    color: #4169E1;
    background-color: yellow;
    cursor: pointer;
}

.TombolDetail{
    width: 30%;
    background-color: #4169E1;
    border: 1px solid grey;
    border-radius: 5px;
    box-shadow: 2px 2px 5px grey;   
    color: white;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold;
}

.TombolUbah:hover{
    color: #4169E1;
    background-color: yellow;
    cursor: pointer;
}

.TombolUbah{
    display: inline-block;
    width: 25%;
    background-color: brown;
    border: 1px solid grey;
    border-radius: 5px;
    box-shadow: 2px 2px 5px grey;   
    color: white;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    align-items: center;
}

.TombolAkses:hover{
    color: #4169E1;
    background-color: yellow;
    cursor: pointer;
}

.TombolAkses{
    display: inline-block;
    width: 25%;
    background-color: #4169E1;
    border: 1px solid grey;
    border-radius: 5px;
    box-shadow: 2px 2px 5px grey;   
    color: white;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    align-items: center;
}

.TombolHapus:hover{
    color: #4169E1;
    background-color: yellow;
    cursor: pointer;
}

.TombolHapus{
    display: inline-block;
    width: 25%;
    background-color: red;
    border: 1px solid grey;
    border-radius: 5px;
    box-shadow: 2px 2px 5px grey;   
    color: white;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
}

.MainFrame{
	margin: 0;
	margin-top:16px;
	width: 100%;
	padding: 1px;
	height: auto;
	border: none;
}

.GroupMenu{
	background-image: linear-gradient(#617798, white, black);
	margin:10% auto;
	width: 90%;
	height: auto;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 1) 0px 0px 8px;
	flex-wrap: nowrap;
	padding: 20px;
	justify-content: space-around;
}

.SettingMenu{
	display: flex;
	background-image: linear-gradient(#617798, white, black);
	margin:10% auto;
	width: 90%;
	height: auto;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 20px;
	justify-content: space-around;
}

.MasterMenu{
	display: flex;
	background-image: linear-gradient(#617798, white, black);
	margin:10% auto;
	width: 90%;
	height: auto;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 20px;
	justify-content: space-around;
}

.ReportMenu{
	display: flex;
	background-image: linear-gradient(#617798, white, black);
	margin:10% auto;
	width: 90%;
	height: auto;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 20px;
	justify-content: space-around;
}

.ActivityMenu{
	display: flex;
	background-image: linear-gradient(#617798, white, black);
	margin:10% auto;
	width: 90%;
	height: auto;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 20px;
	justify-content: space-around;
	overflow-wrap: break-word;
}


.Report{
	display: flex;
	margin:5px auto;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	flex-wrap: wrap;
	padding: 5px;
	justify-content: space-around;
	border: none;
}



.ChangePass{
	background-image: linear-gradient(#617798, white, black);
	box-sizing: border-box;
	margin:10% auto;
	width: 80%;
	height: auto;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 50px;
	justify-content: space-around;
}

.ListUser{
	display: flex;
	margin:5px auto;
	width: 100%;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	flex-wrap: wrap;
	padding: 5px;
	justify-content: space-around;
	border: none;
}

.ListPaket{
	display: flex;
	margin:5% auto;
	width: 95%;
	height: auto;
	align-items: center;
	flex-flow: row;
	flex-wrap: wrap;
	padding: 10px;
	justify-content: space-around;
	border: none;
}

.FormPaket{
	display: flex;
	background-image: linear-gradient(#617798, white, black);
	box-sizing: border-box;
	margin:5% auto;
	width: 95%;
	height: auto;
	align-items: center;
	flex-flow: column;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 10px;
	justify-content: space-around;
}

.BookingList{
	width: 100%;
}

.FormUser{
	display: flex;
	background-image: linear-gradient(#617798, white, black);
	box-sizing: border-box;
	margin:5% auto;
	width: 80%;
	height: auto;
	align-items: center;
	flex-flow: column;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 10px;
	justify-content: space-around;
}

.FormAkses{
	display: flex;
	background-image: linear-gradient(#617798, white, black);
	box-sizing: border-box;
	margin:5% auto;
	width: 80%;
	height: auto;
	align-items: center;
	flex-flow: column;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 10px;
	justify-content: space-around;
}

.FormUbahUser{
	display: flex;
	background-image: linear-gradient(#617798, white, black);
	box-sizing: border-box;
	margin:5% auto;
	width: 80%;
	height: auto;
	align-items: center;
	flex-flow: column;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 10px;
	justify-content: space-around;
}

.FormOrder{
	display: flex;
	background-color: white;
	box-sizing: border-box;
	margin:10px auto;
	width: 100%;
	height: auto;
	align-items: center;
	flex-flow: column;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 10px;
	justify-content: space-around;
}

.ListMenu{
	display: flex;
	margin:5px auto;
	width: 100%;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	flex-wrap: wrap;
	padding: 5px;
	justify-content: space-around;
	border: none;
}


.FormMenu{
	display: flex;
	background-image: linear-gradient(#617798, white, black);
	box-sizing: border-box;
	margin:5% auto;
	width: 80%;
	height: auto;
	align-items: center;
	flex-flow: column;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 10px;
	justify-content: space-around;
}

.FormUbahMenu{
	display: flex;
	background-image: linear-gradient(#617798, white, black);
	box-sizing: border-box;
	margin:5% auto;
	width: 80%;
	height: auto;
	align-items: center;
	flex-flow: column;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 10px;
	justify-content: space-around;
}

.FormProfil{
	display: flex;
	margin:5px auto;
	width: 100%;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	flex-wrap: wrap;
	padding: 5px;
	justify-content: space-around;
	border: none;
}


.KotakScan{
	display: flex;
	margin:10% auto;
	align-items: center;
	flex-flow: column;
	border: none;
}

.InputSelect{
	width: 235px;
    margin: 0;
    padding: 1em;
    background: #fff;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    outline: none;
    border: 1px double #ccc;
    border-radius: 10px;
    box-shadow: rgba(0,0,0, 0.2) 0px 0px 8px;
}

.KotakMenu{
	display: inline-block;
	width: 70px;
	height: 70px;
	border:1px solid grey;
	border-radius: 10px;
	border: solid 1px #E5E5E5;
	box-shadow: rgba(0,0,0, 1) 0px 0px 8px;
	margin: 5px;
	background-size: cover;
	background-color: #617798;	
	text-align: center;
	color: white;
	text-shadow: 2px 2px 4px #000000;
	font-weight: bold;
	font-size: 10px;
}

.KotakMenu:hover{
	cursor: pointer;
	background-image: linear-gradient(#617798, white);
}

.KotakMenu:active{
	background-color: red;
}

.Tampil{
	display: flex;
}

.TampilBlock{
	display: block;
}

.Hilang{
	display: none;
}

.TextAreaInput {
	box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 1em;
    border: 1px double #ccc;
    background: #fff;
    resize: none;
    outline: none;
    border-radius: 10px;
    box-shadow: rgba(0,0,0, 0.2) 0px 0px 8px;
    color: darkslateblue;
}

.TextAreaInput[required]:focus 
{
    background-image: linear-gradient(to bottom, #fff, lightblue);
}
.TextAreaInput[required]:focus + .LabelInputText:before {
    color: #4169E1;
    font-weight: bold;
    background-color: white;
}

.TextAreaInput[required]:focus + .LabelInputText:before,

.TextAreaInput[required]:valid + .LabelInputText:before {
    transition-duration: 1s;
	transform: translate(0, -1.65em) scale(0.9, 0.9);
}
.TextAreaInput[required]:invalid + .LabelInputText[alt]:before {
    content: attr(alt);
}

.TextAreaInput[required] + .LabelInputText 
{
    display: block;
    pointer-events: none;
    line-height: 0em;
    margin-top: calc(-1.8em - 2px);
    margin-bottom: calc((3em - 2em) + 2px);
    background-color: white;
}

.TextAreaInput[required] + .LabelInputText:before 
{
    content: attr(placeholder);
    display: inline-block;
    margin: 0 calc(1em + 2px);
    padding: 0 2px;
    color: darkslateblue;
    font-weight: bold;
    white-space: nowrap;
	transition: 1s ease-in-out;
    background-color: white;
    background-size: 100% 5px;
    background-repeat: no-repeat;
    background-position: center;
}

.GroupInput{
    width: 30%;
	box-sizing: border-box;
    margin: 5px;
    padding: 1em;
    border: 1px double #ccc;
    background: #fff;
    resize: none;
    outline: none;
    border-radius: 10px;
    box-shadow: rgba(0,0,0, 0.2) 0px 0px 8px;
    color: darkslateblue;
}

.GroupInputText{
    display: inline-block;
    padding: 0;
    height: auto;
    margin: 5px;
    width: 30%;
	box-sizing: border-box;
}

.GroupInputDate{
    display: inline-block;
    height: auto;
    margin: 5px;
    width: 30%;
	box-sizing: border-box;
}

.InputText {
	box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 1em;
    border: 1px double #ccc;
    background: #fff;
    resize: none;
    outline: none;
    border-radius: 10px;
    box-shadow: rgba(0,0,0, 0.2) 0px 0px 8px;
    color: darkslateblue;
}

.InputText[required]:focus 
{
    background-image: linear-gradient(to bottom, #fff, lightblue);
}

.InputText[required]:focus + .LabelInputText:before {
    color: #4169E1;
    font-weight: bold;
    background-color: white;
}

.InputText[required]:focus + .LabelInputText:before,

.InputText[required]:valid + .LabelInputText:before {
    transition-duration: 1s;
	transform: translate(0, -1.25em) scale(0.9, 0.9);
}
.InputText[required]:invalid + .LabelInputText[alt]:before {
    content: attr(alt);
}

.InputText[required] + .LabelInputText 
{
    display: block;
    pointer-events: none;
    line-height: 1em;
    margin-top: calc(-1.8em - 2px);
    margin-bottom: calc((3em - 2em) + 2px);
    background-color: white;
}

.InputText[required] + .LabelInputText:before 
{
    content: attr(placeholder);
    display: inline-block;
    margin: 0 calc(1em + 2px);
    padding: 1px 2px;
    color: darkslateblue;
    font-weight: bold;
    white-space: nowrap;
	transition: 1s ease-in-out;
    background-color: white;
    background-size: 100% 5px;
}

.JudulForm{
	display: block;
	color: darkslateblue;
	text-shadow: 2px 2px 4px white;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	padding: 10px;
}

.ParentTanggal{
	display: flex;
	flex-flow: column;
	justify-content: space-around;
}

.KotakKolom{
	width: 100%;
	height: 300px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

.Tanggal{
	margin: 5px;
	width: 160px;
	display: flex;
	flex-flow: column;
	box-sizing: border-box;
    box-shadow: rgba(0,0,0, 0.2) 0px 0px 8px;
    box-sizing: border-box;
}

.LabelText{
	margin: 0;
	width: 160px;
	font:Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color: white;
	background-color: #617798;
	padding-left: 5px;
	border-radius: 5px 5px 0px 0px;
	box-sizing: border-box;
}

.KotakTanggal{
	width: 150px;
	padding: 5px;
	border:none;
	border-radius:0px 0px 5px 5px; 
	font:Verdana, Arial, Helvetica, sans-serif; 
	color:white; 
	font-size:15px; 
	background-color:#3399FF;
}

.KotakSelect{
	width: 160px;
	padding: 5px;
	border:none;
	border-radius:0px 0px 5px 5px; 
	font:Verdana, Arial, Helvetica, sans-serif; 
	color:white; 
	font-size:15px; 
	background-color:#3399FF;
}

.TombolStandar{
	margin: 5px;
	width: 160px;
	font:Verdana, Arial, Helvetica, sans-serif; 
	font-size:13px; 
	color: white;
	background-image: linear-gradient(#617798, blue);
	padding: 5px;
    box-shadow: rgba(0,0,0, 1) 0px 0px 8px;
	box-sizing: border-box;
	border-radius:5px; 
	border: none;
	outline: none;
	text-align: center;
}

.TombolStandar:hover{
	cursor: pointer;
	background-image: linear-gradient(#617798, white);
	color: darkslateblue;
}

.Panjang20{
	width:20%;
}


.Panjang40{
	width:40%;
}

.Panjang63{
	width:63.5%;
}

.Panjang58{
	width:61%;
}

.Panjang100{
	width:100%;
}

.Panjang90{
	width:90%;
}

.Panjang85{
	width:85%;
}

.Panjang80{
	width:80%;
}

.SearchNoPol{
	position: absolute;
	margin-top: 4.5%;
	margin-left: -12%;
	padding-left: 1.5%;
    color: darkslateblue;
	width: 80%;
	height: auto;
	display: none;
	z-index: 100;
}

.CariNoPolisi{
    color: darkslateblue;
	display: none;
}

.SearchPaketService{
	position: absolute;
	margin-top: 22%;
	margin-left: -12%;
	padding-left: 1.5%;
	width: 80%;
	height: auto;
	display: none;
}

.FormView{
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-around;
}

.FormChild{
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 275px;
}

.Sales{
	display: flex;
	flex-flow: column;
	width: 280px;
	align-items: center;
	margin:5% auto;
}

.StockList{
	display: flex;
	background-image: linear-gradient(#617798, white, black);
	box-sizing: border-box;
	margin:5px auto;
	width: 100%;
	height: auto;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	border-radius: 20px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	flex-wrap: wrap;
	padding: 10px;
	justify-content: space-around;
}

.KotakTombol{
	display: flex;
	flex-flow: row;
	justify-content: space-around;
}

.GroupTombol{
	display: flex;
	flex-flow: column;
	justify-content: space-around;
	align-items: center;
}


.TampilanFullStandar{
	margin: 1px auto;
	width: 95%;
}

.FormCashOut{
	display: flex;
	flex-flow: column;
	background-image: linear-gradient(#617798, white, #617798);
	width: 100%;
	margin: 0;
	align-items: center;
}

.FormCashOut .TombolStandar{
	margin:10px;
}

.FormCashIn{
	display: flex;
	flex-flow: column;
	background-image: linear-gradient(#617798, white, #617798);
	width: 100%;
	margin: 0;
	align-items: center;
}

.FormCashIn .TombolStandar{
	margin:10px;
}


.StockFrame{
	margin-top: 20px;
	width: 100%;
	height: 300px;
	background-image: linear-gradient(#617798, white, #617798);
	border-radius: 10px;
	border: none;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}


.TextInput, .SelectInput{
	margin: 5px;
	box-sizing: border-box;
    padding: 5px;
    border: 1px double #ccc;
	background-image: linear-gradient(to bottom, #fff, lightgreen);
    resize: none;
    outline: none;
    border-radius: 5px;
    box-shadow: rgba(0,0,0, 0.2) 0px 0px 8px;
    color: darkslateblue;
}

.TextInput:focus, .SelectInput:focus{
	background-image: linear-gradient(to bottom, #fff, lightblue);
}

.InputLogo{
	padding-left:60px;
}

.InputLogo:focus + .LabelInputText:before {
    color: darkslateblue;
    font-weight: bold;
    background-color: white;
}

.InputLogo:focus + .LabelInputText:before,

.InputLogo[required]:valid + .LabelInputText:before {
    transition-duration: 1s;
	transform: translate(0, -1.25em) scale(0.9, 0.9);
}

.InputLogo[required] + .LabelInputText 
{
    display: block;
    pointer-events: none;
    line-height: 1em;
    margin-top: calc(-1.8em - 2px);
    margin-bottom: calc((3em - 2em) + 2px);
    background-color: white;
}

.InputLogo + .LabelInputText:before 
{
    content: attr(placeholder);
    display: inline-block;
    margin: 0 calc(-5em + 2px);
    padding: 1px 2px;
    color: darkslateblue;
    font-weight: bold;
    white-space: nowrap;
	transition: 1s ease-in-out;
    background-color: white;
    background-size: 100% 5px;
    margin-left: -97%;
}

.FormCariOrder{
	display: flex;
	margin:5px auto;
	align-items: center;
	flex-flow: row;
	border: solid 1px #E5E5E5;
	flex-wrap: wrap;
	padding: 5px;
	justify-content: space-around;
	border: none;
}

.Barcode{
    border: 1px solid grey;
    border-radius: 5px;
	width: 150px;
	height: 100px;
	display: flex;
	flex-flow: column;
	align-items: center;
	font-size: 12px;
	font-family: sans-serif;
	margin-bottom: 50px;
}

.KotakBarcode{
	width: 200px;
	height: 175px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	padding: 5px;
	border: solid 1px grey;
	border-radius: 10px;
}