@font-face {
    font-family: 'm1';
    src: url('/wp-content/uploads/m1.woff2') format('woff2'),
         url('/wp-content/uploads/m1.woff') format('woff'),
         url('/wp-content/uploads/m1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'm2';
    src: url('/wp-content/uploads/m2.woff2') format('woff2'),
         url('/wp-content/uploads/m2.woff') format('woff'),
         url('/wp-content/uploads/m2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'm3';
    src: url('/wp-content/uploads/m3.woff2') format('woff2'),
         url('/wp-content/uploads/m3.woff') format('woff'),
         url('/wp-content/uploads/m3.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'm4';
    src: url('/wp-content/uploads/m4.woff2') format('woff2'),
         url('/wp-content/uploads/m4.woff') format('woff'),
         url('/wp-content/uploads/m4.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'm5';
    src: url('/wp-content/uploads/m5.woff2') format('woff2'),
         url('/wp-content/uploads/m5.woff') format('woff'),
         url('/wp-content/uploads/m5.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'm6';
    src: url('/wp-content/uploads/m6.woff2') format('woff2'),
         url('/wp-content/uploads/m6.woff') format('woff'),
         url('/wp-content/uploads/m6.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'm8';
    src: url('/wp-content/uploads/m8.woff2') format('woff2'),
         url('/wp-content/uploads/m8.woff') format('woff'),
         url('/wp-content/uploads/m8.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'm103';
    src: url('/wp-content/uploads/m103.woff2') format('woff2'),
         url('/wp-content/uploads/m103.woff') format('woff'),
         url('/wp-content/uploads/m103.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'f9';
    src: url('/wp-content/uploads/f9.woff2') format('woff2'),
         url('/wp-content/uploads/f9.woff') format('woff'),
         url('/wp-content/uploads/f9.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'h68';
    src: url('/wp-content/uploads/h68.woff2') format('woff2'),
         url('/wp-content/uploads/h68.woff') format('woff'),
         url('/wp-content/uploads/h68.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hh';
    src: url('/wp-content/uploads/hh.woff2') format('woff2'),
         url('/wp-content/uploads/hh.woff') format('woff'),
         url('/wp-content/uploads/hh.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'k3';
    src: url('/wp-content/uploads/k3.woff2') format('woff2'),
         url('/wp-content/uploads/k3.woff') format('woff'),
         url('/wp-content/uploads/k3.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.fonts .wapf-swatch-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-flow: row;
	gap: 15px;
	width: 100%;
	height: 165px;
	overflow: hidden;
	padding: 10px 50px 10px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
}

.fonts .wapf-swatch-wrapper.expanded {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-auto-flow: column;
}

.fonts .wapf-swatch-wrapper.expanded .wapf-swatch{
	align-self: start;
	height: auto;
}

.wapf.font-10mm.text-line-2 .fonts .wapf-swatch-wrapper.expanded {
	grid-template-columns: repeat(2, 1fr) !important;
	grid-template-rows: repeat(5, 1fr) !important;
}


.fonts .wapf-swatch{
	margin: 0;
	height: 45px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
}
.fonts .wapf-swatch.wapf-checked {
	background-color: var(--nv-primary-accent) !important;
	border-color: var(--nv-primary-accent) !important;
}
.preview-wrapper.font-10mm {
	height: 170px;
	width: 717px;
}

.preview-wrapper.font-14mm {
	height: 170px;
	width: 717px;
}

.preview-wrapper.font-10mm .ruler-14mm {
	display: none !important;
}


.preview-wrapper.font-14mm .ruler-10mm {
	display: none !important;
}

.preview-wrapper.text-line-1 .preview-text {
	line-height: 85px !important;
}
.preview-wrapper.text-line-2 .preview-text {
	line-height: 42px !important;
}
.preview-wrapper.text-line-3 .preview-text {
	line-height: 27px !important;
}

/* ===== 10mm set ===== */
.font-1m { font-family: 'm1', sans-serif; font-size: 32px; letter-spacing: 7.4px; line-height: 39px; text-transform: uppercase;}
.font-2m { font-family: 'm2', sans-serif; font-size: 41px; letter-spacing: 4.2px; line-height: 46px; text-transform: uppercase;}
.font-3m { font-family: 'm3', sans-serif; font-size: 52px; letter-spacing: 7.1px; line-height: 55px; text-transform: uppercase;}
.font-3k { font-family: 'k3', sans-serif; font-size: 48px; letter-spacing: 6.3px; line-height: 62px; text-transform: uppercase;}
.font-4m { font-family: 'm4', sans-serif; font-size: 64px; letter-spacing: 6.4px; line-height: 77px; text-transform: uppercase;}
.font-5m { font-family: 'm5', sans-serif; font-size: 49px; letter-spacing: 8.1px; line-height: 51px; text-transform: uppercase;}
.font-6m { font-family: 'm6', sans-serif; font-size: 65px; letter-spacing: -1.2px; line-height: 79px; text-transform: capitalize !important;}
.font-8m { font-family: 'm8', sans-serif; font-size: 60px; letter-spacing: 5.2px; line-height: 63px; text-transform: capitalize !important;}
.font-11 { font-family: 'h68', sans-serif; font-size: 50px; letter-spacing: 9px; line-height: 55px; text-transform: capitalize !important;}
.font-12 { font-family: 'hh', sans-serif; font-size: 72px; letter-spacing: 0px; line-height: 42px; text-transform: capitalize !important;}
.font-21 { font-family: 'm2', sans-serif; font-size: 40px; letter-spacing: 7.2px; line-height: 45px; text-transform: uppercase;}
.font-23 { font-family: 'm3', sans-serif; font-size: 48px; letter-spacing: 6.7px; line-height: 48px; text-transform: uppercase;}
.font-31 { font-family: 'm3', sans-serif; font-size: 48px; letter-spacing: 7px; line-height: 50px; text-transform: uppercase;}
.font-39 { font-family: 'f9', sans-serif; font-size: 32px; letter-spacing: 2px; line-height: 28px; text-transform: uppercase;}

/* ===== 14mm set ===== */
.font-101 { font-family: 'm6', sans-serif; font-size: 52px; letter-spacing: -2.3px; line-height: 62px; text-transform: capitalize !important;}
.font-102 { font-family: 'm3', sans-serif; font-size: 45px; letter-spacing: 3.8px; line-height: 47px; text-transform: uppercase;}
.font-103 { font-family: 'm103', sans-serif; font-size: 80px; letter-spacing: 9px; line-height: 95px; text-transform: uppercase;}
.font-108 { font-family: 'm8', sans-serif; font-size: 47px; letter-spacing: 1.9px; line-height: 1; text-transform: capitalize !important;}
.font-111 { font-family: 'h68', sans-serif; font-size: 41px; letter-spacing: 3.4px; line-height: 47px; text-transform: capitalize !important;}
.font-211 { font-family: 'h68', sans-serif; font-size: 39px; letter-spacing: 3px; line-height: 31px; text-transform: capitalize !important;}
.font-112 { font-family: 'hh', sans-serif; font-size: 58px; letter-spacing: 0px; line-height: 47px; text-transform: capitalize !important;}
.font-202 { font-family: 'm2', sans-serif; font-size: 30px; letter-spacing: 4.1px; line-height: 34px; text-transform: uppercase;}
.font-203 { font-family: 'm6', sans-serif; font-size: 53px; letter-spacing: -1.4px; line-height: 59px; text-transform: capitalize !important;}
.font-204 { font-family: 'm3', sans-serif; font-size: 39px; letter-spacing: 4.8px; line-height: 41px; text-transform: uppercase;}
.font-208 { font-family: 'm8', sans-serif; font-size: 46px; letter-spacing: 3.9px; line-height: 49px; text-transform: uppercase;}
.font-251 { font-family: 'm1', sans-serif; font-size: 26px; letter-spacing: 3.6px; line-height: 33px; text-transform: uppercase;}
.font-252 { font-family: 'm1', sans-serif; font-size: 25px; letter-spacing: 3.7px; line-height: 30px; text-transform: uppercase;}
.font-254 { font-family: 'm6', sans-serif; font-size: 52px; letter-spacing: -1.2px; line-height: 62px; text-transform: uppercase;}
.font-301 { font-family: 'm2', sans-serif; font-size: 33px; letter-spacing: 2.1px; line-height: 36px; text-transform: uppercase;}