/* unvisited link */
a:link {
  color:  #91dbe4 ;
}

/* visited link */
a:visited {
  color: #91dbe4;
}

/* mouse over link */
a:hover {
  color: #e0e491;
}

/* selected link */
a:active {
  color: #F9F6EE;
} 

.bank_button
{
margin:1px; border:solid 5px #808080; border-radius: 5px;
}

.bank_button:hover {
border:solid 5px #c0c0c0;
}


.form-control-textbox-50{
	width:50%;
}

.form-no-border{
	border:0px;
}
.epay_bold_font{
	font-weight:bold;
}

.epaytab{
		padding-left:20px;padding-right:20px;padding-top:2px;padding-bottom:2px;cursor:pointer;
		border: 1px solid #C0C0C0;border-top-right-radius: 10px;border-top-left-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;margin-right:5px;margin-left:5px;
		min-width:210px;
		font-size:14px;
		
}

.epaytab_disabled{
	opacity 0.2;
}

.epaytab:hover{
	background-color:#87CEEB !important;	
}

.epaybtn
{
	width:80px;cursor:pointer;
}
.epaybox
{
	border: 1px solid grey;
	padding: 10px;
	width:100%
}
.epay_noborder
{
	border:none;
}
#other_person_section{
	background-color:#E5FFFF;
}
.text-label
{
font-weight: bold;
}
.epaybox2{
padding-top:15px;padding-bottom:15px;padding-left:25px;
}
.goUpper{
text-transform: uppercase;
}


/*
START: Table responsive 
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen   and (max-width: 760px), (min-device-width: 768px)     and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.tableResponsive tbody tr th, .tableResponsive tbody tr td {
        display: block;
    }

		/* Hide table headers (but not display: none;, for accessibility) */
		.tableResponsive thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .tableResponsive tr {
      margin: 0 0 1rem 0;
    }
      
    /*.tableResponsive tr:nth-child(odd) {
      background: #ccc;
    }*/
    
		.tableResponsive td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.tableResponsive td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			/*top: 0;*/
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		
		.tableAlumniDebt td:nth-of-type(1):before { content: "Matric No. :";background:  	#DCDCDC;padding:5px; }
		.tableAlumniDebt td:nth-of-type(2):before { content: "Name :";background:  	#DCDCDC;padding:5px; }
		.tableAlumniDebt td:nth-of-type(3):before { content: "Program :";background:  	#DCDCDC;padding:5px; }
		.tableAlumniDebt td:nth-of-type(4):before { content: "Amount(RM) :";background:  	#DCDCDC;padding:5px; }
		.tableAlumniDebt td:nth-of-type(5):before { content: "Action :";background:  	#DCDCDC;padding:5px; }
		
		
	}
/* END: Table responsive */