<%# recursive file, used so we can go over childrens, childrens' children, etc.%>
    <% if (ctrl.children) { %>
        <% ctrl.children.forEach(field=>{ %>                                   <%# loop over children %>
            <% if(field.controlType !== MgControlType.CTRL_TYPE_TABPAGE) { %>  <%# ignore tab pages %>
                <%if (field.controlType === MgControlType.CTRL_TYPE_TABLE) { %>
                    .<%- field["class_name_in_css"] %>TableContainerProps {
                        <% if (magicConfig.absolute_position === true) {%>
                            position: absolute;
                            top: <%- field.coordinates.y  + 'px' %>;
                            left: <%- field.coordinates.x  + 'px' %>;
                            height: <%- field.coordinates.height + 'px'%>;
                            width: <%- field.coordinates.width + 'px'%>;
                            overflow-y: hidden;
                        <% }%>
                    }
                <% }%>
                .<%- field["class_name_in_css"] %>Props {                                  <%# start style for class (note the "." at the beginning%>
                <% if (magicConfig.absolute_position === true) {%>             <%# if need position %>
                    <% if (typeof parentX !== "undefined") {%>                 <%# if got parents coordinates %>
                        <%if (field.controlType !== MgControlType.CTRL_TYPE_COLUMN) { %> <%# columns have only width %>
                            position: relative;
                            top: <%- (field.coordinates.y-parentY)  + 'px' %>;
                            left: <%- (field.coordinates.x-parentX)  + 'px' %>;
                            height: <%- field.coordinates.height + 'px'%>;
                            width: <%- field.coordinates.width + 'px'%>;          <%# width property%>
                        <% }%>                                                <%# close-if-column%>

                        <% } else {%>                                             <%# else - no-parent-coordinates %>
                        <%if (field.controlType !== MgControlType.CTRL_TYPE_TABLE) { %> <%# columns have only width %>
                        position: absolute;
                        top: <%- field.coordinates.y  + 'px' %>;
                        left: <%- field.coordinates.x  + 'px' %>;
                        <%if (field.controlType !== MgControlType.CTRL_TYPE_CHECKBOX ||
                                (field.controlType === MgControlType.CTRL_TYPE_CHECKBOX &&
                                (field.props.text || ( field.props.text !== undefined && field.props.text.has_exp)))  )  {%>
                                 height: <%- field.coordinates.height + 'px'%>;
                                 width: <%- field.coordinates.width + 'px'%>;
                        <% }%>
                        <% }%>                                                <%# close-if-column%>
                    <% }%>          <%# close else-no-parent-coordinates%>
                <%}%>                                                          <%# close if-need-position %>
                <%if (field.controlType === MgControlType.CTRL_TYPE_BUTTON && field.props.button_style == CtrlButtonTypeGui.Image) { %>
                background-size: 100% 100%;
                <%}%>

                <%if (field.controlType === MgControlType.CTRL_TYPE_LABEL) { %>
                        overflow: hidden;
                <%}%>

                <% if(field.controlType === MgControlType.CTRL_TYPE_TABLE) { %><%# table-specific styles%>
                    <% if(field.props.scroll_bar) { %>
                        height: 800px;
                        overflow-y: scroll;
                    <%}%>
                <% }%>                                                         <%# close table-specific%>

                <% if(field.controlType === MgControlType.CTRL_TYPE_TABLE ||
                      field.controlType === MgControlType.CTRL_TYPE_GROUP) { %> <%# add container border %>
                      border: lightskyblue solid 1px;
                <% }%>

                <% if ( field.controlType === MgControlType.CTRL_TYPE_GROUP &&
                        magicConfig.absolute_position === true && theme === "material" ) {%>
                padding :0px;
                <%}%>


            }                                                                  <%# class style closure %>


            <% if(field.controlType === MgControlType.CTRL_TYPE_TABLE) { %>    <%# style table special case%>
                .<%- field["class_name_in_css"] %>_table_rowProps {                        <%# start a style for the table rows %>
                <% if (magicConfig.absolute_position === true) {%>             <%# if need position %>
                    position: relative;
                    height: <%- field.props.table_row_height %>px;
                    flex-direction: row;
                    display: flex;
                    min-height: 0px;
                    padding-left: inherit;
                <%}%>                                                              <%# close table-special-case%>
                    <% if(field.style && field.style.line_divider !== null && field.style.line_divider !== "undefined") { %>
                        <% if(field.style.line_divider === false) { %>
                            border-bottom-style: hidden;
                        <%}%>
                    <%}%>
                }

                .<%- field.props.id %>_table_rowProps:hover {                  <%# hover over row%>
                    background-color: #EEEEEE;
                }

                <% if (magicConfig.absolute_position === true) {%>             <%# if need position %>
                    .<%- field["class_name_in_css"] %>_table_headerRowProps {                        <%# start a style for the table rows %>
                    min-height: 0px;
                    height: <%- field.props.table_title_height%>px;
                    padding-left: inherit;
                    }
                <%}%>                                                              <%# close table-special-case%>

                .selected {                                                    <%# selected row%>
                    background: #F5F5F5;
                }
            <%}%>                                                              <%# close table-special-case%>

                <% if(field.controlType === MgControlType.CTRL_TYPE_COLUMN) { %>    <%# style table special case%>
                .mat-column-<%- field.props.id %> {                        <%# start a style for the table rows %>
                <% if (magicConfig.absolute_position === true) {%>             <%# if need position %>
                    flex: 0 0 <%- field.coordinates.width + 'px'%>;
                <%}%>
                }
            <%}%>
<%}%>                                                                  <%# close not-a-column %>

        <%if(field.coordinates != null ) { %>   <%# recursive call %>
            <%- include(`view.component.css.ejs`, {ctrl: field, parentX: field.coordinates.x, parentY: field.coordinates.y}) %>
        <% } else { %>
            <%- include(`view.component.css.ejs`, {ctrl: field}) %>
        <%}%>
    <%})%>
<%}%>