/*

	CSS for KCS Portal
	Copyright 2021
	Robbie Rae Solis Dela Cruz

*/

/*~Page Global Style~*/

	*{	
		margin: 0;
	}
	
	*:focus{
		outline-style: none;
	}
	
	html{
		overflow-y: scroll;
		font-family: Calibri;
		scroll-behavior: smooth;
		scrollbar-width: thick;
		scrollbar-color: #CCCCCC #EEEEEE;
	}
	
	body{
		background-color: #FFFFFF;
		color: #222222;
		font-size: 14px;
		height: 100%;
	}
	
	/*a{
		color: #06417b;
	}
	
	a:hover{
		text-decoration: underline;
		cursor: pointer;
	}*/
	
	.alink-white{
		color: #FFFFFF;
	}
	
	.alink-white:hover{
		text-decoration: underline !important;
		cursor: pointer !important;
	}
	
	.alink-blue{
		color: #06417b;
	}
	
	.alink-blue:hover{
		text-decoration: underline !important;
		cursor: pointer !important;
	}
	
	.alink-red{
		color: #fb0301;
	}
	
	.alink-red:hover{
		text-decoration: underline !important;
		cursor: pointer !important;
	}
	
	.scroll::-webkit-scrollbar {
	  width: 10px;
	}
	 
	.scroll::-webkit-scrollbar-thumb {
	  background: #333333;
	  border-radius: 5px;
	}

	.scroll::-webkit-scrollbar-track {
	  background: #444444;
	  border-radius: 5px;
	}
	
	.scroll-comment::-webkit-scrollbar {
	  width: 10px;
	}
	 
	.scroll-comment::-webkit-scrollbar-thumb {
	  background: #BBBBBB;
	  border-radius: 5px;
	}

	.scroll-comment::-webkit-scrollbar-track {
	  background: #AAAAAA;
	  border-radius: 5px;
	}
	
	.show{
		display: block;
	}
	
	.hide{
		display: none;
	}
	
/*~Page Body Style~*/
	.page-padding{
		padding: 15px;
	}
	
	.page-line-top{
		border-top-width: 1px;
		border-top-color: #999999;
		border-top-style: solid;
	}
	
	.page-line-bottom{
		border-bottom-width: 1px;
		border-bottom-color: #999999;
		border-bottom-style: solid;
	}
	
	.page-information{
		display: table;
		width: 100%;
		text-align: center;
		vertical-align: text-top;
	}
	
	.page-details-holder{
		display: inline-table;
		box-sizing: border-box;
		width: 32%;
		text-align: center;
		vertical-align: text-top;
	}
	
	.page-details-content{
		min-height: 650px;
		height: auto;
		width: auto;
		margin: 15px;
		background-color: #EEEEEE;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding: 10px;
		overflow: hidden;
		border-top-width: 5px;
		border-top-color: #fb0301;
		border-top-style: solid;
	}
	
	.page-details-content:hover{
		border-top-width: 5px;
		border-top-color: #06417b;
		border-top-style: solid;
	}
	
	.page-freedomwall-holder{
		display: inline-table;
		box-sizing: border-box;
		width: 96.5%;
		text-align: center;
		vertical-align: text-top;
	}
	
	.page-freedomwall-content{
		min-height: 550px;
		height: auto;
		width: auto;
		margin: 15px;
		background-color: #EEEEEE;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding: 10px;
		overflow: hidden;
		border-top-width: 5px;
		border-top-color: #fb0301;
		border-top-style: solid;
	}
	
	.page-freedomwall-content:hover{
		border-top-width: 5px;
		border-top-color: #06417b;
		border-top-style: solid;
	}
	
	.page-information-holder{
		display: inline-table;
		box-sizing: border-box;
		width: 100%;
		text-align: left;
		vertical-align: top;
	}
	
	.page-information-content{
		height: auto;
		width: auto;
		vertical-align: top;
	}
	
	.page-academics-holder{
		display: inline-table;
		box-sizing: border-box;
		width: 48%;
		text-align: left;
	}
	
	.page-academics-content{
		min-height: 150px;
		height: auto;
		width: auto;
		background-color: #EEEFFF;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	.page-academics-content:hover{
		background-color: #DDDEEE;
		cursor: pointer;
	}
	
	.page-details-button{
		display: inline-table;
		-moz-border-radius: 50%;
		border-radius: 50%;
		padding: 5px;
	}
	
	.page-details-button:hover{
		background-color: #FFFFFF;
		cursor: pointer;
	}
	
	.page-input-text{
		width: 90%;
		height: 40px;
		color: #111111;
		background-color: #EEEEEE;
		box-sizing: border-box;
		border: 0px;
		background-size: 24px 24px;
	    background-position: 10px 10px;
	    background-repeat: no-repeat;
	    padding-left: 16px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	.page-textarea{
		color: #111111;
		background-color: #EEEEEE;
		box-sizing: border-box;
		border: 0px;
	    padding-left: 16px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		resize: none;
		padding: 16px;
		width: 90%;
		height: 190px;
		font-family: Arial, Helvetica, sans-serif;
	}
	
	.page-input-text:hover{
		background-color: #DEDEDE;
	}
	
	.page-input-button{
		width: 90%;
		height: 40px;
		color: #EEEFFF;
		background-color: #06417b;
		box-sizing: border-box;
		border: 0px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		cursor: pointer;
	}
	
	.page-input-button:hover{
		background-color: #1c5a97;
	}
	
	.page-content-frame{
		height: 250px;
		width: 90%;
		margin: 10px;
		background-color: #FEFEFE;
		-moz-border-radius: 10px;
		border-radius: 10px;
		padding: 15px;
		overflow: hidden;
	}
	
	.page-content-logo{
		background-color: #06417b;
		border-color: #fb0301;
		border-style: solid;
		border-width: 3px;
		-moz-border-radius: 50%;
		border-radius: 50%;
		cursor: pointer;
	}
	
	.page-content-mode{
		font-size: 20px;
		font-weight: bold;
		display: none;
	}
	
	.page-content-modes{
		font-size: 20px;
	}
	
	.page-content-list{
		-moz-border-radius: 5px;
		border-radius: 5px;
		border-color: #CCCCCC;
		border-style: solid;
		border-width: 1px;
		border-left-color: #AAAAAA;
		border-left-style: solid;
		border-left-width: 3px;
		/*margin: 5px;*/
		width: 99%;
		background-color: #EEFFFF;
	}
	
	.page-content-list:hover{
		border-color: #999999;
		border-left-color: #06417b;
		border-left-style: solid;
		border-left-width: 3px;
	}
	
	.page-content-comment{
		-moz-border-radius: 5px;
		border-radius: 5px;
		border-color: #CCCCCC;
		border-style: solid;
		border-width: 1px;
		width: 99%;
		padding: 5px;
		background-color: #FFFFFF;
	}
	
	.page-content-title{
		font-size: 14px
	}
	
	.page-content-subtitle{
		font-size: 10px
	}
	
	.page-content-button{
		display: inline-table;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding: 5px;
		border: 0;
		background-color: #EEEEEE;
	}
	
	.page-content-button:hover{
		background-color: #DDDDDD;
		cursor: pointer;
	}
	
	.page-dashboard-information{
		display: table;
		width: 100%;
		text-align: center;
	}
	
	.page-dashboard-holder{
		display: inline-table;
		box-sizing: border-box;
		width: 49%;
		text-align: left;
	}
	
	.page-dashboard-content{
		min-height: 350px;
		height: auto;
		width: auto;
		margin: 10px;
		background-color: #FFFFFF;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding: 16px;
		overflow: hidden;
		border-width: 1px;
		border-color: #CCCCCC;
		border-style: solid;
		border-bottom-width: 5px;
		border-bottom-color: #06417b;
		border-bottom-style: solid;
	}
	
	.page-admission-information{
		display: table;
		width: 100%;
		text-align: center;
	}
	
	.page-admission-holder{
		display: inline-table;
		box-sizing: border-box;
		width: 49%;
		text-align: left;
	}
	
	.page-admission-content{
		min-height: 200px;
		height: auto;
		width: auto;
		margin: 10px;
		background-color: #EEEEEE;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding: 16px;
		overflow: hidden;
		border-bottom-width: 5px;
		border-bottom-color: #CCCCCC;
		border-bottom-style: solid;
	}
	
	.page-filter-information{
		display: table;
		width: 100%;
		text-align: center;
	}
	
	.page-filter-holder{
		display: inline-table;
		box-sizing: border-box;
		width: 47%;
		text-align: left;
	}
	
	.page-filter-content{
		min-height: 150px;
		height: auto;
		width: auto;
		margin: 10px;
		background-color: #EEEEEE;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding: 16px;
		overflow: hidden;
		border-bottom-width: 5px;
		border-bottom-color: #CCCCCC;
		border-bottom-style: solid;
	}
	
	.page-calendar-information{
		display: table;
		width: 100%;
		text-align: center;
		vertical-align: text-top;
	}
	
	.page-calendar-holder{
		display: inline-table;
		box-sizing: border-box;
		width: 32%;
		text-align: center;
		vertical-align: text-top;
	}
	
	.page-calendar-content{
		min-height: 290px;
		height: auto;
		width: auto;
		margin: 10px;
		background-color: #EEEEEE;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding: 10px;
		overflow: hidden;
		border-top-width: 5px;
		border-top-color: #fb0301;
		border-top-style: solid;
	}
	
	.page-calendar-content:hover{
		background-color: #DDDDDD;
		border-top-width: 5px;
		border-top-color: #06417b;
		border-top-style: solid;
	}
	
	.page-contact-information{
		display: table;
		width: 100%;
		text-align: center;
	}
	
	.page-contact-holder{
		display: inline-table;
		box-sizing: border-box;
		width: 49%;
		text-align: left;
	}
	
	.page-contact-content{
		min-height: 350px;
		height: auto;
		width: auto;
		overflow: hidden;
	}
	
	.page-data-information{
		display: table;
		width: 100%;
		text-align: center;
	}
	
	.page-data-holder{
		display: inline-table;
		box-sizing: border-box;
		width: 49%;
		text-align: left;
	}
	
	.page-data-content{
		min-height: 350px;
		height: auto;
		width: auto;
		overflow: hidden;
	}
	
	.page-input-alert-message{
		width: 50%;
		/*left: 30%;*/
		display: none;
		position: absolute;
		top: -40px;
		left: 25%;
		z-index: 1;
	}
	
	.page-input-alert-tail{
		width: 0px;
		height: 0px;
		top: 45px;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #00a400;
		display: block;
	}
	
	.page-input-alert-frame{
		width: auto;
		height: auto;
		padding: 5px;
		margin-left: 5px;
		margin-right: 5px;
		background-color: #00a400;
		color: #EEEFFF;
		font-size: 13px;
		-moz-border-radius: 1px;
		border-radius: 10px;
		padding: 10px;
		/*border-bottom-color: #222222;
		border-bottom-style: solid;
		border-bottom-width: 2px;*/
	}
	
	.page-content-image{
		display: inline-table;
		border-color: #CCCCCC;
		border-style: solid;
		border-width: 1px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		margin: 3px;
	}
	
	.page-content-image:hover{
		border-color: #999999;
		cursor: pointer;
	}
	
	.page-content-image-placeholder{
		position: absolute; 
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		font-size: 24px;
		color: #999999;
	}
	
	.page-content-image-placeholder:hover{
		cursor: pointer;
		color: #000000;
	}
	
	.page-content-image-icon{
		background-color: #EEEEEE;
		border-color: #CCCCCC;
		border-style: solid;
		border-width: 1px;
		-moz-border-radius: 5%;
		border-radius: 5%;
		padding: 10px;
		position: absolute; 
		bottom: 5px; 
		right: 5px;
		cursor: pointer;
	}
	
	.page-content-creator-photo{
		background-color: #EEEEEE;
		border-color: #CCCCCC;
		border-style: solid;
		border-width: 2px;
		-moz-border-radius: 50%;
		border-radius: 50%;
		cursor: pointer;
		margin: 5px;
	}
	
	.page-content-creator-name{
		font-size: 18px;
	}
	
	.page-content-text{
		font-size: 14px;
	}
	
	.page-message-subject{
		font-size: 14px
	}
	
	.page-message-content{
		font-size: 12px
	}
	
	.page-message-date{
		font-size: 10px
	}
	
	.page-message-name{
		font-size: 10px
	}
	
	.page-message-row:hover{
		background-color: #DDDDDD;
		cursor: pointer;
	}

/*~Page Alumni Style~*/

	/*input text*/
		.page-input-text{
			width: 90%;
			height: 40px;
			color: #111111;
			background-color: #EEEEEE;
			box-sizing: border-box;
			border: 0px;
			background-size: 24px 24px;
			background-position: 10px 10px;
			background-repeat: no-repeat;
			padding-left: 16px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		
		.page-input-text:hover{
			background-color: #DEDEDE;
		}
	
	/*text area*/
		.page-textarea{
			color: #111111;
			background-color: #EEEEEE;
			box-sizing: border-box;
			border: 0px;
			padding-left: 16px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			resize: none;
			padding: 16px;
			width: 90%;
			height: 190px;
			font-family: Arial, Helvetica, sans-serif;
			scrollbar-width: thin;
			scrollbar-color: #CCCCCC #EEEEEE;
		}
		
		.page-textarea:hover{
			background-color: #DEDEDE;
		}
	
	/*input button*/
		.page-input-button{
			width: 90%;
			height: 40px;
			color: #EEEFFF;
			background-color: #06417b;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-input-button:hover{
			background-color: #1c5a97;
		}
		
	/*input text fixed*/
		.page-input-text-fixed{
			width: auto;
			padding: 10px;
			color: #111111;
			background-color: #EEEEEE;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #DDDDDD;
			border-style: solid;
			border-width: 1px;
			background-position: 10px 10px;
			background-repeat: no-repeat;
		}
		
		.page-input-text-fixed:hover{
			background-color: #DEDEDE;
		}
	
	/*input text auto*/
		.page-input-text-auto{
			width: 100%;
			padding: 10px;
			color: #111111;
			background-color: #EEEEEE;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #DDDDDD;
			border-style: solid;
			border-width: 1px;
			background-position: 10px 10px;
			background-repeat: no-repeat;
		}
		
		.page-input-text-auto:hover{
			background-color: #DEDEDE;
		}
		
	/*input text auto - for table style*/
		.page-input-text-autotable{
			width: 75%;
			padding: 10px;
			color: #111111;
			background-color: #FFFFFF;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #BBBBBB;
			border-style: solid;
			border-width: 1px;
			background-position: 10px 10px;
			background-repeat: no-repeat;
		}
		
		.page-input-text-autotable:hover{
			background-color: #CCCCCC;
		}
	
	/*text area fixed*/
		.page-text-area-fixed{
			color: #111111;
			background-color: #EEEEEE;
			box-sizing: border-box;
			border: 0px;
			padding-left: 10px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			resize: none;
			padding: 10px;
			width: auto;
			height: 200px;
			font-family: Calibri;
			scrollbar-width: thin;
			scrollbar-color: #CCCCCC #EEEEEE;
			border-color: #DDDDDD;
			border-style: solid;
			border-width: 1px;
			background-position: 10px 10px;
			background-repeat: no-repeat;
		}
		
		.page-text-area-fixed:hover{
			background-color: #DEDEDE;
		}
		
	/*text area auto*/
		.page-text-area-auto{
			color: #111111;
			background-color: #EEEEEE;
			box-sizing: border-box;
			border: 0px;
			padding-left: 10px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			resize: none;
			padding: 10px;
			width: 100%;
			height: 200px;
			font-family: Calibri;
			scrollbar-width: thin;
			scrollbar-color: #CCCCCC #EEEEEE;
			border-color: #DDDDDD;
			border-style: solid;
			border-width: 1px;
			background-position: 10px 10px;
			background-repeat: no-repeat;
		}
		
		.page-text-area-auto:hover{
			background-color: #DEDEDE;
		}
	
	/*input button*/
		.page-input-button-default-fixed{
			width: auto;
			height: 40px;
			padding: 10px;
			color: #000111;
			background-color: #EEEEEE;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-input-button-default-fixed:hover{
			background-color: #DDDDDD;
		}
	
		.page-input-button-default-auto{
			width: 100%;
			height: 40px;
			padding: 10px;
			color: #000111;
			background-color: #EEEEEE;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-input-button-default-auto:hover{
			background-color: #DDDDDD;
		}
		
		.page-input-button-blue-fixed{
			width: auto;
			height: 40px;
			padding: 10px;
			color: #EEEFFF;
			background-color: #06417b;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-input-button-blue-fixed:hover{
			background-color: #1c5a97;
		}
		
		.page-input-button-blue-auto{
			width: 100%;
			height: 40px;
			padding: 10px;
			color: #EEEFFF;
			background-color: #06417b;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-input-button-blue-auto:hover{
			background-color: #1c5a97;
		}
		
		.page-input-button-green-fixed{
			width: auto;
			height: 40px;
			padding: 10px;
			color: #EEEFFF;
			background-color: #00a400;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-input-button-green-fixed:hover{
			background-color: #1aba1a;
		}
	
	/*input button*/
		.page-input-button-auto{
			width: 100%;
			height: 40px;
			padding: 10px;
			color: #EEEFFF;
			background-color: #06417b;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-input-button-auto:hover{
			background-color: #1c5a97;
		}
	
	/*input button title*/
		.page-input-button-frame{
			position: relative;
		}
		
		.page-input-button-top-title{
			position: absolute;
			top: -52px;
			right: -13px;
			display: none;
			font-size: 12px;
			padding: 10px;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, 0.85);
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #333333;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 50px;
			text-align: center;
			z-index: 1;
		}
		
		.page-input-button-bottom-title{
			position: absolute;
			bottom: -52px;
			right: -13px;
			display: none;
			font-size: 12px;
			padding: 10px;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, 0.85);
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #333333;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 50px;
			text-align: center;
			z-index: 1;
		}
		
		.page-input-button-left-title{
			position: absolute;
			top: -12px;
			right: 47px;
			display: none;
			font-size: 12px;
			padding: 10px;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, 0.85);
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #333333;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 50px;
			text-align: center;
			z-index: 1;
		}
		
		.page-input-button-right-title{
			position: absolute;
			top: -12px;
			right: -73px;
			display: none;
			font-size: 12px;
			padding: 10px;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, 0.85);
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #333333;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 50px;
			text-align: center;
			z-index: 1;
		}
		
		.page-input-button-frame:hover 
		.page-input-button-top-title{
			display: block;
		}
		
		.page-input-button-frame:hover 
		.page-input-button-bottom-title{
			display: block;
		}
		
		.page-input-button-frame:hover 
		.page-input-button-left-title{
			display: block;
		}
		
		.page-input-button-frame:hover 
		.page-input-button-right-title{
			display: block;
		}
		
		.page-text{
			width: auto;
			padding: 10px;
			color: #111111;
			background-color: #EEEEEE;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		
		.page-text:hover{
			background-color: #DEDEDE;
		}
		
		.page-button{
			width: auto;
			padding: 10px;
			color: #EEEEEE;
			background-color: #06417b;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-button:hover{
			background-color: #1c5a97;
		}

/*~Page Table Style~*/
	
	/*Blue Table Frame*/
		.table-blue-frame{
			border: 1px solid #06417B;
			background-color: #06417B;
			padding: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		
	/*Blue Table Small*/
		.table-blue-small{
			border-collapse: collapse;
			width: 100%;
			font-size: 12px;
		}

		.table-blue-small td, .table-blue-small th{
			border: 1px solid #06417B/*#1C5A97*/;
			padding: 10px;
		}

		.table-blue-small tr:nth-child(even){
			background-color: #DDDDDD;
		}
		
		.table-blue-small tr:nth-child(odd){
			background-color: #CCCCCC;
		}

		.table-blue-small tr:hover{
			background-color: #EEEEEE;
		}

		.table-blue-small th{
			padding-top: 10px;
			padding-bottom: 10px;
			background-color: #06417B;
			color: #FFFFFF;
		}
	
	/*Blue Table Medium*/
		.table-blue-medium{
			border-collapse: collapse;
			width: 100%;
			font-size: 16px;
		}

		.table-blue-medium td, .table-blue-medium th{
			border: 1px solid #06417B/*#1C5A97*/;
			padding: 10px;
		}

		.table-blue-medium tr:nth-child(even){
			background-color: #DDDDDD;
		}
		
		.table-blue-medium tr:nth-child(odd){
			background-color: #CCCCCC;
		}

		.table-blue-medium tr:hover{
			background-color: #EEEEEE;
		}

		.table-blue-medium th{
			padding-top: 10px;
			padding-bottom: 10px;
			background-color: #06417B;
			color: #FFFFFF;
		}
	
	/*Blue Table Large*/
		.table-blue-large{
			border-collapse: collapse;
			width: 100%;
			font-size: 20px;
		}

		.table-blue-large td, .table-blue-large th{
			border: 1px solid #06417B/*#1C5A97*/;
			padding: 10px;
		}

		.table-blue-large tr:nth-child(even){
			background-color: #DDDDDD;
		}
		
		.table-blue-large tr:nth-child(odd){
			background-color: #CCCCCC;
		}

		.table-blue-large tr:hover{
			background-color: #CCCCCC;
		}

		.table-blue-large th{
			padding-top: 10px;
			padding-bottom: 10px;
			background-color: #06417B;
			color: #FFFFFF;
		}

/*~Page Button Style~*/

	/*Button Group Default*/
		.button-group-default-unselected{
			width: 25px;
			height: 25px;
			background-color: #BBBBBB;
			font-size: 20px;
			-moz-border-radius: 50%;
			border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			border-color: #CCCCCC;
			border-width: 5px;
			border-style: solid;
			margin: 0;
		}
		
		.button-group-default-label{
			color: #333333;
			font-size: 14px;
			margin: 0;
		}
		
		.button-group-default-unselected:hover{
			background-color: #888888;
			border-color: #CCCCCC;
			border-style: solid;
			cursor: pointer;
			color: #111111;
		}
		
		.button-group-default-selected{
			background-color: #555555;
			border-color: #CCCCCC;
			border-style: solid;
			cursor: pointer;
			color: #111111;
		}
	
/*~Page Tooltip Style~*/

	/*ToolTip Default*/
		.tooltip-default-left-frame{
			position: relative;
			display: inline-block;
		}
		
		.tooltip-default-top-frame{
			position: relative;
			display: inline-block;
		}
		
		.tooltip-default-bottom-frame{
			position: relative;
			display: inline-block;
		}
		
		.tooltip-default-right-frame{
			position: relative;
			display: inline-block;
		}
		
		.tooltip-default-left-content{
			position: absolute;
			display: none;
			padding: 10px;
			background-color: #DDDDDD;
			/*background-color: rgba(200, 200, 200, 0.85);*/
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #CCCCCC;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 100px;
			max-width: 250px;
			text-align: center;
			z-index: 99999;
			color: #333333;
		}
		
		.tooltip-default-top-content{
			position: absolute;
			display: none;
			padding: 10px;
			background-color: #DDDDDD;
			/*background-color: rgba(200, 200, 200, 0.85);*/
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #CCCCCC;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 100px;
			max-width: 250px;
			text-align: center;
			z-index: 99999;
			color: #333333;
		}
		
		.tooltip-default-bottom-content{
			position: absolute;
			display: none;
			padding: 10px;
			background-color: #DDDDDD;
			/*background-color: rgba(200, 200, 200, 0.85);*/
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #CCCCCC;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 100px;
			max-width: 250px;
			text-align: center;
			z-index: 99999;
			color: #333333;
		}
		
		.tooltip-default-right-content{
			position: absolute;
			display: none;
			padding: 10px;
			background-color: #DDDDDD;
			/*background-color: rgba(200, 200, 200, 0.85);*/
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #CCCCCC;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 100px;
			max-width: 250px;
			text-align: center;
			z-index: 99999;
			color: #333333;
		}
		
		.tooltip-default-left-frame:hover .tooltip-default-left-content{
			display: block;
			right: calc(100% + 15px);
			top: 50%;
			width: 100%;
			transform: translateY(-50%);
		}
		
		.tooltip-default-top-frame:hover .tooltip-default-top-content{
			display: block;
			bottom: calc(100% + 15px);
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
		}
		
		.tooltip-default-bottom-frame:hover .tooltip-default-bottom-content{
			display: block;
			top: calc(100% + 15px);
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
		}
		
		.tooltip-default-right-frame:hover .tooltip-default-right-content{
			display: block;
			left: calc(100% + 15px);
			top: 50%;
			width: 100%;
			transform: translateY(-50%);
		}
		
		/* this CS forms the triangles */
		.tooltip-default-left-content:after,
		.tooltip-default-left-content:before {
			content: '';
			display: block;
			position: absolute;
			left: calc(98% + 2px);
			width: 0;
			height: 0;
			border-style: solid;
		}

		/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
		.tooltip-default-left-content:after {
			top: 50%;
			transform: translateY(-50%);
			border-color: transparent transparent transparent #DDDDDD;
			border-width: 4.85px;
		}

		/* this border color controlls the outside, thin border */
		.tooltip-default-left-content:before {
			top: 50%;
			transform: translateY(-50%);
			border-color: transparent transparent transparent #CCCCCC;
			border-width: 6.95px;
		}
		
		/* this CS forms the triangles */
		.tooltip-default-top-content:after,
		.tooltip-default-top-content:before {
			content: '';
			display: block;
			position: absolute;
			left: 50%;
			width: 0;
			height: 0;
			border-style: solid;
		}

		/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
		.tooltip-default-top-content:after {
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: #DDDDDD transparent transparent transparent;
			border-width: 4.85px;
		}

		/* this border color controlls the outside, thin border */
		.tooltip-default-top-content:before {
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: #CCCCCC transparent transparent transparent;
			border-width: 6.95px;
		}
		
		/* this CS forms the triangles */
		.tooltip-default-bottom-content:after,
		.tooltip-default-bottom-content:before {
			content: '';
			display: block;
			position: absolute;
			left: 50%;
			width: 0;
			height: 0;
			border-style: solid;
		}

		/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
		.tooltip-default-bottom-content:after {
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: transparent transparent #DDDDDD transparent;
			border-width: 4.85px;
		}

		/* this border color controlls the outside, thin border */
		.tooltip-default-bottom-content:before {
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: transparent transparent #CCCCCC transparent;
			border-width: 6.95px;
		}
		
		/* this CS forms the triangles */
		.tooltip-default-right-content:after,
		.tooltip-default-right-content:before {
			content: '';
			display: block;
			position: absolute;
			right: calc(98% + 2px);
			width: 0;
			height: 0;
			border-style: solid;
		}

		/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
		.tooltip-default-right-content:after {
			top: 50%;
			transform: translateY(-50%);
			border-color: transparent #DDDDDD transparent transparent;
			border-width: 4.85px;
		}

		/* this border color controlls the outside, thin border */
		.tooltip-default-right-content:before {
			top: 50%;
			transform: translateY(-50%);
			border-color: transparent #CCCCCC transparent transparent;
			border-width: 6.95px;
		}
	
	/*ToolTip Dark*/
		.tooltip-dark-left-frame{
			position: relative;
			display: inline-block;
		}
		
		.tooltip-dark-top-frame{
			position: relative;
			display: inline-block;
		}
		
		.tooltip-dark-bottom-frame{
			position: relative;
			display: inline-block;
		}
		
		.tooltip-dark-right-frame{
			position: relative;
			display: inline-block;
		}
		
		.tooltip-dark-left-content{
			position: absolute;
			display: none;
			padding: 10px;
			background-color: #555555;
			/*background-color: rgba(0, 0, 0, 0.85);*/
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #444444;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 100px;
			max-width: 250px;
			text-align: center;
			z-index: 99999;
			color: #FFFFFF;
		}
		
		.tooltip-dark-top-content{
			position: absolute;
			display: none;
			padding: 10px;
			background-color: #555555;
			/*background-color: rgba(0, 0, 0, 0.85);*/
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #444444;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 100px;
			max-width: 250px;
			text-align: center;
			z-index: 99999;
			color: #FFFFFF;
		}
		
		.tooltip-dark-bottom-content{
			position: absolute;
			display: none;
			padding: 10px;
			background-color: #555555;
			/*background-color: rgba(0, 0, 0, 0.85);*/
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #444444;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 100px;
			max-width: 250px;
			text-align: center;
			z-index: 99999;
			color: #FFFFFF;
		}
		
		.tooltip-dark-right-content{
			position: absolute;
			display: none;
			padding: 10px;
			background-color: #555555;
			/*background-color: rgba(0, 0, 0, 0.85);*/
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #444444;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			min-width: 100px;
			max-width: 250px;
			text-align: center;
			z-index: 99999;
			color: #FFFFFF;
		}
		
		.tooltip-dark-left-frame:hover .tooltip-dark-left-content{
			display: block;
			right: calc(100% + 15px);
			top: 50%;
			width: 100%;
			transform: translateY(-50%);
		}
		
		.tooltip-dark-top-frame:hover .tooltip-dark-top-content{
			display: block;
			bottom: calc(100% + 15px);
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
		}
		
		.tooltip-dark-bottom-frame:hover .tooltip-dark-bottom-content{
			display: block;
			top: calc(100% + 15px);
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
		}
		
		.tooltip-dark-right-frame:hover .tooltip-dark-right-content{
			display: block;
			left: calc(100% + 15px);
			top: 50%;
			width: 100%;
			transform: translateY(-50%);
		}
		
		/* this CS forms the triangles */
		.tooltip-dark-left-content:after,
		.tooltip-dark-left-content:before {
			content: '';
			display: block;
			position: absolute;
			left: calc(98% + 2px);
			width: 0;
			height: 0;
			border-style: solid;
		}

		/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
		.tooltip-dark-left-content:after {
			top: 50%;
			transform: translateY(-50%);
			border-color: transparent transparent transparent #555555;
			border-width: 4.85px;
		}

		/* this border color controlls the outside, thin border */
		.tooltip-dark-left-content:before {
			top: 50%;
			transform: translateY(-50%);
			border-color: transparent transparent transparent #444444;
			border-width: 6.95px;
		}
		
		/* this CS forms the triangles */
		.tooltip-dark-top-content:after,
		.tooltip-dark-top-content:before {
			content: '';
			display: block;
			position: absolute;
			left: 50%;
			width: 0;
			height: 0;
			border-style: solid;
		}

		/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
		.tooltip-dark-top-content:after {
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: #333333 transparent transparent transparent;
			border-width: 4.85px;
		}

		/* this border color controlls the outside, thin border */
		.tooltip-dark-top-content:before {
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: #444444 transparent transparent transparent;
			border-width: 6.95px;
		}
		
		/* this CS forms the triangles */
		.tooltip-dark-bottom-content:after,
		.tooltip-dark-bottom-content:before {
			content: '';
			display: block;
			position: absolute;
			left: 50%;
			width: 0;
			height: 0;
			border-style: solid;
		}

		/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
		.tooltip-dark-bottom-content:after {
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: transparent transparent #333333 transparent;
			border-width: 4.85px;
		}

		/* this border color controlls the outside, thin border */
		.tooltip-dark-bottom-content:before {
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: transparent transparent #444444 transparent;
			border-width: 6.95px;
		}
		
		/* this CS forms the triangles */
		.tooltip-dark-right-content:after,
		.tooltip-dark-right-content:before {
			content: '';
			display: block;
			position: absolute;
			right: calc(98% + 2px);
			width: 0;
			height: 0;
			border-style: solid;
		}

		/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
		.tooltip-dark-right-content:after {
			top: 50%;
			transform: translateY(-50%);
			border-color: transparent #333333 transparent transparent;
			border-width: 4.85px;
		}

		/* this border color controlls the outside, thin border */
		.tooltip-dark-right-content:before {
			top: 50%;
			transform: translateY(-50%);
			border-color: transparent #444444 transparent transparent;
			border-width: 6.95px;
		}

/*~Page Listbox Tooltip Style~*/
	
	/*~Top Tooltip Style~*/
		.page-list-box-tooltip-top-frame{
			position: relative;
		}
		
		.page-list-box-tooltip-top-content{
			position: absolute;
			display: none;
			padding: 10px;
			background-color: #DDDDDD;
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #CCCCCC;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			width: 99%;
			text-align: center;
			z-index: 99999;
			color: #333333;
		}
		
		.page-list-box-tooltip-top-frame:hover .page-list-box-tooltip-top-content{
			display: block;
			bottom: calc(100% + 15px);
			left: 50%;
			width: 99%;
			transform: translateX(-50%);
		}
		
		/* this CS forms the triangles */
		.page-list-box-tooltip-top-content:after,
		.page-list-box-tooltip-top-content:before {
			content: '';
			display: block;
			position: absolute;
			left: 50%;
			width: 0;
			height: 0;
			border-style: solid;
		}

		/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
		.page-list-box-tooltip-top-content:after {
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: #DDDDDD transparent transparent transparent;
			border-width: 4.85px;
		}

		/* this border color controlls the outside, thin border */
		.page-list-box-tooltip-top-content:before {
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: #CCCCCC transparent transparent transparent;
			border-width: 6.95px;
		}

	/*~Bottom Tooltip Style~*/
		.page-list-box-tooltip-bottom-frame{
			position: relative;
		}
		
		.page-list-box-tooltip-bottom-content{
			position: absolute;
			display: none;
			padding: 10px;
			background-color: #DDDDDD;
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #CCCCCC;
			border-style: solid;
			border-width: 1px;
			cursor: pointer;
			width: 99%;
			text-align: center;
			z-index: 99999;
			color: #333333;
		}
		
		.page-list-box-tooltip-bottom-frame:hover .page-list-box-tooltip-bottom-content{
			display: block;
			top: calc(99% + 15px);
			left: 50%;
			width: 99%;
			transform: translateX(-50%);
		}
		
		/* this CS forms the triangles */
		.page-list-box-tooltip-bottom-content:after,
		.page-list-box-tooltip-bottom-content:before {
			content: '';
			display: block;
			position: absolute;
			left: 50%;
			width: 0;
			height: 0;
			border-style: solid;
		}

		/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
		.page-list-box-tooltip-bottom-content:after {
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: transparent transparent #DDDDDD transparent;
			border-width: 4.85px;
		}

		/* this border color controlls the outside, thin border */
		.page-list-box-tooltip-bottom-content:before {
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-color: transparent transparent #CCCCCC transparent;
			border-width: 6.95px;
		}

/*~Page Tagging Style~*/

	/*Default Tagging*/
		.tag-default-small{
			background-color: #DDDDDD;
			font-size: 8px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
		}
		
		.tag-default-medium{
			background-color: #DDDDDD;
			font-size: 12px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
		}
		
		.tag-default-large{
			background-color: #DDDDDD;
			font-size: 16px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
		}
		
		.tag-default-custom{
			background-color: #DDDDDD;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
		}
	
	/*Blue Tagging*/
		.tag-blue-small{
			background-color: #06417B;
			font-size: 8px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-blue-medium{
			background-color: #06417B;
			font-size: 12px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-blue-large{
			background-color: #06417B;
			font-size: 16px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-blue-custom{
			background-color: #06417B;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
	
	/*Green Tagging*/
		.tag-green-small{
			background-color: #00A400;
			font-size: 8px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-green-medium{
			background-color: #00A400;
			font-size: 12px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-green-large{
			background-color: #00A400;
			font-size: 16px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-green-custom{
			background-color: #00A400;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
	
	/*Red Tagging*/
		.tag-red-small{
			background-color: #EE1313;
			font-size: 8px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-red-medium{
			background-color: #EE1313;
			font-size: 12px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-red-large{
			background-color: #EE1313;
			font-size: 16px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-red-custom{
			background-color: #EE1313;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
	
	/*Dark Tagging*/
		.tag-dark-small{
			background-color: #333333;
			font-size: 8px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-dark-medium{
			background-color: #333333;
			font-size: 12px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-dark-large{
			background-color: #333333;
			font-size: 16px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-dark-custom{
			background-color: #333333;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
	
	/*Orange Tagging*/
		.tag-orange-small{
			background-color: #ED7014;
			font-size: 8px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-orange-medium{
			background-color: #ED7014;
			font-size: 12px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-orange-large{
			background-color: #ED7014;
			font-size: 16px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}
		
		.tag-orange-custom{
			background-color: #ED7014;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px;
			color: #FFFFFF;
		}

/*~Page Upload Avatar Style~*/
	
	/*Upload Avatar*/
		.page-upload-avatar-holder{
			box-sizing: border-box;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			padding: 25px;
			width: 100%;
			height: auto;
			border-color: #CCCCCC;
			border-style: dashed;
			border-width: 3px;
			overflow-y: hidden;
			display: none;
		}
		
		.page-upload-avatar-file{
			display: none;
		}
		
		.page-upload-avatar-button{
			width: auto;
			padding: 10px;
			color: #EEEEEE;
			background-color: #06417b;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-upload-avatar-button:hover{
			background-color: #1c5a97;
		}
		
		.page-upload-avatar-content{
			box-sizing: border-box;
			display: table;
			text-align: center;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			padding: 10px;
			width: 100%;
			min-height: 25px;
			font-family: Arial, Helvetica, sans-serif;
		}
		
		.page-upload-avatar-photo-holder{
			position: relative; 
			display: inline-block; 
			box-sizing: border-box;
			margin: 10px;
			width: 180px; 
			height: 180px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #CCCCCC;
			border-style: dashed;
			border-width: 2px;
		}
		
		.page-upload-avatar-photo-holder:hover 
		.page-upload-avatar-photo-remove{
			display: block;
		}
		
		.page-upload-avatar-photo-remove{
			position: absolute;
			top: -15px;
			right: -15px;
			width: 30px; 
			height: 30px;
			background-color: /*#06417b*/#06417b;
			-moz-border-radius: 50%;
			border-radius: 50%;
			cursor: pointer;
			z-index: 1;
			border: 0;
			display: none;
		}
		
		.page-upload-avatar-photo-remove:hover {
			background-color: /*#1c5a97*/#fb0301;
		}
		
		.page-upload-avatar-photo-title{
			position: absolute;
			bottom: 5px;
			left: 15px;
			width: 175px; 
			height: auto;
			background-color: /*#06417b*/ RGBA(0,0,0,0.65);
			-moz-border-radius: 3px;
			border-radius: 3px;
			color: #FFFFFF;
			z-index: 1;
			border: 0;
			padding: 5px;
			word-wrap: break-word;
		}

		.page-upload-avatar-photo-landscape{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 160px;
		}
		
		.page-upload-avatar-photo-portrait{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			height: 160px;
		}
		
		.page-upload-avatar-photo-square{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 160px;
			height: 160px;
		}
		
/*Upload Student Registration*/
		.page-upload-register-holder{
			box-sizing: border-box;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			padding: 25px;
			width: 100%;
			height: auto;
			border-color: #CCCCCC;
			border-style: dashed;
			border-width: 3px;
			overflow-y: hidden;
			display: none;
		}
		
		.page-upload-register-file{
			display: none;
		}
		
		.page-upload-register-button{
			width: auto;
			padding: 10px;
			color: #EEEEEE;
			background-color: #06417b;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-upload-register-button:hover{
			background-color: #1c5a97;
		}
		
		.page-upload-register-content{
			box-sizing: border-box;
			display: table;
			text-align: center;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			padding: 10px;
			width: 100%;
			min-height: 25px;
			font-family: Arial, Helvetica, sans-serif;
		}
		
		.page-upload-register-photo-holder{
			position: relative; 
			display: inline-block; 
			box-sizing: border-box;
			margin: 10px;
			width: 180px; 
			height: 180px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #CCCCCC;
			border-style: dashed;
			border-width: 2px;
		}
		
		.page-upload-register-photo-holder:hover 
		.page-upload-register-photo-remove{
			display: block;
		}
		
		.page-upload-register-photo-remove{
			position: absolute;
			top: -15px;
			right: -15px;
			width: 30px; 
			height: 30px;
			background-color: /*#06417b*/#06417b;
			-moz-border-radius: 50%;
			border-radius: 50%;
			cursor: pointer;
			z-index: 1;
			border: 0;
			display: none;
		}
		
		.page-upload-register-photo-remove:hover {
			background-color: /*#1c5a97*/#fb0301;
		}
		
		.page-upload-register-photo-title{
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: calc(95% - 1px); 
			height: auto;
			background-color: /*#06417b*/ RGBA(0,0,0,0.65);
			-moz-border-radius: 3px;
			border-radius: 3px;
			color: #FFFFFF;
			z-index: 1;
			border: 0;
			padding: 5px;
			word-wrap: break-word;
			font-size: 10px;
		}

		.page-upload-register-photo-landscape{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 160px;
		}
		
		.page-upload-register-photo-portrait{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			height: 160px;
		}
		
		.page-upload-register-photo-square{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 160px;
			height: 160px;
		}

/*Upload Default Photo/Video*/
		.page-upload-default-holder{
			box-sizing: border-box;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			padding: 25px;
			width: 100%;
			height: auto;
			border-color: #CCCCCC;
			border-style: dashed;
			border-width: 3px;
			overflow-y: hidden;
			display: none;
		}
		
		.page-upload-default-file{
			display: none;
		}
		
		.page-upload-default-button{
			width: auto;
			padding: 10px;
			color: #EEEEEE;
			background-color: #06417b;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-upload-default-button:hover{
			background-color: #1c5a97;
		}
		
		.page-upload-default-content{
			box-sizing: border-box;
			display: table;
			text-align: center;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			padding: 10px;
			width: 100%;
			min-height: 25px;
			font-family: Arial, Helvetica, sans-serif;
		}
		
		.page-upload-default-photo-holder{
			position: relative; 
			display: inline-block; 
			box-sizing: border-box;
			margin: 10px;
			width: 180px; 
			height: 180px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #CCCCCC;
			border-style: dashed;
			border-width: 2px;
		}
		
		.page-upload-default-photo-holder:hover 
		.page-upload-default-photo-remove{
			display: block;
		}
		
		.page-upload-default-photo-remove{
			position: absolute;
			top: -15px;
			right: -15px;
			width: 30px; 
			height: 30px;
			background-color: /*#06417b*/#06417b;
			-moz-border-radius: 50%;
			border-radius: 50%;
			cursor: pointer;
			z-index: 1;
			border: 0;
			display: none;
		}
		
		.page-upload-default-photo-remove:hover {
			background-color: /*#1c5a97*/#fb0301;
		}
		
		.page-upload-default-photo-title{
			position: absolute;
			bottom: 5px;
			left: 15px;
			width: 175px; 
			height: auto;
			background-color: /*#06417b*/ RGBA(0,0,0,0.65);
			-moz-border-radius: 3px;
			border-radius: 3px;
			color: #FFFFFF;
			z-index: 1;
			border: 0;
			padding: 5px;
			word-wrap: break-word;
		}

		.page-upload-default-photo-landscape{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 160px;
		}
		
		.page-upload-default-photo-portrait{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			height: 160px;
		}
		
		.page-upload-default-photo-square{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 160px;
			height: 160px;
		}

/*~Page Freedom Wall Style~*/

	/*Notifications*/
		.page-notifications-holder {
			right: 5px; 
			top: 135px; 
			position: fixed; 
			width: auto; 
			height: auto;
			background: rgba(0, 0, 0, 0.75);
			color: #FFFFFF;
			font-size: 12px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			border-color: #333333;
			border-style: solid;
			border-width: 2px;
		}
		
		.page-notifications-menu {
			padding: 5px;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}
		
		.page-notifications-menu:hover {
			background: #555555;
			cursor: pointer;
		}
	
	/*freedom wall*/
		.page-freedom-wall-minimize {
			left: 5px; 
			top: 135px; 
			position: fixed; 
			width: auto; 
			height: auto;
			padding: 15px;
			background: rgba(0, 0, 0, 0.75);
			color: #FFFFFF;
			font-size: 15px;
			overflow-y: hidden;
			text-align: center;
			border-color: #333333;
			border-style: solid;
			border-width: 2px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			writing-mode: vertical-rl;
			text-orientation: mixed;
		}
		
		.page-freedom-wall-maximize {
			left: 5px; 
			bottom: 4px; 
			position: fixed; 
			width: 35%; 
			height: calc(100% - 183px);
			padding: 20px;
			background: rgba(0, 0, 0, 0.75);
			color: #FFFFFF;
			font-size: 15px;
			text-align: center;
			border-color: #333333;
			border-style: solid;
			border-width: 2px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			display: none;
		}
		
		.page-freedom-wall-maximize:hover 
		.page-freedom-wall-close {
			display: block;
		}
		
		.page-freedom-wall-title {
			font-size: 16px;
			cursor: pointer;
		}
		
		.page-freedom-wall-search {
			width: 100%;
			padding: 10px;
			color: #FFFFFF;
			background-color: #666666;
			box-sizing: border-box;
			border: 0px;
			font-size: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}
		
		.page-freedom-wall-composer {
			width: 100%;
			padding: 10px;
			color: #FFFFFF;
			background-color: #555555;
			box-sizing: border-box;
			border: 0px;
			font-size: 14px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}
		
		.page-freedom-wall-frame{
			height: 100%;
			position: relative;
		}
		
		.page-freedom-wall-content{
			height: calc(100% - 115px);
			overflow-y: scroll;
			scrollbar-width: thin;
			scrollbar-color: #444444 #333333;
		    vertical-align: text-top;
		}
		
		.page-freedom-wall-close {
			display: block;
			position: absolute;
			padding: 3px;
			right: 0;
			top: 0;
			z-index: 10;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}
		
		.page-freedom-wall-close:hover {
			background: #555555;
			cursor: pointer;
		}
		
		.page-freedom-wall-emotholder{
			display: none;
			position: absolute;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 230px;
			height: 190px;
			background-color: rgba(25, 25, 25, 0.85);
			top: 25px;
			left: 25px;
			padding: 10px;
			overflow-y: hidden;
			z-index: 999999;
			border-color: #777777;
			border-style: solid;
			border-width: 1px;
		}
		
		.page-freedom-wall-emotframe{
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 95%;
			height: 170px;
			font-family: Arial;
			overflow-y: auto;
			scrollbar-width: thick;
			scrollbar-color: #333333 #666666;
		}
		
		.page-freedom-wall-emoticon{
			display: inline-table; 
			-moz-border-radius: 50%;
			border-radius: 50%;
			box-sizing: border-box;
			border: 0px;
			width: 36px;
			height: 36px;
		}
		
		.page-freedom-wall-emoticon:hover{
			background: #777777;
			cursor: pointer;
		}
		
		.page-freedom-wall-emotclose{
			-moz-border-radius: 50%;
			border-radius: 50%;
			position: absolute;
			width: 16px;
			height: 16px;
			left: 0;
			top: 0;
			padding: 5px;
		}
		
		.page-freedom-wall-emotclose:hover{
			background: #777777;
			cursor: pointer;
		}
		
		.page-freedom-wall-command{
			display: inline-table; 
			-moz-border-radius: 50%;
			border-radius: 50%;
			box-sizing: border-box;
			border: 0px;
			padding: 2px;
		}
		
		.page-freedom-wall-command:hover{
			background: #777777;
			cursor: pointer;
		}
		
		.page-freedom-wall-fullname{
			position: relative;
			width: auto;
			color: #EEEEEE;
			font-size: 10px;
		}
		
		.page-freedom-wall-datetime{
			position: relative;
			width: auto;
			color: #EEEEEE;
			font-size: 8px;
		}
		
		.page-freedom-wall-avatars{
			-moz-border-radius: 30%;
			border-radius: 30%;
			background-color: #222222;
		}
		
		.page-freedom-wall-from{
			/*float: left;*/
			display: inline-block;
			position: relative;
			width: auto;
			max-width: 22.5%;
			word-wrap: break-word;
			/*word-break: break-all;*/
			border-color: #777777;
			border-style: solid;
			border-width: 0px;
			margin: 2px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			padding: 7px;
			background-color: #1b85f5;
			color: #FFFFFF;
			font-size: 18px;
		    vertical-align: text-top;
		}
		
		.page-freedom-wall-from-wide{
			/*float: left;*/
			display: inline-block;
			position: relative;
			width: auto;
			max-width: 98%;
			word-wrap: break-word;
			/*word-break: break-all;*/
			border-color: #777777;
			border-style: solid;
			border-width: 0px;
			margin: 2px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			padding: 10px;
			background-color: #1b85f5;
			color: #FFFFFF;
			font-size: 18px;
		    vertical-align: text-top;
		}
		
		.page-freedom-wall-to{
			/*float: left;*/
			display: inline-block;
			position: relative;
			width: auto;
			max-width: 22.5%;
			word-wrap: break-word;
			/*word-break: break-all;*/
			border-color: #777777;
			border-style: solid;
			border-width: 0px;
			margin: 2px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			padding: 7px;
			background-color: #666666;
			color: #FFFFFF;
			font-size: 18px;
		    vertical-align: text-top;
		}
		
		.page-freedom-wall-to-wide{
			/*float: left;*/
			display: inline-block;
			position: relative;
			width: auto;
			max-width: 98%;
			word-wrap: break-word;
			/*word-break: break-all;*/
			border-color: #777777;
			border-style: solid;
			border-width: 0px;
			margin: 2px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			padding: 10px;
			background-color: #666666;
			color: #FFFFFF;
			font-size: 18px;
		    vertical-align: text-top;
		}
		
	/*kcs ads*/
		.page-portal-alert-minimize{
			left: 5px; 
			bottom: 5px; 
			width: 35px; 
			height: 35px;
			border-color: #333333;
			border-style: solid;
			border-width: 1px;
			position: fixed; 
			padding: 10px;
			background: rgba(0, 0, 0, 0.75);
			text-align: center;
			-moz-border-radius: 50%;
			border-radius: 50%;
			display: none;
			border-color: #333333;
			border-style: solid;
			border-width: 2px;
		}
		
		.page-portal-alert-minimize:hover {
			left: 5px; 
			bottom: 5px;
			width: 35px; 
			height: 35px;
			cursor: pointer;
			background: #444444;
		}
		
		.page-portal-alert-maximize {
			left: 5px; 
			bottom: 5px; 
			position: fixed; 
			width: 25%;
			height: auto;
			padding: 20px;
			background: rgba(0, 0, 0, 0.75);
			color: #FFFFFF;
			-moz-border-radius: 10px;
			border-radius: 10px;
			text-align: center;
			border-color: #333333;
			border-style: solid;
			border-width: 2px;
		}
		
		.page-portal-alert-maximize:hover 
		.page-portal-alert-close {
			display: block;
		}
		
		.page-portal-alert-content {
			position: relative;
			width: 100%;
		}
		
		.page-portal-alert-frame {
			position: relative;
			-moz-border-radius: 10px;
			border-radius: 10px;
			border-width: 0;
			width: 100%;
		}
		
		.page-portal-alert-context {
			position: relative;
			background: rgba(0, 0, 0, 0.75);
			-moz-border-radius: 10px;
			border-radius: 10px;
			width: 100%;
		}
		
		.page-portal-alert-details {
			position: relative;
			font-size: 12px;
			word-wrap: break-word;
		}
		
		.page-portal-alert-close {
			display: block;
			position: absolute;
			padding: 3px;
			right: 0;
			top: 0;
			z-index: 10;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}
		
		.page-portal-alert-close:hover {
			background: #555555;
			cursor: pointer;
		}

/*~Page Gallery Style~*/
    
    .page-gallery-holder{
		display: table;
		width: 100%;
		text-align: center;
		vertical-align: text-top;
	}
	
	.page-gallery-thumbs{
	    position: relative;
		border-width: 1px;
		border-color: #DDDDDD;
		border-style: solid;
		background-color: #FFFFFF;
		width: 32%;
		height: auto;
		min-height: 300px;
		max-height: 320px;
		padding: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		margin: 5px;
		display: inline-table;
		box-sizing: border-box;
		text-align: center;
		vertical-align: text-top;
	}
	
	.page-gallery-slider{
	    display: none;
	    left: 0;
	    top: 0;
	    position: fixed;
	    z-index: 10;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.75);
	}
	
	.page-gallery-frame{
	    width: 80%;
	    height: 90%;
	}
	
	.page-gallery-main-photo{
	    padding: 10px;
		width: 75%;
		padding: 5px;
		margin: 5px;
		display: inline-block;
		/*-moz-border-radius: 5px;
		border-radius: 5px;
		border-width: 1px;
		border-color: #AAAAAA;
		border-style: solid;
		background-color: #AAAAAA;*/
	}
	
	.page-gallery-sub-photo{
		padding: 5px;
		margin: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		display: inline-block;
		border-width: 1px;
		border-color: #AAAAAA;
		border-style: solid;
		position: relative;
		width: 50px;
	    height: 50px;
	}
	
	.page-gallery-sub-photo:hover{
		border-width: 1px;
		border-color: #CCCCCC;
		border-style: solid;
		cursor: pointer;
	}
	
	.page-gallery-thumbs:hover{
		border-color: #BBBBBB;
		background-color: #CCCCCC;
		cursor: pointer;
	}
	
	.page-gallery-label{
	    left: 0;
	    bottom: 0;
	    padding: 10px;
	    position: absolute;
	    background: rgba(0, 0, 0, 0.75);
	    width: calc(100% - 20px);
	    color: #FFFFFF;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-align: center;
	}
	
	.page-gallery-title{
	    font-size: 14px;
	}
	
	.page-gallery-subtitle{
	    font-size: 11px;
	}
	
	.page-gallery-button{
		border-width: 1px;
		border-color: #222222;
		border-style: solid;
		background-color: #333333;
		-moz-border-radius: 50%;
		border-radius: 50%;
		padding: 5px;
	}
	
	.page-gallery-button:hover{
		border-color: #333333;
		cursor: pointer;
		background-color: #777777;
	}

/*~Page Post Style~*/
    
    .page-post-holder{
		display: table;
		width: 100%;
		text-align: center;
		vertical-align: text-top;
	}
	
	.page-post-thumbs{
	    position: relative;
		border-width: 1px;
		border-color: #DDDDDD;
		border-style: solid;
		background-color: #FFFFFF;
		width: 32%;
		height: auto;
		min-height: 300px;
		max-height: 320px;
		padding: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		margin: 5px;
		display: inline-table;
		box-sizing: border-box;
		text-align: center;
		vertical-align: text-top;
	}
	
	.page-post-slider{
	    display: none;
	    left: 0;
	    top: 0;
	    position: fixed;
	    z-index: 10;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.75);
	}
	
	.page-post-frame{
	    position: relative;
	    width: 80%;
	    height: 90%;
	}
	
	.page-post-main-photo{
	    position: relative;
	    padding: 10px;
		width: 75%;
		padding: 5px;
		margin: 5px;
		display: inline-block;
		/*-moz-border-radius: 5px;
		border-radius: 5px;
		border-width: 1px;
		border-color: #AAAAAA;
		border-style: solid;
		background-color: #AAAAAA;*/
	}
    	
	.page-post-portrait-photo{
        width: 100%;
	}
	
	.page-post-landscape-photo{
	    width: 100%;
	}
	
	.page-post-sub-photo{
		padding: 5px;
		margin: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		display: inline-block;
		border-width: 1px;
		border-color: #AAAAAA;
		border-style: solid;
		position: relative;
		width: 50px;
	    height: 50px;
	}
	
	.page-post-sub-photo:hover{
		border-width: 1px;
		border-color: #CCCCCC;
		border-style: solid;
		cursor: pointer;
	}
	
	.page-post-thumbs:hover{
		border-color: #BBBBBB;
		background-color: #CCCCCC;
		cursor: pointer;
	}
	
	.page-post-label{
	    left: 0;
	    bottom: 0;
	    padding: 10px;
	    position: absolute;
	    background: rgba(0, 0, 0, 0.75);
	    width: calc(100% - 20px);
	    color: #FFFFFF;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-align: center;
	}
	
	.page-post-title{
	    font-size: 14px;
	}
	
	.page-post-subtitle{
	    font-size: 11px;
	}
	
	.page-post-button{
		border-width: 1px;
		border-color: #222222;
		border-style: solid;
		background-color: #333333;
		-moz-border-radius: 50%;
		border-radius: 50%;
		padding: 5px;
	}
	
	.page-post-button:hover{
		border-color: #333333;
		cursor: pointer;
		background-color: #777777;
	}
	
	.page-post-textarea{
		border-width: 1px;
		border-color: #CCCCCC;
		border-style: solid;
		position: relative;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background-color: #FFFFFF;
		color: #111111;
		width: 100%;
		min-height: 10px;
		max-height: 75px;
		padding-top: 1px;
		padding-bottom: 20px;
		overflow-y: hidden;
		word-wrap: break-word;
		word-break: break-all;
	}
	
	.page-post-comment{
		position: relative;
		width: 98%;
		background-color: #FFFFFF;
		min-height: 10px;
		max-height: 85px;
		font-size: 12px;
		font-family: Arial;
		margin: 5px;
		word-wrap: break-word;
		word-break: break-all;
		overflow-y: auto;
		scrollbar-width: thick;
		scrollbar-color: #BBBBBB #999999;
	}
	
	.page-post-submit{
		border-width: 0px;
		border-color: #CCCCCC;
		border-style: solid;
		background-color: #DDDDDD;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding: 15px;
		width: 100%;
		height: 100%;
		max-height: 100px;
		color: #000000;
		font-size: 14px;
	}
	
	.page-post-submit:hover{
		cursor: pointer;
		background-color: #CCCCCC;
	}
	
	.page-post-submitted{
		background-color: #BBBBBB;
	}
	
/*~Page Approval Style~*/
	.page-approval-registration{
		display: inline-table; 
		box-sizing: border-box; 
		width: 45%;
	}

/*~Page Media Style~*/

	@media all and (min-width: 1321px) { /*for desktop response*/
		.page-padding{
			padding: 15px;
		}
		
		.page-information{
			display: table;
			width: 100%;
			text-align: center;
		}
		
		.page-details-holder{
			width: 32%;
		}
		
		.page-freedomwall-holder{
			width: 96.5%;
		}
		
		.page-admission-holder{
			width: 49%;
		}
		
		.page-contact-holder{
			width: 49%;
		}
		
		.page-calendar-holder{
			width: 32%;
		}
		
		.page-dashboard-holder{
			width: 49%;
		}
		
		.page-list-box{
			display: none;
			width: 25%;
		}
		
		.page-portal-alert-maximize {
			width: 25%;
		}
		
		.page-freedom-wall-maximize {
			width: 45%;
		}
		
		.page-gallery-thumbs{
    		width: 32%;
    		min-height: 300px;
    		max-height: 320px;
    	}
	
    	.page-gallery-title{
    	    font-size: 14px;
    	}
    	
    	.page-gallery-subtitle{
    	    font-size: 11px;
    	}
    	
    	.page-gallery-main-photo{
    		width: 75%;
    	}
    	
    	.page-gallery-sub-photo{
    		width: 50px;
    	    height: 50px;
    	}
    	
    	.page-gallery-frame{
    	    width: 80%;
    	    height: 90%;
    	}
    	
    	.page-post-main-photo{
    		width: 75%;
    	}
    	
    	.page-post-frame{
    	    width: 80%;
    	    height: 90%;
    	}
    	
    	.page-post-portrait-photo{
            width: 60%;
    	}
    	
    	.page-post-landscape-photo{
    	    width: 100%;
    	}
		
		.page-approval-registration{
			width: 45%;
		}
	}
	
	@media all and (min-width: 1221px) and (max-width: 1320px) { /*for laptop response*/
	    .page-padding{
			padding: 15px;
		}
		
		.page-information{
			display: table;
			width: 100%;
			text-align: center;
		}
		
		.page-details-holder{
			width: 32%;
		}
		
		.page-freedomwall-holder{
			width: 96.5%;
		}
		
		.page-admission-holder{
			width: 49%;
		}
		
		.page-contact-holder{
			width: 49%;
		}
		
		.page-calendar-holder{
			width: 32%;
		}
		
		.page-dashboard-holder{
			width: 49%;
		}
		
		.page-list-box{
			display: none;
			width: 35%;
		}
		
		.page-portal-alert-maximize {
			width: 25%;
		}
		
		.page-freedom-wall-maximize {
			width: 45%;
		}
		
		.page-gallery-thumbs{
    		width: 24%;
    		min-height: 300px;
    		max-height: 320px;
    	}
	
    	.page-gallery-title{
    	    font-size: 14px;
    	}
    	
    	.page-gallery-subtitle{
    	    font-size: 11px;
    	}
    	
    	.page-gallery-main-photo{
    		width: 70%;
    	}
    	
    	.page-gallery-sub-photo{
    		width: 50px;
    	    height: 50px;
    	}
    	
    	.page-gallery-frame{
    	    width: 75%;
    	    height: 100%;
    	}
    	
    	.page-post-main-photo{
    		width: 70%;
    	}
    	
    	.page-post-frame{
    	    width: 75%;
    	    height: 100%;
    	}
    	
    	.page-post-portrait-photo{
            width: 60%;
    	}
    	
    	.page-post-landscape-photo{
    	    width: 100%;
    	}
    	
		.table-blue-small{
			border-collapse: collapse;
			width: 100%;
			font-size: 12px;
		}
    	
		.table-blue-medium{
			border-collapse: collapse;
			width: 100%;
			font-size: 16px;
		}
    	
		.table-blue-large{
			border-collapse: collapse;
			width: 100%;
			font-size: 20px;
		}
		
		.page-approval-registration{
			width: 45%;
		}
	}
	
	@media all and (min-width: 541px) and (max-width: 1220px) { /*for tablet response*/
		.page-padding{
			padding: 10px;
		}
		
		.page-information{
			display: table;
			width: 100%;
			text-align: center;
		}
		
		.page-details-holder{
			width: 49%;
		}
		
		.page-freedomwall-holder{
			width: 99%;
		}
		
		.page-admission-holder{
			width: 49%;
		}
		
		.page-contact-holder{
			width: 49%;
		}
		
		.page-calendar-holder{
			width: 49%;
		}
		
		.page-dashboard-holder{
			width: 49%;
		}
		
		.page-list-box{
			display: none;
			width: 55%;
		}
		
		.page-portal-alert-maximize {
			width: 50%;
		}
		
		.page-freedom-wall-maximize {
			width: 75%;
		}
		
		.page-gallery-thumbs{
    		width: 24%;
    		min-height: 300px;
    		max-height: 320px;
    	}
	
    	.page-gallery-title{
    	    font-size: 13px;
    	}
    	
    	.page-gallery-subtitle{
    	    font-size: 10px;
    	}
    	
    	.page-gallery-main-photo{
    		width: 85%;
    	}
    	
    	.page-gallery-sub-photo{
    		width: 40px;
    	    height: 40px;
    	}
    	
    	.page-gallery-frame{
    	    width: 80%;
    	    height: 100%;
    	}
    	
    	.page-post-main-photo{
    		width: 85%;
    	}
    	
    	.page-post-frame{
    	    width: 80%;
    	    height: 100%;
    	}
    	
    	.page-post-portrait-photo{
	        width: 100%;
    	}
    	
    	.page-post-landscape-photo{
    	    width: 100%;
    	}
    	
		.table-blue-small{
			border-collapse: collapse;
			width: 100%;
			font-size: 10px;
		}
    	
		.table-blue-medium{
			border-collapse: collapse;
			width: 100%;
			font-size: 12px;
		}
    	
		.table-blue-large{
			border-collapse: collapse;
			width: 100%;
			font-size: 16px;
		}
		
		.page-approval-registration{
			width: 45%;
		}
	}
	
	@media all and (max-width: 540px) { /*for mobile response*/
		.page-padding{
			padding: 5px;
		}
		
		.page-information{
			width: 100%;
			text-align: center;
		}
		
		.page-details-holder{
			width: 99%;
		}
		
		.page-freedomwall-holder{
			width: 99%;
		}
		
		.page-admission-holder{
			width: 99%;
		}
		
		.page-contact-holder{
			width: 99%;
		}
		
		.page-calendar-holder{
			width: 99%;
		}
		
		.page-dashboard-holder{
			width: 99%;
		}
		
		.page-list-box{
			display: none;
			width: 65%;
		}
		
		.page-portal-alert-maximize {
			width: 50%;
		}
		
		.page-freedom-wall-maximize {
			width: 75%;
		}
		
		.page-gallery-thumbs{
    		width: 45%;
    		min-height: 200px;
    		max-height: 220px;
    	}
	
    	.page-gallery-title{
    	    font-size: 12px;
    	}
    	
    	.page-gallery-subtitle{
    	    font-size: 9px;
    	}
    	
    	.page-gallery-main-photo{
    		width: 95%;
    	}
    	
    	.page-gallery-sub-photo{
    		width: 30px;
    	    height: 30px;
    	}
    	
    	.page-gallery-frame{
    	    width: 100%;
    	    height: 100%;
    	}
    	
    	.page-post-main-photo{
    		width: 95%;
    	}
    	
    	.page-post-frame{
    	    width: 100%;
    	    height: 100%;
    	}
    	
    	.page-post-portrait-photo{
	        width: 100%;
    	}
    	
    	.page-post-landscape-photo{
    	    width: 100%;
    	}
    	
		.table-blue-small{
			border-collapse: collapse;
			width: 100%;
			font-size: 10px;
		}
    	
		.table-blue-medium{
			border-collapse: collapse;
			width: 100%;
			font-size: 12px;
		}
    	
		.table-blue-large{
			border-collapse: collapse;
			width: 100%;
			font-size: 16px;
		}
		
		.page-approval-registration{
			width: 100%;
		}
	}