/*

	CSS for KCS Portal
	Copyright 2021
	Robbie Rae Solis Dela Cruz

*/

/*~Page Lightbox Style~*/

/*~Page Lightbox Loading~*/
	.lightbox-loading-background{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #222222;
		opacity: 85%;
		display: none;
		z-index: 1;
	}
	
	.lightbox-loading-container{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		z-index: 1;
	}
	
	.lightbox-loading-frame{
		-moz-border-radius: 50%;
		border-radius: 50%;
		background: #FFFFFF;
		/*background: rgba(255, 255, 255, 0.05)
		width: 350px;
		max-width: 375px;
		height: 150px;
		max-height: 175px;
		font-size: 14px;*/
	}

/*~Page Lightbox Alert~*/
	.lightbox-alert-background{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #222222;
		opacity: 85%;
		display: none;
		z-index: 1;
	}
	
	.lightbox-alert-container{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		z-index: 1;
	}
	
	.lightbox-alert-frame{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: #FFFFFF;
		width: 350px;
		max-width: 375px;
		height: 150px;
		max-height: 175px;
		font-size: 14px;
	}
	
	.lightbox-alert-button{
		width: 25%;
		height: 30px;
		color: #EEEFFF;
		background-color: #06417b;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		cursor: pointer;
	}

/*~Page Lightbox Modal~*/
	.lightbox-modal-background{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #222222;
		opacity: 85%;
		display: none;
		z-index: 1;
	}
	
	.lightbox-modal-container{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		z-index: 1;
	}
	
	.lightbox-modal-frame{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: #FFFFFF;
		width: 400px;
		max-width: 450px;
		height: 350px;
		max-height: 375px;
		font-size: 14px;
	}
	
	.lightbox-modal-button{
		width: 25%;
		height: 30px;
		color: #EEEFFF;
		background-color: #06417b;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		cursor: pointer;
	}
	
	.post-textarea{
		-moz-border-radius: 5px;
		border-radius: 5px;
		background-color: #EEEEEE;
		color: #111111;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		width: 100%;
		max-width: 450px;
		height: 200px;
		max-height: 375px;
		font-size: 16px;
		resize: none;
		padding: 10px;
		font-family: Arial;
	}
	
	.post-caption{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: #222222;
		color: #EEEFFF;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		width: 100%;
		max-width: 450px;
		height: 100px;
		max-height: 375px;
		font-size: 16px;
		resize: none;
		padding: 10px;
		font-family: Arial;
	}
	
	.post-photo, .post-video{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: #222222;
		color: #EEEFFF;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		width: 100%;
		max-width: 450px;
		height: 200px;
		max-height: 375px;
		font-size: 16px;
		resize: none;
		padding: 10px;
		font-family: Arial;
	}
	
/*~Page Lightbox Avatar~*/
	.lightbox-avatar-background{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #222222;
		opacity: 85%;
		display: none;
		z-index: 1;
	}
	
	.lightbox-avatar-container{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		z-index: 1;
	}
	
	.lightbox-avatar-frame{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: #FFFFFF;
		width: 400px;
		max-width: 450px;
		height: 350px;
		max-height: 375px;
		font-size: 14px;
	}
	
	.lightbox-avatar-button{
		width: 25%;
		height: 30px;
		color: #EEEFFF;
		background-color: #06417b;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		cursor: pointer;
	}
	
/*~Page Lightbox Group~*/
	.lightbox-group-background{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #222222;
		opacity: 85%;
		display: none;
		z-index: 1;
	}
	
	.lightbox-group-container{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		z-index: 1;
	}
	
	.lightbox-group-frame{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: rgba(0, 0, 0, 0.75);
		width: 400px;
		max-width: 450px;
		height: 150px;
		max-height: 375px;
		font-size: 14px;
		color: #EEEFFF;
		border-color: #555555;
		border-style: solid;
		border-width: 2px;
	}
	
	.lightbox-group-button{
		width: 25%;
		height: 30px;
		color: #EEEFFF;
		background-color: #555555;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	.lightbox-group-button:hover{
		background-color: #777777;
		cursor: pointer;
	}
	
/*~Page Lightbox Inquirer~*/
	.lightbox-inquirer-background{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #222222;
		opacity: 85%;
		display: none;
		z-index: 1;
	}
	
	.lightbox-inquirer-container{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		z-index: 1;
	}
	
	.lightbox-inquirer-frame{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: rgba(0, 0, 0, 0.75);
		width: 400px;
		max-width: 450px;
		height: 150px;
		max-height: 375px;
		font-size: 14px;
		color: #EEEFFF;
		border-color: #555555;
		border-style: solid;
		border-width: 2px;
	}
	
	.lightbox-inquirer-button{
		width: 25%;
		height: 30px;
		color: #EEEFFF;
		background-color: #555555;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	.lightbox-inquirer-button:hover{
		background-color: #777777;
		cursor: pointer;
	}

/*~Page Lightbox Inquiry~*/
	.lightbox-inquiry-background{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #222222;
		opacity: 85%;
		display: none;
		z-index: 1;
	}
	
	.lightbox-inquiry-container{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		z-index: 1;
	}
	
	.lightbox-inquiry-frame{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: rgba(0, 0, 0, 0.75);
		width: 400px;
		max-width: 450px;
		height: 150px;
		max-height: 375px;
		font-size: 14px;
		color: #EEEFFF;
		border-color: #555555;
		border-style: solid;
		border-width: 2px;
	}
	
	.lightbox-inquiry-button{
		width: 25%;
		height: 30px;
		color: #EEEFFF;
		background-color: #555555;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	.lightbox-inquiry-button:hover{
		background-color: #777777;
		cursor: pointer;
	}

/*~Page Lightbox Details~*/
	.lightbox-details-background{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #222222;
		opacity: 85%;
		display: none;
		z-index: 1;
	}
	
	.lightbox-details-container{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		z-index: 1;
	}
	
	.lightbox-details-frame{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: #FFFFFF;
		width: 400px;
		max-width: 450px;
		height: 350px;
		max-height: 375px;
		font-size: 14px;
	}
	
	.lightbox-details-button{
		width: 25%;
		height: 30px;
		color: #EEEFFF;
		background-color: #06417b;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		cursor: pointer;
	}

/*~Page Lightbox Picker~*/
	.lightbox-picker-background{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #222222;
		opacity: 85%;
		display: none;
		z-index: 1;
	}
	
	.lightbox-picker-container{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		z-index: 1;
	}
	
	.lightbox-picker-frame{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: #FFFFFF;
		width: 350px;
		max-width: 375px;
		height: 150px;
		max-height: 175px;
		font-size: 14px;
	}
	
	.lightbox-picker-button{
		width: 25%;
		height: 30px;
		color: #EEEFFF;
		background-color: #06417b;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		cursor: pointer;
	}

/*~Page Lightbox Reaction~*/
	.lightbox-reaction-background{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #222222;
		opacity: 85%;
		display: none;
		z-index: 1;
	}
	
	.lightbox-reaction-container{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		z-index: 1;
	}
	
	.lightbox-reaction-frame{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: #FFFFFF;
		width: 400px;
		max-width: 450px;
		height: 150px;
		max-height: 275px;
		font-size: 14px;
	}
	
	.lightbox-reaction-button{
		width: 25%;
		height: 30px;
		color: #EEEFFF;
		background-color: #06417b;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		cursor: pointer;
	}
	
	.lightbox-reaction-emote{
		-moz-border-radius: 50%;
		border-radius: 50%;
		background-color: #EEEEEE;
		padding: 5px;
		border: 0px;
	}
	
	.lightbox-reaction-emote:hover{
		background-color: #DDDDDD;
		cursor: pointer;
	}

/*~Page Lightbox Comment~*/
	.lightbox-comment-background{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #222222;
		opacity: 85%;
		display: none;
		z-index: 1;
	}
	
	.lightbox-comment-container{
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		z-index: 1;
	}
	
	.lightbox-comment-frame{
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: #FFFFFF;
		width: 400px;
		max-width: 450px;
		height: 350px;
		max-height: 375px;
		font-size: 14px;
	}
	
	.lightbox-comment-button{
		width: 25%;
		height: 30px;
		color: #EEEFFF;
		background-color: #06417b;
		box-sizing: border-box;
		border: 0px;
		border-color: #444444;
		border-style: solid;
		border-width: 0px;
		font-size: 14px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		cursor: pointer;
	}