<div style="position:relative; display: flex;">
    <!--  <label class="property-label" data-text="displayName"></label> -->

    <span data-class="isDefault:hidden" class="property-changed-dot"></span>

    <div style="display: flex; position: relative; flex: 1; padding-top: 4px; padding-bottom: 4px; margin-left: 20px; align-items: center; justify-content: center;">
        <!-- Vertical align bottom -->
        <div class="align-icon" data-tooltip="Vertical align bottom" data-comp="vertical" data-value="bottom">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="25px" height="25px">
                <path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z" /></svg>
        </div>

        <!-- Vertical align center -->
        <div class="align-icon" data-tooltip="Vertical align center"  data-comp="vertical" data-value="center">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="25px" height="25px">
                <path d="M8 19h3v4h2v-4h3l-4-4-4 4zm8-14h-3V1h-2v4H8l4 4 4-4zM4 11v2h16v-2H4z" /></svg>
        </div>

        <!-- Vertical align top -->
        <div class="align-icon" data-tooltip="Vertical align top"  data-comp="vertical" data-value="top">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="25px" height="25px">
                <path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z" /></svg>
        </div>

        <!-- Horizontal align left -->
        <div class="align-icon" data-tooltip="Horizontal align left" data-comp="horizontal" data-value="left">
            <svg xmlns="http://www.w3.org/2000/svg" transform="rotate(90)" viewBox="0 0 24 24" fill="white" width="25px"
                height="25px">
                <path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z" /></svg>
        </div>

        <!-- Horizontal align center -->
        <div class="align-icon" data-tooltip="Horizontal align center" data-comp="horizontal" data-value="center">
            <svg xmlns="http://www.w3.org/2000/svg" transform="rotate(90)" viewBox="0 0 24 24" fill="white" width="25px"
                height="25px">
                <path d="M8 19h3v4h2v-4h3l-4-4-4 4zm8-14h-3V1h-2v4H8l4 4 4-4zM4 11v2h16v-2H4z" /></svg>
        </div>

        <!-- Horizontal align right -->
        <div class="align-icon" data-tooltip="Horizontal align right" data-comp="horizontal" data-value="right">
            <svg xmlns="http://www.w3.org/2000/svg" transform="rotate(90)" viewBox="0 0 24 24" fill="white" width="25px"
                height="25px">
                <path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z" /></svg>
        </div>

        <!-- Justify left -->
        <div class="align-icon" data-tooltip="Justify left" data-comp="justify" data-value="left">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="25px" height="25px"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"/></svg>
        </div>

        <!-- Justify center -->
        <div class="align-icon" data-tooltip="Justify center" data-comp="justify" data-value="center">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="25px" height="25px"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"/></svg>
        </div>

        <!-- Justify right -->
        <div class="align-icon" data-tooltip="Justify right" data-comp="justify" data-value="right">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="25px" height="25px"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"/></svg>
        </div>        

        <!-- Align items start -->
        <div class="align-icon" data-class="isVertical:align-icon-rotate2" data-tooltip="Align items start" data-comp="align-items" data-value="flex-start">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 8L3 6L21 6L21 8L3 8Z" fill-opacity="0.5"/>
                <rect x="7" y="19" width="10" height="4" transform="rotate(-90 7 19)"/>
                <rect x="13" y="17" width="8" height="4" transform="rotate(-90 13 17)"/>
            </svg>                
        </div>

        <!-- Align items center -->
        <div class="align-icon" data-class="isVertical:align-icon-rotate" data-tooltip="Align items center" data-comp="align-items" data-value="center">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 13L3 11L21 11L21 13L3 13Z" fill-opacity="0.5"/>
                <rect x="7" y="17" width="10" height="4" transform="rotate(-90 7 17)"/>
                <rect x="13" y="16" width="8" height="4" transform="rotate(-90 13 16)"/>
            </svg>
        </div>

        <!-- Align items end -->
        <div class="align-icon" data-class="isVertical:align-icon-rotate2" data-tooltip="Align items end" data-comp="align-items" data-value="flex-end">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 16L21 18L3 18L3 16L21 16Z" fill-opacity="0.5"/>
                <rect x="17" y="5" width="10" height="4" transform="rotate(90 17 5)"/>
                <rect x="11" y="7" width="8" height="4" transform="rotate(90 11 7)"/>
            </svg>    
        </div>

        <!-- Justify content start -->
        <div class="align-icon" data-class="isVertical:align-icon-rotate" data-tooltip="Justify content start" data-comp="justify-content" data-value="flex-start">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 21L1 21L0.999998 3L3 3L3 21Z" fill-opacity="0.5"/>
                <rect x="4" y="17" width="10" height="4" transform="rotate(-90 4 17)"/>
                <rect x="10" y="17" width="10" height="4" transform="rotate(-90 10 17)"/>
            </svg>  
        </div>

        <!-- Justify content center -->
        <div class="align-icon" data-class="isVertical:align-icon-rotate" data-tooltip="Justify content center" data-comp="justify-content" data-value="center">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 3H13V21H11V3Z" fill-opacity="0.5"/>
                <rect x="19" y="7" width="10" height="4" transform="rotate(90 19 7)"/>
                <rect x="9" y="7" width="10" height="4" transform="rotate(90 9 7)"/>
            </svg>    
        </div>

        <!-- Justify content end -->
        <div class="align-icon" data-class="isVertical:align-icon-rotate" data-tooltip="Justify content end" data-comp="justify-content" data-value="flex-end">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 3H23V21H21V3Z" fill-opacity="0.5"/>
                <rect x="20" y="7" width="10" height="4" transform="rotate(90 20 7)"/>
                <rect x="14" y="7" width="10" height="4" transform="rotate(90 14 7)"/>
            </svg>                
        </div>

        <!-- Justify content space between -->
        <div class="align-icon" data-class="isVertical:align-icon-rotate" data-tooltip="Justify content space between" data-comp="justify-content" data-value="space-between">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 21L1 21L0.999998 3L3 3L3 21Z" fill-opacity="0.5"/>
                <path d="M23 21L21 21L21 3L23 3L23 21Z" fill-opacity="0.5"/>
                <rect x="4" y="17" width="10" height="4" transform="rotate(-90 4 17)"/>
                <rect x="16" y="17" width="10" height="4" transform="rotate(-90 16 17)"/>
            </svg>                
        </div>

        <!-- Justify content space around -->
        <div class="align-icon" data-class="isVertical:align-icon-rotate" data-tooltip="Justify content space around" data-comp="justify-content" data-value="space-around">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 21L1 21L0.999998 3L3 3L3 21Z" fill-opacity="0.5"/>
                <path d="M23 21L21 21L21 3L23 3L23 21Z" fill-opacity="0.5"/>
                <rect x="6" y="17" width="10" height="4" transform="rotate(-90 6 17)"/>
                <rect x="14" y="17" width="10" height="4" transform="rotate(-90 14 17)"/>
            </svg>                
        </div>

        <!-- Justify content space evenly -->
        <div class="align-icon" data-class="isVertical:align-icon-rotate" data-tooltip="Justify content space evenly" data-comp="justify-content" data-value="space-evenly">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 21L1 21L0.999998 3L3 3L3 21Z" fill-opacity="0.5"/>
                <path d="M13 21L11 21L11 3L13 3L13 21Z" fill-opacity="0.5"/>
                <path d="M23 21L21 21L21 3L23 3L23 21Z" fill-opacity="0.5"/>
                <rect x="5" y="17" width="10" height="4" transform="rotate(-90 5 17)"/>
                <rect x="15" y="17" width="10" height="4" transform="rotate(-90 15 17)"/>
            </svg>                
        </div>

        <!-- Align content start -->
        <div class="align-icon" data-class="isVertical:align-icon-rotate2" data-tooltip="Align content start" data-comp="align-content" data-value="flex-start">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 3L3 1L21 0.999999L21 3L3 3Z" fill-opacity="0.5"/>
                <rect x="7" y="4" width="10" height="4"/>
                <rect x="7" y="10" width="10" height="4"/>
            </svg>    
        </div>

        <div class="align-icon" data-class="isVertical:align-icon-rotate" data-tooltip="Align content center" data-comp="align-content" data-value="center">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 11L21 13L3 13L3 11L21 11Z" fill-opacity="0.5"/>
                <rect x="17" y="19" width="10" height="4" transform="rotate(180 17 19)"/>
                <rect x="17" y="9" width="10" height="4" transform="rotate(180 17 9)"/>
            </svg>    
        </div>

        <div class="align-icon" data-class="isVertical:align-icon-rotate2" data-tooltip="Align content end" data-comp="align-content" data-value="flex-end">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 21L21 23L3 23L3 21L21 21Z" fill-opacity="0.5"/>
                <rect x="17" y="20" width="10" height="4" transform="rotate(180 17 20)"/>
                <rect x="17" y="14" width="10" height="4" transform="rotate(180 17 14)"/>
            </svg>    
        </div>

        <div class="align-icon" data-class="isVertical:align-icon-rotate" data-tooltip="Align content between" data-comp="align-content" data-value="space-between">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 3L3 1L21 0.999999L21 3L3 3Z" fill-opacity="0.5"/>
                <path d="M3 23L3 21L21 21L21 23L3 23Z" fill-opacity="0.5"/>
                <rect x="7" y="4" width="10" height="4"/>
                <rect x="7" y="16" width="10" height="4"/>
            </svg>    
        </div>

        <div class="align-icon" data-class="isVertical:align-icon-rotate" data-tooltip="Align content around" data-comp="align-content" data-value="space-around">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 3L3 1L21 0.999999L21 3L3 3Z" fill-opacity="0.5"/>
                <path d="M3 13L3 11L21 11L21 13L3 13Z" fill-opacity="0.5"/>
                <path d="M3 23L3 21L21 21L21 23L3 23Z" fill-opacity="0.5"/>
                <rect x="7" y="5" width="10" height="4"/>
                <rect x="7" y="15" width="10" height="4"/>
            </svg>    
        </div>

        <div class="align-icon" data-class="isVertical:align-icon-rotate" data-tooltip="Align content evenly" data-comp="align-content" data-value="space-evenly">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 3L3 1L21 0.999999L21 3L3 3Z" fill-opacity="0.5"/>
                <path d="M3 23L3 21L21 21L21 23L3 23Z" fill-opacity="0.5"/>
                <rect x="7" y="4" width="10" height="7"/>
                <rect x="7" y="13" width="10" height="7"/>
            </svg>    
        </div>
    </div>

    <!-- <div class="sidebar-panel-dark-input property-value" data-click="onDropDownClicked">
        <div style="position:absolute; left:0px; right:0px; top:0px; bottom:0px">
          <input type="string" style="position:absolute; width:100%; height:100%;" class="sidebar-panel-dark-input" data-class="isDefault:property-input-default,isConnected:property-input-connected" data-val="value" readonly></input>
        </div>
  
        <i class="property-input-dropdown-arrow fa fa-caret-down" style="position:absolute; right:10px; top:10px"></i>
        
        <div style="position:absolute; top:35px; left:0px; width:100%; display:none;" class="property-input-dropdown" style="display:none;">
        </div>
      </div> -->
</div>
