/*		hp_addFavicon.css		version 1		6/14/26		*/


/*	===================================================  Upper Link Toggle Row  ======================================================	*/

	.upper-link-toggle-row {
		position:		relative;								/*	Anchor For Dropdown Positioning										*/
		}

/*	=====================================================  Add Icon Trigger Label  ====================================================	*/

	.add-icon-preview {
		height:			calc(100 * var(--vw1600) / 1600);		/*	Height:				Match Label Font Size							*/
		width:			auto;
		vertical-align:	middle;
		margin-right:	calc(0 * var(--vw1600) / 1600);			/*	Gap Between Icon And Label											*/
		border-radius:	calc(6 * var(--vw1600) / 1600);			/*	Slight Rounding														*/
		justify-self:	end;									/*	Push Icon To Right Edge Of Column									*/
		}

/*	=====================================================  Add Icon Trigger Label  ====================================================	*/

	.add-icon-link {
		color:			#ffff00;								/*									UC Link Yellow						*/
		font-size:		calc(40 * var(--vw1600) / 1600);		/*	Font Size:											28px / Max		*/
		font-weight:	bold;
		font-style:		italic;
		cursor:			pointer;
		position:		relative;								/*	Anchor For Dropdown Positioning										*/
		user-select:	none;
		}

	.add-icon-link:hover {
		color:			#FF5733;								/*	Hover:							Burnt Orange						*/
		}


/*	=======================================================  Add Icon Dropdown  ======================================================	*/

	.add-icon-dropdown {
		display:		none;									/*	Hidden By Default													*/
		position:		absolute;								/*	Anchored To upper-link-toggle-row									*/
		right:			calc(48 * var(--vw1600) / 1600);		/*	Inset From Row Right Edge											*/
		background-color: #222222;								/*	Background:						Match Hover Popup					*/
		border:			calc(5 * var(--vw1600) / 1600) solid #99FF99;
		border-radius:	calc(30 * var(--vw1600) / 1600);
		margin-top:		calc(66 * var(--vw1600) / 1600);
		padding:		calc(30 * var(--vw1600) / 1600)
						calc(36 * var(--vw1600) / 1600);
		z-index:		500;
		white-space:	nowrap;
		}

	.add-icon-dropdown.af-open {
		display:		flex;
		flex-direction:	column;
		gap:			calc(16 * var(--vw1600) / 1600);
		}


/*	=======================================================  Dropdown Options  =======================================================	*/

	.add-icon-option {
		color:			#ffff00;								/*									UC Link Yellow						*/
		font-size:		calc(36 * var(--vw1600) / 1600);		/*	Font Size:											24px / Max		*/
		font-weight:	bold;
		font-style:		italic;
		cursor:			pointer;
		user-select:	none;
		}

	.add-icon-option:hover {
		color:			#FF5733;								/*	Hover:							Burnt Orange						*/
		}


/*	=====================================================  Instructions Overlay  ======================================================	*/

	.add-favicon-overlay {
		display:		none;									/*	Hidden By Default													*/
		position:		absolute;
		top:			0;
		left:			0;
		width:			100%;
		height:			100%;
		z-index:		1000;
		}

	.add-favicon-overlay.af-panel-open {
		display:		block;
		}


/*	======================================================  Instructions Panel  ======================================================	*/

	.add-favicon-panel {
		position:		absolute;
		left:			50%;
		width:			90%;
		max-width:		calc(1600px * 0.80);
		background-color: #222222;
		border:			calc(5 * var(--vw1600) / 1600) solid #99FF99;
		border-radius:	calc(30 * var(--vw1600) / 1600);
		padding:		calc(48 * var(--vw1600) / 1600)
						calc(56 * var(--vw1600) / 1600);
		}


/*	======================================================  Panel Header  ============================================================	*/

	.add-favicon-header {
		color:			#2DC8FF;								/*									UC Aqua Blue						*/
		font-size:		calc(48 * var(--vw1600) / 1600);		/*	Font Size:											32px / Max		*/
		font-weight:	bold;
		font-style:		italic;
		text-align:		center;
		padding-bottom:	calc(24 * var(--vw1600) / 1600);
		border-bottom:	calc(5 * var(--vw1600) / 1600) solid #880000;
		margin-bottom:	calc(24 * var(--vw1600) / 1600);
		}

	.add-favicon-subheader {
		color:			#99FF99;								/*									UC Green							*/
		font-size:		calc(40 * var(--vw1600) / 1600);		/*	Font Size:											28px / Max		*/
		font-weight:	bold;
		font-style:		italic;
		padding-bottom:	calc(20 * var(--vw1600) / 1600);
		}


/*	======================================================  Panel Steps  =============================================================	*/

	.add-favicon-steps {
		padding-left:	calc(80 * var(--vw1600) / 1600);
		margin:			0;
		}

	.add-favicon-steps li {
		color:			white;
		font-size:		calc(38 * var(--vw1600) / 1600);		/*	Font Size:											26px / Max		*/
		font-style:		italic;
		letter-spacing:	0.075em;
		line-height:	1.5;
		padding-bottom:	calc(12 * var(--vw1600) / 1600);
		}