@charset "utf-8";


.bodywrapper{
	width: 1024px;
}
.loginbanner {
	margin-left: auto;
	margin-right: auto;
	width: 800px;
}
.navbar-nav .dropdown-menu {
    position: absolute;
    float: none;
}
.statistic{
	color: #777;
	font-size: 36px;
	margin-top: 9px;
	padding-bottom: 7px;
}

.studentsubmenu {
    width: 100%;
	padding: 5px;
	display: inline-block;
	border: 1px #ccc solid;
	color: #000;
	padding: 3px;
}
.studentsubmenu a {
    width: 100%;
	display: inline-block;
	color: #000;
	padding: 6px;
	
	padding-left: 25px;
}
.studentsubmenu a:hover {
    width: 100%;
	display: inline-block;
	color: #FFF;
	color: #000;
	background-color: #ccc;
	padding: 3px;
}


.statistics{
	border: 1px solid #D8DFE5;
	background-color: #FFF;
	font-weight: bold;
	width: 16.65%;	
	float: left;
	text-align: center;
	padding-top: 10px;
}
.navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
	flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
 .navbar-nav > .nav-link {
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
}
.pagination {
	padding-left: 0px;
	height: 30px;
	padding-bottom: 20px;
}
.pagination li {
    display: block;
    padding: 10px;
    border: 1px solid #CCC;
    margin-right: 1px;
    margin-left: 2px;
    text-align: center;
    list-style-type: none;
    float: left;
    height: 37px;
    width: 121px;
    margin-bottom: 3px;
}
.mailcount {
	height:20px;
	position: relative;
	padding-right: 0px;
	padding-bottom: 7px;
	padding-top: 2px;
	margin-left: 20px;
	color: #fff;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
	background-color: #6297C3;
	display: inline-block;
	border-radius: 5px;
	-moz-border-radius: 5px;
}
.pendingcount {
	height:20px;
	position: relative;
	padding-right: 0px;
	padding-bottom: 7px;
	padding-top: 2px;
	margin-left: 4px;
	color: #fff;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
	background-color: #d84929;
	display: inline-block;
	border-radius: 5px;
	-moz-border-radius: 5px;
}
.center {
    padding-left: 342px;
    width: 100%;
}
.floatleft {
    float: left;
}
.float {
    float: left;
    padding-top: 15px;
    padding-right: 10px;
}
.floater{
	width: 800px;
	    margin-left: auto;
    margin-right: auto;
}
 .navbar-nav > .nav-item{
	width: 135px;
    float: left;
	position: relative;
}
h1 {
    font-size: 25px;
}
h2 {
	margin-bottom: 5px;
    letter-spacing: 1px;
	color: #283646;
    font-size: 1.4em;
    /* border-bottom: 1px solid #333; */
    line-height: 28px;
    margin-top: 0px;
}
h3 {
	margin-bottom: 5px;
    letter-spacing: 1px;
	color: #283646;
    font-size: 1.6em;
    line-height: 28px;
    margin-top: 0px;
}
.footer {
    font-size: 11px;
    font-weight: normal;
    clear: both;
    color: #666;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border-top: solid 1px #ccc;
    margin-top: 10px;
    min-height: 90px;
}
.bodycontainer { 
	width: 1024px;
	min-height: 360px;
	border:solid 2px #FFF;
	margin-top: 50px;
	padding-bottom: 0px !important;
}
.loginpadding {
color: #FFF;
    /* margin-top: 126px; */
    clear: both;
    /* float: left; */
    position: relative;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    top: 20px;
    width: 100%;
	
}
.headercenter {
	padding-left: 30px;
	width: 100%;
	background-color: #5aad53;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	position: relative;
	width: 1015px;
	height: 125px;
	color: #FFF;
	border-bottom: 4px solid #FFF;
}
.loginheader {
	background-image: url("../../mobile/images/slide1.jpg");
	style: block;
	background-color: #333;
	background-size: 100%;
	background-position: left center;
	height: 89vh; 
	padding-top: 50px;
    background-size: cover;
	width: 100%;
	min-width: 1000px;
}
.hl {
	background-repeat: no-repeat;
	background-position: right;
	width: 400px;
	float: left;
	margin-top: 60px;
}
.hr {
	background-repeat: no-repeat;
	background-position: left;
	width: 350px;
	float: left;
	margin-top: 60px;
}

.trdd{
	width: 100%;
	background-color: #283646  !important;
	display: inline-block;
	padding: 6px 12px;
	color: #fff;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.428571429;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid #333;
	margin-top: 1px;
	-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
}
.trdd:hover{
	width: 100%;

	display: inline-block;
	padding: 6px 12px;
	color: #fff;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.428571429;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid #000;
	margin-top: 1px;
	-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
}
.green {
	background-color: #00a500;
}

.homeboxl {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 380px;
	padding: 20px;
	margin: 20px;
	margin-bottom: 0px;
	border-radius: 20px;
	background-color: #FFF;
	height: 280px;
}
.homeboxr {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 380px;
	padding: 20px;
	margin: 20px;
	margin-bottom: 0px;
	background-color: #FFF;
	border-radius: 20px;
	height: 280px;
}
.hr #button {
	width: 70px;
}
/* form .login {
	font-size: 14px;
	font-weight:bold;
	padding: 3px;
	margin: 2px;
	border:solid 1px #ccc;
	width: 200px;
	border-radius: 4px;
} */
form .login:hover {
	font-size: 14px;
	font-weight:bold;
	padding: 3px;
	border:solid 2px #FFCD00;
	color:#000;
}
/* form .login:focus {
	font-size: 14px;
	font-weight:bold;
	padding: 3px;
	border:solid 2px #FFCD00;
	color:#000;
	width: 200px !important;
} */


body {
  font-size: .875rem;
}

.text-muted {
    color: #2d5580 !important;
	font-weight: bold;
}


	
#search-box{
	margin-left: 10px;
	width: 373px !important;
}

	.img_cont{
		position: relative;
		height: 70px;
		width: 70px;
		float: left;
	}
	
	.user_img{
		height: 70px;
		width: 70px;
		border:1.5px solid #f5f6fa;
	}
	.online_icon{
		position: absolute;
		height: 15px;
		width:15px;
		background-color: #4cd137;
		border-radius: 50%;
		bottom: 0.2em;
		right: 0.4em;
		border:1.5px solid white;
	}
	.offline{
		background-color: #c23616 !important;
	}
	.user_info{
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 15px;
		float: left;
	}
	.user_info span{
		font-size: 20px;
		color: #333;
	}
	.user_info p{
		font-size: 13px;
		color: #333;
		font-weight: bold;
	}

	
.suggesstion-box {
    position: absolute;
    width: 500px;
    left: 300px;
    z-index: 100;
    margin-top: 66px;
}

.suggesstion-box ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.suggesstion-box .active {
    margin-top: -1px;
    padding-left: 9px;
    line-height: 27px;
    color: #333;
    background-color: #f3f3f3;
    text-align: left;
    border: 1px solid #cacaca;

    width: 400px;
}


 

.table td, .table th {
    padding: .55rem !important;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}
.bg-dark {
	background-color: rgb(40, 54, 70) !important;
	width: 100%;
  position: fixed;
}

.nav-link {
    display: block;
    /* padding: .1rem 1rem !important; */
}


.feather {
  width: 16px;
  height: 16px; 
  vertical-align: text-bottom;
}

#content {
    width: 100%;
    padding: 20px;
    padding-top: 80px;
    min-height: 100vh;
    transition: all 0.3s;
}
#mainpage {
	display: flex;
	width: 100%;
	align-items: stretch;
}

.navbar-brand {
  min-width: 315px;
}
#sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  min-width: 317px;
    -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#sidebar::-webkit-scrollbar {
  display: none;
}
#sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 60px; /* Height of navbar */
  height: calc(100vh - 48px);
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

#sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

#sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

#sidebar .nav-link.active {
  color: #007bff;
}

#sidebar .nav-link:hover .feather,
#sidebar .nav-link.active .feather {
  color: inherit;
}

#sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}
#map {
  height: 100%;
}

/*
 * Navbar
 */
.bg-light {
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}
.bg-light::-webkit-scrollbar {
    width: 5px;
    background: #ccc;
}
.bg-light::-webkit-scrollbar-thumb {
    background: #9d9d9d;
}
.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}


.navbar-dark .navbar-toggler {
    color: rgba(255,255,255,.5);
    border: none;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}
#sidebarCollapse {
	outline: none auto 0px;

}
#sidebar.active {
    display:none;
}
.sidebar-close-btn {
	display: none;
}

.loginheader > .col-lg-12 {
	float: inherit;
}
/*
 * Utilities
 */

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }


@media screen and (max-width: 600px)  {
	.loginbanner {
		margin-left: 1px;

	width: 100%;
	}
	.hr {
		clear: both;
		    margin-top: 0px;
	}

	#content {
		padding-top: 10px;
	}
	
	.bg-dark {
	background-color: rgb(40, 54, 70) !important;
    width: 100%;
    position: relative;
}
	.hl {
		clear: both;
		    margin-top: 0px;
	}
	.nav-item a {
		
		font-size: 13pt;
	}
	.navbar-collapse {
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%;
		-ms-flex-positive: 1;
		flex-grow: 1;
		-ms-flex-align: center;
		font-size: 15pt;
		border-bottom: 1px solid #FFF;
		align-items: center;
	}
	.float {
    float: left;
    text-align: center;
    padding-top: 15px;
    width: 100%;
    align-content: center;
    padding-right: 10px;
}
	.center {
     padding-left: 10px;
	}
	.loginheader {
	    
		style: block;
		background-color: #333;
		height: 100%;
		width: 100%;
		min-width: 0px;
		padding-top: 0px;
	}
	#sidebar {
		display: block;
		position: fixed;
		top: 0 !important;
		left: 0;
		margin-top: 0 !important;
		width: 80%;
		max-width: 300px;
		height: 100%;
		min-width: 0;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		z-index: 1050;
		box-shadow: 2px 0 8px rgba(0, 0, 0, .25);
	}
	#sidebar.mobile-open {
		transform: translateX(0);
	}
	#sidebar .sidebar-heading {
		margin-top: 0 !important;
	}
	.sidebar-close-btn {
		display: block;
		position: absolute;
		top: 6px;
		right: 10px;
		width: 32px;
		height: 32px;
		line-height: 30px;
		background: transparent;
		border: none;
		font-size: 28px;
		color: #333;
		z-index: 1060;
		cursor: pointer;
	}
	.sidebar-backdrop {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .4);
		z-index: 1040;
	}
	.sidebar-backdrop.active {
		display: block;
	}
}
/* ===================================================================
   ADDITIVE RESPONSIVE RULES — append to end of stylesheet
   Does not modify any existing rule, only adds overrides inside
   media queries (which only apply below their breakpoint).
   =================================================================== */

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

/* TABLET (≤1024px) */
@media screen and (max-width: 1024px) {
	.bodywrapper,
	.bodycontainer {
		width: 100%;
	}
	.headercenter {
		width: 100%;
	}
	.loginheader {
		min-width: 0;
	}
	.floater {
		width: 100%;
	}
	#search-box {
		width: 250px !important;
	}
	.suggesstion-box,
	.suggesstion-box .active {
		width: 90%;
		left: 5%;
	}
}

/* SMALL LAPTOP / LARGE TABLET (≤900px) */
@media screen and (max-width: 900px) {
	.hl, .hr {
		float: none;
		width: 100%;
	}
	.homeboxl, .homeboxr {
		width: 90%;
		margin: 20px auto;
		height: auto;
	}
	.statistics {
		width: 33.3%;
	}
}

/* TABLET / MOBILE (≤768px) */
@media screen and (max-width: 768px) {
	.pagination li {
		width: 45%;
	}
	.statistics {
		width: 50%;
	}
	#content {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* MOBILE (≤600px) — additive to your existing max-width:600px block,
   does not replace it */
@media screen and (max-width: 600px) {
	.homeboxl, .homeboxr {
		width: 90%;
		margin: 10px auto;
		height: auto;
	}
	/* form .login,
	form .login:focus {
		width: 100% !important;
	} */
	.statistics {
		width: 100%;
		float: none;
	}
	.pagination li {
		width: 100%;
		float: none;
	}
	.suggesstion-box,
	.suggesstion-box .active {
		width: 100%;
		left: 0;
	}
}

/* EXTRA SMALL PHONES (≤400px) */
@media screen and (max-width: 400px) {
	.homeboxl, .homeboxr {
		width: 95%;
	}
	.trdd {
		font-size: 12px;
	}
	.footer {
		font-size: 10px;
	}
}
/* MOBILE: fix student/staff login table + inputs on small screens */
@media screen and (max-width: 600px) {

	.hr table {
		width: 100%;
	}

	/* HTML width attributes on <td> override CSS by default in some
	   browsers unless we explicitly reset them */
	.hr table td[width] {
		width: 65% !important;
	}

	.hr table td {
		display: block;
		width: 65% !important;
		box-sizing: border-box;
		padding-bottom: 4px;
	}

	.hr table tr {
		display: block;
	}

	input#submit.login {
		width: 100% !important;
		padding: 8px 20px;
	}
	.forgot-text {
		font-size: 12px;
		text-align: center;
	}
}

/* ===================== Student information/profile page (information.view.php) =====================
   Root cause (present on desktop too, confirmed live on production at a
   normal 1024px-wide admin screen, not just on phones): every profile
   "card" is a bare <div style="float:left; width: 499px/480px/450px/...">
   with its own hard-coded pixel width, and .student never clears these
   floats. The PHP already groups cards into two explicit columns
   (.hx-col-left: Account/Contact/Emergency/Publications/Sponsor/Permit,
   .hx-col-right: Registered Program onward through Education history) -
   this CSS just makes those two columns sit side by side and fill the
   available width, and each column's own cards stack within it instead of
   trying to float next to each other. Applies at every size; only the
   single-column stacking below is phone-only. */
.student {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 16px !important;
}
.student .studentname {
	flex: 1 1 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.student .profilepic {
	float: none !important;
	flex: 0 0 210px !important;
}
.student .hx-col-left,
.student .hx-col-right {
	flex: 1 1 320px !important;
	max-width: 540px !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	box-sizing: border-box !important;
}
/* Every card is a bare <div style="float:left; ..."> inside one of the two
   columns above (the admission.view.php "Secondary School Results" card
   included, since it's echoed inline into the same stream). Let each one
   fill its column's width instead of keeping its own fixed pixel width. */
.student .hx-col-left > div[style*="float"],
.student .hx-col-right > div[style*="float"] {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-right: 0 !important;
	border-right: none !important;
	box-sizing: border-box !important;
	background: #fff;
	border: 1px solid #BFC9D1 !important;
	box-shadow: 0 1px 2px rgba(20, 30, 40, .05) !important;
	overflow: hidden !important;
}

/* .segment header bars are hard-coded to 480px wide (see style.css) - let
   them fill whatever width their own card ends up with instead. They also
   inherit margin-top/margin-bottom from the base .segment rule in style.css,
   which pushes the header down inside the card, leaving a blank gap above
   it instead of the header starting flush at the top of the card - and
   that gap is what made cards in different columns look misaligned with
   each other and with the profile photo. Zero that out here. */
.student .segment {
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

/* Card body tables: drop the fixed pixel widths on <table> and <td width>
   (200/150/100/350/380 etc, all inline HTML attributes) and let long values
   (emails, addresses, programme names) wrap onto a new line instead of
   forcing the table - and the card - wider than it should be. */
.student table {
	width: 100% !important;
	max-width: 100% !important;
	table-layout: fixed !important;
	display: table !important;
	white-space: normal !important;
}
.student table td {
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal !important;
}
.student table td[width] {
	width: 42% !important;
}
.student .profilepiccontainer,
.student .profilepiccontainer img {
	max-width: 100% !important;
}
.student .studentsubmenucontainer {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Phones: one column only - photo/submenu, then left-column cards, then
   right-column cards, each stacked full width top to bottom. */
@media (max-width: 768px) {
	.student .profilepic,
	.student .hx-col-left,
	.student .hx-col-right {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
}