/*page style*/
/*define colors*/
:root{
	--BgColor: #EEEEEE;

	--NavHeadColor: #253B6E;
	--NavHoverColor: #070D59;
	--NavActiveColor: #00AD7C;
	--NavTopColor: #DBEDF3;

	--TabHeadColor: #253B6E;
	--TabAlt1Color: #D3D6DB;
	--TabAlt2Color: #EFF0F4;
	--TabHoverColor: #DBEDF3;

	--FormBgColor: #DBEDF3;
	--FormTxtColor: #00913e;
	--FormBtnColor: #4CAF50;
	--FormBtnTxtColor: white ;
	--FormHoverColor: #136e36;
	--FormHoverTxtColor: white;
	--FormBtnRstColor: #28156e;

	--FilterBgColor: #00AD7C;
}

body {
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 0;
	overflow-x: hidden;
	font-family: tisa, sans-serif;
	/*font-weight: bold;*/
	height: 100%;
	background-color: var(--BgColor);
}

h1, h2{
	color: #28156e;
}

button#bt_login{
	background-color: #4CAF50;
  	color: white;
}

button#bt_login:hover{
	background-color: lightgrey; 
	color:#28156e;
}

/*Navigation Bar Style*/
ul {
	list-style-type: none;
  	margin: 0;
  	padding: 0;
  	overflow: hidden;
  	background-color: var(--NavTopColor);
	/*position: fixed;*/
	top: 0;
  	width: 100%;
  	border-radius: 7px;
}

#content{
	padding-left: 16px;
	padding-right: 16px;
}

.stickyNav{
  	position: fixed;
  	top: 0;
  	width: 94%;
}

ul#NavBar{
	background-color: var(--NavHeadColor);
}

a {
	text-decoration: none;
}


li {
  	float: left;
}

li a{
  	display: block;
  	color: white;
  	text-align: center;
  	padding: 14px 16px;
  	text-decoration: none;
  	/*border-right:1px solid #bbb;*/
  	border-radius: 7px;
  	font-weight: bold;
  	font-size: 18px;
}

li a:hover:not(.active) {
  	background-color: var(--NavHoverColor);
  	color: white;
}

li a.active{
	color: white;
	background-color: var(--NavActiveColor);

}

li h1{
	padding: 0px 20px;
	font-size: 35px;
	align-items: center;
}

li img{
	padding: 10px 70px;
	transition: 0.2s;
}

button{
	cursor:  pointer;
	font-size: 18px;
	padding: 0px 5px;
	text-align: center;
}

button img{
	width: 15px;
}

.content{
	padding-top: 50px;
}

.loginPage {
	margin: 0 25% 0 25%;
	color: #28156e;
	text-align: center;
}

/*-------tabel database dan history---------*/
table#mytable{
	width: 100%;
	border-collapse: collapse;
	font-size: 18px;
}

#mytable th{
  	padding-top: 7px;
  	padding-bottom: 7px;
	align-items: middle;
  	text-align: center;
  	background-color: var(--TabHeadColor);
  	color: white;
}

#mytable td{
	padding: 5px;
	align-items: middle;
	text-align: center;
}

#mytable td.leftAlign{
	text-align: left;
}


table#mytable, #mytable th, #mytable td{
	border: 1px solid #ccc;
	border-spacing: 0px;\
	/*width: 100%;*/
	/*border-collapse: collapse;*/
}
#mytable tr:nth-child(even){background-color: var(--TabAlt1Color);}
#mytable tr:nth-child(odd){background-color: var(--TabAlt2Color);}
#mytable tr:hover {background-color: var(--TabHoverColor);}


/*------------------------------------------------------*/
/*-------tabel info reagen--------*/
/*container*/
div#searchdiv{
	padding-left: 22%;
	padding-right: 22%;
}

div#reagent_info{
	padding-left: 20%;
	padding-right: 20%;
}

table#rginfo{
	width: 100%;
	border-collapse: collapse;
	font-size: 20px;
}

#rginfo td.infotag{
	width: 25%;
  	text-align: left;
  	font-weight: bold;
	padding: 8px;
  	background-color: var(--TabHeadColor);
  	color: white;
}
#rginfo td.inforesult{
  	text-align: left;
  	font-weight: bold;
	padding: 8px;
  	background-color: var(--TabAlt1Color);
  	color: #28156e;
}

table#rginfo, #rginfo td{
	border: 3px solid white;
	border-spacing: 0px;\
}

/*----------------------------------------*/
/*halaman database inventory*/
div#_searchdiv{
	padding-left: 10%;
	padding-right: 10%;
	/*text-align: center;*/
}
#_searchdiv input[type=text]{
	width: 91%;
  	padding: 10px 20px;
  	display: inline-block;
  	border: 1px solid #ccc;
  	border-radius: 4px;
  	box-sizing: border-box;
  	font-size: 20px;
  	margin-top: 0px;
}
#_searchdiv label, #_searchdiv select{
	margin-top: 10px;
	display: inline-block;
	font-size: 18px;
	font-weight: bold;
}


#_searchdiv h1{
	text-align: left;
}

#_searchdiv button{
	width: 8%;
	padding: 10px 0px;
	text-align: center;
  	display: inline-block;
  	border: 1px solid #ccc;
  	border-radius: 4px;
  	box-sizing: border-box;
  	font-size: 20px;
  	float: right;
}

#_searchdiv button.SpecialBtn{
	background-color: whitesmoke;
	color: #253B6E;
	min-width: 15%;
	float: right;
	margin-left: 5px;
}

#_searchdiv button.SpecialBtn:hover{
	background-color: #ddd;
	color: #253B6E;
}

div#searchfilter{
	text-align: center;
	width: 100%;
	padding: 10px 20px;
	border: 1px solid #ccc;
  	border-radius: 4px;
  	box-sizing: border-box;
  	font-size: 18px;
  	background-color: var(--FilterBgColor);
  	color: white;
  	font-weight: bold;
  	margin-top: 30px;
}

#searchfilter input, #searchfilter select{
	font-size: 18px;
}

h1#mylab_header input, h1#mylab_header label, h1#mylab_header select{
	font-size: 22px;
	color: #28156e;
}
/*-----------------------------------------------*/
/*page navigator*/

div#pageDisplay{
	text-align: center;
	width: 18%;
	padding: 10px 0px;
	border: 1px solid #ccc;
  	border-radius: 4px;
  	box-sizing: border-box;
  	font-size: 18px;
  	background-color: var(--FilterBgColor);
  	color: white;
  	margin-top: 20px;
  	margin-left: 41%;
}

#pageDisplay button{
	display: inline-block;
	font-size: 18px;
	color: var(--FilterBgColor);
}

/*---------------------------------------*/
/*input form*/
div#inputForm{
	margin: 2% 20% 0% 20%;
	padding: 2% 5% 2% 5%;
	background-color: var(--FormBgColor);
	border-radius: 20px;
}

input[type=text], input[type=password], input[type=number], #inputForm select{
	width: 100%;
  	padding: 12px 20px;
  	margin: 8px 0;
  	display: inline-block;
  	border: 1px solid #ccc;
  	border-radius: 4px;
  	box-sizing: border-box;
  	font-size: 20px;
}
#inputForm label{
	font-size: 20px;
	color: var(--FormTxtColor);
}

#inputForm button{
  	width: 100%;
  	background-color: var(--FormBtnColor);
  	color: var(--FormBtnTxtColor);
  	padding: 14px 20px;
  	margin: 8px 0;
  	border: none;
  	border-radius: 4px;
  	font-weight: bold;
  	font-size: 20px;
}

#inputForm form.addstock input[type=date]{
	width: 100%;
  	padding: 12px 20px;
  	margin: 8px 0;
  	display: inline-block;
  	border: 1px solid #ccc;
  	border-radius: 4px;
  	box-sizing: border-box;
  	font-size: 20px;
}

#inputForm button:hover{
	background-color: var(--FormHoverColor);
  	color: var(--FormHoverTxtColor);
}

#inputForm button[type=reset]{
	background-color: var(--FormBtnRstColor);
}


/*index page*/
table.infotable{
	width: 80%;
	margin-left: 10%;
	margin-top: 10px;
	font-size: 20px;
}

table.infotable, .infotable th, .infotable td{
	border: 1px solid #ccc;
	border-collapse: collapse;
	padding: 5px;
	text-align: center;
}
.infotable th{
	background-color: var(--TabHeadColor);
	color: white;
}
.infotable tr{
	background-color: whitesmoke;
}
.infotable tr:hover, #stockTable tr:hover, #expTable tr:hover{
	background-color: var(--TabHoverColor);
	cursor: pointer;
}

div.infocard{
	min-width: 20%;
	display: table-cell;
	margin-top: 10px;
	border-spacing: 10px 0;
	border-collapse: separate;
	border: 1px solid #000;
	border-radius: 20px;
	font-size: 20px;
	background-color: var(--TabAlt2Color);
	color: var(--NavHeadColor);
}
div.infocard:hover{
	background-color: var(--NavActiveColor);
	color: white;
	cursor: pointer;
}

.infocard div{
	padding-left: 30px;
	padding-right: 30px;
	text-align: center;
	
}

.infocard h3{
	margin-top: 15px;
}

#stockTable table, #expTable table{
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

#stockTable tr, #expTable tr{background-color: var(--TabAlt2Color);}


#importDiv{
	margin-top: 2%;
	margin-left: 25%;
	width: 50%;
	font-size: 22px;
	color: #253B6E;
	font-weight: bold;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 7px;
	background-color: white;
}

#importDiv button{
	min-width: 20%;
	font-size: 22px;
	border-radius: 7px;
	border: 1px solid #ccc;
	background-color: #ddd;
	color: #253B6E;
	font-weight: bold;
	float: right;
}
#importDiv button:hover{
	color:  white;
	background-color: #00AD7C;
}

#importDiv input{
	font-size: 18px;
}


#reagent_info button.detailBTN{
	background-color: whitesmoke;
	color: #253B6E;
	min-width: 15%;
	/*float: right;*/
	margin-left: 5px;
	/*font-size:20px; */
	/*font-weight: bold;*/
	/*padding: 8px;*/
	/*border-radius: 10px;*/
	
	padding: 10px 0px;
	text-align: center;
  	display: inline-block;
  	border: 1px solid #ccc;
  	border-radius: 4px;
  	box-sizing: border-box;
  	font-size: 20px;
  	float: right;
}

#reagent_info button.detailBTN:hover{
	background-color: #ddd;
	color: #253B6E;
}