/* class */
.judul { font-size:30px; font-family: calibri; font-weight:bold; color:#000066; } /*FF3399,0000CC,000066*/
.halaman { font-size:19px; font-family: calibri; font-weight:bold; color:#000066; }
.harusDiisi { font-size:14px; color:#FF0000; font-weight:bold; }
.ketemu { font-size:14px; color:#000000; font-weight:bold; }
.error { color:#FF0000; font-size:14px; font-weight:bold; }
/*.copyright { font-size:14px; color:#009F55; font-weight:bold; }*/

.textCari { color:#0000FF; font-size:14px; font-weight:bold; }
.bgCari { background-color: #FFFBF0; border:double #00DFAA 6px; }

.logOut { color:#FF0000; font-family:calibri }
.tabelProduk { border:groove #CCFFCC 8px; }

.hasilCari {  border:solid #000000 1px; background-color:#FFFBF0; width:250px; }
.texthasilCari { color:#0000FF; font-size:18px; font-weight:bold; background-color:#99FF99;  border-bottom-style:double; border-bottom-color:#000000; }

.detil
{
	background-color:#00CC99; font-size:18px; color:#FFFFFF;
}
.judulTable { border:outset #009933 2px; background-color:#CCCCCC; font-size:20px; font-family: calibri; font-weight:bold; } /* #009933, #006633, 00CC66*/
.bodyTable { border:solid #CCCCCC 2px; background-color:#3366CC; color:#FFFFFF; font-family:calibri; font-size:16px; } /* #6666FF, 003399*/
.tombol  { 	border: outset #000099 3px;
			background-color:#0000FF; color:#FFFFFF; font-weight:bold;} /* 009933 */
			
.readOnly { background-color:#FFFFCC; border: solid #000000 1px;}
.txtUserLogin { background-color:#000066; font-weight:bold; color:#FFFFFF; border:double #FFFFFF 6px;}
.linkTanpaUnderline { text-decoration:none; }
.judulCari { color:#FF0000; font-size:20px;}

.bodyTable2
{
	 background-color:#FFFBF0; color:#000000; font-family:calibri; font-size:16px; border: solid #000000 1px; /*339900,CCFFCC*/
}
.judulTable2 
{ 
	 background-color:#0000CC; color:#FFFFFF; font-size:16px; font-family: calibri; font-weight:bold; border: solid #000000 1px; /*0000FF*/
}

.bodyTable3
{
	 background-color:#009900; color:#FFFFFF; font-family:calibri; font-size:16px; 
}
.judulTable3 
{ 
	 background-color:#0000FF; font-size:16px; font-family: calibri; font-weight:bold; 
}

.bodyTable4 /*putih*/
{
	 background-color:#FFFFFF; color:#000000; font-family:calibri; font-size:16px; border: solid #000000 1px; 
}
.judulTable4 /*biru kecil*/
{ 
	 background-color:#0000CC; color:#FFFFFF; font-size:16px; font-family: calibri; font-weight:bold; border: solid #000000 1px;
}

.bodyTable5 /*kuning bulak*/
{
	 background-color:#FFFBF0; color:#000000; font-family:calibri; font-size:16px; border: solid #000000 1px; 
}
.judulTable5 /*biru besar*/
{ 
	 background-color:#0000CC; color:#FFFFFF; font-size:24px; font-family: calibri; font-weight:bold;
}

.bodyTableDaftar
{
	 background-color:violet; color:#000000; font-family:calibri; font-size:18px; border: solid #000000 0px; width:90%; 
}
.judulTableDaftar
{ 
	 background-color:#0000CC; color:#FFFFFF; font-size:16px; font-family: calibri; font-weight:bold;
}

.bodyTableAjax
{
	 background-color:#FFFFFF; color:#FFFFFF; font-family:calibri; font-size:16px; border: solid #000000 1px; /*FFFFCC*/
}
.judulTableAjax
{ 
	 background-color:#A6CAF0; color:#000000; font-size:16px; font-family: calibri; font-weight:bold; /*00CC99*/
}

.bodyTableForum 
{
	 background-color:#000000; color:#000000; font-family:calibri; font-size:16px; font-weight:bold; border: solid #000000 0px;
}
.judulTableForum /*biru kecil*/
{ 
	 background-color:#0000CC; color:#FFFFFF; font-size:16px; font-family: calibri; font-weight:bold; 
}
.txtDaftar 
{
	color:#000000; font-size:20px; font-weight:bold;
}

.captcha
{
	border: solid #000000 1px;
}
.namaProduk { color:#0000FF; font-size:20px; font-weight:bold; }
.batas { background-color:#00CC99; font-size:1px;}
.batasBiru { background-color:#0000CC; font-size:1px;}

.borderInput { border:ridge #000000 3px; }

.link    { color: #000099; }
.linkVisited { color: #000033; } /* posisi hrs link, visited, hover */
.linkHover { color: #990000; font-weight:bold; } /* 990000 */
/* TAG */
textarea {font-family:calibri; font-size:14px; color:#000000; /*font-weight:bold; *//*border:ridge #000000 3px;*/} /* tag textarea */
select {font-family:calibri; font-size:14px; color:#000000; /*border:ridge #000000 3px;*/} /* tag select --> comboBox */
input {font-family:calibri; font-size:14px; color:#000000; /*border:ridge #000000 3px;*/ /*background-color:#FFFFFF;*/ } /* tag input --> text, password, radio, hidden, button, submit, file, dll */

body { background-color:#CCCCFF; font-family:calibri; font-size:18px; color:#000000; /*font-weight:bold;*/}* /*Default body */
/*table {border-color:#FFFFFF; }*/
/*.banner { width:850px; height:120px; margin-top:20px; margin-left:80px; margin-bottom:20px; background-image:url(banner2.jpg);}*/
a:link    { color: #000099; font-weight:bold;}
a:visited { color: #660000; font-weight:bold;} /* posisi hrs link, visited, hover */
a:hover   { color: #FF0000; font-weight:bold; } /* 990000 */
li {font-family:calibri; font-size:14px; color:#000000;}

#txtBanner
{
	background-image:url(image/banner.png); background-repeat:no-repeat;height:171px;text-align:center;
}
#banner
{
	background-color: #FFFFFF;
}
#txtcopyright 
{
	font-weight:bold;font-size: xx-large; color: #FFFFFF; text-shadow: 2px 2px #000000; 
	/*background-image:url(image/txtCopyRight2.png); width:465px; height:60px; background-repeat:no-repeat;*/
}
#tableIndex
{
	/* width: u/ ukuran table kiri-kanan, margin-top: set ukuran atas 2% dr ukr window, margin-bottom: set ukuran bawah 2% dr ukr window */
	width:80%; margin-top:2%; margin-bottom:2%;
	 
	background-color:#000000; border-color:#FFFFFF;  border-width:9px;
	border-top-style:inset;
	border-bottom-style:outset;
	border-left-style:outset;
	border-right-style:inset;
}
#tableFull
{
	width:100%; 
	background-color:#000000; border-color:#FFFFFF; border-width:9px;
	border-top-style:inset;
	border-bottom-style:outset;
	border-left-style:outset;
	border-right-style:inset;
}
#footer
{
	width:95%; height:60px; background-image:url(image/footer2.gif); background-repeat:repeat-x;
}

#navPanel
{
	z-index: 1;
	position: relative;
	width: 92%;
	height: 30px;
	font:   12px tahoma;
	color:            #FFFF00; /*warna kuning pd text*/
	background-color: #000066; /*warna bg menu*/
	border: 4px outset #FFFFFF; /*warna border menu*/
}

#navPanel a:link
{
	color: #FFFF00; /*warna kuning pd text*/
}
#navPanel a:visited
{
	color: #FFFF00; /*warna kuning pd text*/
}

#navPanel a:hover
{
	color: #FFFFFF; /*warna putih pd text*/
}

#navPanel li
{
	cursor: pointer;
}

#navPanel a
{
	margin:  0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-decoration: none;
}

.navHorizontal
{
	margin:  0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	line-height: 30px;
	list-style: none;
}

.navHorizontal li
{
	margin:  0px 0px  0px  0px;
	padding: 0px 12px 0px 12px;
	float: left;
	position: relative;
	background-color: #000066; /*warna biru tua pada bg menu li*/
}

.navHorizontal li:hover, .navHorizontal li.over, .navHorizontal a:hover
{
	background-color: #FF0000; /*warna merah pd bg menu li hover*/
	color: #FFFFFF; /*warna putih pd text menu li hover*/
}

.navVertical
{
	margin:  0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: absolute; 
	top: 30px;
	left: -1px;
	display: none;
	list-style: none;
	width: 240px; /* panjang submenu*/
	border: 3px outset #FFFFFF; /*warna border submenu*/
	border-top: 0px;
}

.navVertical li
{
	margin:  0px 0px 0px 0px;
	padding: 0px 0px 0px 6px;
	float: none;
	line-height: 22px;
	min-height:  17px;
    height:      22px; /* tinggi submenu li*/
}

/*buat display submenu*/ 
.navHorizontal li:hover .navVertical, .navHorizontal .over .navVertical
{
	display: block;
}

.fit {
  width: 100%;
  overflow: hidden;
}

.textHeader
{
	font-size:30px; font-family: calibri; font-weight:bold; color:#000000;
}

.tableMenu
{
  width: 100%; height:100%; max-width: 70%;
  border-collapse: collapse;
}

.menu a:link, a:visited
{
  background-color: #3366CC;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: flex;
  margin-bottom: 10px;
  margin-left: 10px; 
  width: 65%; height: 50%;
 
}

.menu a:hover, a:active {
	background-color: #00CC99;
	
  }

  #loading {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100vw;
	height: 250vh;
	background-color: rgba(192, 192, 192, 0.5);
	background-image: url("loading.gif"); 
	background-repeat: no-repeat;
	background-position: center;
  }

  #loadingReg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100vw;
	height: 100vh;
	background-color: rgba(192, 192, 192, 0.5);
	background-image: url("loading.gif"); 
	background-repeat: no-repeat;
	background-position: center;
  }

  .btnApprove
  {
	background-color: #00CC99;
	color: white; font-weight: bold;
	padding: 14px 25px;
	text-align: center;
	text-decoration: none;
	margin-bottom: 10px;
	margin-left: 10px; 

   
  }

  .btnReject
  {
	background-color: #FF0000;
	color: white; font-weight: bold;
	padding: 14px 25px;
	text-align: center;
	text-decoration: none;
	display: flex;
	margin-bottom: 10px;
	margin-left: 10px; 
	
   
  }

  .btnLogin
  {
	background-color: #2fa85d;
	color: white; font-weight: bold; font-size:large;
	padding: 10px 10px;
	text-align: center;
	text-decoration: none;
	display: block; 
	
   
  }

  .warnaBody
  {
	background-color: #fefdfd; /* abu2x */ 
	/* #CCFFCC = hijau muda*/
  }

  /* RESPONSIVE */
.container
{
    width: 100%;
    overflow: hidden;
	display:block;
	height: auto;
    width: auto;
	overflow-x:auto;
	
	display: flex;
	/*justify-content: center;*/
	 align-items: center; 
	min-height: 100vh;
}

.header
{
    width: 100%;
}

.middle{
	width: 100%;
	float: none;

}
.middle img{
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 100%) {

    .header {
        width: 100%;
    }
    
    .middle {
        width: 100%;
        float: none;
    }
    
}        

@media screen and (max-width: 100%) {
    
    .header, 
    .footer{
        text-align: center;
    }
    
    .middle {
        width: auto;
        float: none;
    }
    
} 

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

/* Alert */
body {
	font-family: 'Roboto', Arial;
  }
  
  .alert {
	width: 100%;
	padding: 12px 16px;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 12px;
	font-size: 16px;
  }
  
  .alert.success {
	background-color: rgba(227, 253, 235, 1);
	border-color: rgba(38, 179, 3, 1);
	color: rgba(60, 118, 61, 1);
  }
  
  .alert.info {
	background-color: rgba(217, 237, 247, 1);
	color: rgba(49, 112, 143, 1);
	border-color: rgba(126, 182, 193, 1);
  }
  
  
  .alert.warning {
	background-color: rgba(252, 248, 227, 1);
	border-color: rgba(177, 161, 129, 1);
	color: rgba(138, 109, 59, 1);
  }
  
  .alert.error {
	background-color: rgba(248, 215, 218, 1);
	border-color: rgba(220, 53, 69, 1);
	color: rgba(114, 28, 36,1);
  }