<template>
    <tr>
        <td style="width: 20px;"></td>
        <td style="width: 150px;" colspan="2">
            <hr class="invisible" style="margin: 0px;">
        </td>
        <td style="width: 20px;"></td>
    </tr>
    <tr id="section_heading-3">
        <td style="width: 20px;"></td>
        <td colspan="3" class="section_heading_theme">{{title}}</td>
        <td style="width: 20px;"></td>
    </tr>
    <tr>
        <td style="width: 20px;"></td>
        <td style="width: 150px;" colspan="2">
            <hr class="invisible" style="margin: 0px;">
        </td>
        <td style="width: 20px;"></td>
    </tr>
</template>
<script lang="ts">

export default{
    name: 'SectionHeading',
    props:{
        title: { type: String, default: '' }
    }
}
</script>
<style scoped>
.section_heading_theme{
    background-color: var(--section-heading-background-color);
    color: var(--section-heading-color);
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
}
</style>