<?php

// Exit if direct access.
if (!defined ('ABSPATH')) exit;

class ClassH1Font 
{
	
	
// START CODING

public function H1Font_cb()
{
?>
	<div class="section-all-accordion style="clear:both !important; width:auto;">
       <div class="accordion-icon" id="accordion_h1">
           <img id="accordion_open_h1" src="<?php echo FONT_FARSI_ASSETS_IMG_DIR . 'plus.png';?>" />
           <img id="accordion_close_h1" src="<?php echo FONT_FARSI_ASSETS_IMG_DIR . 'negative.png';?>" />
       </div><br>	
<div id="h1_font_section_view" class="heading_font_section_view">
	   
	<div class="section-element">
		<label class="simptip-position-top simptip-success" data-tooltip="<?php echo esc_html__("active or deactive heading font" , 'font-farsi' );?>" for="h1_font_enable"><?php echo esc_html__('Enable', 'font-farsi'); ?>
		<input type="checkbox" id="h1_font_enable" name="h1_font_enable" value="Enable" <?php checked(get_option('h1_font_enable'),'Enable',true) ;?> />
		</label>
		<label class="simptip-position-top simptip-success" data-tooltip="<?php echo esc_html__("Line Height (%)" , 'font-farsi' );?>" for="h1_font_line_height"><?php echo esc_html__('Line Height', 'font-farsi'); ?>
		<input type="number" min="0" max="500" name="h1_font_line_height" id="h1_font_line_height" class="input-line-height" value=<?php echo get_option('h1_font_line_height');?> />
		</label>
		<input class="jscolor" name="h1_font_color" id="h1_font_color" value=<?php echo get_option('h1_font_color');?>>
			<input class="headings_color_enable" type="checkbox" name="h1_font_color_enable" value="Yes" <?php checked(get_option('h1_font_color_enable'),'Yes',true) ;?> title="<?php echo esc_html__("if you want enable font color, ckeck this checkbox" , 'font-farsi' );?>"/>
			<select class="_font_unit" id="h1_font_unit" name="h1_font_unit">
			<option value="px" <?php selected( get_option('h1_font_unit'), 'px', true ); ?>>px</option>
			<option value="em" <?php selected( get_option('h1_font_unit'), 'em', true ); ?>>em</option>
			<option value="rem" <?php selected( get_option('h1_font_unit'), 'rem', true ); ?>>rem</option>
			<option value="in" <?php selected( get_option('h1_font_unit'), 'in', true ); ?>>in</option>
			<option value="pt" <?php selected( get_option('h1_font_unit'), 'pt', true ); ?>>pt</option>
		</select>
	<input id="h1_font_size" title="Font Size" class="input-text" type="number" name="h1_font_size" size="3" value=<?php echo get_option('h1_font_size');?>>
	<label for="h1_font">
		<select id="h1_font" name="h1_font">
	<optgroup label="Yekan">
		<option value="Yekan" <?php selected( get_option('h1_font'), 'Yekan', true ); ?>>Yekan</option>
	</optgroup>
	<optgroup label="System">					
	<option value="Tahoma" <?php selected( get_option('h1_font'), 'Tahoma', true ); ?>>Tahoma</option>
	<option value="Arial" <?php selected( get_option('h1_font'), 'Arial', true ); ?>>Arial</option>
	<option value="Verdana" <?php selected( get_option('h1_font'), 'Verdana', true ); ?>>Verdana</option>
	</optgroup>
	<optgroup label="Roboto">
	<option value="Robotobold" <?php selected( get_option('h1_font'), 'Robotobold', true ); ?>>Robotobold</option>
	<option value="Robotolight" <?php selected( get_option('h1_font'), 'Robotolight', true ); ?>>Robotolight</option>
	<option value="Robotoregular" <?php selected( get_option('h1_font'), 'Robotoregular', true ); ?>>Robotoregular</option>
	</optgroup>
	<optgroup label="Vazir">
	<option value="Vazir" <?php selected( get_option('h1_font'), 'Vazir', true ); ?>>Vazir</option>
	<option value="VazirBold" <?php selected( get_option('h1_font'), 'VazirBold', true ); ?>>VazirBold</option>
	<option value="VazirLight" <?php selected( get_option('h1_font'), 'VazirLight', true ); ?>>VazirLight</option>
	<option value="VazirMedium" <?php selected( get_option('h1_font'), 'VazirMedium', true ); ?>>VazirMedium</option>
	<option value="VazirThin" <?php selected( get_option('h1_font'), 'VazirThin', true ); ?>>VazirThin</option>
	</optgroup>
	<optgroup label="Tanha">
	<option value="Tanha" <?php selected( get_option('h1_font'), 'Tanha', true ); ?>>Tanha</option>
	</optgroup>
	<optgroup label="Shabnam">
	<option value="Shabnam" <?php selected( get_option('h1_font'), 'Shabnam', true ); ?>>Shabnam</option>
	<option value="ShabnamBold" <?php selected( get_option('h1_font'), 'ShabnamBold', true ); ?>>ShabnamBold</option>
	<option value="ShabnamLight" <?php selected( get_option('h1_font'), 'ShabnamLight', true ); ?>>ShabnamLight</option>
	</optgroup>
	<optgroup label="Samim">
	<option value="Samim" <?php selected( get_option('h1_font'), 'Samim', true ); ?>>Samim</option>
	<option value="SamimBold" <?php selected( get_option('h1_font'), 'SamimBold', true ); ?>>SamimBold</option>
	</optgroup>
	<optgroup label="Sahel">
	<option value="Sahel" <?php selected( get_option('h1_font'), 'Sahel', true ); ?>>Sahel</option>
	<option value="SahelBlack" <?php selected( get_option('h1_font'), 'SahelBlack', true ); ?>>SahelBlack</option>
	<option value="SahelBold" <?php selected( get_option('h1_font'), 'SahelBold', true ); ?>>SahelBold</option>
	</optgroup>
	<optgroup label="Nahid">
	<option value="Nahid" <?php selected( get_option('h1_font'), 'Nahid', true ); ?>>Nahid</option>
	</optgroup>
	<optgroup label="B Family">

	<option value="BArshia" <?php selected( get_option('h1_font'), 'BArshia', true ); ?>>BArshia</option>
	<option value="BAseman" <?php selected( get_option('h1_font'), 'BAseman', true ); ?>>BAseman</option>
	<option value="BAsemanItalic" <?php selected( get_option('h1_font'), 'BAsemanItalic', true ); ?>>BAsemanItalic</option>
	<option value="BBadkonak" <?php selected( get_option('h1_font'), 'BBadkonak', true ); ?>>BBadkonak</option>
	<option value="BBadr" <?php selected( get_option('h1_font'), 'BBadr', true ); ?>>BBadr</option>
	<option value="BBadrBold" <?php selected( get_option('h1_font'), 'BBadrBold', true ); ?>>BBadrBold</option>
	<option value="BBaran" <?php selected( get_option('h1_font'), 'BBaran', true ); ?>>BBaran</option>
	<option value="BBaranItalic" <?php selected( get_option('h1_font'), 'BBaranItalic', true ); ?>>BBaranItalic</option>
	<option value="BBaranOutline" <?php selected( get_option('h1_font'), 'BBaranOutline', true ); ?>>BBaranOutline</option>
	<option value="BBaranOutlineItalic" <?php selected( get_option('h1_font'), 'BBaranOutlineItalic', true ); ?>>BBaranOutlineItalic</option>
	<option value="BBardiya" <?php selected( get_option('h1_font'), 'BBardiya', true ); ?>>BBardiya</option>
	<option value="BBardiyaBold" <?php selected( get_option('h1_font'), 'BBardiyaBold', true ); ?>>BBardiyaBold</option>
	<option value="BCheshmeh" <?php selected( get_option('h1_font'), 'BCheshmeh', true ); ?>>BCheshmeh</option>
	<option value="BCheshmehBold" <?php selected( get_option('h1_font'), 'BCheshmehBold', true ); ?>>BCheshmehBold</option>
	<option value="BChini" <?php selected( get_option('h1_font'), 'BChini', true ); ?>>BChini</option>
	<option value="BCompset" <?php selected( get_option('h1_font'), 'BCompset', true ); ?>>BCompset</option>
	<option value="BCompsetBold" <?php selected( get_option('h1_font'), 'BCompsetBold', true ); ?>>BCompsetBold</option>
	<option value="BDavat" <?php selected( get_option('h1_font'), 'BDavat', true ); ?>>BDavat</option>
	<option value="BElham" <?php selected( get_option('h1_font'), 'BElham', true ); ?>>BElham</option>
	<option value="BElm" <?php selected( get_option('h1_font'), 'BElm', true ); ?>>BElm</option>
	<option value="BElmBorder" <?php selected( get_option('h1_font'), 'BElmBorder', true ); ?>>BElmBorder</option>
	<option value="BElmItalic" <?php selected( get_option('h1_font'), 'BElmItalic', true ); ?>>BElmItalic</option>
	<option value="BEsfehanBold" <?php selected( get_option('h1_font'), 'BEsfehanBold', true ); ?>>BEsfehanBold</option>
	<option value="BFantezy" <?php selected( get_option('h1_font'), 'BFantezy', true ); ?>>BFantezy</option>
	<option value="BFarnaz" <?php selected( get_option('h1_font'), 'BFarnaz', true ); ?>>BFarnaz</option>
	<option value="BFerdosi" <?php selected( get_option('h1_font'), 'BFerdosi', true ); ?>>BFerdosi</option>
	<option value="BHaleh" <?php selected( get_option('h1_font'), 'BHaleh', true ); ?>>BHaleh</option>
	<option value="BHalehBold" <?php selected( get_option('h1_font'), 'BHalehBold', true ); ?>>BHalehBold</option>
	<option value="BHamid" <?php selected( get_option('h1_font'), 'BHamid', true ); ?>>BHamid</option>
	<option value="BHelal" <?php selected( get_option('h1_font'), 'BHelal', true ); ?>>BHelal</option>
	<option value="BHoma" <?php selected( get_option('h1_font'), 'BHoma', true ); ?>>BHoma</option>
	<option value="BJadidBold" <?php selected( get_option('h1_font'), 'BJadidBold', true ); ?>>BJadidBold</option>
	<option value="BJalal" <?php selected( get_option('h1_font'), 'BJalal', true ); ?>>BJalal</option>
	<option value="BJalalBold" <?php selected( get_option('h1_font'), 'BJalalBold', true ); ?>>BJalalBold</option>
	<option value="BJohar" <?php selected( get_option('h1_font'), 'BJohar', true ); ?>>BJohar</option>
	<option value="BKaj" <?php selected( get_option('h1_font'), 'BKaj', true ); ?>>BKaj</option>
	<option value="BKamran" <?php selected( get_option('h1_font'), 'BKamran', true ); ?>>BKamran</option>
	<option value="BKamranBold" <?php selected( get_option('h1_font'), 'BKamranBold', true ); ?>>BKamranBold</option>
	<option value="BKamranOutline" <?php selected( get_option('h1_font'), 'BKamranOutline', true ); ?>>BKamranOutline</option>
	<option value="BKarim" <?php selected( get_option('h1_font'), 'BKarim', true ); ?>>BKarim</option>
	<option value="BKarimBold" <?php selected( get_option('h1_font'), 'BKarimBold', true ); ?>>BKarimBold</option>
	<option value="BKaveh" <?php selected( get_option('h1_font'), 'BKaveh', true ); ?>>BKaveh</option>
	<option value="BKidnap" <?php selected( get_option('h1_font'), 'BKidnap', true ); ?>>BKidnap</option>
	<option value="BKoodakBold" <?php selected( get_option('h1_font'), 'BKoodakBold', true ); ?>>BKoodakBold</option>
	<option value="BKoodakOutline" <?php selected( get_option('h1_font'), 'BKoodakOutline', true ); ?>>BKoodakOutline</option>
	<option value="BKourosh" <?php selected( get_option('h1_font'), 'BKourosh', true ); ?>>BKourosh</option>
	<option value="BLotus" <?php selected( get_option('h1_font'), 'BLotus', true ); ?>>BLotus</option>
	<option value="BLotusBold" <?php selected( get_option('h1_font'), 'BLotusBold', true ); ?>>BLotusBold</option>
	<option value="BMah" <?php selected( get_option('h1_font'), 'BMah', true ); ?>>BMah</option>
	<option value="BMahsa" <?php selected( get_option('h1_font'), 'BMahsa', true ); ?>>BMahsa</option>
	<option value="BMajidShadow" <?php selected( get_option('h1_font'), 'BMajidShadow', true ); ?>>BMajidShadow</option>
	<option value="BMashhad" <?php selected( get_option('h1_font'), 'BMashhad', true ); ?>>BMashhad</option>
	<option value="BMashhadBold" <?php selected( get_option('h1_font'), 'BMashhadBold', true ); ?>>BMashhadBold</option>
	<option value="BMashhadBoldItalic" <?php selected( get_option('h1_font'), 'BMashhadBoldItalic', true ); ?>>BMashhadBoldItalic</option>
	<option value="BMashhadItalic" <?php selected( get_option('h1_font'), 'BMashhadItalic', true ); ?>>BMashhadItalic</option>
	<option value="BMasjed" <?php selected( get_option('h1_font'), 'BMasjed', true ); ?>>BMasjed</option>
	<option value="BMedad" <?php selected( get_option('h1_font'), 'BMedad', true ); ?>>BMedad</option>
	<option value="BMehrBold" <?php selected( get_option('h1_font'), 'BMehrBold', true ); ?>>BMehrBold</option>
	<option value="BMitra" <?php selected( get_option('h1_font'), 'BMitra', true ); ?>>BMitra</option>
	<option value="BMitraBold" <?php selected( get_option('h1_font'), 'BMitraBold', true ); ?>>BMitraBold</option>
	<option value="BMoj" <?php selected( get_option('h1_font'), 'BMoj', true ); ?>>BMoj</option>
	<option value="BMorvarid" <?php selected( get_option('h1_font'), 'BMorvarid', true ); ?>>BMorvarid</option>
	<option value="BNarenj" <?php selected( get_option('h1_font'), 'BNarenj', true ); ?>>BNarenj</option>
	<option value="BNarm" <?php selected( get_option('h1_font'), 'BNarm', true ); ?>>BNarm</option>
	<option value="BNasimBold" <?php selected( get_option('h1_font'), 'BNasimBold', true ); ?>>BNasimBold</option>
	<option value="BNazanin" <?php selected( get_option('h1_font'), 'BNazanin', true ); ?>>BNazanin</option>
	<option value="BNazaninBold" <?php selected( get_option('h1_font'), 'BNazaninBold', true ); ?>>BNazaninBold</option>
	<option value="BNazaninOutline" <?php selected( get_option('h1_font'), 'BNazaninOutline', true ); ?>>BNazaninOutline</option>
	<option value="BNikiBorder" <?php selected( get_option('h1_font'), 'BNikiBorder', true ); ?>>BNikiBorder</option>
	<option value="BNikiBorderItalic" <?php selected( get_option('h1_font'), 'BNikiBorderItalic', true ); ?>>BNikiBorderItalic</option>
	<option value="BNikiOutline" <?php selected( get_option('h1_font'), 'BNikiOutline', true ); ?>>BNikiOutline</option>
	<option value="BNikiOutlineItalic" <?php selected( get_option('h1_font'), 'BNikiOutlineItalic', true ); ?>>BNikiOutlineItalic</option>
	<option value="BNikiShadow" <?php selected( get_option('h1_font'), 'BNikiShadow', true ); ?>>BNikiShadow</option>
	<option value="BNikiShadowItalic" <?php selected( get_option('h1_font'), 'BNikiShadowItalic', true ); ?>>BNikiShadowItalic</option>
	<option value="BNikoo" <?php selected( get_option('h1_font'), 'BNikoo', true ); ?>>BNikoo</option>
	<option value="BNikooItalic" <?php selected( get_option('h1_font'), 'BNikooItalic', true ); ?>>BNikooItalic</option>
	<option value="BPaatch" <?php selected( get_option('h1_font'), 'BPaatch', true ); ?>>BPaatch</option>
	<option value="BPaatchBold" <?php selected( get_option('h1_font'), 'BPaatchBold', true ); ?>>BPaatchBold</option>
	<option value="BRose" <?php selected( get_option('h1_font'), 'BRose', true ); ?>>BRose</option>
	<option value="BRoya" <?php selected( get_option('h1_font'), 'BRoya', true ); ?>>BRoya</option>
	<option value="BRoyaBold" <?php selected( get_option('h1_font'), 'BRoyaBold', true ); ?>>BRoyaBold</option>
	<option value="BSahar" <?php selected( get_option('h1_font'), 'BSahar', true ); ?>>BSahar</option>
	<option value="BSahra" <?php selected( get_option('h1_font'), 'BSahra', true ); ?>>BSahra</option>
	<option value="BSara" <?php selected( get_option('h1_font'), 'BSara', true ); ?>>BSara</option>
	<option value="BSepideh" <?php selected( get_option('h1_font'), 'BSepideh', true ); ?>>BSepideh</option>
	<option value="BSepidehOutline" <?php selected( get_option('h1_font'), 'BSepidehOutline', true ); ?>>BSepidehOutline</option>
	<option value="BSetareh" <?php selected( get_option('h1_font'), 'BSetareh', true ); ?>>BSetareh</option>
	<option value="BSetarehBold" <?php selected( get_option('h1_font'), 'BSetarehBold', true ); ?>>BSetarehBold</option>
	<option value="BShadi" <?php selected( get_option('h1_font'), 'BShadi', true ); ?>>BShadi</option>
	<option value="BShiraz" <?php selected( get_option('h1_font'), 'BShiraz', true ); ?>>BShiraz</option>
	<option value="BShirazItalic" <?php selected( get_option('h1_font'), 'BShirazItalic', true ); ?>>BShirazItalic</option>
	<option value="BSiavash" <?php selected( get_option('h1_font'), 'BSiavash', true ); ?>>BSiavash</option>
	<option value="BSinaBold" <?php selected( get_option('h1_font'), 'BSinaBold', true ); ?>>BSinaBold</option>
	<option value="BSooreh" <?php selected( get_option('h1_font'), 'BSooreh', true ); ?>>BSooreh</option>
	<option value="BSoorehBold" <?php selected( get_option('h1_font'), 'BSoorehBold', true ); ?>>BSoorehBold</option>
	<option value="BSorkhpust" <?php selected( get_option('h1_font'), 'BSorkhpust', true ); ?>>BSorkhpust</option>
	<option value="BTabassom" <?php selected( get_option('h1_font'), 'BTabassom', true ); ?>>BTabassom</option>
	<option value="BTanab" <?php selected( get_option('h1_font'), 'BTanab', true ); ?>>BTanab</option>
	<option value="BTawfigOutline" <?php selected( get_option('h1_font'), 'BTawfigOutline', true ); ?>>BTawfigOutline</option>
	<option value="BTehran" <?php selected( get_option('h1_font'), 'BTehran', true ); ?>>BTehran</option>
	<option value="BTehranItalic" <?php selected( get_option('h1_font'), 'BTehranItalic', true ); ?>>BTehranItalic</option>
	<option value="BTir" <?php selected( get_option('h1_font'), 'BTir', true ); ?>>BTir</option>
	<option value="BTitrBold" <?php selected( get_option('h1_font'), 'BTitrBold', true ); ?>>BTitrBold</option>
	<option value="BTraffic" <?php selected( get_option('h1_font'), 'BTraffic', true ); ?>>BTraffic</option>
	<option value="BTrafficBold" <?php selected( get_option('h1_font'), 'BTrafficBold', true ); ?>>BTrafficBold</option>
	<option value="BVahidBold" <?php selected( get_option('h1_font'), 'BVahidBold', true ); ?>>BVahidBold</option>
	<option value="BVosta" <?php selected( get_option('h1_font'), 'BVosta', true ); ?>>BVosta</option>
	<option value="BVostaItalic" <?php selected( get_option('h1_font'), 'BVostaItalic', true ); ?>>BVostaItalic</option>
	<option value="BYagut" <?php selected( get_option('h1_font'), 'BYagut', true ); ?>>BYagut</option>
	<option value="BYagutBold" <?php selected( get_option('h1_font'), 'BYagutBold', true ); ?>>BYagutBold</option>
	<option value="BYas" <?php selected( get_option('h1_font'), 'BYas', true ); ?>>BYas</option>
	<option value="BYasBold" <?php selected( get_option('h1_font'), 'BYasBold', true ); ?>>BYasBold</option>
	<option value="BYekan" <?php selected( get_option('h1_font'), 'BYekan', true ); ?>>BYekan</option>
	<option value="BYekanBold" <?php selected( get_option('h1_font'), 'BYekanBold', true ); ?>>BYekanBold</option>
	<option value="BZaman" <?php selected( get_option('h1_font'), 'BZaman', true ); ?>>BZaman</option>
	<option value="BZar" <?php selected( get_option('h1_font'), 'BZar', true ); ?>>BZar</option>
	<option value="BZarBold" <?php selected( get_option('h1_font'), 'BZarBold', true ); ?>>BZarBold</option>
	<option value="BZiba" <?php selected( get_option('h1_font'), 'BZiba', true ); ?>>BZiba</option>

	</optgroup>
	</select>
	</label>
		<!--  START CODE: Style Section  -->

<div class="ff-style-main">
    <div class="ff-style-view" id="style_view_h1"> <?php echo esc_html__("Style", 'font-farsi'); ?> </div>
        <div class="ff-style-panel" id="style_view_panel_h1">

            <div class="ff-style-panel-child" id="">
				<!-- Border Section -->
                 <div class="ff-style-title" id="ff-style-title-border_h1"><?php echo esc_html__("Border", 'font-farsi'); ?></div>
                  <div class="ff-style-panel-view" id="ff-style-panel-border_h1">
                    <p class="notice notice-info ff-style-panel-view-p">
                        <?php echo esc_html__("set border settings", 'font-farsi'); ?>
                    </p>
					<!-- Top -->
                    <fieldset>
                        <legend>
                            <?php echo esc_html__("Up", 'font-farsi'); ?>
                        </legend>
                        <input id="hfont_1_border_top_color" name="hfont_1_f_style_border_top_color_#1" value="<?php echo get_option('hfont_1_f_style_border_top_color_#1');?>" type="text" />
                     <select name="hfont_1_f_style_border_top_style_#1" id="hfont_1_f_style_border_top_style_1">
                      <option value="solid" <?php selected( get_option('hfont_1_f_style_border_top_style_#1'), 'solid', true );?>>solid</option>
                      <option value="dotted" <?php selected( get_option('hfont_1_f_style_border_top_style_#1'), 'dotted', true );?>>dotted</option>
                      <option value="dashed" <?php selected( get_option('hfont_1_f_style_border_top_style_#1'), 'dashed', true );?>>dashed</option>
                      <option value="double" <?php selected( get_option('hfont_1_f_style_border_top_style_#1'), 'double', true );?>>double</option>
                      <option value="groove" <?php selected( get_option('hfont_1_f_style_border_top_style_#1'), 'groove', true );?>>groove</option>
                      <option value="ridge" <?php selected( get_option('hfont_1_f_style_border_top_style_#1'), 'ridge', true );?>>ridge</option>
                      <option value="inset" <?php selected( get_option('hfont_1_f_style_border_top_style_#1'), 'inset', true );?>>inset</option>
                      <option value="outset" <?php selected( get_option('hfont_1_f_style_border_top_style_#1'), 'outset', true );?>>outset</option>
                      <option value="none" <?php selected( get_option('hfont_1_f_style_border_top_style_#1'), 'none', true );?>>none</option>
                    </select>
                        <input class="hfont_1_f_style_border_top_width_1" type="number" min="0" max="1000" class="numinput" onkeypress="return isNumberKey(event)" name="hfont_1_f_style_border_top_width_#1" id="txtChar" value="<?php echo  get_option('hfont_1_f_style_border_top_width_#1');?>" /><br>
                    </fieldset>
					<!-- Bottom -->
                    <fieldset>
                        <legend>
                            <?php echo esc_html__("Down", 'font-farsi'); ?>
                        </legend>
                        <input id="hfont_1_border_bottom_color" name="hfont_1_f_style_border_bottom_color_#1" value="<?php echo get_option('hfont_1_f_style_border_bottom_color_#1');?>" type="text" />
                        <select name="hfont_1_f_style_border_bottom_style_#1" id="hfont_1_f_style_border_bottom_style_1">
                      <option value="solid" <?php selected( get_option('hfont_1_f_style_border_bottom_style_#1'), 'solid', true );?>>solid</option>
                      <option value="dotted" <?php selected( get_option('hfont_1_f_style_border_bottom_style_#1'), 'dotted', true );?>>dotted</option>
                      <option value="dashed" <?php selected( get_option('hfont_1_f_style_border_bottom_style_#1'), 'dashed', true );?>>dashed</option>
                      <option value="double" <?php selected( get_option('hfont_1_f_style_border_bottom_style_#1'), 'double', true );?>>double</option>
                      <option value="groove" <?php selected( get_option('hfont_1_f_style_border_bottom_style_#1'), 'groove', true );?>>groove</option>
                      <option value="ridge" <?php selected( get_option('hfont_1_f_style_border_bottom_style_#1'), 'ridge', true );?>>ridge</option>
                      <option value="inset" <?php selected( get_option('hfont_1_f_style_border_bottom_style_#1'), 'inset', true );?>>inset</option>
                      <option value="outset" <?php selected( get_option('hfont_1_f_style_border_bottom_style_#1'), 'outset', true );?>>outset</option>
                      <option value="none" <?php selected( get_option('hfont_1_f_style_border_bottom_style_#1'), 'none', true );?>>none</option>
                    </select>
                        <input class="hfont_1_f_style_border_bottom_width_1" type="number" min="0" max="1000" class="numinput" onkeypress="return isNumberKey(event)" id="txtChar" name="hfont_1_f_style_border_bottom_width_#1" value="<?php echo  get_option('hfont_1_f_style_border_bottom_width_#1');?>" /><br>
                    </fieldset>
					<!-- Right -->
                    <fieldset>
                        <legend>
                            <?php echo esc_html__("Right", 'font-farsi'); ?>
                        </legend>
                        <input id="hfont_1_border_right_color" type="text" name="hfont_1_f_style_border_right_color_#1" value="<?php echo get_option('hfont_1_f_style_border_right_color_#1');?>" />
                        <select name="hfont_1_f_style_border_right_style_#1" id="hfont_1_f_style_border_right_style_1">
                      <option value="solid" <?php selected( get_option('hfont_1_f_style_border_right_style_#1'), 'solid', true );?>>solid</option>
                      <option value="dotted" <?php selected( get_option('hfont_1_f_style_border_right_style_#1'), 'dotted', true );?>>dotted</option>
                      <option value="dashed" <?php selected( get_option('hfont_1_f_style_border_right_style_#1'), 'dashed', true );?>>dashed</option>
                      <option value="double" <?php selected( get_option('hfont_1_f_style_border_right_style_#1'), 'double', true );?>>double</option>
                      <option value="groove" <?php selected( get_option('hfont_1_f_style_border_right_style_#1'), 'groove', true );?>>groove</option>
                      <option value="ridge" <?php selected( get_option('hfont_1_f_style_border_right_style_#1'), 'ridge', true );?>>ridge</option>
                      <option value="inset" <?php selected( get_option('hfont_1_f_style_border_right_style_#1'), 'inset', true );?>>inset</option>
                      <option value="outset" <?php selected( get_option('hfont_1_f_style_border_right_style_#1'), 'outset', true );?>>outset</option>
                      <option value="none" <?php selected( get_option('hfont_1_f_style_border_right_style_#1'), 'none', true );?>>none</option>
                    </select>
                        <input class="hfont_1_f_style_border_right_width_1" type="number" min="0" max="1000" class="numinput" onkeypress="return isNumberKey(event)" name="hfont_1_f_style_border_right_width_#1" value="<?php echo  get_option('hfont_1_f_style_border_right_width_#1');?>" /><br>
                    </fieldset>
					<!-- Left -->
                    <fieldset>
                        <legend>
                            <?php echo esc_html__("Left", 'font-farsi'); ?>
                        </legend>
                        <input id="hfont_1_border_left_color" type="text" name="hfont_1_f_style_border_left_color_#1" value="<?php echo get_option('hfont_1_f_style_border_left_color_#1');?>"/>
                        <select name="hfont_1_f_style_border_left_style_#1" id="hfont_1_f_style_border_left_style_1">
                      <option value="solid" <?php selected( get_option('hfont_1_f_style_border_left_style_#1'), 'solid', true );?>>solid</option>
                      <option value="dotted" <?php selected( get_option('hfont_1_f_style_border_left_style_#1'), 'dotted', true );?>>dotted</option>
                      <option value="dashed" <?php selected( get_option('hfont_1_f_style_border_left_style_#1'), 'dashed', true );?>>dashed</option>
                      <option value="double" <?php selected( get_option('hfont_1_f_style_border_left_style_#1'), 'double', true );?>>double</option>
                      <option value="groove" <?php selected( get_option('hfont_1_f_style_border_left_style_#1'), 'groove', true );?>>groove</option>
                      <option value="ridge" <?php selected( get_option('hfont_1_f_style_border_left_style_#1'), 'ridge', true );?>>ridge</option>
                      <option value="inset" <?php selected( get_option('hfont_1_f_style_border_left_style_#1'), 'inset', true );?>>inset</option>
                      <option value="outset" <?php selected( get_option('hfont_1_f_style_border_left_style_#1'), 'outset', true );?>>outset</option>
                      <option value="none" <?php selected( get_option('hfont_1_f_style_border_left_style_#1'), 'none', true );?>>none</option>
                    </select>
                        <input class="hfont_1_f_style_border_left_width_1" type="number" min="0" max="1000" class="numinput" onkeypress="return isNumberKey(event)" name="hfont_1_f_style_border_left_width_#1" value="<?php echo  get_option('hfont_1_f_style_border_left_width_#1');?>" /><br>
                    </fieldset>
                    <br>
                    <fieldset>
                        <legend><?php echo esc_html__("Border Radius", 'font-farsi'); ?></legend>
                        <div class="ff-style-border-radius">
							<!-- Border Radius Section -->
                             <input type="range" min="0" max="100" value="<?php echo  get_option('hfont_1_f_style_border_radius_value_#1');?>" class="slider" id="hfont_1_f_style_border_radius_range_1">
                             <select name="hfont_1_f_style_border_radius_value_unit_#1" id="hfont_1_f_style_border_radius_value_unit_1">
                                 <option value="%" <?php selected( get_option('hfont_1_f_style_border_radius_value_unit_#1'), '%', true );?>>%</option>
                                 <option value="px" <?php selected( get_option('hfont_1_f_style_border_radius_value_unit_#1'), 'px', true );?>>px</option>
                             </select>
                             <input name="hfont_1_f_style_border_radius_value_#1" type="text" id="hfont_1_f_style_border_radius_value_1" value="<?php echo  get_option('hfont_1_f_style_border_radius_value_#1');?>" ></input><span><?php echo esc_html__("Value: ", 'font-farsi'); ?></span>
                        </div>
                    </fieldset>
                </div>
             </div>

            <div class="ff-style-panel-child">
					<!-- Padding Section -->
                 <div class="ff-style-title" id="ff-style-title-padding_c1"><?php echo esc_html__("Padding", 'font-farsi'); ?> </div>
                <div class="ff-style-panel-view" id="ff-style-panel-padding_c1">
                         <p class="notice notice-info ff-style-panel-view-p">
                            <?php echo esc_html__("units in px.", 'font-farsi'); ?>
                        </p>
                    <div class="ff-style-panel-view-display">
					<!-- Top -->
                     <label for="hfont_1_f_style_padding_top_1"><?php echo esc_html__("Up", 'font-farsi'); ?></label>
					 <input id="hfont_1_f_style_padding_top_1" name="hfont_1_f_style_padding_top_#1" value="<?php echo get_option('hfont_1_f_style_padding_top_#1');?>" type="text" class="numinput" /> <br>
                     <!-- Bottom -->
					 <label for="hfont_1_f_style_padding_bottom_1"><?php echo esc_html__("Down", 'font-farsi'); ?></label>
					 <input id="hfont_1_f_style_padding_bottom_1" name="hfont_1_f_style_padding_bottom_#1" value="<?php echo get_option('hfont_1_f_style_padding_bottom_#1');?>" type="text" onkeypress="return isNumberKey(event)" /> <br>
                     <!-- Right -->
					 <label for="hfont_1_f_style_padding_right_1"><?php echo esc_html__("Right", 'font-farsi'); ?></label>
					 <input id="hfont_1_f_style_padding_right_1" name="hfont_1_f_style_padding_right_#1" value="<?php echo get_option('hfont_1_f_style_padding_right_#1');?>" type="text" onkeypress="return isNumberKey(event)" /> <br>
                     <!-- Left -->
					 <label for="hfont_1_f_style_padding_left_1"><?php echo esc_html__("Left", 'font-farsi'); ?></label>
					 <input id="hfont_1_f_style_padding_left_1" name="hfont_1_f_style_padding_left_#1" value="<?php echo get_option('hfont_1_f_style_padding_left_#1');?>" type="text" onkeypress="return isNumberKey(event)" /> <br>
                     </div>
                </div>
             </div>

            <div class="ff-style-panel-child">
				<!-- Margin Section -->
                 <div class="ff-style-title" id="ff-style-title-margin_c1"><?php echo esc_html__("Margin", 'font-farsi'); ?></div>
                 <div class="ff-style-panel-view" id="ff-style-panel-margin_c1">
                    <p class="notice notice-info ff-style-panel-view-p">
                            <?php echo esc_html__("units in px.", 'font-farsi'); ?>
                        </p>
                    <div class="ff-style-panel-view-display">
						 <!-- Top -->
						 <label for="hfont_1_f_style_margin_top_1"><?php echo esc_html__("Up", 'font-farsi'); ?></label>
						 <input id="hfont_1_f_style_margin_top_1" class="numinput" type="text" name="hfont_1_f_style_margin_top_#1" value="<?php echo get_option('hfont_1_f_style_margin_top_#1');?>" /><br>
						 <!-- Bottom -->
						 <label for="hfont_1_f_style_margin_bottom_1"><?php echo esc_html__("Down", 'font-farsi'); ?></label>
						 <input id="hfont_1_f_style_margin_bottom_1" class="numinput" type="text" name="hfont_1_f_style_margin_bottom_#1" value="<?php echo get_option('hfont_1_f_style_margin_bottom_#1');?>" /><br>
						 <!-- Right -->
						 <label for="hfont_1_f_style_margin_right_1"><?php echo esc_html__("Right", 'font-farsi'); ?></label>
						 <input id="hfont_1_f_style_margin_right_1" class="numinput" type="text" name="hfont_1_f_style_margin_right_#1" value="<?php echo get_option('hfont_1_f_style_margin_right_#1');?>"/><br>
						 <!-- Left -->
						 <label for="hfont_1_f_style_margin_left_1"><?php echo esc_html__("Left", 'font-farsi'); ?></label>
						 <input id="hfont_1_f_style_margin_left_1" class="numinput" type="text" name="hfont_1_f_style_margin_left_#1" value="<?php echo get_option('hfont_1_f_style_margin_left_#1');?>"/><br>
                    </div>
                </div>
             </div>
        </div>

         <div class="ff-style-panel" id="style_view_panel_h1">
		 <!-- Background Section -->
                <div class="ff-style-panel-child">
                 <div class="ff-style-title" id="ff-style-title-background_h1"><?php echo esc_html__("Background", 'font-farsi'); ?></div>
                  <div class="ff-style-panel-view" id="ff-style-panel-background_h1">
                    <p class="notice notice-info ff-style-panel-view-p">
                            <?php echo esc_html__("Select Background Color", 'font-farsi'); ?>
                        </p>
                        <div class="ff-style-panel-view-display">
                             <input type="text" id="hfont_1_f_style_background_color_1" name="hfont_1_f_style_background_color_#1" value="<?php echo get_option('hfont_1_f_style_background_color_#1');?>"/>
                  </div>
                </div>
             </div>

            <div class="ff-style-panel-child">
			<!-- Text Align Section -->
                 <div class="ff-style-title" id="ff-style-title-textalign_h1"><?php echo esc_html__("Text Align", 'font-farsi'); ?></div>
                <div class="ff-style-panel-view" id="ff-style-panel-textalign_h1">
                     <p class="notice notice-info ff-style-panel-view-p">
					 <?php echo esc_html__("Text Align", 'font-farsi'); ?></p>
                     <div class="ff-style-panel-view-display">
                         <select class="ff-style-select" name="hfont_1_f_style_textalign_#1" id="hfont_1_f_style_textalign_1">
                             <option value="right" <?php selected( get_option('hfont_1_f_style_textalign_#1'), 'right', true );?>><?php echo esc_html__("Right", 'font-farsi'); ?></option>
                             <option value="center" <?php selected( get_option('hfont_1_f_style_textalign_#1'), 'center', true );?>><?php echo esc_html__("Center", 'font-farsi'); ?></option>
                             <option value="left" <?php selected( get_option('hfont_1_f_style_textalign_#1'), 'left', true );?>><?php echo esc_html__("Left", 'font-farsi'); ?></option>
                             <option value="justify" <?php selected( get_option('hfont_1_f_style_textalign_#1'), 'justify', true );?>><?php echo esc_html__("Justify", 'font-farsi'); ?></option>
                         </select>
                     </div>
                </div>
             </div>
         </div>
		 
</div>
<!-- END STYLE -->	
	
	<!-- Preview Section -->
	<div class="preview">
			<span class="span-style" id="h1span" style="
			display:block !important;
			transition:all ease .5s;
			font-size:<?php echo get_option('h1_font_size') . get_option('h1_font_unit');?> !important;
			font-family:<?php echo get_option('h1_font');?> !important;
			color:#<?php echo get_option('h1_font_color');?> !important;
			line-height:<?php echo get_option('h1_font_line_height');?>% !important;
			margin-top:<?php echo get_option('hfont_1_f_style_margin_top_#1');?>px !important;
			margin-bottom:<?php echo get_option('hfont_1_f_style_margin_bottom_#1');?>px !important;
			margin-right:<?php echo get_option('hfont_1_f_style_margin_right_#1');?>px !important;
			margin-left:<?php echo get_option('hfont_1_f_style_margin_left_#1');?>px !important;
			padding-top:<?php echo get_option('hfont_1_f_style_padding_top_#1');?>px !important;
			padding-bottom:<?php echo get_option('hfont_1_f_style_padding_bottom_#1');?>px !important;
			padding-right:<?php echo get_option('hfont_1_f_style_padding_right_#1');?>px !important;
			padding-left:<?php echo get_option('hfont_1_f_style_padding_left_#1');?>px !important;
			border-top:<?php echo get_option('hfont_1_f_style_border_top_width_#1') . 'px ' .get_option('hfont_1_f_style_border_top_style_#1') .' '. get_option('hfont_1_f_style_border_top_color_#1');?> !important;
			border-bottom:<?php echo get_option('hfont_1_f_style_border_bottom_width_#1') . 'px ' .get_option('hfont_1_f_style_border_bottom_style_#1') .' '. get_option('hfont_1_f_style_border_bottom_color_#1');?> !important;
			border-right:<?php echo get_option('hfont_1_f_style_border_right_width_#1') . 'px ' .get_option('hfont_1_f_style_border_right_style_#1') .' '. get_option('hfont_1_f_style_border_right_color_#1');?> !important;
			border-left:<?php echo get_option('hfont_1_f_style_border_left_width_#1') . 'px ' .get_option('hfont_1_f_style_border_left_style_#1') .' '. get_option('hfont_1_f_style_border_left_color_#1');?> !important;
			border-radius:<?php echo get_option('hfont_1_f_style_border_radius_value_#1') . get_option('hfont_1_f_style_border_radius_value_unit_#1');?> !important;
			background-color:<?php echo get_option('hfont_1_f_style_background_color_#1');?> !important;
			text-align: <?php echo get_option('hfont_1_f_style_textalign_#1');?> !important;
			"><?php echo esc_html__("Example Font Style", 'font-farsi'); ?>
			</span>
	</div>
	<!-- END: Preview Section -->

	</div>	
	<?php echo "<div class='submit_button'>";
	submit_button();
	echo "</div>";
	?>
<!-- END ALL SECTION -->
</div>
	

<?php	
}

// END ClassH1Font
}