#login-container{
	margin: auto;
	margin-top: 10%;
	text-align: center;
	height: auto;
	width: 35%;
	/*padding: 5%;*/
	box-shadow: 1px 1px 8px 1px #888888;	
}

#login-header{
	margin: auto;
	height: 100%;
	padding: 4%;
	background-color: #154b62;
}

#login-header h1{
	color: #fff;
}

#login-form{
	padding: 5% 0 5%;
}

#login-form input[type="text"],
#login-form input[type="password"]{
	margin: auto;
	width: 70%;
	padding: 2%;
	margin-bottom: 20px;
	padding-left: 40px; /* <-- for the icon on left */
	border: none;
	border: 0.5px solid gray;
	border-radius: 4px;
}

#login-form button{
	padding: 2%;
}

#login-form input[type="text"]{
	background-image:url(../extras/icons/userlog.png);
	background-repeat:no-repeat;
	background-position:left;
}

#login-form input[type="password"]{
	background-image:url(../extras/icons/passlog.png);
	background-repeat:no-repeat;
	background-position:left;
}

/* HEADER */
#header{
	padding: 0.1%;
	height: 100%;
	width: 100%;
	position: static;
	background-color: rgba(13,13,13,.8);
	box-shadow: 1px 1px 8px 1px #888888;
}

#header h5{
	letter-spacing: 1px;
	color: #fff;
	font-weight: normal;
}

#have-notif{
	margin: 2.5% 0% 0% 6.5%;
	display: none;
	height: 50%;
	width: 25%;
	background-color: #fff;
	position: fixed;
	box-shadow: 0px 0px 5px 1px #7F8C8D;
	overflow:auto;
	overflow-x: hidden;
}

#notif-table tr:hover{
	background-color: #fff;
}

#notif-table td:hover{
	font-weight: 400;
}

/* SIDE BAR TEMPLATE CSS */
#sidebar{
	height: 100%;
	width: 13%;
	position: fixed;
	background-color: #fff;
	box-shadow: 1px 1px 8px 1px #888888;
}

#sidebar ul li{
	list-style: none;
	margin: 12% 0% 12% 5%;
}

#sidebar ul li:hover{
	border-left: 5px solid #154b62;
	padding-left: 15%;
	font-weight: 900;
	margin: 12% 0 12% 0;
}

#sidebar ul li a{
	text-decoration: none;
	font-size: 100%; /*auto size the font size depends on screen size */
	font-size: 1vw;
}

#content{
	background-color: rgba(0,0,0,0);
	position: static;
	margin-left: 13%;
	width: auto;
	height: auto;
}

/* CONTENT IFRAME */
#content #dashboard iframe,
#content #alumni iframe,
#content #new_alumni iframe,
#content #membership iframe,
#content #new_membership iframe,
#content #email_blast iframe,
#content #update iframe,
#content #settings iframe,
#content #admin_users iframe{
	width: 100%;
	height: 700px;
}

/* FOR TABLES */ 	
#table_header{
	border-bottom: 1px solid #999999;
}

#table_header #right_side{
	width: 50%;
	/*text-align: right;*/
	display: inline-block; 
	/*margin-right: 30%;*/
}

#table_header #left_side{
	width: 49%;
	/*text-align: left;*/
	display: inline-block;
	padding: 0% 0% 0% 34%; ;
}

#search div{
	padding: 1%;
}

#search input,
select{
	padding: 5px;
	height: auto;
	width: 100%;
}

#table_header,
#table_template{
	padding: 0% 1% 0% 1%;
}

#table_template_footer{
	padding: 1% 0% 0% 0%;
}
#table_template_footer #total_number{
	display: inline-block;
	float: left;
}

#table_template_footer #import_data{
	display: inline-block;
	float: right;
}

#table_template_footer #import_data button{
	width: 100%;
}

#pagination{
	text-align: center; padding: 2%;
}

#modal_view_all_details{
	display: inline-block; 
	width: 55%;
}

#modal_view_all_details div span{
	padding-left: 5px;
	color: #154b62;
}
/*------ DASHBOARD TABLE ---------*/
#dashboard_table{
	width: 50%; 
	text-align: center;
	margin: auto;
}

#dashboard_th th{
	color: #fff;
	padding: 1% 1% 1% 1%;
}

#dashboard_td td{
	text-align: left;
	padding: 1% 1% 1% 1%;
}

/*------ ALUMNI TABLE ---------*/
#alumni_table #thead th{
	text-align: center;
	height: auto;
	padding: 1%;
	color: #fff;
	font-size: 1.2vw;
}

#alumni_table #tdhead td{
	font-size: 1.2vw;
}

#alumni_table #edit_this_alumni input[type="text"],
#alumni_table #edit_this_alumni input[type="date"],
#alumni_table #edit_this_alumni select{
	padding: 5px;
	height: auto;
	width: 100%;
}

/*------ MEMBERSHIP TABLE ---------*/
#membership_table #thead th{
	height: auto;
	padding: 1%;
	color: #fff;
	font-size: 1.2vw;
	text-align: center;
}

#membership_table #tdhead td{
	font-size: 1.2vw;
	padding: 1%;
}

#membership_table #edit_this_membership input[type="text"],
#membership_table #edit_this_membership input[type="date"],
#membership_table #edit_this_membership select{
	padding: 5px;
	height: auto;
	width: 100%;
}

/*------ CREATE ALUMNI --------*/
#create_new_alumni{
	margin-left: 5%; 
	margin-right: 5%;
}

#create_new_alumni div{
	padding: 1%;
}

#create_new_alumni #field_forms input[type="text"],
#create_new_alumni #field_forms input[type="date"],
#create_new_alumni select{
	padding: 8px;
	height: auto;
	width: 100%;
}

#create_new_alumni #select_program select{
	margin: auto;
	padding-left: 8px;
	padding: 8px;
	height: auto;
	width: 10%;
}
	/*box-shadow: 0px 0px 1px 0.5px #888888;
	border-radius: 3px;
	border: none;
	padding: 0.9%;
	width: 100%;
	height: auto;
	padding: 1%;
	height: auto;
	width: 100%;
}*/

/*------ CREATE MEMBERSHIP --------*/
#create_new_membership{
	margin-left: 5%; 
	margin-right: 5%;
}

#create_new_membership div{
	padding: 1%;
}

#create_new_membership #field_forms input[type="text"],
#create_new_membership #field_forms input[type="date"],
#create_new_membership select{
	padding: 8px;
	height: auto;
	width: 100%;
}

#create_new_membership #select_program select{
	margin: auto;
	padding-left: 8px;
	padding: 8px;
	height: auto;
	width: 10%;
}