<div class="row">
    <div class="form-group col-md-9 col-sm-9 col-xs-9">

        <label>Fonts</label>
        <div>
        <!-- <div class="input-group-btn select" id="select1"> -->
            <button type="button" id="btn-show-fonts" class="btn btn-default btn-block btn-show-fonts" >Fonts</button>
        </div>
    </div>
    <div class="form-group col-md-3 col-sm-3 col-xs-3">
        <label>Size (IN)</label>
        <input type="text" class="form-control text-font-size">
    </div>
</div>

<div class="row">
    <div class="form-group col-md-4 col-sm-4 col-xs-4" style="'padding:0px;">
        <label>Font Color</label><br>
        <input type="text" class="fontColor form-control input-sm" />

    </div>
    <div class="form-group col-md-5 col-sm-4 col-xs-4" style="'padding:0px;">
        <label>Outline Color</label><br>
        <input type="text" class="strokeColor" />

    </div>
    <div class="form-group col-md-3 col-sm-3 col-xs-3" style="'padding:0px;">
        <label>Thickness</label>
        <select  class="form-control input-sm outlineThickness" data-outline="strokeColor">
            @define $i
            @for($i=0 ; $i <= 10 ; $i++)
                <option value="{{ $i }}">{{ $i }}</option>';
            @endfor
        </select>
    </div>
</div>

<div class="row">
    <div class="form-group col-md-3 col-sm-3 col-xs-3">
        <label>Spacing</label>
    </div>
    <div class="form-group col-md-6 col-sm-6 col-xs-6">

        <input type="range" class="form-control input-sm spacingTextSlider" value="0" min="-100" max="100"  />
    </div>
    <div class="form-group col-md-3 col-sm-3 col-xs-3">
        <input type="text" style="margin-top:5px;" class="form-control input-sm  text-center spacingTextValue" />
    </div>
</div>

<div class="row">
    <div class="form-group col-md-3 col-sm-3 col-xs-3">
        <label>Rotate</label>
    </div>
    <div class="form-group col-md-6 col-sm-6 col-xs-6">

        <input type="range"  class="form-control input-sm rotateTextSlider" value="0" min="-180" max="180"  />
    </div>
    <div class="form-group col-md-3 col-sm-3 col-xs-3">
        <input type="text" style="margin-top:5px;" class="form-control input-sm text-center rotateTextValue" />
    </div>
</div>
<!-- 
<div class="row">	
    <div class="form-group col-md-12 col-sm-12 col-xs-12">
        <button class="btn btn-md btn-default btn-block" id="teamname_text_shape">Add text Shape</button>
    </div>			
</div> -->

<div class="row">
    <div class="form-group col-md-6 col-sm-6 col-xs-6">
        <label>Layer Order</label><br>
        <button class="btn btn-sm btn-default sendSelectedObjectToFront" title="Bring Forward"></button>
        <button class="btn btn-sm btn-default sendSelectedObjectBack"  title="Send Backward"></button>
    </div>
    <div class="form-group col-md-6 col-sm-6 col-xs-6">
        <label>Position</label><br>
        <!-- <button class="btn btn-sm btn-default " style="margin:2px;" onclick="teamNameStandardPos();">Standard Position</button>
        <button class="btn btn-sm btn-default" style="margin:2px;" onclick="centerVer();"> <img src="images/align-v1.png" height="16px;" /> Center <br>Vertical</button>
        <button class="btn btn-sm btn-default" style="margin:2px;"  onclick="centerHor();" > <img src="images/align-h1.png" height="16px;" /> Center <br>Horizontal</button> -->
        <!-- <button class="btn btn-sm btn-default btn-send-middle" title="Standart Position" onclick="teamNameStandardPos();"></button> -->
        <button class="btn btn-sm btn-default" style="min-width:35px;" title="Center Vertical" onclick="centerVer();"><i class="fa fa-arrows-v"></i></button>
        <button class="btn btn-sm btn-default" style="min-width:35px;" title="Center Horizontal" onclick="centerHor();" ><i class="fa fa-arrows-h"></i></button>
        <button class="btn btn-sm btn-default flip-vertically" style="min-width:35px;" title="Flip Vertically"><i class="fa fa-angle-double-up"></i></button>
        <button class="btn btn-sm btn-default flip-horizontally" style="min-width:35px;" title="Flip Horizontally"><i class="fa fa-angle-double-right"></i></button>

    </div>

</div>