/*

	CSS for KCS Portal
	Copyright 2021
	Robbie Rae Solis Dela Cruz

*/

/*~Page Chatbox Style~*/
	
	/*Chatbox Style*/
		.page-chatbox-holder{
			position: fixed;
			left: 0px;
			bottom: 20px;
			width: calc(100% - 300px);
			height: 5px;
			border-color: #333333;
			border-style: solid;
			border-width: 0px;
			-moz-border-radius: 7px;
			border-radius: 7px;
			z-index: 999999;
		}
		
		.page-chatbox-frame{
			position: relative; 
			height: 400px; 
			width: 300px; 
			bottom: 380px; 
			display: inline-table; 
			background: rgba(25, 25, 25, 0.85);
			-moz-border-top-right-radius: 7px;
			border-top-right-radius: 7px;
			-moz-border-top-left-radius: 7px;
			border-top-left-radius: 7px;
			color: #FFFFFF;
			margin: 5px;
			border-color: #666666;
			border-style: solid;
			border-width: 2px;
			word-wrap: break-word;
		}
		
		.page-chatbox-name{
			color: #FFFFFF;
			font-weight: bold;
			font-size: 14px;
		}
		
		.page-chatbox-avatar{
			-moz-border-radius: 30%;
			border-radius: 30%;
			margin-right: 10px;
			background-color: #222222;
		}
		
		.page-chatbox-avatars{
			-moz-border-radius: 30%;
			border-radius: 30%;
			background-color: #222222;
		}
		
		.page-chatbox-status-on{
			-moz-border-radius: 50%;
			border-radius: 50%;
			position: absolute;
			background-color: #00FF00;
			width: 12px;
			height: 12px;
			left: -2.5px;
			top: -2.5px;
		}
		
		.page-chatbox-status-off{
			-moz-border-radius: 50%;
			border-radius: 50%;
			position: absolute;
			background-color: #999999;
			width: 12px;
			height: 12px;
			left: -2.5px;
			top: -2.5px;
		}
		
		.page-chatbox-notifs-on{
			-moz-border-radius: 50%;
			border-radius: 50%;
			position: absolute;
			background-color: #FF0000;
			width: 12px;
			height: 12px;
			left: 0;
			top: 0;
		}
		
		.page-chatbox-notifs-off{
			-moz-border-radius: 50%;
			border-radius: 50%;
			position: absolute;
			background-color: #999999;
			width: 12px;
			height: 12px;
			left: 0;
			top: 0;
		}
		
		.page-chatbox-content{
			position: relative;
			width: 315px;
			min-height: 10px;
			max-height: 290px;
			font-family: Arial;
			overflow-y: auto;
			scrollbar-width: thick;
			scrollbar-color: #333333 #666666;
			border-color: #777777;
			border-style: solid;
			border-width: 0px;
		}
		
		.page-chatbox-from{
			position: relative;
			float: right;
			width: auto;
			max-width: 65%;
			font-size: 12px;
			word-wrap: break-word;
			word-break: break-all;
			border-color: #777777;
			border-style: solid;
			border-width: 0px;
			margin: 1px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			-moz-border-top-right-radius: 0px;
			border-top-right-radius: 0px;
			padding: 7px;
			background-color: #1b85f5;
			color: #FFFFFF;
			font-size: 13px;
		}
		
		.page-chatbox-from-cmd{
			display: none;
		}
		
		.page-chatbox-from-line:hover 
		.page-chatbox-from-cmd{
			position: absolute;
			float: left;
			display: block;
			left: 0;
			top: 10px;
			padding: 0;
			width: auto;
			height: 75%;
			border-color: #777777;
			border-style: solid;
			border-width: 0px;
		}
		
		.page-chatbox-from-more-cmd{
			background-color: RGBA(3,3,3,0.50); 
			-moz-border-radius: 10px;
			border-radius: 10px;
			border-color: #444444;
			border-style: solid;
			border-width: 1px;
		}
		
		.page-chatbox-to{
			position: relative;
			float: left;
			width: auto;
			max-width: 65%;
			font-size: 12px;
			word-wrap: break-word;
			word-break: break-all;
			border-color: #777777;
			border-style: solid;
			border-width: 0px;
			margin: 1px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			-moz-border-top-left-radius: 0px;
			border-top-left-radius: 0px;
			padding: 7px;
			background-color: #666666;
			color: #FFFFFF;
			font-size: 13px;
		}
		
		.page-chatbox-to-cmd{
			display: none;
		}
		
		.page-chatbox-to-line:hover 
		.page-chatbox-to-cmd{
			position: absolute;
			float: right;
			display: block;
			right: 0;
			top: 10px;
			width: auto;
			height: 75%;
			border-color: #777777;
			border-style: solid;
			border-width: 0px;
		}
		
		.page-chatbox-to-more-cmd{
			background-color: RGBA(3,3,3,0.50); 
			-moz-border-radius: 10px;
			border-radius: 10px;
			border-color: #444444;
			border-style: solid;
			border-width: 1px;
		}
		
		.page-chatbox-from-dt{
			position: relative;
			float: right;
			width: auto;
			color: #EEEEEE;
			font-size: 8px;
		}
		
		.page-chatbox-to-dt{
			position: relative;
			float: left;
			width: auto;
			color: #EEEEEE;
			font-size: 8px;
		}
		
		.page-chatbox-istyping{
			position: absolute; 
			background-color: RGBA(0,0,0,0.65); 
			color: #EEEEEE; 
			bottom: -5px; 
			left: 33.5%; 
			display: none; 
			padding: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		
		.page-chatbox-loading{
			-moz-border-radius: 50%;
			border-radius: 50%;
			padding: 5px;
			height: 35px; 
			width: 35px; 
			background-color: #FFFFFF;
		}
		
		.page-chatbox-textarea{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			background-color: #FFFFFF;
			color: #333333;
			width: 100%;
			min-height: 10px;
			max-height: 25px;
			padding-top: 1px;
			padding-bottom: 20px;
			overflow-y: hidden;
			word-wrap: break-word;
			word-break: break-all;
		}
		
		.page-chatbox-compose{
			position: relative;
			width: 140px;
			background-color: #FFFFFF;
			min-height: 10px;
			max-height: 35px;
			font-size: 12px;
			font-family: Arial;
			margin:5px;
			word-wrap: break-word;
			word-break: break-all;
			overflow-y: auto;
			scrollbar-width: thick;
			scrollbar-color: #333333 #666666;
		}
		
		.page-chatbox-emotholder{
			display: none;
			position: absolute;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 230px;
			height: 190px;
			background-color: rgba(25, 25, 25, 0.85);
			bottom: 60px;
			left: 10px;
			padding: 10px;
			overflow-y: hidden;
			z-index: 999999;
			border-color: #777777;
			border-style: solid;
			border-width: 1px;
		}
		
		.page-chatbox-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-chatbox-emoticon{
			display: inline-table; 
			-moz-border-radius: 50%;
			border-radius: 50%;
			box-sizing: border-box;
			border: 0px;
			width: 36px;
			height: 36px;
		}
		
		.page-chatbox-emoticon:hover{
			background: #777777;
			cursor: pointer;
		}
		
		.page-chatbox-emotclose{
			-moz-border-radius: 50%;
			border-radius: 50%;
			position: absolute;
			width: 16px;
			height: 16px;
			left: 0;
			top: 0;
			padding: 5px;
		}
		
		.page-chatbox-emotclose:hover{
			background: #777777;
			cursor: pointer;
		}
		
		.page-chatbox-attaholder{
			display: none;
			position: absolute;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 230px;
			height: 190px;
			background-color: rgba(25, 25, 25, 0.85);
			bottom: 60px;
			left: 10px;
			padding: 10px;
			overflow-y: hidden;
			z-index: 999999;
			border-color: #777777;
			border-style: solid;
			border-width: 1px;
		}
		
		.page-chatbox-attaframe{
			-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-chatbox-attach{
			display: inline-table; 
			-moz-border-radius: 50%;
			border-radius: 50%;
			box-sizing: border-box;
			border: 0px;
			width: 36px;
			height: 36px;
		}
		
		.page-chatbox-attach:hover{
			background: #777777;
			cursor: pointer;
		}
		
		.page-chatbox-attaclose{
			-moz-border-radius: 50%;
			border-radius: 50%;
			position: absolute;
			width: 16px;
			height: 16px;
			left: 0;
			top: 0;
			padding: 5px;
		}
		
		.page-chatbox-attaclose:hover{
			background: #777777;
			cursor: pointer;
		}
		
		.page-chatbox-userholder{
			display: none;
			position: absolute;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 230px;
			height: 290px;
			background-color: #444444;
			top: 45px;
			left: 35px;
			padding: 10px;
			overflow-y: hidden;
			z-index: 999999;
			border-color: #777777;
			border-style: solid;
			border-width: 1px;
		}
		
		.page-chatbox-userframe{
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 100%;
			height: 220px;
			font-family: Arial;
			overflow-y: auto;
			scrollbar-width: thick;
			scrollbar-color: #333333 #666666;
		}
		
		.page-chatbox-user-list{
			font-size: 12px;
		}
		
		.page-chatbox-user-list:hover{
			-moz-border-radius: 5px;
			border-radius: 5px;
			background: #777777;
			cursor: pointer;
		}
		
		.page-chatbox-userclose{
			-moz-border-radius: 50%;
			border-radius: 50%;
			position: absolute;
			width: 16px;
			height: 16px;
			left: 0;
			top: 0;
			padding: 5px;
		}
		
		.page-chatbox-userclose:hover{
			background: #777777;
			cursor: pointer;
		}
		
		.page-chatbox-memberholder{
			display: none;
			position: absolute;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 230px;
			height: 290px;
			background-color: #444444;
			top: 45px;
			left: 35px;
			padding: 10px;
			overflow-y: hidden;
			z-index: 999999;
			border-color: #777777;
			border-style: solid;
			border-width: 1px;
		}
		
		.page-chatbox-memberframe{
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 100%;
			height: 220px;
			font-family: Arial;
			overflow-y: auto;
			scrollbar-width: thick;
			scrollbar-color: #333333 #666666;
		}
		
		.page-chatbox-member-list{
			font-size: 12px;
		}
		
		.page-chatbox-member-list:hover{
			-moz-border-radius: 5px;
			border-radius: 5px;
			background: #777777;
			cursor: pointer;
		}
		
		.page-chatbox-memberclose{
			-moz-border-radius: 50%;
			border-radius: 50%;
			position: absolute;
			width: 16px;
			height: 16px;
			left: 0;
			top: 0;
			padding: 5px;
		}
		
		.page-chatbox-memberclose:hover{
			background: #777777;
			cursor: pointer;
		}
		
		.page-chatbox-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-chatbox-command{
			display: inline-table; 
			-moz-border-radius: 50%;
			border-radius: 50%;
			box-sizing: border-box;
			border: 0px;
			padding: 2px;
		}
		
		.page-chatbox-command:hover{
			background: #777777;
			cursor: pointer;
		}
		
		.page-chatbox-list{
			bottom: 55px;
			right: 5px;
			padding: 0;
			position: fixed;
			width: 45px;
			height: 45px;
			display: inline-table; 
			background-color: rgba(0, 0, 0, 0.75);
			border-color: #444444;
			border-style: solid;
			border-width: 2px;
			-moz-border-radius: 50%;
			border-radius: 50%;
			color: #FFFFFF;
			cursor: pointer;
			display: none;
		}
		
		.page-chatbox-list:hover{
			background: #555555;
			cursor: pointer;
		}
		
		.page-chatbox-counter{
			cursor: pointer;
			font-size: 18px;
		}
		
		.page-chatbox-line-top{
			border-top-width: 1px;
			border-top-color: #666666;
			border-top-style: solid;
		}
		
		.page-chatbox-line-bottom{
			border-bottom-width: 1px;
			border-bottom-color: #666666;
			border-bottom-style: solid;
		}
	/*Chatbox Style*/
	
	/*Upload Files Style*/
		.page-upload-chatbox-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: 2px;
			overflow-y: hidden;
			display: none;
		}
		
		.page-upload-chatbox-file{
			display: none;
		}
		
		.page-upload-chatbox-button{
			width: auto;
			padding: 10px;
			color: #EEEEEE;
			background-color: #777777;
			font-size: 14px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		.page-upload-chatbox-button:hover{
			background-color: #666666;
		}
		
		.page-upload-chatbox-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: Calibri;
		}
		
		.page-upload-chatbox-photo-holder{
			position: relative; 
			display: inline-block; 
			box-sizing: border-box;
			margin: 10px;
			width: 90px; 
			height: 90px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			border-color: #CCCCCC;
			border-style: dashed;
			border-width: 1px;
		}
		
		.page-upload-chatbox-photo-holder:hover 
		.page-upload-chatbox-photo-remove{
			display: block;
		}
		
		.page-upload-chatbox-photo-remove{
			position: absolute;
			top: -15px;
			right: -15px;
			width: 35px; 
			height: 35px;
			background-color: #777777;
			-moz-border-radius: 50%;
			border-radius: 50%;
			cursor: pointer;
			z-index: 1;
			border: 0;
			display: none;
		}
		
		.page-upload-chatbox-photo-remove:hover {
			background-color: #666666;
		}
		
		.page-upload-chatbox-photo-title{
			position: absolute;
			bottom: 5px;
			left: 5px;
			width: 70px; 
			height: auto;
			background-color: 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: 8px;
		}

		.page-upload-chatbox-photo-landscape{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 75px;
		}
		
		.page-upload-chatbox-photo-portrait{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			height: 75px;
		}
		
		.page-upload-chatbox-photo-square{
			position: relative;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width: 75px;
			height: 75px;
		}
	/*Upload Files Style*/