:root {
	--modal: linear-gradient(130deg, rgba(254,254,254,1) 0%, rgba(238,238,238,1) 100%);
	--modalShadow: rgba(0, 0, 0, 0.34);
}

#windowStyling {
	> #modalContainer {
		opacity: 0;
		position: absolute;
		display: flex;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: rgba(0,0,0,.5);
		transition: opacity .2s linear;
		pointer-events: none;
		z-index: 1;

		> .modal {
			display: none;
			margin-top: auto;
			margin-bottom: auto;
			min-height: 206px;
			width: inherit;
			background: var(--modal);
			box-shadow: 0px 0px 12px 0px var(--modalShadow);
			
			> .modalContent {
				margin-inline: auto;
				max-width: 819px;
				width: 100%;
				flex: 1;
				padding: 12px 24px 24px;

				> label {
					position: relative;

					&:first-of-type {
						font-size: 24pt;
						margin-block-end: 8px;
						text-transform: uppercase;

						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: 1px;
							height: 6px;
							width: 109px;
							background: linear-gradient(90deg, var(--accentGradient));
							background-size: 300% 100%;
							background-position-x: 100%;
							animation: slideXAccentGradient 1s forwards .2s;
						}
					}
				}
	
				> .footer {
					padding-inline: 0;
					height: unset;
				}
			}
		}
	}
}