/* Minification failed. Returning unminified contents.
(15,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(30,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(206,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(207,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(222,17): run-time error CSS1039: Token not allowed after unary operator: '-reflect-base-opacity'
(243,17): run-time error CSS1039: Token not allowed after unary operator: '-reflect-sheen-opacity'
(256,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#customPreviewContainer'
: run-time error CSS1066: Unexpected end of file encountered
 */
@font-face{
  font-family:'FHWASeriesB2020 minus10';
  src:url('https://media.trafficsafetystore.com/raw/authenticated/s--8iQ6PG1Q--/fonts/Fhwaseriesb2020minus10.woff') format('woff');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}


#customPreviewContainer{
  position: relative;
}
.main{
  
  @media (max-width: 767px) {
      padding: 0 5px !important;
  }
}

#customPreviewContainer .image-container {
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column; /* vertical stack */
	justify-content: center; /* vertical centering */
	align-items: center; /* horizontal centering */

	gap: 7px;

	@media (max-width: 767px) {
		flex-direction: column;
	}
}


.previewRendering{
  position:relative;
  margin:0 auto;
  background:#111;                 
  border:solid #fff;           
  border-radius:10px;           
  box-shadow:
  0 0 0 18px rgba(255,255,254,.15),  
    0 0px 2px rgba(0,0,0,.14) ;   
  overflow:hidden;
  max-width:100%;
  box-sizing:border-box;
/*  @media (max-width: 767px) {
   
      margin-top: 25px;
      margin-bottom: 25px;
 
  }*/
  
}

.previewRendering.short{height:78px;}
.previewRendering.tall{ height:95px}

.input-text-container{
  position:absolute;
  top:61% !important;                    
  transform:translateY(-50%);
  pointer-events:none;
  white-space:nowrap;
  z-index:2;
}
.previewRendering.border-two .input-text-container{
    top:60% !important;  
}

.previewRendering.extruded{
    border-radius: 0; 
}

.input-text-container p,
.input-text-container sup,
.input-text-container sub{
  font-family:'FHWASeriesB2020 minus10','Highway Gothic','Arial Narrow',Arial,sans-serif;
}

.input-text-container p{
  display:inline-block;
  margin:0;
  line-height:1;
  font-size:56px;                   
  letter-spacing:.05em;
  color:#fff;
}
.input-text-container p.underline{ text-decoration:underline }
.input-text-container span.underline{ text-decoration:underline }
.underline{text-decoration:underline}

.input-text-container sub.underline,
.input-text-container sup.underline{ text-decoration:underline }

.input-text-container sup{ font-size:46%; top:-.9em; position:relative }
.input-text-container sub{ font-size:46%; bottom:0; position:relative }


.selection-buttons { display: flex !important; gap: 3px; justify-content: space-between; }
.selection-buttons .btn { width: 30%; padding: 2px 0; }
.sup-label::after { content: "y"; font-size: 0.6em; vertical-align: super; }
.sub-label::after { content: "y"; font-size: 0.6em; vertical-align: sub; }

.previewRendering.board-green { background:#009975; }
.previewRendering.board-blue  { background:#00337F; }
.previewRendering.board-brown { background:#603311; }
.previewRendering.board-red   { background:#cc0000; }
.previewRendering.board-black { background:#111111; }
.previewRendering.board-white { background:#ffffff; }

.previewRendering.board-white.text-green {
  border-color:#009975;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 10px 26px rgba(0, 0, 0, .14);
            }
#previewRendering.board-white.text-green.border-one{
  border-width: 3px;
}
#previewRendering.board-white.text-green.border-two{ 
  border-width: 2px;
}
.previewRendering.board-white.text-black{
  border-color:#111111;
  box-shadow:0 0 0 2px rgba(255, 255, 255, 1),0 10px 26px rgba(0,0,0,.14)
}
#previewRendering.board-white.text-black.border-one{
  border-width: 3px;
}
#previewRendering.board-white.text-black.border-two{ 
  border-width: 2px;
}
.previewRendering.board-white.text-blue{
  border-color:#00337F;
  box-shadow:0 0 0 2px rgba(255, 255, 255, 1),0 10px 26px rgba(0,0,0,.14)
}
#previewRendering.board-white.text-blue.border-one{
  border-width: 3px;
}
#previewRendering.board-white.text-blue.border-two{ 
  border-width: 2px;
}
.previewRendering.board-white.text-brown{
  border-color:#603311;
  box-shadow:0 0 0 2px rgba(255, 255, 255, 1),0 10px 26px rgba(0,0,0,.14)
}
#previewRendering.board-white.text-brown.border-one{
  border-width: 3px;
}
#previewRendering.board-white.text-brown.border-two{ 
  border-width: 2px;
}
.previewRendering.board-white.text-red{
  border-color:#cc0000;
  box-shadow:0 0 0 2px rgba(255, 255, 255, 1),0 10px 26px rgba(0,0,0,.14)
}
#previewRendering.board-white.text-red.border-one{
  border-width: 3px;
}
#previewRendering.board-white.text-red.border-two{ 
  border-width: 2px;
}

.input-text-container p.bgColor.white{color:#fff}
.input-text-container p.bgColor.black{color:#111}
.input-text-container p.bgColor.green{color:#009975}
.input-text-container p.bgColor.blue{color:#00337F}
.input-text-container p.bgColor.brown{color:#603311}
.input-text-container p.bgColor.red{color:#cc0000}

.previewRendering.ss-overflow{outline:2px dashed rgba(220,53,69,.55);outline-offset:4px}

.previewRendering.twelve{width:160px !important;min-width:160px;max-width:160px}
.previewRendering.eighteen{width:240px !important;min-width:240px;max-width:240px}
.previewRendering.twentyfour{width:320px !important;min-width:320px;max-width:320px}
.previewRendering.thirty{width:400px !important;min-width:400px;max-width:400px;}
.previewRendering.thirtysix{width:480px !important;min-width:480px;max-width:480px;}
.previewRendering.fortytwo{width:560px !important;min-width:560px;max-width:560px;}
.previewRendering.fortyeight{width:640px !important;min-width:640px;max-width:640px;}
.previewRendering.fiftyfour{width:720px !important;min-width:720px;max-width:720px;}
.previewRendering.sixty{width:800px !important;min-width:800px;max-width:800px;}



.input-text-container.left  { text-align: left; }
.input-text-container.middle{ text-align: center; }
.input-text-container.right { text-align: right; }

.input-text-container sup,
.input-text-container sub {
  display: inline-block;
}

.previewRendering .input-text-container { z-index: 2; }

.previewRendering .reflective-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;                  
  pointer-events: none;
  display: none;              
  mix-blend-mode: screen;
  overflow: hidden;


  --reflect-base-opacity: 0.65; 
  --reflect-sheen-opacity: 0.55;

  background-image:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.00) 40%,
      rgba(255,255,255,0.45) 50%,
      rgba(255,255,255,0.00) 60%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.08) 0 2px,
      rgba(0,0,0,0.08) 2px 4px
    );
  background-size: 100% 100%, 100% 12px;
  opacity: var(--reflect-base-opacity);

  animation: beadsShift 12s linear infinite;
}

.previewRendering.is-reflective .reflective-overlay {
  display: block;
}

.previewRendering .reflective-overlay::before {
  content: "";
  position: absolute;
  inset: -20% -60%; 
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 45%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,0) 55%
  );
  mix-blend-mode: screen;
  transform: translateX(-60%);
  opacity: var(--reflect-sheen-opacity);
  animation: sheenSweep 6.8s linear infinite;
}

#downloadPreviewBtn{
   // top: -34px;
    //left: 50%;
    //font-size: 2rem;
    //cursor: pointer;
}

#downloadPreviewBtn { //transition: transform .2s ease; }

#customPreviewContainer:hover #downloadPreviewBtn {
  //animation: downloadNudge 1.2s ease-in-out infinite;
}

#customPreviewContainer:hover ~ #downloadPreviewBtn {
  //animation: downloadNudge 1.2s ease-in-out infinite;
}
/* Keyframes */
@keyframes downloadNudge {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-2px); }
  40%  { transform: translateY(2px); }
  60%  { transform: translateY(-2px); }
  80%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

@keyframes sheenSweep {
  0%   { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}

@keyframes beadsShift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .previewRendering .reflective-overlay,
  .previewRendering .reflective-overlay::before {
    animation: none !important;
  }
}
.previewRendering { --lane-gap: 8px; }

.previewRendering.short { --lane-gap: 6px; }
.previewRendering.tall  { --lane-gap: 8px; }
.previewRendering.tall .input-text-container p   { font-size:5.7em }
.previewRendering.short .input-text-container p   { font-size:4.7em }


#previewRendering.border-none { border-width: 0; }
#previewRendering.border-one  { border-width: 5px; }  
#previewRendering.border-two  { border-width: 3px; } 



.ss-form { margin-top:10px; }
.ss-section { background:#fafafa; border:1px solid #e9ecef; border-radius:8px; padding:14px 14px 8px; margin-bottom:14px; }
.ss-section.ss-note { background:transparent; border:0; padding:0; }
.ss-h { font-size:15px; font-weight:600; margin:0 0 10px; color:#344; }
.ss-label { font-weight:600; margin-bottom:6px; display:block; }

.ss-grid .ss-grid-item { margin-bottom:12px; }
@media (min-width:768px){
  .ss-grid .ss-grid-item { margin-bottom:16px; }
}

.selection-buttons { display:flex !important; gap:6px; }
.selection-buttons .btn { flex:1; padding:4px 0; }

.ss-form .form-control { height:36px; }

.ss-section + .ss-section { box-shadow: 0 1px 0 rgba(0,0,0,.02) inset; }

select.form-control { background-position: right 8px center; }

select.form-control option{
  font-weight: 900;
}
select.form-control option:disabled {
  color: #9ca3af91;             
}

#customPreviewContainer .overflow-indicator {
  display: none;                
  position: absolute;
  top: 8px;                   
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #842029;
  background: rgba(248,215,218,.95);
  box-shadow: 0 0 0 1px rgba(220,53,69,.25);
  pointer-events: none;
}

#customPreviewContainer .overflow-indicator .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #dc3545;
  box-shadow: 0 0 0 2px rgba(220,53,69,.25);
}

#customPreviewContainer .overflow-indicator .msg { margin-left: 6px; }


#customPreviewContainer.has-overflow .overflow-indicator { display: inline-flex; }

.ss-ce{min-height:36px;line-height:1.2;white-space:pre-wrap;overflow-wrap:anywhere;padding:6px 12px}
.ss-ce sup{font-size:.7em;vertical-align:super}
.ss-ce sub{font-size:.7em;vertical-align:sub}
.ss-ce .smaller{font-size:.75em;line-height:1}
[contenteditable].ss-ce {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip; /* or ellipsis if you prefer */
}
#prefixCe, #streetNameCe, #suffixCe { white-space: pre;
                                      overflow-wrap: break-word;
}

#previewRendering { position: relative; }


/*---------------------------------------------------------- RULERS-CSS   ------------------------------------------------------------*/
#previewRendering { position: relative; }
.ruler { position:absolute; pointer-events:none; user-select:none; color:#111; z-index:5; }
.ruler .line { position:absolute; background:gray; }
.ruler .cap { position:absolute; width:0px; height:12px; border:1px solid gray; background:#fff; box-sizing:border-box; }


.ruler .label { position:absolute; font:600 12px/1.2 system-ui; background:rgba(255,255,255,.9); padding:2px 6px; border-radius:6px; white-space:nowrap; transform:translate(-50%,-50%); }

 Horizontal ruler 
.ruler-h { left:0; right:0; top:-22px; height:18px; }
.ruler-h .line { top:-6px; left:0px; right:0px; height:2px; }
.ruler-h .cap.start { top:0px; left:0; }
.ruler-h .cap.end   { top:0px; right:0; }
.ruler-h .label { top:10px; left:50%; background:gray; }

 Vertical ruler  
.ruler-v { top:0; bottom:0; left:-22px; width:18px; }
.ruler-v .line { left:0px; top:0px; bottom:12px; width:2px; height:100%}
.ruler-v .cap.start { left:7px; top:0;transform:translate(-110%,-50%) rotate(-90deg) }
.ruler-v .cap.end   { left:8px; bottom:1px;transform:translate(-110%, 50%) rotate(90deg) }
.ruler-v .label { left:1px; top:50%; background:gray; }


.proof-wrap {
	position: relative;
	display: inline-block; /* shrink-wrap to board size */
	width: fit-content;
	/* one place to tweak spacing */
	--ruler-gap: 22px; /* distance outside the board */
	--ruler-pad: 5px; /* padding at ruler ends */
	--tick-size: 14px; /* height of the "|" cap */

	--tick-size: 14px; /* tick height */
	--tick-thickness: 2px; /* tick/bar thickness */

	position: relative;
	left: var(--offset-x, 0px);
}


/* Ensure the container can center the wrapper (you already use flex) */
#customPreviewContainer .image-container{
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/* Keep the board clipping its own content (you already have this) */
.previewRendering{ overflow:hidden; position:relative; }

.ruler { position:absolute; pointer-events:none; user-select:none; color:#111; z-index:5; }
.ruler .line { position:absolute; background:gray; }
.ruler .cap  { position:absolute; }
	/* Draw ticks as real bars, not a "|" character */
	.ruler .cap::before {
		content: "";
		position: absolute;
		width: var(--tick-thickness);
		height: var(--tick-size);
		background: gray;
		left: 0;
		top: 50%;
		transform: translate(-50%, -50%); /* centers the bar on the cap point */
	}

/* Horizontal ruler OUTSIDE the top edge */
.proof-wrap .ruler-h { left:0; right:0; top:calc(-1 * var(--ruler-gap)); height:18px; }
.proof-wrap .ruler-h .line {
  top:7px;
  /* start/end AFTER the tick so the line doesn't sit in the middle of it */
  left: calc(var(--ruler-pad) + var(--tick-thickness));
  right: calc(var(--ruler-pad) + var(--tick-thickness));
  height:2px;
}
.proof-wrap .ruler-h .cap.start { top:8px; left: var(--ruler-pad); }
.proof-wrap .ruler-h .cap.end   { top:8px; right: var(--ruler-pad); }

/* Vertical ruler OUTSIDE the left edge */
.proof-wrap .ruler-v { top:0; bottom:0; left:calc(-1 * var(--ruler-gap)); width:18px; }
.proof-wrap .ruler-v .line {
  width:2px;
  /* start/end AFTER the tick so the line doesn't sit in the middle of it */
  left:  calc(-2px + var(--tick-thickness));
  bottom: calc(0px + var(--tick-thickness));
}
.proof-wrap .ruler-v .cap.start { left:8px; top:0; }
.proof-wrap .ruler-v .cap.end   { left:8px; bottom:0; }

/* Hide until JS decides to show */
#ruler-x, #ruler-y { display: none; }

/* Per-axis gaps (start at 0) */
.proof-wrap{
  --gap-h: 24px;   /* space above board for horizontal ruler */
  --gap-v: 20px;   /* space left of board for vertical ruler */
  --ruler-pad: 5px;
  --tick-size: 14px;
  --tick-thickness: 2px;
}

/* Use the per-axis gaps for placement */
.proof-wrap .ruler-h { left:0; right:0; top:calc(-1 * var(--gap-h)); height:18px; }
.proof-wrap .ruler-v { top:0; bottom:0; left:calc(-1 * var(--gap-v)); width:18px; }

/*---------------------------------------------------------- RULERS-CSS   ------------------------------------------------------------*/

/*****************  Height Change css  *************************************** */
/* Height-based board tweaks */
.previewRendering.h-6in {
	height: 75px
}

.previewRendering.h-9in {
	height: 86px;
}

/* Main letter height */
.previewRendering.lh-4 .input-text-container p {
	font-size: 56px;
}

.previewRendering.lh-6 .input-text-container p {
	font-size: 86px;
}

/* Subscript letter height */
.previewRendering.ssl-2 .input-text-container sub,
.previewRendering.ssl-2 .input-text-container sup,
.previewRendering.ssl-2 .input-text-container .smaller {
	font-size: 46%;
}
.previewRendering.ssl-2 .input-text-container sub{

}
.previewRendering.ssl-2 .input-text-container sup{
  
}

.previewRendering.ssl-3 .input-text-container sub,
.previewRendering.ssl-3 .input-text-container sup,
.previewRendering.ssl-3 .input-text-container .smaller {
	font-size: 45%;
}

.previewRendering.ssl-4 .input-text-container sub,
.previewRendering.ssl-4 .input-text-container sup,
.previewRendering.ssl-4 .input-text-container .smaller {
	font-size: 50%;
}
.previewRendering.ssl-3 .input-text-container sub{

}
.previewRendering.ssl-3 .input-text-container sup{
  
}

/* Font family */
.previewRendering.font-fhwa-series-b2000 .input-text-container p {
	font-family: "FHWASeriesB2020 minus10"
}

.previewRendering.font-clearview-highway-2b .input-text-container p {
	font-family: "Clearview Highway 2B",
}

.input-text-container p .smaller {
	display: inline-block;
	vertical-align: middle; /* centers within the line box */
	line-height: 1; /* avoids extra internal leading */
}

.lane-gap {
	display: inline-block;
	width: var(--lane-gap);
	text-decoration: none !important;
}

/**********************************  Height Change css  *************************************** */


/***************** PROOF DOWNLOAD CLASSES *****************************************************/

/* Only visible during export (you already toggle .exporting in your JS) */
#previewRendering.exporting .download-only {
	display: block;
}

/* Minimal table styling for the panel */
.image-container .download-only .meta-wrap {
	margin-top: 16px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	font: 400 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
	color: #111827;
}

.image-container .download-only .meta-head {
	background: #f3f4f6;
	font-weight: 600;
	padding: 10px 14px;
	border-bottom: 1px solid #e5e7eb;
}

.image-container .download-only table.meta-table {
	width: 100%;
	border-collapse: collapse;
}

	.image-container .download-only table.meta-table th,
	.image-container .download-only table.meta-table td {
		text-align: left;
		vertical-align: top;
		padding: 8px 14px;
		border-bottom: 1px solid #e5e7eb;
	}

	.image-container .download-only table.meta-table tr:nth-child(even) td {
		background: #fafafa;
	}

.image-container .download-only .cols {
	display: grid;
	gap: 0;
}

/* Spin animation for Bootstrap glyphicons */
.glyphicon-spin {
	animation: glyphicon-spin 1s linear infinite;
}

@keyframes glyphicon-spin {
	100% {
		transform: rotate(360deg);
	}
}
/***************** PROOF DOWNLOAD CLASSES *****************************************************/


.image -container {
	position: relative;
}

.info-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.85); /* neutral-900 @ 85% */
	color: #fff;
	font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
	letter-spacing: .3px;
	display: none; /* hidden until we have a value */
	z-index: 5; /* above previewRendering */
	pointer-events: none; /* don’t block clicks/drags */
}


.ss-info-section { 
  margin-top: 14px;
}

.ss-bullets { 
  margin: 0 0 6px 18px;
}
.ss-bullets > li { 
  margin: 6px 0; 
}

.ss-sublist { 
  margin: 6px 0 0 0; 
  list-style: none; 
  padding-left: 0;
}
.ss-sublist > li { 
  margin: 6px 0; 
}

.ss-nested { 
  margin: 6px 0 0 18px; 
  list-style: square; 
}
.ss-nested > li { 
  margin: 4px 0; 
}

.ss-link { 
  font-weight: 600; 
  text-decoration: none; 
}
.ss-link:hover { 
  text-decoration: underline; 
}

@media (max-width: 767px) {
  .ss-info-section .col-sm-6 + .col-sm-6 { margin-top: 12px; }
}