/*		contactKeyboard.css		version 1		6/3/26		*/


/*	=========================================================  KEYBOARD WRAPPER  ======================================================	*/

	.mini-keyboard {
		visibility:		hidden;									/*	Hidden Until Textarea Focused										*/
		pointer-events:	none;									/*	Prevent Interaction While Hidden									*/
		position:		fixed;
		bottom:			0;
		left:			0;
		width:			100%;
		background-color: #1a1a1a;
		border-top:		2px solid #880000;						/*	Border Top:						UC Lt Burgundy						*/
		box-shadow:
			0 0 0		1.5px slateblue,
			0 0			12px rgba(106, 90, 205, 0.6);			/*	Neon Glow															*/
		padding:		calc(6px) calc(24px) calc(10px);			/*	Padding:	Top  L/R  Bottom										*/
		z-index:		9999;
		box-sizing:		border-box;
		}

	.mini-keyboard.kb-visible {
		visibility:		visible;								/*	Shown When Textarea Focused											*/
		pointer-events:	auto;									/*	Restore Interaction When Visible									*/
		}


/*	=============================================================  KB ROWS  ===========================================================	*/

	.kb-row {
		display:		flex;
		flex-direction:	row;
		justify-content: center;
		gap:			3px;									/*	Gap Between Keys													*/
		margin-bottom:	3px;									/*	Row Spacing															*/
		}

	.kb-row:last-child {
		margin-bottom:	0;
		}


/*	==============================================================  KB KEYS  ==========================================================	*/

	.kb-key {
		display:		flex;
		flex:			1;										/*	Equal Width Keys													*/
		background-color: #2a0000;								/*	Key Background:					Deep Burgundy						*/
		border:			1px solid #880000;						/*	Border:							UC Lt Burgundy						*/
		border-radius:	5px;
		color:			#ffff00;								/*	Key Text:						UC Link Yellow						*/
		justify-content: center;
		align-items:	center;
		text-align:		center;
		font-size:		20px;
		font-weight:	bold;
		font-family:	Arial, sans-serif;
		height:			38px;
		min-width:		28px;
		cursor:			pointer;
		user-select:	none;
		box-shadow:
			0 0 0		1px slateblue,
			0 0			6px rgba(106, 90, 205, 0.4);			/*	Neon Glow															*/
		}

	.kb-key:active {
		background-color: #660000;								/*	Active:							UC Dk Burgundy						*/
		color:			#FF8C42;								/*	Active Text:					Burnt Orange						*/
		}

/*	==========================================================  SPECIAL KEYS  =========================================================	*/

	.kb-tab {
		flex:			1.7;									/*	Tab:		Wider Than Std Key										*/
		font-size:		14px;
		}

	.kb-cap {
		flex:			1.7;									/*	Cap:		Wider Than Std Key										*/
		color:			#2DC8FF;								/*	Color:							UC Aqua Blue						*/
		font-size:		14px;		
		}

	.kb-backspace {
		flex:			1.5;									/*	Backspace:	Wider Than Std Key										*/
		flex-direction:	column;									/*	Stack Bk/sp Vertically										*/
		color:			#FF5733;								/*	Color:							Burnt Orange						*/
		}

	.kb-delete {
		flex:			1.7;									/*	Del:		Slightly Wider Than Std Key								*/
		color:			#FF5733;								/*	Color:							Burnt Orange						*/
		font-size:		14px;
		}

	.kb-left,
	.kb-right {
		flex:			1;										/*	Arrows:		Standard Key Width										*/
		color:			#2DC8FF;								/*	Color:							UC Aqua Blue						*/
		font-size:		16px;									/*	Slightly Larger For Visibility										*/
		}

	.kb-123 {
		flex:			1.7;									/*	123:		Wider Than Std Key										*/
		color:			#2DC8FF;								/*	Color:							UC Aqua Blue						*/
		font-size:		14px;
		}

	.kb-abc {
		flex:			1.5;									/*	ABC:		Wider Than Std Key										*/
		color:			#2DC8FF;								/*	Color:							UC Aqua Blue						*/
		font-size:		14px;
		}

	.kb-space {
		flex:			3.2;										/*	Space:		Much Wider												*/
		color:			white;
		}

	.kb-enter {
		flex:			1.5;									/*	Enter:		Wider Than Std Key										*/
		font-size:		18px;									/*	Larger For Arrow Visibility										*/
		background-color: #1a3a1a;								/*	Background:						Dark Green							*/
		color:			#99FF99;								/*	Color:							UC Green						*/
		border-color:	#99FF99;								/*	Border:							UC Green						*/
		}

	.kb-bksp-top,
	.kb-bksp-bot {
		display:		block;
		font-size:		16px;									/*	Half Size Font													*/
		line-height:	1;										/*	Tight Line Height												*/
		}

	.kb-layout {
		width:			100%;
		}

/*	=============================================================  DONE BUTTON  =======================================================	*/

	.kb-done {
		visibility:		hidden;									/*	Hidden Until Keyboard Active										*/
		pointer-events:	none;									/*	Prevent Interaction While Hidden									*/
		appearance:		none;									/*	Remove Browser Default Button Styling								*/
		-webkit-appearance: none;								/*	Remove Browser Default Button Styling — Safari						*/
		position:		absolute;
		bottom:			0;
		left:			50%;
		transform:		translateX(-50%);
		background-color: #660000;								/*	Background:						UC Dk Burgundy						*/
		border:			1px solid #2DC8FF;						/*	Border:							UC Aqua Blue						*/
		border-radius:	5px;
		color:			#ffff00;								/*	Color:							UC Link Yellow						*/
		font-size:		14px;
		font-weight:	bold;
		font-family:	Arial, sans-serif;
		padding:		4px 16px;
		cursor:			pointer;
		z-index:		100;
		}

	.kb-done.kb-visible {
		visibility:		visible;								/*	Shown When Keyboard Active											*/
		pointer-events:	auto;									/*	Restore Interaction When Visible									*/
		}

/*	=========================================  Black Screen Block Behind Message Box/Label  ===========================================	*/

	.kb-overlay {
		display:		none;									/*	Hidden Until Keyboard Active										*/
		position:		fixed;
		top:			0;
		left:			0;
		width:			100%;
		height:			100%;
		background-color: black;
		z-index:		9998;									/*	Below Keyboard (9999) And Elements (10000)							*/
		}

	.kb-overlay.kb-visible {
		display:		block;									/*	Shown When Keyboard Active											*/
		}

/*	=================================================  Black Screen Rotation Overlay  =================================================	*/

	.kb-rotation-overlay {
		display:		none;									/*	Hidden Until Rotation Occurs										*/
		position:		fixed;
		top:			0;
		left:			0;
		width:			100%;
		height:			100%;
		background-color: black;
		z-index:		19999;									/*	Above Everything													*/
		}

	.kb-rotation-overlay.kb-visible {
		display:		block;
		}

/*	==========================================================  CAPS ACTIVE  ==========================================================	*/

	.kb-cap.kb-active,
	.kb-shift.kb-active {								/*	Caps Active  */
		background-color: #003300;								/*	Caps Active:	Dark Green Background								*/
		color:			#99FF99;								/*	Caps Active:	UC Green Text										*/
		border-color:	#99FF99;								/*	Caps Active:	UC Green Border										*/
		}