Professor6T9 Web SheLL

Windows NT WEB-23 10.0 build 17763 (Windows Server 2016) i586
Microsoft-IIS/10.0
103.118.16.173

Font.cshtml

<div class="usn-group-section">

<label class="usn-label">Fonts</label>
        <span class="note usn-note">Select the fonts to be used across your site. You can choose between  System Fonts or Google Fonts.</span>

<div class="usn-cms-accordion">

<div ui-sortable ng-model="styles.themeFonts.fontItems">

<div ng-repeat="item in styles.themeFonts.fontItems">

<div class="usn-accordion-tab" ng-class="{'tab-closed' : item.tabStyle, 'tab-open' : !item.tabStyle}">

<a ng-click="item.tabStyle = !item.tabStyle">
                            <span style="{{item.fontType == 'adobe' && item.adobeFontConfirmed ? 'font-family: ' + item.adobeFontFamily + '!important; font-weight: ' + item.adobeFontWeight + '!important; font-style: ' + item.adobeFontStyle + '!important;' : item.fontType == 'custom' && item.customFontConfirmed ? 'font-family: \'' + item.customFontName + '\', ' + item.customFontStack + '!important;' : 'font-family: \'' + item.font.fontName + '\', ' + item.font.fontCategory + '!important; font-weight: ' + item.fontWeight + '!important; font-style: ' + item.fontStyle.styleName + '!important;'}}">{{(item.fontType == 'adobe' && item.adobeFontConfirmed) ? item.adobeFontFamily + ', ' + item.adobeFontStyle + ', ' + item.adobeFontWeight : (item.fontType == 'adobe' && !item.adobeFontConfirmed) ? "ADOBE FONT NOT CONFIRMED" : (item.fontType == 'custom' && item.customFontConfirmed) ? '\'' + item.customFontName + '\', ' + item.customFontStack  : (item.fontType == 'custom' && !item.customFontConfirmed) ? "CUSTOM FONT NOT CONFIRMED" : item.font.fontFamily + ', ' + item.fontStyle.styleName + ', ' + item.fontWeight}}</span>
                        </a>
                        
                        
                        <div class="usn-accordion-controls">

<div class="usn-move">
                                <svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                                    <path d="m48.438 0.78125c-0.3125 0-0.66406 0.17578-0.97656 0.48828l-12.109 16.211c-0.625 0.625-0.35156 1.2695 0.58594 1.2695h7.8125v25h-25v-7.8125c0-0.9375-0.64453-1.2109-1.2695-0.58594l-16.211 12.109c-0.625 0.625-0.625 1.3281 0 1.9531l16.211 12.109c0.625 0.625 1.2695 0.35156 1.2695-0.58594v-7.8125h25v25h-7.8125c-0.9375 0-1.2109 0.64453-0.58594 1.2695l12.109 16.211c0.625 0.625 1.3281 0.625 1.9531 0l12.109-16.211c0.625-0.625 0.35156-1.2695-0.58594-1.2695h-7.8125v-25h25v7.8125c0 0.9375 0.64453 1.2109 1.2695 0.58594l16.211-12.109c0.625-0.625 0.625-1.3281 0-1.9531l-16.211-12.109c-0.625-0.625-1.2695-0.35156-1.2695 0.58594v7.8125h-25v-25h7.8125c0.9375 0 1.2109-0.64453 0.58594-1.2695l-12.109-16.211c-0.3125-0.3125-0.66406-0.48828-0.97656-0.48828z"></path>
                                </svg>
                                <span>Move</span>
                            </div>
                            <div class="usn-delete" ng-click="removeFontItem($index)">
                                <svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                                    <g>
                                        <path d="m69.5 27.906-1.8516 50.008c-0.03125 0.85938-0.78516 1.5859-1.6484 1.5859h-32c-0.85938 0-1.6172-0.73047-1.6484-1.5859l-1.8516-50.008c-0.054688-1.3789-1.2109-2.457-2.5938-2.4062-1.3789 0.054688-2.457 1.2109-2.4062 2.5938l1.8555 50.008c0.12891 3.5391 3.0938 6.3984 6.6445 6.3984h32c3.5508 0 6.5156-2.8516 6.6445-6.3984l1.8555-50.008c0.050781-1.3828-1.0273-2.5391-2.4062-2.5938-1.3828-0.050781-2.5391 1.0273-2.5938 2.4062z"></path>
                                        <path d="m48 38v34c0 1.1055 0.89453 2 2 2s2-0.89453 2-2v-34c0-1.1055-0.89453-2-2-2s-2 0.89453-2 2z"></path>
                                        <path d="m37 38.059 1 34c0.035156 1.1055 0.95312 1.9727 2.0586 1.9414 1.1055-0.035156 1.9727-0.95312 1.9414-2.0586l-1-34c-0.035156-1.1055-0.95312-1.9727-2.0586-1.9414-1.1055 0.035156-1.9727 0.95312-1.9414 2.0586z"></path>
                                        <path d="m59 37.941-1 34c-0.03125 1.1055 0.83594 2.0234 1.9414 2.0586 1.1055 0.03125 2.0234-0.83594 2.0586-1.9414l1-34c0.03125-1.1055-0.83594-2.0234-1.9414-2.0586-1.1055-0.03125-2.0234 0.83594-2.0586 1.9414z"></path>
                                        <path d="m25 29h50c1.3789 0 2.5-1.1211 2.5-2.5s-1.1211-2.5-2.5-2.5h-50c-1.3789 0-2.5 1.1211-2.5 2.5s1.1211 2.5 2.5 2.5z"></path>
                                        <path d="m42.402 25.688 1.043-3.6445c0.22266-0.78125 1.2344-1.543 2.0469-1.543h9.0156c0.8125 0 1.8242 0.76172 2.0469 1.543l1.043 3.6445 4.8047-1.375-1.0391-3.6445c-0.83594-2.9258-3.8086-5.168-6.8555-5.168h-9.0156c-3.0469 0-6.0195 2.2422-6.8555 5.168l-1.0391 3.6445z"></path>
                                    </g>
                                </svg>
                                <span>Delete</span>
                            </div>

</div>

</div>
                    
                    
                    <div class="usn-accordion-content" ng-class="{'tab-closed' : item.tabStyle, 'tab-open' : !item.tabStyle}">

<div class="usn-font-type">

<label class="usn-font-type-item">
                                <input name="taboptions_{{$index}}" type="radio" value="system" ng-model="item.fontType" ng-click="updateFontFields($index,$event)">
                                <span></span>
                                <div class="inner">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100px" width="100px" fill="#000000" version="1.1" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve"><path d="M8.1,48.7h15.3L21.3,54h-2.4c-0.6,0-1,0.4-1,1s0.4,1,1,1H22c0,0,0,0,0,0c0,0,0,0,0,0h16.2c0,0,0,0,0,0c0,0,0,0,0,0h3.1  c0.6,0,1-0.4,1-1s-0.4-1-1-1h-2.4l-2.1-5.3h14.3c2.2,0,4-1.8,4-4V10c0-2.2-1.8-4-4-4h-42c-2.2,0-4,1.8-4,4v35.7  C5.1,47.4,6.4,48.7,8.1,48.7z M36.7,54H23.4l2.1-5.3h9L36.7,54z M7.1,10c0-1.1,0.9-2,2-2h42c1.1,0,2,0.9,2,2v34.7c0,1.1-0.9,2-2,2  H35.3c0,0,0,0,0,0H8.1c-0.6,0-1-0.4-1-1V10z" /><path d="M11.1,41.7h38c0.6,0,1-0.4,1-1V12c0-0.6-0.4-1-1-1h-38c-0.6,0-1,0.4-1,1v28.8C10.1,41.3,10.5,41.7,11.1,41.7z M12.1,13h36  v26.8h-36V13z" /><path d="M31.9,43.2h-3.6c-0.6,0-1,0.4-1,1s0.4,1,1,1h3.6c0.6,0,1-0.4,1-1S32.4,43.2,31.9,43.2z" /><path d="M36.8,17.9H23.4c-0.6,0-1,0.4-1,1v2.8c0,0.6,0.4,1,1,1s1-0.4,1-1v-1.8h4.7v13h-1.8c-0.6,0-1,0.4-1,1s0.4,1,1,1h5.6  c0.6,0,1-0.4,1-1s-0.4-1-1-1h-1.8v-13h4.7v1.8c0,0.6,0.4,1,1,1s1-0.4,1-1v-2.8C37.8,18.3,37.3,17.9,36.8,17.9z" /></svg>
                                    <div class="name">System</div>
                                </div>
                            </label>
                            
                            
                            <label class="usn-font-type-item">
                                <input name="taboptions_{{$index}}" type="radio" value="google" ng-model="item.fontType" ng-click="updateFontFields($index,$event)">
                                <span></span>
                                <div class="inner">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="1792" viewBox="0 0 1792 1792" width="1792"><path d="M896 786h725q12 67 12 128 0 217-91 387.5t-259.5 266.5-386.5 96q-157 0-299-60.5t-245-163.5-163.5-245-60.5-299 60.5-299 163.5-245 245-163.5 299-60.5q300 0 515 201l-209 201q-123-119-306-119-129 0-238.5 65t-173.5 176.5-64 243.5 64 243.5 173.5 176.5 238.5 65q87 0 160-24t120-60 82-82 51.5-87 22.5-78h-436v-264z" /></svg>
                                    <div class="name">Google</div>
                                </div>
                            </label>
                            
                            
                            <label class="usn-font-type-item">
                                <input name="taboptions_{{$index}}" type="radio" value="adobe" ng-model="item.fontType" ng-click="updateFontFields($index,$event)">
                                <span></span>
                                <div class="inner">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="0 0 150 150.2"><g id="Layer_3_1_"><path id="Layer_3" d="M0 .2h150v150H0V.2z" fill="none" /></g><g id="adobe"><path class="st1" d="M92.5 18.1l46.7 111.8V18.1zM13 18.1v111.8L59.7 18.1zM55.7 107.4h21.8l8.9 22.5h19.4L76.1 59.3z" /></g></svg>
                                    <div class="name">Adobe</div>
                                </div>
                            </label>
                            
                            
                            <label class="usn-font-type-item">
                                <input name="taboptions_{{$index}}" type="radio" value="custom" ng-model="item.fontType" ng-click="updateFontFields($index,$event)">
                                <span></span>
                                <div class="inner">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100px" width="100px" fill="#000000" version="1.1" viewBox="-24 -4 260 260" overflow="visible" enable-background="new -24 -4 260 260" xml:space="preserve" x="0px" y="0px"><g><path d="M83.108,171.641L77.8,184.797c-1.049,2.58-1.858,4.656-2.431,6.229c-0.573,1.572-0.858,2.779-0.858,3.623   c0,0.797,0.223,1.406,0.672,1.828c0.448,0.424,1.146,0.752,2.094,0.984l7.177,1.971l0.226,3.621   c-7.228-0.142-13.111-0.211-17.646-0.211c-4.737,0-10.146,0.069-16.227,0.211l-0.373-3.504l8-2.25   c1.894-0.515,3.29-1.367,4.187-2.563s1.894-3.012,2.991-5.448l37.235-85.258l8.076-1.124l32.228,85.468   c1.246,3.28,2.379,5.496,3.4,6.644c1.022,1.147,2.479,1.979,4.376,2.494l7.327,2.038l0.225,3.503   c-6.729-0.141-13.511-0.21-20.338-0.21c-9.023,0-17.822,0.069-26.395,0.21l-0.375-3.503l7.402-2.038   c0.996-0.281,1.72-0.634,2.168-1.055c0.449-0.422,0.674-1.055,0.674-1.898c0-0.938-0.25-2.166-0.747-3.689   c-0.499-1.523-1.222-3.525-2.169-6.012l-4.936-13.217H83.108L83.108,171.641z M99.258,131.275c-0.897,2.436-1.87,4.963-2.915,7.586   l-10.245,25.422h24.974l-9.196-25.354C100.929,136.264,100.055,133.711,99.258,131.275z" /></g><path d="M192.509,67.108l-50.922-49.527C134.333,10.526,120.725,5,110.605,5H27.5C15.093,5,5,15.093,5,27.5v197.203  c0,12.406,10.093,22.5,22.5,22.5h155.533c12.406,0,22.5-10.094,22.5-22.5V97.943C205.533,87.586,199.934,74.33,192.509,67.108z   M182.05,77.861c1.803,1.753,3.535,4.378,4.963,7.286h-56.329c-4.136,0-7.5-3.364-7.5-7.5V23.249  c3.154,1.44,6.032,3.226,7.944,5.086L182.05,77.861z M183.033,232.203H27.5c-4.136,0-7.5-3.364-7.5-7.5V27.5  c0-4.136,3.364-7.5,7.5-7.5h80.684v57.647c0,12.407,10.094,22.5,22.5,22.5h59.85v124.556  C190.533,228.839,187.169,232.203,183.033,232.203z" /></svg>
                                    <div class="name">Custom</div>
                                </div>
                            </label>

</div>
                        
                        
                        <div class="usn-form-group">

<div class="usn-input-row" ng-show="item.fontType == 'system' || item.fontType == 'google'">
                                
                                <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Font family</label>
                                    <div class="usn-input">
                                        <div class="usn-input-wrap usn-input-select">
                                            <select class="usn-form-control font-dropdown" ng-model="item.font" ng-change="fontFamilyChange($index);updateTypographyFontDropdowns($index,item.fontType)" ng-options="font as font.fontFamily for font in getFonts(item.fontType) track by font.fontFamily">
                                            </select>
                                        </div>
                                    </div>
                                    <span class="note usn-note">Select your font family from the list.</span>

</div>
                                
                                
                                <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Font style</label>
                                    <div class="usn-input">
                                        <div class="usn-input-wrap usn-input-select">
                                            <select class="usn-form-control font-dropdown" ng-model="item.fontStyle" ng-change="fontStyleChange($index);updateTypographyFontDropdowns($index,item.fontType)" ng-options="style as style.styleName for style in item.font.fontStyle track by style.styleName">
                                            </select>
                                        </div>
                                    </div>
                                    <span class="note usn-note">Select the style of your font.</span>

</div>
                                
                                
                                <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Font weight</label>
                                    <div class="usn-input">
                                        <div class="usn-input-wrap usn-input-select">
                                            <select class="usn-form-control font-dropdown" ng-model="item.fontWeight" ng-change="updateTypographyFontDropdowns($index,item.fontType)" ng-options="w for w in item.fontStyle.styleWeight">
                                            </select>
                                        </div>
                                    </div>
                                    <span class="note usn-note">Select the weight of your font.</span>

</div>
                                
                            </div>
                            
                            
                            <div ng-show="item.fontType == 'adobe'">

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Web Project ID</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">
                                                <input class="usn-form-control" type="text" ng-model="item.adobeProjectId" ng-change="validateAdobeFields($index)" />
                                            </div>
                                        </div>
                                        <span class="note usn-note">Please enter the web project ID provided by Adobe Fonts.</span>
                                    </div>

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Font family</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">
                                                <input class="usn-form-control" type="text" ng-model="item.adobeFontFamily" ng-change="validateAdobeFields($index)">
                                            </div>
                                        </div>
                                        <span class="note usn-note">Enter the font family provided by Adobe Fonts.</span>
                                    </div>

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Font style</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">
                                                <input type="text" class="usn-form-control" ng-model="item.adobeFontStyle" ng-change="validateAdobeFields($index)">
                                            </div>
                                        </div>
                                        <span class="note usn-note">Enter the font style provided by Adobe Fonts.</span>
                                    </div>

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Font weight</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">
                                                <input type="text" class="usn-form-control" ng-model="item.adobeFontWeight" ng-change="validateAdobeFields($index)">
                                            </div>
                                        </div>
                                        <span class="note usn-note">Enter the font weight provided by Adobe Fonts.</span>
                                    </div>

<div class="usn-alert usn-warning usn-alert-small">Your 'Adobe Font' will not work against your Typography until you confirm your settings.</div>
                                    <div class="usn-alert usn-danger usn-alert-small" ng-show="item.adobeConfirmationError">The Adobe font with Web Project ID: <strong>{{item.adobeProjectId}}</strong> cannot be found. Please check your settings are correct and try again.</div>

</div>
                                <div class="usn-input-row usn-confirmed-adobe-font" ng-show="item.adobeFontConfirmed">

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Web Project ID</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">{{item.adobeProjectId}}</div>
                                        </div>
                                                                        
                                    </div>

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Font family</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">{{item.adobeFontFamily}}</div>
                                        </div>
                                                                        
                                    </div>

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Font style</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">{{item.adobeFontStyle}}</div>
                                        </div>
                                                                        
                                    </div>
                                    <div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Font weight</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">{{item.adobeFontWeight}}</div>
                                        </div>
                                                                        
                                    </div>

</div>

<div class="buttons">
                                    <button ng-show="!item.adobeFontConfirmed" ng-class="{'usn-btn usn-btn-ready' : !item.adobeButtonDisabled, 'usn-btn usn-btn-disabled' : item.adobeButtonDisabled}" ng-click="confirmAdobeFontSettings($index,$event)" ng-disabled="item.adobeButtonDisabled">Confirm Adobe Font Settings</button>
                                    <button ng-show="item.adobeFontConfirmed" ng-click="resetAdobeFontSettings($index,$event)" class="usn-btn usn-btn-default">Reset Adobe Font Settings</button>
                                </div>

</div>
                            
                            
                            <div ng-show="item.fontType == 'custom'">

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Woff2 file location</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">
                                                <input class="usn-form-control" type="text" ng-model="item.customFileWoff2" ng-change="validateCustomFields($index)" />
                                            </div>
                                        </div>
                                        <span class="note usn-note">Copy the URL of the woff2 font file uploaded to your media section. For example: /media/*****/*****.woff2</span>
                                    </div>

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Font name</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">
                                                <input class="usn-form-control" type="text" ng-model="item.customFontName" ng-change="validateCustomFields($index)">
                                            </div>
                                        </div>
                                        <span class="note usn-note">Enter the font name of your custom font.</span>
                                    </div>

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Font stack</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">
                                                <input type="text" class="usn-form-control" ng-model="item.customFontStack" ng-change="validateCustomFields($index)">
                                            </div>
                                        </div>
                                        <span class="note usn-note">Enter the font stack of your custom font.</span>
                                    </div>

<div class="usn-alert usn-warning usn-alert-small">Your 'Custom Font' will not appear in Typography until you confirm your settings.</div>
                                    <div class="usn-alert usn-danger usn-alert-small" ng-show="item.customFontConfirmationError">Your custom font file was not found. Please check the woff2 file location you entered is correct and try again.</div>

</div>
                                <div class="usn-input-row usn-confirmed-custom-font" ng-show="item.customFontConfirmed">

<div class="usn-input-col usn-input-col-full">
                                                <label class="usn-label">Font file (.woff2)</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">{{item.customFileWoff2}}</div>
                                        </div>
                                                                        
                                    </div>

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Font name</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">{{item.customFontName}}</div>
                                        </div>
                                                                        
                                    </div>

<div class="usn-input-col usn-input-col-full">
                                        <label class="usn-label">Font stack</label>
                                        <div class="usn-input">
                                            <div class="usn-input-wrap usn-input">{{item.customFontStack}}</div>
                                        </div>
                                                                       
                                    </div>

</div>

<div class="buttons">
                                    <button ng-show="!item.customFontConfirmed" ng-class="{'usn-btn usn-btn-ready' : !item.customButtonDisabled, 'usn-btn usn-btn-disabled' : item.customButtonDisabled}" ng-click="confirmCustomFontSettings($index,$event)" ng-disabled="item.customButtonDisabled">Confirm Custom Font Settings</button>
                                    <button ng-show="item.customFontConfirmed" ng-click="resetCustomFontSettings($index,$event)" class="usn-btn usn-btn-default">Reset Custom Font Settings</button>
                                </div>

</div>
                            
                        </div>

</div>

</div>

</div>

</div>

</div>
    
    
    <div class="usn-group-section">

<label class="usn-label">Typography</label>
        <span class="note usn-note">Assign the fonts you have added above to the different parts your site.</span>

<div class="usn-cms-accordion">

<div class="usn-accordion-tab" ng-class="{'tab-closed' : bodyFontTabStyle, 'tab-open' : !bodyFontTabStyle}">
                <a ng-click="bodyFontTabStyle = !bodyFontTabStyle">
                    <span style="{{styles.themeFonts.bodyFont.fontType == 'adobe' && styles.themeFonts.bodyFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.bodyFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.bodyFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.bodyFont.adobeFontStyle + '!important;' : styles.themeFonts.bodyFont.fontType == 'custom' && styles.themeFonts.bodyFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.bodyFont.customFontName + '\', ' + styles.themeFonts.bodyFont.customFontStack + '!important;' :  'font-family: \'' + styles.themeFonts.bodyFont.font.fontName + '\', ' + styles.themeFonts.bodyFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.bodyFont.fontWeight + '!important; font-style: ' + styles.themeFonts.bodyFont.fontStyle.styleName + '!important;'}}  letter-spacing: {{styles.themeFonts.bodyLetterSpacing}}px!important; text-transform: {{styles.themeFonts.bodyTextTransform.toLowerCase()}}!important;">Body</span>
                </a>
            </div>

<div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.bodyLineHeight" ng-change="updateCssVariable('--body-typography_font-line-height',styles.themeFonts.bodyLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.bodyLetterSpacing" ng-change="updateCssVariable('--body-typography_font-letter-spacing',styles.themeFonts.bodyLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.bodyTextTransform" ng-change="updateCssVariable('--body-typography_font-transform',styles.themeFonts.bodyTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.bodyDesktopSize" ng-change="updateCssVariable('--body-typography_font-size_xl',styles.themeFonts.bodyDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.bodyLaptopSize" ng-change="updateCssVariable('--body-typography_font-size_lg',styles.themeFonts.bodyLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.bodyTabletSize" ng-change="updateCssVariable('--body-typography_font-size_md',styles.themeFonts.bodyTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.bodyMobileLandscapeSize" ng-change="updateCssVariable('--body-typography_font-size_sm',styles.themeFonts.bodyMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.bodyMobilePortraitSize" ng-change="updateCssVariable('--body-typography_font-size',styles.themeFonts.bodyMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>

</div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : h1FontTabStyle, 'tab-open' : !h1FontTabStyle}">
                <a ng-click="h1FontTabStyle = !h1FontTabStyle">
                    <span style="{{styles.themeFonts.h1Font.fontType == 'adobe' && styles.themeFonts.h1Font.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.h1Font.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.h1Font.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.h1Font.adobeFontStyle + '!important;' : styles.themeFonts.h1Font.fontType == 'custom' && styles.themeFonts.h1Font.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.h1Font.customFontName + '\', ' + styles.themeFonts.h1Font.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.h1Font.font.fontName + '\', ' + styles.themeFonts.h1Font.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.h1Font.fontWeight + '!important; font-style: ' + styles.themeFonts.h1Font.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.h1LetterSpacing}}px!important; text-transform: {{styles.themeFonts.h1TextTransform.toLowerCase()}}!important;">H1</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : h1FontTabStyle, 'tab-open' : !h1FontTabStyle}">

<div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h1LineHeight" ng-change="updateCssVariable('--h1-typography_font-line-height',styles.themeFonts.h1LineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h1LetterSpacing" ng-change="updateCssVariable('--h1-typography_font-letter-spacing',styles.themeFonts.h1LetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.h1TextTransform" ng-change="updateCssVariable('--h1-typography_font-transform',styles.themeFonts.h1TextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h1DesktopSize" ng-change="updateCssVariable('--h1-typography_font-size_xl',styles.themeFonts.h1DesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h1LaptopSize" ng-change="updateCssVariable('--h1-typography_font-size_lg',styles.themeFonts.h1LaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h1TabletSize" ng-change="updateCssVariable('--h1-typography_font-size_md',styles.themeFonts.h1TabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h1MobileLandscapeSize" ng-change="updateCssVariable('--h1-typography_font-size_sm',styles.themeFonts.h1MobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h1MobilePortraitSize" ng-change="updateCssVariable('--h1-typography_font-size',styles.themeFonts.h1MobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>

</div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : h2FontTabStyle, 'tab-open' : !h2FontTabStyle}">
                <a ng-click="h2FontTabStyle = !h2FontTabStyle">
                    <span style="{{styles.themeFonts.h2Font.fontType == 'adobe' && styles.themeFonts.h2Font.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.h2Font.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.h2Font.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.h2Font.adobeFontStyle + '!important;'  : styles.themeFonts.h2Font.fontType == 'custom' && styles.themeFonts.h2Font.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.h2Font.customFontName + '\', ' + styles.themeFonts.h2Font.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.h2Font.font.fontName + '\', ' + styles.themeFonts.h2Font.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.h2Font.fontWeight + '!important; font-style: ' + styles.themeFonts.h2Font.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.h2LetterSpacing}}px!important; text-transform: {{styles.themeFonts.h2TextTransform.toLowerCase()}}!important;">H2</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : h2FontTabStyle, 'tab-open' : !h2FontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h2LineHeight" ng-change="updateCssVariable('--h2-typography_font-line-height',styles.themeFonts.h2LineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h2LetterSpacing" ng-change="updateCssVariable('--h2-typography_font-letter-spacing',styles.themeFonts.h2LetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.h2TextTransform" ng-change="updateCssVariable('--h2-typography_font-transform',styles.themeFonts.h2TextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h2DesktopSize" ng-change="updateCssVariable('--h2-typography_font-size_xl',styles.themeFonts.h2DesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h2LaptopSize" ng-change="updateCssVariable('--h2-typography_font-size_lg',styles.themeFonts.h2LaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h2TabletSize" ng-change="updateCssVariable('--h2-typography_font-size_md',styles.themeFonts.h2TabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h2MobileLandscapeSize" ng-change="updateCssVariable('--h2-typography_font-size_sm',styles.themeFonts.h2MobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h2MobilePortraitSize" ng-change="updateCssVariable('--h2-typography_font-size',styles.themeFonts.h2MobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : h3FontTabStyle, 'tab-open' : !h3FontTabStyle}">
                <a ng-click="h3FontTabStyle = !h3FontTabStyle">
                    <span style="{{styles.themeFonts.h3Font.fontType == 'adobe' && styles.themeFonts.h3Font.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.h3Font.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.h3Font.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.h3Font.adobeFontStyle + '!important;' : styles.themeFonts.h3Font.fontType == 'custom' && styles.themeFonts.h3Font.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.h3Font.customFontName + '\', ' + styles.themeFonts.h3Font.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.h3Font.font.fontName + '\', ' + styles.themeFonts.h3Font.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.h3Font.fontWeight + '!important; font-style: ' + styles.themeFonts.h3Font.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.h3LetterSpacing}}px!important; text-transform: {{styles.themeFonts.h3TextTransform.toLowerCase()}}!important;">H3</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : h3FontTabStyle, 'tab-open' : !h3FontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h3LineHeight" ng-change="updateCssVariable('--h3-typography_font-line-height',styles.themeFonts.h3LineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h3LetterSpacing" ng-change="updateCssVariable('--h3-typography_font-letter-spacing',styles.themeFonts.h3LetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.h3TextTransform" ng-change="updateCssVariable('--h3-typography_font-transform',styles.themeFonts.h3TextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h3DesktopSize" ng-change="updateCssVariable('--h3-typography_font-size_xl',styles.themeFonts.h3DesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h3LaptopSize" ng-change="updateCssVariable('--h3-typography_font-size_lg',styles.themeFonts.h3LaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h3TabletSize" ng-change="updateCssVariable('--h3-typography_font-size_md',styles.themeFonts.h3TabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h3MobileLandscapeSize" ng-change="updateCssVariable('--h3-typography_font-size_sm',styles.themeFonts.h3MobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h3MobilePortraitSize" ng-change="updateCssVariable('--h3-typography_font-size',styles.themeFonts.h3MobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : h4FontTabStyle, 'tab-open' : !h4FontTabStyle}">
                <a ng-click="h4FontTabStyle = !h4FontTabStyle">
                    <span style="{{styles.themeFonts.h4Font.fontType == 'adobe' && styles.themeFonts.h4Font.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.h4Font.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.h4Font.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.h4Font.adobeFontStyle + '!important;' : styles.themeFonts.h4Font.fontType == 'custom' && styles.themeFonts.h4Font.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.h4Font.customFontName + '\', ' + styles.themeFonts.h4Font.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.h4Font.font.fontName + '\', ' + styles.themeFonts.h4Font.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.h4Font.fontWeight + '!important; font-style: ' + styles.themeFonts.h4Font.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.h4LetterSpacing}}px!important; text-transform: {{styles.themeFonts.h4TextTransform.toLowerCase()}}!important;">H4</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : h4FontTabStyle, 'tab-open' : !h4FontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h4LineHeight" ng-change="updateCssVariable('--h4-typography_font-line-height',styles.themeFonts.h4LineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h4LetterSpacing" ng-change="updateCssVariable('--h4-typography_font-letter-spacing',styles.themeFonts.h4LetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.h4TextTransform" ng-change="updateCssVariable('--h4-typography_font-transform',styles.themeFonts.h4TextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h4DesktopSize" ng-change="updateCssVariable('--h4-typography_font-size_xl',styles.themeFonts.h4DesktopSize + 'px')" step="1" />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h4LaptopSize" ng-change="updateCssVariable('--h4-typography_font-size_lg',styles.themeFonts.h4LaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h4TabletSize" ng-change="updateCssVariable('--h4-typography_font-size_md',styles.themeFonts.h4TabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h4MobileLandscapeSize" ng-change="updateCssVariable('--h4-typography_font-size_sm',styles.themeFonts.h4MobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h4MobilePortraitSize" ng-change="updateCssVariable('--h4-typography_font-size',styles.themeFonts.h4MobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : h5FontTabStyle, 'tab-open' : !h5FontTabStyle}">
                <a ng-click="h5FontTabStyle = !h5FontTabStyle">
                    <span style="{{styles.themeFonts.h5Font.fontType == 'adobe' && styles.themeFonts.h5Font.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.h5Font.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.h5Font.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.h5Font.adobeFontStyle + '!important;' : styles.themeFonts.h5Font.fontType == 'custom' && styles.themeFonts.h5Font.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.h5Font.customFontName + '\', ' + styles.themeFonts.h5Font.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.h5Font.font.fontName + '\', ' + styles.themeFonts.h5Font.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.h5Font.fontWeight + '!important; font-style: ' + styles.themeFonts.h5Font.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.h5LetterSpacing}}px!important; text-transform: {{styles.themeFonts.h5TextTransform.toLowerCase()}}!important;">H5</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : h5FontTabStyle, 'tab-open' : !h5FontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h5LineHeight" ng-change="updateCssVariable('--h5-typography_font-line-height',styles.themeFonts.h5LineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h5LetterSpacing" ng-change="updateCssVariable('--h5-typography_font-letter-spacing',styles.themeFonts.h5LetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.h5TextTransform" ng-change="updateCssVariable('--h5-typography_font-transform',styles.themeFonts.h5TextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h5DesktopSize" ng-change="updateCssVariable('--h5-typography_font-size_xl',styles.themeFonts.h5DesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h5LaptopSize" ng-change="updateCssVariable('--h5-typography_font-size_lg',styles.themeFonts.h5LaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h5TabletSize" ng-change="updateCssVariable('--h5-typography_font-size_md',styles.themeFonts.h5TabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h5MobileLandscapeSize" ng-change="updateCssVariable('--h5-typography_font-size_sm',styles.themeFonts.h5MobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h5MobilePortraitSize" ng-change="updateCssVariable('--h5-typography_font-size',styles.themeFonts.h5MobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : h6FontTabStyle, 'tab-open' : !h6FontTabStyle}">
                <a ng-click="h6FontTabStyle = !h6FontTabStyle">
                    <span style="{{styles.themeFonts.h6Font.fontType == 'adobe' && styles.themeFonts.h6Font.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.h6Font.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.h6Font.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.h6Font.adobeFontStyle + '!important;' : styles.themeFonts.h6Font.fontType == 'custom' && styles.themeFonts.h6Font.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.h6Font.customFontName + '\', ' + styles.themeFonts.h6Font.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.h6Font.font.fontName + '\', ' + styles.themeFonts.h6Font.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.h6Font.fontWeight + '!important; font-style: ' + styles.themeFonts.h6Font.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.h6LetterSpacing}}px!important; text-transform: {{styles.themeFonts.h6TextTransform.toLowerCase()}}!important;">H6</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : h6FontTabStyle, 'tab-open' : !h6FontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h6LineHeight" ng-change="updateCssVariable('--h6-typography_font-line-height',styles.themeFonts.h6LineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.h6LetterSpacing" ng-change="updateCssVariable('--h6-typography_font-letter-spacing',styles.themeFonts.h6LetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.h6TextTransform" ng-change="updateCssVariable('--h6-typography_font-transform',styles.themeFonts.h6TextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h6DesktopSize" ng-change="updateCssVariable('--h6-typography_font-size_xl',styles.themeFonts.h6DesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h6LaptopSize" ng-change="updateCssVariable('--h6-typography_font-size_lg',styles.themeFonts.h6LaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h6TabletSize" ng-change="updateCssVariable('--h6-typography_font-size_md',styles.themeFonts.h6TabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h6MobileLandscapeSize" ng-change="updateCssVariable('--h6-typography_font-size_sm',styles.themeFonts.h6MobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.h6MobilePortraitSize" ng-change="updateCssVariable('--h6-typography_font-size',styles.themeFonts.h6MobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : headingSmallFontTabStyle, 'tab-open' : !headingSmallFontTabStyle}">
                <a ng-click="headingSmallFontTabStyle = !headingSmallFontTabStyle">
                    <span style="{{styles.themeFonts.headingSmallFont.fontType == 'adobe' && styles.themeFonts.headingSmallFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.headingSmallFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.headingSmallFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.headingSmallFont.adobeFontStyle + '!important;' : styles.themeFonts.headingSmallFont.fontType == 'custom' && styles.themeFonts.headingSmallFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.headingSmallFont.customFontName + '\', ' + styles.themeFonts.headingSmallFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.headingSmallFont.font.fontName + '\', ' + styles.themeFonts.headingSmallFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.headingSmallFont.fontWeight + '!important; font-style: ' + styles.themeFonts.headingSmallFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.headingSmallLetterSpacing}}px!important; text-transform: {{styles.themeFonts.headingSmallTextTransform.toLowerCase()}}!important;">Heading (small)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : headingSmallFontTabStyle, 'tab-open' : !headingSmallFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.headingSmallLineHeight" ng-change="updateCssVariable('--p-heading_small-typography_font-line-height',styles.themeFonts.headingSmallLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.headingSmallLetterSpacing" ng-change="updateCssVariable('--p-heading_small-typography_font-letter-spacing',styles.themeFonts.headingSmallLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.headingSmallTextTransform" ng-change="updateCssVariable('--p-heading_small-typography_font-transform',styles.themeFonts.headingSmallTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingSmallDesktopSize" ng-change="updateCssVariable('--p-heading_small-typography_font-size_xl',styles.themeFonts.headingSmallDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingSmallLaptopSize" ng-change="updateCssVariable('--p-heading_small-typography_font-size_lg',styles.themeFonts.headingSmallLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingSmallTabletSize" ng-change="updateCssVariable('--p-heading_small-typography_font-size_md',styles.themeFonts.headingSmallTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingSmallMobileLandscapeSize" ng-change="updateCssVariable('--p-heading_small-typography_font-size_sm',styles.themeFonts.headingSmallMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingSmallMobilePortraitSize" ng-change="updateCssVariable('--p-heading_small-typography_font-size',styles.themeFonts.headingSmallMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : headingMediumFontTabStyle, 'tab-open' : !headingMediumFontTabStyle}">
                <a ng-click="headingMediumFontTabStyle = !headingMediumFontTabStyle">
                    <span style="{{styles.themeFonts.headingMediumFont.fontType == 'adobe' && styles.themeFonts.headingMediumFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.headingMediumFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.headingMediumFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.headingMediumFont.adobeFontStyle + '!important;' : styles.themeFonts.headingMediumFont.fontType == 'custom' && styles.themeFonts.headingMediumFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.headingMediumFont.customFontName + '\', ' + styles.themeFonts.headingMediumFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.headingMediumFont.font.fontName + '\', ' + styles.themeFonts.headingMediumFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.headingMediumFont.fontWeight + '!important; font-style: ' + styles.themeFonts.headingMediumFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.headingMediumLetterSpacing}}px!important; text-transform: {{styles.themeFonts.headingMediumTextTransform.toLowerCase()}}!important;">Heading (medium)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : headingMediumFontTabStyle, 'tab-open' : !headingMediumFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.headingMediumLineHeight" ng-change="updateCssVariable('--p-heading-typography_font-line-height',styles.themeFonts.headingMediumLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.headingMediumLetterSpacing" ng-change="updateCssVariable('--p-heading-typography_font-letter-spacing',styles.themeFonts.headingMediumLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.headingMediumTextTransform" ng-change="updateCssVariable('--p-heading-typography_font-transform',styles.themeFonts.headingMediumTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingMediumDesktopSize" ng-change="updateCssVariable('--p-heading-typography_font-size_xl',styles.themeFonts.headingMediumDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingMediumLaptopSize" ng-change="updateCssVariable('--p-heading-typography_font-size_lg',styles.themeFonts.headingMediumLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingMediumTabletSize" ng-change="updateCssVariable('--p-heading-typography_font-size_md',styles.themeFonts.headingMediumTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingMediumMobileLandscapeSize" ng-change="updateCssVariable('--p-heading-typography_font-size_sm',styles.themeFonts.headingMediumMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingMediumMobilePortraitSize" ng-change="updateCssVariable('--p-heading-typography_font-size',styles.themeFonts.headingMediumMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : headingLargeFontTabStyle, 'tab-open' : !headingLargeFontTabStyle}">
                <a ng-click="headingLargeFontTabStyle = !headingLargeFontTabStyle">
                    <span style="{{styles.themeFonts.headingLargeFont.fontType == 'adobe' && styles.themeFonts.headingLargeFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.headingLargeFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.headingLargeFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.headingLargeFont.adobeFontStyle + '!important;' : styles.themeFonts.headingLargeFont.fontType == 'custom' && styles.themeFonts.headingLargeFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.headingLargeFont.customFontName + '\', ' + styles.themeFonts.headingLargeFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.headingLargeFont.font.fontName + '\', ' + styles.themeFonts.headingLargeFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.headingLargeFont.fontWeight + '!important; font-style: ' + styles.themeFonts.headingLargeFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.headingLargeLetterSpacing}}px!important; text-transform: {{styles.themeFonts.headingLargeTextTransform.toLowerCase()}}!important;">Heading (large)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : headingLargeFontTabStyle, 'tab-open' : !headingLargeFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.headingLargeLineHeight" ng-change="updateCssVariable('--p-heading_large-typography_font-line-height',styles.themeFonts.headingLargeLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.headingLargeLetterSpacing" ng-change="updateCssVariable('--p-heading_large-typography_font-letter-spacing',styles.themeFonts.headingLargeLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.headingLargeTextTransform" ng-change="updateCssVariable('--p-heading_large-typography_font-transform',styles.themeFonts.headingLargeTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingLargeDesktopSize" ng-change="updateCssVariable('--p-heading_large-typography_font-size_xl',styles.themeFonts.headingLargeDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingLargeLaptopSize" ng-change="updateCssVariable('--p-heading_large-typography_font-size_lg',styles.themeFonts.headingLargeLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingLargeTabletSize" ng-change="updateCssVariable('--p-heading_large-typography_font-size_md',styles.themeFonts.headingLargeTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingLargeMobileLandscapeSize" ng-change="updateCssVariable('--p-heading_large-typography_font-size_sm',styles.themeFonts.headingLargeMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.headingLargeMobilePortraitSize" ng-change="updateCssVariable('--p-heading_large-typography_font-size',styles.themeFonts.headingLargeMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : secHeadingSmallFontTabStyle, 'tab-open' : !secHeadingSmallFontTabStyle}">
                <a ng-click="secHeadingSmallFontTabStyle = !secHeadingSmallFontTabStyle">
                    <span style="{{styles.themeFonts.secHeadingSmallFont.fontType == 'adobe' && styles.themeFonts.secHeadingSmallFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.secHeadingSmallFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.secHeadingSmallFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.secHeadingSmallFont.adobeFontStyle + '!important;' : styles.themeFonts.secHeadingSmallFont.fontType == 'custom' && styles.themeFonts.secHeadingSmallFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.secHeadingSmallFont.customFontName + '\', ' + styles.themeFonts.secHeadingSmallFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.secHeadingSmallFont.font.fontName + '\', ' + styles.themeFonts.secHeadingSmallFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.secHeadingSmallFont.fontWeight + '!important; font-style: ' + styles.themeFonts.secHeadingSmallFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.secHeadingSmallLetterSpacing}}px!important; text-transform: {{styles.themeFonts.secHeadingSmallTextTransform.toLowerCase()}}!important;">Secondary heading (small)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : secHeadingSmallFontTabStyle, 'tab-open' : !secHeadingSmallFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.secHeadingSmallLineHeight" ng-change="updateCssVariable('--secondary-heading_small-typography_font-line-height',styles.themeFonts.secHeadingSmallLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.secHeadingSmallLetterSpacing" ng-change="updateCssVariable('--secondary-heading_small-typography_font-letter-spacing',styles.themeFonts.secHeadingSmallLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.secHeadingSmallTextTransform" ng-change="updateCssVariable('--secondary-heading_small-typography_font-transform',styles.themeFonts.secHeadingSmallTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingSmallDesktopSize" ng-change="updateCssVariable('--secondary-heading_small-typography_font-size_xl',styles.themeFonts.secHeadingSmallDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingSmallLaptopSize" ng-change="updateCssVariable('--secondary-heading_small-typography_font-size_lg',styles.themeFonts.secHeadingSmallLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingSmallTabletSize" ng-change="updateCssVariable('--secondary-heading_small-typography_font-size_md',styles.themeFonts.secHeadingSmallTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingSmallMobileLandscapeSize" ng-change="updateCssVariable('--secondary-heading_small-typography_font-size_sm',styles.themeFonts.secHeadingSmallMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingSmallMobilePortraitSize" ng-change="updateCssVariable('--secondary-heading_small-typography_font-size',styles.themeFonts.secHeadingSmallMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : secHeadingMediumFontTabStyle, 'tab-open' : !secHeadingMediumFontTabStyle}">
                <a ng-click="secHeadingMediumFontTabStyle = !secHeadingMediumFontTabStyle">
                    <span style="{{styles.themeFonts.secHeadingMediumFont.fontType == 'adobe' && styles.themeFonts.secHeadingMediumFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.secHeadingMediumFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.secHeadingMediumFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.secHeadingMediumFont.adobeFontStyle + '!important;' : styles.themeFonts.secHeadingMediumFont.fontType == 'custom' && styles.themeFonts.secHeadingMediumFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.secHeadingMediumFont.customFontName + '\', ' + styles.themeFonts.secHeadingMediumFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.secHeadingMediumFont.font.fontName + '\', ' + styles.themeFonts.secHeadingMediumFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.secHeadingMediumFont.fontWeight + '!important; font-style: ' + styles.themeFonts.secHeadingMediumFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.secHeadingMediumLetterSpacing}}px!important; text-transform: {{styles.themeFonts.secHeadingMediumTextTransform.toLowerCase()}}!important;">Secondary heading (medium)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : secHeadingMediumFontTabStyle, 'tab-open' : !secHeadingMediumFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.secHeadingMediumLineHeight" ng-change="updateCssVariable('--secondary-heading-typography_font-line-height',styles.themeFonts.secHeadingMediumLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.secHeadingMediumLetterSpacing" ng-change="updateCssVariable('--secondary-heading-typography_font-letter-spacing',styles.themeFonts.secHeadingMediumLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.secHeadingMediumTextTransform" ng-change="updateCssVariable('--secondary-heading-typography_font-transform',styles.themeFonts.secHeadingMediumTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingMediumDesktopSize" ng-change="updateCssVariable('--secondary-heading-typography_font-size_xl',styles.themeFonts.secHeadingMediumDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingMediumLaptopSize" ng-change="updateCssVariable('--secondary-heading-typography_font-size_lg',styles.themeFonts.secHeadingMediumLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingMediumTabletSize" ng-change="updateCssVariable('--secondary-heading-typography_font-size_md',styles.themeFonts.secHeadingMediumTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingMediumMobileLandscapeSize" ng-change="updateCssVariable('--secondary-heading-typography_font-size_sm',styles.themeFonts.secHeadingMediumMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingMediumMobilePortraitSize" ng-change="updateCssVariable('--secondary-heading-typography_font-size',styles.themeFonts.secHeadingMediumMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : secHeadingLargeFontTabStyle, 'tab-open' : !secHeadingLargeFontTabStyle}">
                <a ng-click="secHeadingLargeFontTabStyle = !secHeadingLargeFontTabStyle">
                    <span style="{{styles.themeFonts.secHeadingLargeFont.fontType == 'adobe' && styles.themeFonts.secHeadingLargeFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.secHeadingLargeFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.secHeadingLargeFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.secHeadingLargeFont.adobeFontStyle + '!important;' : styles.themeFonts.secHeadingLargeFont.fontType == 'custom' && styles.themeFonts.secHeadingLargeFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.secHeadingLargeFont.customFontName + '\', ' + styles.themeFonts.secHeadingLargeFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.secHeadingLargeFont.font.fontName + '\', ' + styles.themeFonts.secHeadingLargeFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.secHeadingLargeFont.fontWeight + '!important; font-style: ' + styles.themeFonts.secHeadingLargeFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.secHeadingLargeLetterSpacing}}px!important; text-transform: {{styles.themeFonts.secHeadingLargeTextTransform.toLowerCase()}}!important;">Secondary heading (large)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : secHeadingLargeFontTabStyle, 'tab-open' : !secHeadingLargeFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.secHeadingLargeLineHeight" ng-change="updateCssVariable('--secondary-heading_large-typography_font-line-height',styles.themeFonts.secHeadingLargeLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.secHeadingLargeLetterSpacing" ng-change="updateCssVariable('--secondary-heading_large-typography_font-letter-spacing',styles.themeFonts.secHeadingLargeLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.secHeadingLargeTextTransform" ng-change="updateCssVariable('--secondary-heading_large-typography_font-transform',styles.themeFonts.secHeadingLargeTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingLargeDesktopSize" ng-change="updateCssVariable('--secondary-heading_large-typography_font-size_xl',styles.themeFonts.secHeadingLargeDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingLargeLaptopSize" ng-change="updateCssVariable('--secondary-heading_large-typography_font-size_lg',styles.themeFonts.secHeadingLargeLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingLargeTabletSize" ng-change="updateCssVariable('--secondary-heading_large-typography_font-size_md',styles.themeFonts.secHeadingLargeTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingLargeMobileLandscapeSize" ng-change="updateCssVariable('--secondary-heading_large-typography_font-size_sm',styles.themeFonts.secHeadingLargeMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secHeadingLargeMobilePortraitSize" ng-change="updateCssVariable('--secondary-heading_large-typography_font-size',styles.themeFonts.secHeadingLargeMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : introSmallFontTabStyle, 'tab-open' : !introSmallFontTabStyle}">
                <a ng-click="introSmallFontTabStyle = !introSmallFontTabStyle">
                    <span style="{{styles.themeFonts.introSmallFont.fontType == 'adobe' && styles.themeFonts.introSmallFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.introSmallFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.introSmallFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.introSmallFont.adobeFontStyle + '!important;' : styles.themeFonts.introSmallFont.fontType == 'custom' && styles.themeFonts.introSmallFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.introSmallFont.customFontName + '\', ' + styles.themeFonts.introSmallFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.introSmallFont.font.fontName + '\', ' + styles.themeFonts.introSmallFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.introSmallFont.fontWeight + '!important; font-style: ' + styles.themeFonts.introSmallFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.introSmallLetterSpacing}}px!important; text-transform: {{styles.themeFonts.introSmallTextTransform.toLowerCase()}}!important;">Introduction (small)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : introSmallFontTabStyle, 'tab-open' : !introSmallFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.introSmallLineHeight" ng-change="updateCssVariable('--p-intro_small-typography_font-line-height',styles.themeFonts.introSmallLineHeight + '%')" step="1" />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.introSmallLetterSpacing" ng-change="updateCssVariable('--p-intro_small-typography_font-letter-spacing',styles.themeFonts.introSmallLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.introSmallTextTransform" ng-change="updateCssVariable('--p-intro_small-typography_font-transform',styles.themeFonts.introSmallTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introSmallDesktopSize" ng-change="updateCssVariable('--p-intro_small-typography_font-size_xl',styles.themeFonts.introSmallDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introSmallLaptopSize" ng-change="updateCssVariable('--p-intro_small-typography_font-size_lg',styles.themeFonts.introSmallLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introSmallTabletSize" ng-change="updateCssVariable('--p-intro_small-typography_font-size_md',styles.themeFonts.introSmallTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introSmallMobileLandscapeSize" ng-change="updateCssVariable('--p-intro_small-typography_font-size_sm',styles.themeFonts.introSmallMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introSmallMobilePortraitSize" ng-change="updateCssVariable('--p-intro_small-typography_font-size',styles.themeFonts.introSmallMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : introMediumFontTabStyle, 'tab-open' : !introMediumFontTabStyle}">
                <a ng-click="introMediumFontTabStyle = !introMediumFontTabStyle">
                    <span style="{{styles.themeFonts.introMediumFont.fontType == 'adobe' && styles.themeFonts.introMediumFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.introMediumFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.introMediumFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.introMediumFont.adobeFontStyle + '!important;' : styles.themeFonts.introMediumFont.fontType == 'custom' && styles.themeFonts.introMediumFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.introMediumFont.customFontName + '\', ' + styles.themeFonts.introMediumFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.introMediumFont.font.fontName + '\', ' + styles.themeFonts.introMediumFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.introMediumFont.fontWeight + '!important; font-style: ' + styles.themeFonts.introMediumFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.introMediumLetterSpacing}}px!important; text-transform: {{styles.themeFonts.introMediumTextTransform.toLowerCase()}}!important;">Introduction (medium)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : introMediumFontTabStyle, 'tab-open' : !introMediumFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.introMediumLineHeight" ng-change="updateCssVariable('--p-intro-typography_font-line-height',styles.themeFonts.introMediumLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.introMediumLetterSpacing" ng-change="updateCssVariable('--p-intro-typography_font-letter-spacing',styles.themeFonts.introMediumLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.introMediumTextTransform" ng-change="updateCssVariable('--p-intro-typography_font-transform',styles.themeFonts.introMediumTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introMediumDesktopSize" ng-change="updateCssVariable('--p-intro-typography_font-size_xl',styles.themeFonts.introMediumDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introMediumLaptopSize" ng-change="updateCssVariable('--p-intro-typography_font-size_lg',styles.themeFonts.introMediumLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introMediumTabletSize" ng-change="updateCssVariable('--p-intro-typography_font-size_md',styles.themeFonts.introMediumTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introMediumMobileLandscapeSize" ng-change="updateCssVariable('--p-intro-typography_font-size_sm',styles.themeFonts.introMediumMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introMediumMobilePortraitSize" ng-change="updateCssVariable('--p-intro-typography_font-size',styles.themeFonts.introMediumMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : introLargeFontTabStyle, 'tab-open' : !introLargeFontTabStyle}">
                <a ng-click="introLargeFontTabStyle = !introLargeFontTabStyle">
                    <span style="{{styles.themeFonts.introLargeFont.fontType == 'adobe' && styles.themeFonts.introLargeFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.introLargeFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.introLargeFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.introLargeFont.adobeFontStyle + '!important;' : styles.themeFonts.introLargeFont.fontType == 'custom' && styles.themeFonts.introLargeFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.introLargeFont.customFontName + '\', ' + styles.themeFonts.introLargeFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.introLargeFont.font.fontName + '\', ' + styles.themeFonts.introLargeFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.introLargeFont.fontWeight + '!important; font-style: ' + styles.themeFonts.introLargeFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.introLargeLetterSpacing}}px!important; text-transform: {{styles.themeFonts.introLargeTextTransform.toLowerCase()}}!important;">Introduction (large)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : introLargeFontTabStyle, 'tab-open' : !introLargeFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.introLargeLineHeight" ng-change="updateCssVariable('--p-intro_large-typography_font-line-height',styles.themeFonts.introLargeLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.introLargeLetterSpacing" ng-change="updateCssVariable('--p-intro_large-typography_font-letter-spacing',styles.themeFonts.introLargeLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.introLargeTextTransform" ng-change="updateCssVariable('--p-intro_large-typography_font-transform',styles.themeFonts.introLargeTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introLargeDesktopSize" ng-change="updateCssVariable('--p-intro_large-typography_font-size_xl',styles.themeFonts.introLargeDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introLargeLaptopSize" ng-change="updateCssVariable('--p-intro_large-typography_font-size_lg',styles.themeFonts.introLargeLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introLargeTabletSize" ng-change="updateCssVariable('--p-intro_large-typography_font-size_md',styles.themeFonts.introLargeTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introLargeMobileLandscapeSize" ng-change="updateCssVariable('--p-intro_large-typography_font-size_sm',styles.themeFonts.introLargeMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.introLargeMobilePortraitSize" ng-change="updateCssVariable('--p-intro_large-typography_font-size',styles.themeFonts.introLargeMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : blockquoteSmallFontTabStyle, 'tab-open' : !blockquoteSmallFontTabStyle}">
                <a ng-click="blockquoteSmallFontTabStyle = !blockquoteSmallFontTabStyle">
                    <span style="{{styles.themeFonts.blockquoteSmallFont.fontType == 'adobe' && styles.themeFonts.blockquoteSmallFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.blockquoteSmallFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.blockquoteSmallFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.blockquoteSmallFont.adobeFontStyle + '!important;' : styles.themeFonts.blockquoteSmallFont.fontType == 'custom' && styles.themeFonts.blockquoteSmallFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.blockquoteSmallFont.customFontName + '\', ' + styles.themeFonts.blockquoteSmallFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.blockquoteSmallFont.font.fontName + '\', ' + styles.themeFonts.blockquoteSmallFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.blockquoteSmallFont.fontWeight + '!important; font-style: ' + styles.themeFonts.blockquoteSmallFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.blockquoteSmallLetterSpacing}}px!important; text-transform: {{styles.themeFonts.blockquoteSmallTextTransform.toLowerCase()}}!important;">Blockquote (small)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : blockquoteSmallFontTabStyle, 'tab-open' : !blockquoteSmallFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.blockquoteSmallLineHeight" ng-change="updateCssVariable('--blockquote_small-typography_font-line-height',styles.themeFonts.blockquoteSmallLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.blockquoteSmallLetterSpacing" ng-change="updateCssVariable('--blockquote_small-typography_font-letter-spacing',styles.themeFonts.blockquoteSmallLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.blockquoteSmallTextTransform" ng-change="updateCssVariable('--blockquote_small-typography_font-transform',styles.themeFonts.blockquoteSmallTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteSmallDesktopSize" ng-change="updateCssVariable('--blockquote_small-typography_font-size_xl',styles.themeFonts.blockquoteSmallDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteSmallLaptopSize" ng-change="updateCssVariable('--blockquote_small-typography_font-size_lg',styles.themeFonts.blockquoteSmallLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteSmallTabletSize" ng-change="updateCssVariable('--blockquote_small-typography_font-size_md',styles.themeFonts.blockquoteSmallTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteSmallMobileLandscapeSize" ng-change="updateCssVariable('--blockquote_small-typography_font-size_sm',styles.themeFonts.blockquoteSmallMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteSmallMobilePortraitSize" ng-change="updateCssVariable('--blockquote_small-typography_font-size',styles.themeFonts.blockquoteSmallMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : blockquoteMediumFontTabStyle, 'tab-open' : !blockquoteMediumFontTabStyle}">
                <a ng-click="blockquoteMediumFontTabStyle = !blockquoteMediumFontTabStyle">
                    <span style="{{styles.themeFonts.blockquoteMediumFont.fontType == 'adobe' && styles.themeFonts.blockquoteMediumFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.blockquoteMediumFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.blockquoteMediumFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.blockquoteMediumFont.adobeFontStyle + '!important;' : styles.themeFonts.blockquoteMediumFont.fontType == 'custom' && styles.themeFonts.blockquoteMediumFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.blockquoteMediumFont.customFontName + '\', ' + styles.themeFonts.blockquoteMediumFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.blockquoteMediumFont.font.fontName + '\', ' + styles.themeFonts.blockquoteMediumFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.blockquoteMediumFont.fontWeight + '!important; font-style: ' + styles.themeFonts.blockquoteMediumFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.blockquoteMediumLetterSpacing}}px!important; text-transform: {{styles.themeFonts.blockquoteMediumTextTransform.toLowerCase()}}!important;">Blockquote (medium)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : blockquoteMediumFontTabStyle, 'tab-open' : !blockquoteMediumFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.blockquoteMediumLineHeight" ng-change="updateCssVariable('--blockquote-typography_font-line-height',styles.themeFonts.blockquoteMediumLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.blockquoteMediumLetterSpacing" ng-change="updateCssVariable('--blockquote-typography_font-letter-spacing',styles.themeFonts.blockquoteMediumLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.blockquoteMediumTextTransform" ng-change="updateCssVariable('--blockquote-typography_font-transform',styles.themeFonts.blockquoteMediumTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteMediumDesktopSize" ng-change="updateCssVariable('--blockquote-typography_font-size_xl',styles.themeFonts.blockquoteMediumDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteMediumLaptopSize" ng-change="updateCssVariable('--blockquote-typography_font-size_lg',styles.themeFonts.blockquoteMediumLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteMediumTabletSize" ng-change="updateCssVariable('--blockquote-typography_font-size_md',styles.themeFonts.blockquoteMediumTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteMediumMobileLandscapeSize" ng-change="updateCssVariable('--blockquote-typography_font-size_sm',styles.themeFonts.blockquoteMediumMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteMediumMobilePortraitSize" ng-change="updateCssVariable('--blockquote-typography_font-size',styles.themeFonts.blockquoteMediumMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : blockquoteLargeFontTabStyle, 'tab-open' : !blockquoteLargeFontTabStyle}">
                <a ng-click="blockquoteLargeFontTabStyle = !blockquoteLargeFontTabStyle">
                    <span style="{{styles.themeFonts.blockquoteLargeFont.fontType == 'adobe' && styles.themeFonts.blockquoteLargeFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.blockquoteLargeFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.blockquoteLargeFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.blockquoteLargeFont.adobeFontStyle + '!important;' : styles.themeFonts.blockquoteLargeFont.fontType == 'custom' && styles.themeFonts.blockquoteLargeFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.blockquoteLargeFont.customFontName + '\', ' + styles.themeFonts.blockquoteLargeFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.blockquoteLargeFont.font.fontName + '\', ' + styles.themeFonts.blockquoteLargeFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.blockquoteLargeFont.fontWeight + '!important; font-style: ' + styles.themeFonts.blockquoteLargeFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.blockquoteLargeLetterSpacing}}px!important; text-transform: {{styles.themeFonts.blockquoteLargeTextTransform.toLowerCase()}}!important;">Blockquote (large)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : blockquoteLargeFontTabStyle, 'tab-open' : !blockquoteLargeFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.blockquoteLargeLineHeight" ng-change="updateCssVariable('--blockquote_large-typography_font-line-height',styles.themeFonts.blockquoteLargeLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.blockquoteLargeLetterSpacing" ng-change="updateCssVariable('--blockquote_large-typography_font-letter-spacing',styles.themeFonts.blockquoteLargeLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.blockquoteLargeTextTransform" ng-change="updateCssVariable('--blockquote_large-typography_font-transform',styles.themeFonts.blockquoteLargeTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteLargeDesktopSize" ng-change="updateCssVariable('--blockquote_large-typography_font-size_xl',styles.themeFonts.blockquoteLargeDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteLargeLaptopSize" ng-change="updateCssVariable('--blockquote_large-typography_font-size_lg',styles.themeFonts.blockquoteLargeLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteLargeTabletSize" ng-change="updateCssVariable('--blockquote_large-typography_font-size_md',styles.themeFonts.blockquoteLargeTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteLargeMobileLandscapeSize" ng-change="updateCssVariable('--blockquote_large-typography_font-size_sm',styles.themeFonts.blockquoteLargeMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.blockquoteLargeMobilePortraitSize" ng-change="updateCssVariable('--blockquote_large-typography_font-size',styles.themeFonts.blockquoteLargeMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : buttonSmallFontTabStyle, 'tab-open' : !buttonSmallFontTabStyle}">
                <a ng-click="buttonSmallFontTabStyle = !buttonSmallFontTabStyle">
                    <span style="{{styles.themeFonts.buttonSmallFont.fontType == 'adobe' && styles.themeFonts.buttonSmallFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.buttonSmallFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.buttonSmallFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.buttonSmallFont.adobeFontStyle + '!important;' : styles.themeFonts.buttonSmallFont.fontType == 'custom' && styles.themeFonts.buttonSmallFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.buttonSmallFont.customFontName + '\', ' + styles.themeFonts.buttonSmallFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.buttonSmallFont.font.fontName + '\', ' + styles.themeFonts.buttonSmallFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.buttonSmallFont.fontWeight + '!important; font-style: ' + styles.themeFonts.buttonSmallFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.buttonSmallLetterSpacing}}px!important; text-transform: {{styles.themeFonts.buttonSmallTextTransform.toLowerCase()}}!important;">Button (small)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : buttonSmallFontTabStyle, 'tab-open' : !buttonSmallFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.buttonSmallLineHeight" ng-change="updateCssVariable('--btn_small-typography_font-line-height',styles.themeFonts.buttonSmallLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" step="0.01" ng-model="styles.themeFonts.buttonSmallLetterSpacing" ng-change="updateCssVariable('--btn_small-typography_font-letter-spacing',styles.themeFonts.buttonSmallLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.buttonSmallTextTransform" ng-change="updateCssVariable('--btn_small-typography_font-transform',styles.themeFonts.buttonSmallTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonSmallDesktopSize" ng-change="updateCssVariable('--btn_small-typography_font-size_xl',styles.themeFonts.buttonSmallDesktopSize + 'px')" step="1" />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonSmallLaptopSize" ng-change="updateCssVariable('--btn_small-typography_font-size_lg',styles.themeFonts.buttonSmallLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonSmallTabletSize" ng-change="updateCssVariable('--btn_small-typography_font-size_md',styles.themeFonts.buttonSmallTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonSmallMobileLandscapeSize" ng-change="updateCssVariable('--btn_small-typography_font-size_sm',styles.themeFonts.buttonSmallMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonSmallMobilePortraitSize" ng-change="updateCssVariable('--btn_small-typography_font-size',styles.themeFonts.buttonSmallMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : buttonMediumFontTabStyle, 'tab-open' : !buttonMediumFontTabStyle}">
                <a ng-click="buttonMediumFontTabStyle = !buttonMediumFontTabStyle">
                    <span style="{{styles.themeFonts.buttonMediumFont.fontType == 'adobe' && styles.themeFonts.buttonMediumFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.buttonMediumFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.buttonMediumFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.buttonMediumFont.adobeFontStyle + '!important;' : styles.themeFonts.buttonMediumFont.fontType == 'custom' && styles.themeFonts.buttonMediumFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.buttonMediumFont.customFontName + '\', ' + styles.themeFonts.buttonMediumFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.buttonMediumFont.font.fontName + '\', ' + styles.themeFonts.buttonMediumFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.buttonMediumFont.fontWeight + '!important; font-style: ' + styles.themeFonts.buttonMediumFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.buttonMediumLetterSpacing}}px!important; text-transform: {{styles.themeFonts.buttonMediumTextTransform.toLowerCase()}}!important;">Button (medium)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : buttonMediumFontTabStyle, 'tab-open' : !buttonMediumFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.buttonMediumLineHeight" ng-change="updateCssVariable('--btn-typography_font-line-height',styles.themeFonts.buttonMediumLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.buttonMediumLetterSpacing" ng-change="updateCssVariable('--btn-typography_font-letter-spacing',styles.themeFonts.buttonMediumLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.buttonMediumTextTransform" ng-change="updateCssVariable('--btn-typography_font-transform',styles.themeFonts.buttonMediumTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonMediumDesktopSize" ng-change="updateCssVariable('--btn-typography_font-size_xl',styles.themeFonts.buttonMediumDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonMediumLaptopSize" ng-change="updateCssVariable('--btn-typography_font-size_lg',styles.themeFonts.buttonMediumLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonMediumTabletSize" ng-change="updateCssVariable('--btn-typography_font-size_md',styles.themeFonts.buttonMediumTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonMediumMobileLandscapeSize" ng-change="updateCssVariable('--btn-typography_font-size_sm',styles.themeFonts.buttonMediumMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonMediumMobilePortraitSize" ng-change="updateCssVariable('--btn-typography_font-size',styles.themeFonts.buttonMediumMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : buttonLargeFontTabStyle, 'tab-open' : !buttonLargeFontTabStyle}">
                <a ng-click="buttonLargeFontTabStyle = !buttonLargeFontTabStyle">
                    <span style="{{styles.themeFonts.buttonLargeFont.fontType == 'adobe' && styles.themeFonts.buttonLargeFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.buttonLargeFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.buttonLargeFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.buttonLargeFont.adobeFontStyle + '!important;' : styles.themeFonts.buttonLargeFont.fontType == 'custom' && styles.themeFonts.buttonLargeFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.buttonLargeFont.customFontName + '\', ' + styles.themeFonts.buttonLargeFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.buttonLargeFont.font.fontName + '\', ' + styles.themeFonts.buttonLargeFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.buttonLargeFont.fontWeight + '!important; font-style: ' + styles.themeFonts.buttonLargeFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.buttonLargeLetterSpacing}}px!important; text-transform: {{styles.themeFonts.buttonLargeTextTransform.toLowerCase()}}!important;">Button (large)</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : buttonLargeFontTabStyle, 'tab-open' : !buttonLargeFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.buttonLargeLineHeight" ng-change="updateCssVariable('--btn_large-typography_font-line-height',styles.themeFonts.buttonLargeLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.buttonLargeLetterSpacing" ng-change="updateCssVariable('--btn_large-typography_font-letter-spacing',styles.themeFonts.buttonLargeLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.buttonLargeTextTransform" ng-change="updateCssVariable('--btn_large-typography_font-transform',styles.themeFonts.buttonLargeTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonLargeDesktopSize" ng-change="updateCssVariable('--btn_large-typography_font-size_xl',styles.themeFonts.buttonLargeDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonLargeLaptopSize" ng-change="updateCssVariable('--btn_large-typography_font-size_lg',styles.themeFonts.buttonLargeLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonLargeTabletSize" ng-change="updateCssVariable('--btn_large-typography_font-size_md',styles.themeFonts.buttonLargeTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonLargeMobileLandscapeSize" ng-change="updateCssVariable('--btn_large-typography_font-size_sm',styles.themeFonts.buttonLargeMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.buttonLargeMobilePortraitSize" ng-change="updateCssVariable('--btn_large-typography_font-size',styles.themeFonts.buttonLargeMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : mainNavFontTabStyle, 'tab-open' : !mainNavFontTabStyle}">
                <a ng-click="mainNavFontTabStyle = !mainNavFontTabStyle">
                    <span style="{{styles.themeFonts.mainNavFont.fontType == 'adobe' && styles.themeFonts.mainNavFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.mainNavFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.mainNavFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.mainNavFont.adobeFontStyle + '!important;' : styles.themeFonts.mainNavFont.fontType == 'custom' && styles.themeFonts.mainNavFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.mainNavFont.customFontName + '\', ' + styles.themeFonts.mainNavFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.mainNavFont.font.fontName + '\', ' + styles.themeFonts.mainNavFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.mainNavFont.fontWeight + '!important; font-style: ' + styles.themeFonts.mainNavFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.mainNavLetterSpacing}}px!important; text-transform: {{styles.themeFonts.mainNavTextTransform.toLowerCase()}}!important;">Main navigation</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : mainNavFontTabStyle, 'tab-open' : !mainNavFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.mainNavLineHeight" ng-change="updateCssVariable('--main-navigation-typography_font-line-height',styles.themeFonts.mainNavLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.mainNavLetterSpacing" ng-change="updateCssVariable('--main-navigation-typography_font-letter-spacing',styles.themeFonts.mainNavLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.mainNavTextTransform" ng-change="updateCssVariable('--main-navigation-typography_font-transform',styles.themeFonts.mainNavTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.mainNavDesktopSize" ng-change="updateCssVariable('--main-navigation-typography_font-size_xl',styles.themeFonts.mainNavDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.mainNavLaptopSize" ng-change="updateCssVariable('--main-navigation-typography_font-size_lg',styles.themeFonts.mainNavLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.mainNavTabletSize" ng-change="updateCssVariable('--main-navigation-typography_font-size_md',styles.themeFonts.mainNavTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.mainNavMobileLandscapeSize" ng-change="updateCssVariable('--main-navigation-typography_font-size_sm',styles.themeFonts.mainNavMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.mainNavMobilePortraitSize" ng-change="updateCssVariable('--main-navigation-typography_font-size',styles.themeFonts.mainNavMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : secondaryNavFontTabStyle, 'tab-open' : !secondaryNavFontTabStyle}">
                <a ng-click="secondaryNavFontTabStyle = !secondaryNavFontTabStyle">
                    <span style="{{styles.themeFonts.secondaryNavFont.fontType == 'adobe' && styles.themeFonts.secondaryNavFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.secondaryNavFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.secondaryNavFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.secondaryNavFont.adobeFontStyle + '!important;' : styles.themeFonts.secondaryNavFont.fontType == 'custom' && styles.themeFonts.secondaryNavFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.secondaryNavFont.customFontName + '\', ' + styles.themeFonts.secondaryNavFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.secondaryNavFont.font.fontName + '\', ' + styles.themeFonts.secondaryNavFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.secondaryNavFont.fontWeight + '!important; font-style: ' + styles.themeFonts.secondaryNavFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.secondaryNavLetterSpacing}}px!important; text-transform: {{styles.themeFonts.secondaryNavTextTransform.toLowerCase()}}!important;">Secondary navigation</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : secondaryNavFontTabStyle, 'tab-open' : !secondaryNavFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.secondaryNavLineHeight" ng-change="updateCssVariable('--secondary-navigation-typography_font-line-height',styles.themeFonts.secondaryNavLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.secondaryNavLetterSpacing" ng-change="updateCssVariable('--secondary-navigation-typography_font-letter-spacing',styles.themeFonts.secondaryNavLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.secondaryNavTextTransform" ng-change="updateCssVariable('--secondary-navigation-typography_font-transform',styles.themeFonts.secondaryNavTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secondaryNavDesktopSize" ng-change="updateCssVariable('--secondary-navigation-typography_font-size_xl',styles.themeFonts.secondaryNavDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secondaryNavLaptopSize" ng-change="updateCssVariable('--secondary-navigation-typography_font-size_lg',styles.themeFonts.secondaryNavLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secondaryNavTabletSize" ng-change="updateCssVariable('--secondary-navigation-typography_font-size_md',styles.themeFonts.secondaryNavTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secondaryNavMobileLandscapeSize" ng-change="updateCssVariable('--secondary-navigation-typography_font-size_sm',styles.themeFonts.secondaryNavMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.secondaryNavMobilePortraitSize" ng-change="updateCssVariable('--secondary-navigation-typography_font-size',styles.themeFonts.secondaryNavMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : mainNavDropdownFontTabStyle, 'tab-open' : !mainNavDropdownFontTabStyle}">
                <a ng-click="mainNavDropdownFontTabStyle = !mainNavDropdownFontTabStyle">
                    <span style="{{styles.themeFonts.mainNavDropdownFont.fontType == 'adobe' && styles.themeFonts.mainNavDropdownFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.mainNavDropdownFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.mainNavDropdownFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.mainNavDropdownFont.adobeFontStyle + '!important;' : styles.themeFonts.mainNavDropdownFont.fontType == 'custom' && styles.themeFonts.mainNavDropdownFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.mainNavDropdownFont.customFontName + '\', ' + styles.themeFonts.mainNavDropdownFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.mainNavDropdownFont.font.fontName + '\', ' + styles.themeFonts.mainNavDropdownFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.mainNavDropdownFont.fontWeight + '!important; font-style: ' + styles.themeFonts.mainNavDropdownFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.mainNavDropdownLetterSpacing}}px!important; text-transform: {{styles.themeFonts.mainNavDropdownTextTransform.toLowerCase()}}!important;">Navigation dropdowns</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : mainNavDropdownFontTabStyle, 'tab-open' : !mainNavDropdownFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.mainNavDropdownLineHeight" ng-change="updateCssVariable('--main-navigation_dropdowns-typography_font-line-height',styles.themeFonts.mainNavDropdownLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.mainNavDropdownLetterSpacing" ng-change="updateCssVariable('--main-navigation_dropdowns-typography_font-letter-spacing',styles.themeFonts.mainNavDropdownLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.mainNavDropdownTextTransform" ng-change="updateCssVariable('--main-navigation_dropdowns-typography_font-transform',styles.themeFonts.mainNavDropdownTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.mainNavDropdownDesktopSize" ng-change="updateCssVariable('--main-navigation_dropdowns-typography_font-size_xl',styles.themeFonts.mainNavDropdownDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.mainNavDropdownLaptopSize" ng-change="updateCssVariable('--main-navigation_dropdowns-typography_font-size_lg',styles.themeFonts.mainNavDropdownLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.mainNavDropdownTabletSize" ng-change="updateCssVariable('--main-navigation_dropdowns-typography_font-size_md',styles.themeFonts.mainNavDropdownTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.mainNavDropdownMobileLandscapeSize" ng-change="updateCssVariable('--main-navigation_dropdowns-typography_font-size_sm',styles.themeFonts.mainNavDropdownMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.mainNavDropdownMobilePortraitSize" ng-change="updateCssVariable('--main-navigation_dropdowns-typography_font-size',styles.themeFonts.mainNavDropdownMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : subNavFontTabStyle, 'tab-open' : !subNavFontTabStyle}">
                <a ng-click="subNavFontTabStyle = !subNavFontTabStyle">
                    <span style="{{styles.themeFonts.subNavFont.fontType == 'adobe' && styles.themeFonts.subNavFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.subNavFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.subNavFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.subNavFont.adobeFontStyle + '!important;' : styles.themeFonts.subNavFont.fontType == 'custom' && styles.themeFonts.subNavFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.subNavFont.customFontName + '\', ' + styles.themeFonts.subNavFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.subNavFont.font.fontName + '\', ' + styles.themeFonts.subNavFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.subNavFont.fontWeight + '!important; font-style: ' + styles.themeFonts.subNavFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.subNavLetterSpacing}}px!important; text-transform: {{styles.themeFonts.subNavTextTransform.toLowerCase()}}!important;">Sub navigation</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : subNavFontTabStyle, 'tab-open' : !subNavFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.subNavLineHeight" ng-change="updateCssVariable('--sub-navigation-typography_font-line-height',styles.themeFonts.subNavLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.subNavLetterSpacing" ng-change="updateCssVariable('--sub-navigation-typography_font-letter-spacing',styles.themeFonts.subNavLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.subNavTextTransform" ng-change="updateCssVariable('--sub-navigation-typography_font-transform',styles.themeFonts.subNavTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.subNavDesktopSize" ng-change="updateCssVariable('--sub-navigation-typography_font-size_xl',styles.themeFonts.subNavDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.subNavLaptopSize" ng-change="updateCssVariable('--sub-navigation-typography_font-size_lg',styles.themeFonts.subNavLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.subNavTabletSize" ng-change="updateCssVariable('--sub-navigation-typography_font-size_md',styles.themeFonts.subNavTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.subNavMobileLandscapeSize" ng-change="updateCssVariable('--sub-navigation-typography_font-size_sm',styles.themeFonts.subNavMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.subNavMobilePortraitSize" ng-change="updateCssVariable('--sub-navigation-typography_font-size',styles.themeFonts.subNavMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : footerNavFontTabStyle, 'tab-open' : !footerNavFontTabStyle}">
                <a ng-click="footerNavFontTabStyle = !footerNavFontTabStyle">
                    <span style="{{styles.themeFonts.footerNavFont.fontType == 'adobe' && styles.themeFonts.footerNavFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.footerNavFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.footerNavFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.footerNavFont.adobeFontStyle + '!important;' : styles.themeFonts.footerNavFont.fontType == 'custom' && styles.themeFonts.footerNavFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.footerNavFont.customFontName + '\', ' + styles.themeFonts.footerNavFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.footerNavFont.font.fontName + '\', ' + styles.themeFonts.footerNavFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.footerNavFont.fontWeight + '!important; font-style: ' + styles.themeFonts.footerNavFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.footerNavLetterSpacing}}px!important; text-transform: {{styles.themeFonts.footerNavTextTransform.toLowerCase()}}!important;">Footer navigation</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : footerNavFontTabStyle, 'tab-open' : !footerNavFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.footerNavLineHeight" ng-change="updateCssVariable('--footer-navigation-typography_font-line-height',styles.themeFonts.footerNavLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.footerNavLetterSpacing" ng-change="updateCssVariable('--footer-navigation-typography_font-letter-spacing',styles.themeFonts.footerNavLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.footerNavTextTransform" ng-change="updateCssVariable('--footer-navigation-typography_font-transform',styles.themeFonts.footerNavTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.footerNavDesktopSize" ng-change="updateCssVariable('--footer-navigation-typography_font-size_xl',styles.themeFonts.footerNavDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.footerNavLaptopSize" ng-change="updateCssVariable('--footer-navigation-typography_font-size_lg',styles.themeFonts.footerNavLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.footerNavTabletSize" ng-change="updateCssVariable('--footer-navigation-typography_font-size_md',styles.themeFonts.footerNavTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.footerNavMobileLandscapeSize" ng-change="updateCssVariable('--footer-navigation-typography_font-size_sm',styles.themeFonts.footerNavMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.footerNavMobilePortraitSize" ng-change="updateCssVariable('--footer-navigation-typography_font-size',styles.themeFonts.footerNavMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : breadcrumbNavFontTabStyle, 'tab-open' : !breadcrumbNavFontTabStyle}">
                <a ng-click="breadcrumbNavFontTabStyle = !breadcrumbNavFontTabStyle">
                    <span style="{{styles.themeFonts.breadcrumbNavFont.fontType == 'adobe' && styles.themeFonts.breadcrumbNavFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.breadcrumbNavFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.breadcrumbNavFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.breadcrumbNavFont.adobeFontStyle + '!important;' : styles.themeFonts.breadcrumbNavFont.fontType == 'custom' && styles.themeFonts.breadcrumbNavFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.breadcrumbNavFont.customFontName + '\', ' + styles.themeFonts.breadcrumbNavFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.breadcrumbNavFont.font.fontName + '\', ' + styles.themeFonts.breadcrumbNavFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.breadcrumbNavFont.fontWeight + '!important; font-style: ' + styles.themeFonts.breadcrumbNavFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.breadcrumbNavLetterSpacing}}px!important; text-transform: {{styles.themeFonts.breadcrumbNavTextTransform.toLowerCase()}}!important;">Breadcrumb navigation</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : breadcrumbNavFontTabStyle, 'tab-open' : !breadcrumbNavFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.breadcrumbNavLineHeight" ng-change="updateCssVariable('--breadcrumb-navigation-typography_font-line-height',styles.themeFonts.breadcrumbNavLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.breadcrumbNavLetterSpacing" ng-change="updateCssVariable('--breadcrumb-navigation-typography_font-letter-spacing',styles.themeFonts.breadcrumbNavLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.breadcrumbNavTextTransform" ng-change="updateCssVariable('--breadcrumb-navigation-typography_font-transform',styles.themeFonts.breadcrumbNavTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.breadcrumbNavDesktopSize" ng-change="updateCssVariable('--breadcrumb-navigation-typography_font-size_xl',styles.themeFonts.breadcrumbNavDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.breadcrumbNavLaptopSize" ng-change="updateCssVariable('--breadcrumb-navigation-typography_font-size_lg',styles.themeFonts.breadcrumbNavLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.breadcrumbNavTabletSize" ng-change="updateCssVariable('--breadcrumb-navigation-typography_font-size_md',styles.themeFonts.breadcrumbNavTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.breadcrumbNavMobileLandscapeSize" ng-change="updateCssVariable('--breadcrumb-navigation-typography_font-size_sm',styles.themeFonts.breadcrumbNavMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.breadcrumbNavMobilePortraitSize" ng-change="updateCssVariable('--breadcrumb-navigation-typography_font-size',styles.themeFonts.breadcrumbNavMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : anchorNavFontTabStyle, 'tab-open' : !anchorNavFontTabStyle}">
                <a ng-click="anchorNavFontTabStyle = !anchorNavFontTabStyle">
                    <span style="{{styles.themeFonts.anchorNavFont.fontType == 'adobe' && styles.themeFonts.anchorNavFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.anchorNavFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.anchorNavFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.anchorNavFont.adobeFontStyle + '!important;' : styles.themeFonts.anchorNavFont.fontType == 'custom' && styles.themeFonts.anchorNavFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.anchorNavFont.customFontName + '\', ' + styles.themeFonts.anchorNavFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.anchorNavFont.font.fontName + '\', ' + styles.themeFonts.anchorNavFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.anchorNavFont.fontWeight + '!important; font-style: ' + styles.themeFonts.anchorNavFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.anchorNavLetterSpacing}}px!important; text-transform: {{styles.themeFonts.anchorNavTextTransform.toLowerCase()}}!important;">Anchor navigation</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : anchorNavFontTabStyle, 'tab-open' : !anchorNavFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.anchorNavLineHeight" ng-change="updateCssVariable('--anchor-navigation-typography_font-line-height',styles.themeFonts.anchorNavLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.anchorNavLetterSpacing" ng-change="updateCssVariable('--anchor-navigation-typography_font-letter-spacing',styles.themeFonts.anchorNavLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.anchorNavTextTransform" ng-change="updateCssVariable('--anchor-navigation-typography_font-transform',styles.themeFonts.anchorNavTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.anchorNavDesktopSize" ng-change="updateCssVariable('--anchor-navigation-typography_font-size_xl',styles.themeFonts.anchorNavDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.anchorNavLaptopSize" ng-change="updateCssVariable('--anchor-navigation-typography_font-size_lg',styles.themeFonts.anchorNavLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.anchorNavTabletSize" ng-change="updateCssVariable('--anchor-navigation-typography_font-size_md',styles.themeFonts.anchorNavTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.anchorNavMobileLandscapeSize" ng-change="updateCssVariable('--anchor-navigation-typography_font-size_sm',styles.themeFonts.anchorNavMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.anchorNavMobilePortraitSize" ng-change="updateCssVariable('--anchor-navigation-typography_font-size',styles.themeFonts.anchorNavMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : accordionTabNavFontTabStyle, 'tab-open' : !accordionTabNavFontTabStyle}">
                <a ng-click="accordionTabNavFontTabStyle = !accordionTabNavFontTabStyle">
                    <span style="{{styles.themeFonts.accordionTabNavFont.fontType == 'adobe' && styles.themeFonts.accordionTabNavFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.accordionTabNavFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.accordionTabNavFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.accordionTabNavFont.adobeFontStyle + '!important;' : styles.themeFonts.accordionTabNavFont.fontType == 'custom' && styles.themeFonts.accordionTabNavFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.accordionTabNavFont.customFontName + '\', ' + styles.themeFonts.accordionTabNavFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.accordionTabNavFont.font.fontName + '\', ' + styles.themeFonts.accordionTabNavFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.accordionTabNavFont.fontWeight + '!important; font-style: ' + styles.themeFonts.accordionTabNavFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.accordionTabNavLetterSpacing}}px!important; text-transform: {{styles.themeFonts.accordionTabNavTextTransform.toLowerCase()}}!important;">Accordion &amp; tab navigation</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : accordionTabNavFontTabStyle, 'tab-open' : !accordionTabNavFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.accordionTabNavLineHeight" ng-change="updateCssVariable('--acc-tab-typography_font-line-height',styles.themeFonts.accordionTabNavLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.accordionTabNavLetterSpacing" ng-change="updateCssVariable('--acc-tab-typography_font-letter-spacing',styles.themeFonts.accordionTabNavLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.accordionTabNavTextTransform" ng-change="updateCssVariable('--acc-tab-typography_font-transform',styles.themeFonts.accordionTabNavTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.accordionTabNavDesktopSize" ng-change="updateCssVariable('--acc-tab-typography_font-size_xl',styles.themeFonts.accordionTabNavDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.accordionTabNavLaptopSize" ng-change="updateCssVariable('--acc-tab-typography_font-size_lg',styles.themeFonts.accordionTabNavLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.accordionTabNavTabletSize" ng-change="updateCssVariable('--acc-tab-typography_font-size_md',styles.themeFonts.accordionTabNavTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.accordionTabNavMobileLandscapeSize" ng-change="updateCssVariable('--acc-tab-typography_font-size_sm',styles.themeFonts.accordionTabNavMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.accordionTabNavMobilePortraitSize" ng-change="updateCssVariable('--acc-tab-typography_font-size',styles.themeFonts.accordionTabNavMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>
            
            
            <div class="usn-accordion-tab" ng-class="{'tab-closed' : logoFontTabStyle, 'tab-open' : !logoFontTabStyle}">
                <a ng-click="logoFontTabStyle = !logoFontTabStyle">
                    <span style="{{styles.themeFonts.logoFont.fontType == 'adobe' && styles.themeFonts.logoFont.adobeFontConfirmed ? 'font-family: ' + styles.themeFonts.logoFont.adobeFontFamily + '!important; font-weight: ' + styles.themeFonts.logoFont.adobeFontWeight + '!important; font-style: ' + styles.themeFonts.logoFont.adobeFontStyle + '!important;' : styles.themeFonts.logoFont.fontType == 'custom' && styles.themeFonts.logoFont.customFontConfirmed ? 'font-family: \'' + styles.themeFonts.logoFont.customFontName + '\', ' + styles.themeFonts.logoFont.customFontStack + '!important;'  : 'font-family: \'' + styles.themeFonts.logoFont.font.fontName + '\', ' + styles.themeFonts.logoFont.font.fontCategory + '!important; font-weight: ' + styles.themeFonts.logoFont.fontWeight + '!important; font-style: ' + styles.themeFonts.logoFont.fontStyle.styleName + '!important;'}} letter-spacing: {{styles.themeFonts.logoLetterSpacing}}px!important; text-transform: {{styles.themeFonts.logoTextTransform.toLowerCase()}}!important;">Logo</span>
                </a>
            </div>
            <div class="usn-accordion-content" ng-class="{'tab-closed' : logoFontTabStyle, 'tab-open' : !logoFontTabStyle}">
                
                <div class="usn-form-group">

<div class="usn-input-row">

<div class="usn-input-col usn-input-col-full">

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Line height</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units percentage">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.logoLineHeight" ng-change="updateCssVariable('--logo-typography_font-line-height',styles.themeFonts.logoLineHeight + '%')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Letter spacing</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" ng-model="styles.themeFonts.logoLetterSpacing" ng-change="updateCssVariable('--logo-typography_font-letter-spacing',styles.themeFonts.logoLetterSpacing + 'px')" step="0.01" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Text transform</label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-select">
                                    <select class="usn-form-control" ng-model="styles.themeFonts.logoTextTransform" ng-change="updateCssVariable('--logo-typography_font-transform',styles.themeFonts.logoTextTransform)">
                                        <option>None</option>
                                        <option>Uppercase</option>
                                        <option>Lowercase</option>
                                        <option>Capitalize</option>
                                    </select>
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-full">

<label class="usn-label">Desktop<i class="usn-icon fa fa-desktop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.logoDesktopSize" ng-change="updateCssVariable('--logo-typography_font-size_xl',styles.themeFonts.logoDesktopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Laptop<i class="usn-icon fa fa-laptop after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.logoLaptopSize" ng-change="updateCssVariable('--logo-typography_font-size_lg',styles.themeFonts.logoLaptopSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Tablet<i class="usn-icon fa fa-tablet after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.logoTabletSize" ng-change="updateCssVariable('--logo-typography_font-size_md',styles.themeFonts.logoTabletSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile landscape after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.logoMobileLandscapeSize" ng-change="updateCssVariable('--logo-typography_font-size_sm',styles.themeFonts.logoMobileLandscapeSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>
                        
                        
                        <div class="usn-input-col usn-input-col-half">

<label class="usn-label">Mobile<i class="usn-icon fa fa-mobile after"></i></label>
                            <div class="usn-input">
                                <div class="usn-input-wrap usn-input-units pixels">
                                    <input class="usn-form-control" type="number" min="0" ng-model="styles.themeFonts.logoMobilePortraitSize" ng-change="updateCssVariable('--logo-typography_font-size',styles.themeFonts.logoMobilePortraitSize + 'px')" step="1" required />
                                </div>
                            </div>

</div>

</div>

</div>
                
            </div>

</div>

</div>

</div>

Name	Type	Size	Owner/Group	Permission	Last Modified	Actions
.	dir	-	0/0	0777	2025-02-18 02:37:03
..	dir	-	0/0	0777	2025-02-18 02:37:03
Color.cshtml	text/plain	184.08 KB	0/0	0666	2024-11-13 09:43:52
DesignPanel.cshtml	text/html	24.04 KB	0/0	0666	2025-02-10 08:35:48
Font.cshtml	text/html	311.53 KB	0/0	0666	2025-02-10 07:37:32
Layout.cshtml	text/plain	71.49 KB	0/0	0666	2024-12-09 05:37:20
Spacing.cshtml	text/plain	90.41 KB	0/0	0666	2024-09-22 08:40:36

Team Anon Force

https://t.me/Professor6T9x