/*

	CSS for KCS Portal
	Copyright 2021
	Robbie Rae Solis Dela Cruz

*/

/*~Page List Box Style~*/

	.page-list-box{
		top: 135px;
		right: 5px;
		padding: 0;
		color: #FFFFFF;
		position: fixed;
		width: 25%;
		height: calc(100% - 142px);
		background-color: rgba(0, 0, 0, 0.75);
		-moz-border-radius: 10px;
		border-radius: 10px;
		
		border-color: #333333;
		border-style: solid;
		border-width: 2px;
	}
	
	.page-list-box-frame{
		right: 0;
		padding: 0;
		color: #FFFFFF;
		width: 99%;
		height: calc(100% - 100px);
		/*background-color: rgba(0, 0, 0, 0.75);
		
		border-left-color: #222222;
		border-left-style: solid;
		border-left-width: 2px;*/
		
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: #444444 #333333;
	}
	
	.page-list-box-menu{
		font-size: 14px;
		color: #FFFFFF;
		width: 100%;
		height: 30px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		cursor: pointer;
		padding: 5px;
	}
	
	.page-list-box-menu:hover{
		color: #EEEFFF !important;
		background-color: #555555 !important;
		cursor: pointer !important;
	}
	
	.page-list-box-submenu-holder{
		display: none;
	}
	
	.page-list-box-submenu-body{
		width: 100%;
		font-size: 14px;
	}
	
	.page-list-box-submenu{
		color: #FFFFFF;
		width: 100%;
		height: 15px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		cursor: pointer;
	}
	
	.page-list-box-submenu:hover{
		color: #EEEFFF;
		background-color: #406990;
		cursor: pointer;
	}
	
	.page-list-box-close{
		background-color: #222222;
		-moz-border-radius: 50%;
		border-radius: 50%;
		padding: 5px;
		border: 0px;
	}
	
	.page-list-box-close:hover{
		color: #EEEFFF !important;
		background-color: #333333 !important;
		cursor: pointer !important;
	}
	
	.page-list-box-photo{
		-moz-border-radius: 50%;
		border-radius: 50%;
		margin-right: 10px;
		background-color: #111111;
	}
	
	.page-list-box-search{
		width: 100%;
		padding: 10px;
		color: #FFFFFF;
		background-color: #555555;
		box-sizing: border-box;
		border: 0px;
		font-size: 12px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}

/*~Page Media Style~*/

	@media all and (min-width: 1321px) { /*for desktop response*/
		.page-list-box{
			display: none;
			width: 35%;
		}
	}
	
	@media all and (min-width: 1221px) and (max-width: 1320px) { /*for laptop response*/
		.page-list-box{
			display: none;
			width: 45%;
		}
	}
	
	@media all and (min-width: 541px) and (max-width: 1220px) { /*for tablet response*/
		.page-list-box{
			display: none;
			width: 65%;
		}
	}
	
	@media all and (max-width: 540px) { /*for mobile response*/
		.page-list-box{
			display: none;
			width: 75%;
		}
	}