tabexseriescomponents 0.0.665 → 0.0.666

package/{srcoriginal → srcoman}/TabexComponents/Footer/PrivacyPolicy/PrivacyPolicy.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import tabstyles from '../../../styles/general/tabs.module.css';
 import { css } from 'glamor';
-import Staticpagesrouter from '../Staticpagesrouter/Staticpagesrouter.jsx';
+import Staticpagesrouter from '../Staticpagesrouter/Staticpagesrouter.js';
 import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
 
 const PrivacyPolicy = (props) => {

package/{srcoriginal → srcoman}/TabexComponents/Headers/Headerresponsive/HeaderresponsiveStyle2.jsx

@@ -367,261 +367,33 @@ const HeaderresponsiveStyle2 = (props) => {
                                         position: 'relative',
                                     }}
                                 >
-                                    {sectionproperties.logocentered == 'Centered' && (
-                                        <div className="col-md-4 col-sm-3 text-start p-0">
-                                            <div style={{}}>
-                                                <i
-                                                    class={' h-100 allcentered '}
-                                                    style={{
-                                                        color: sectionproperties.resp_sidenav_color,
-                                                    }}
-                                                    onClick={() => {
-                                                        if (sectionproperties.responsiveheaderstyle == 'Style 2') {
-                                                            if (menuactive == true) {
-                                                                setmenuactive(false);
-                                                            } else {
-                                                                setmenuactive(true);
-                                                            }
-                                                        } else {
-                                                            setopenmenuCanvas(true);
-                                                            setactiveTab('menu');
-                                                        }
-                                                    }}
-                                                >
-                                                    {menuactive == false && <FiMenu size={sectionproperties.resp_sidenav_size} color={sectionproperties.resp_sidenav_color} />}
-                                                    {menuactive == true && <AiOutlineClose size={sectionproperties.resp_sidenav_size} color={sectionproperties.resp_sidenav_color} />}
-                                                </i>
-                                            </div>
-                                            {sectionproperties.searchbar_show == 'Show' && (
-                                                <div
-                                                    style={{
-                                                        width: '30px',
-                                                        height: sectionproperties.cart_BtnHeight_resp + 'px',
-                                                    }}
-                                                >
-                                                    <i
-                                                        class="h-100 allcentered"
-                                                        onClick={() => {
-                                                            setopenSearch(true);
-                                                        }}
-                                                    >
-                                                        <IoSearchOutline size={22} color={sectionproperties.cart_BtnTextcolor_resp} />
-                                                    </i>
-                                                </div>
-                                            )}
-                                        </div>
-                                    )}
-                                    {sectionproperties.logocentered == 'Not Centered' && (
-                                        <div className="col-md-6 col-sm-6 d-flex filter align-items-center p-0">
-                                            <div
+                                    <div className="col-md-6 col-sm-6 d-flex filter align-items-center p-0">{InstLogoContainer()}</div>
+                                    <div className="col-md-6 col-sm-6 text-end p-0">
+                                        <div style={{}}>
+                                            <i
+                                                class={' h-100 allcentered '}
                                                 style={{
-                                                    width: sectionproperties.cart_BtnWidth_resp + 'px',
-                                                    height: sectionproperties.cart_BtnHeight_resp + 'px',
+                                                    color: sectionproperties.resp_sidenav_color,
                                                 }}
-                                                class={langdetect == 'en' ? 'mr-2' : 'ml-2'}
-                                            >
-                                                <i
-                                                    class={' h-100 allcentered '}
-                                                    style={{
-                                                        color: sectionproperties.cart_BtnTextcolor_resp,
-                                                    }}
-                                                    onClick={() => {
-                                                        if (sectionproperties.responsiveheaderstyle == 'Style 2') {
-                                                            if (menuactive == true) {
-                                                                setmenuactive(false);
-                                                            } else {
-                                                                setmenuactive(true);
-                                                            }
+                                                onClick={() => {
+                                                    if (sectionproperties.responsiveheaderstyle == 'Style 2') {
+                                                        if (menuactive == true) {
+                                                            setmenuactive(false);
                                                         } else {
-                                                            setopenmenuCanvas(true);
-                                                            setactiveTab('menu');
+                                                            setmenuactive(true);
                                                         }
-                                                    }}
-                                                >
-                                                    {menuactive == false && <FiMenu size={20} color={sectionproperties.cart_BtnTextcolor_resp} />}
-                                                    {menuactive == true && <AiOutlineClose size={20} color={sectionproperties.cart_BtnTextcolor_resp} />}
-                                                </i>
-                                            </div>
-                                            {InstLogoContainer()}
-                                        </div>
-                                    )}
-                                    {sectionproperties.logocentered == 'Centered' && <div className="col-md-4 col-sm-6 allcentered p-0">{InstLogoContainer()}</div>}
-                                    <div
-                                        className={
-                                            sectionproperties.logocentered != 'Centered'
-                                                ? 'col-md-6 col-sm-6 d-flex align-items-center justify-content-end p-0'
-                                                : 'col-md-4 col-sm-3 d-flex align-items-center justify-content-end p-0'
-                                        }
-                                    >
-                                        {sectionproperties.searchbar_show == 'Show' && sectionproperties.logocentered == 'Not Centered' && (
-                                            <div
-                                                style={{
-                                                    width: '30px',
-                                                    height: sectionproperties.cart_BtnHeight_resp + 'px',
-                                                }}
-                                            >
-                                                <i
-                                                    class="h-100 allcentered"
-                                                    onClick={() => {
-                                                        setopenSearch(true);
-                                                    }}
-                                                >
-                                                    <IoSearchOutline size={22} color={sectionproperties.cart_BtnTextcolor_resp} />
-                                                </i>
-                                            </div>
-                                        )}
-                                        {templateproperties_context.showfavorites == 'Show' && (
-                                            <div
-                                                style={{
-                                                    width: '30px',
-                                                    height: sectionproperties.cart_BtnHeight_resp + 'px',
-                                                }}
-                                            >
-                                                <i
-                                                    class="h-100 allcentered"
-                                                    onClick={() => {
-                                                        routingcountext(StaticPagesLinksContext.Wishlist);
-                                                    }}
-                                                >
-                                                    <FaRegHeart size={22} color={sectionproperties.cart_BtnTextcolor_resp} />
-                                                </i>
-                                            </div>
-                                        )}
-                                        {sectionproperties.cartBtnShow == 'Show' && CartButton()}
-                                        {authdetailsContext != undefined && authdetailsContext?.instinfo?.instcurrencies?.length > 1 && (
-                                            <div class={'d-flex align-items-center pl-1 pr-1 pt-1'} style={{}}>
-                                                <Dropdown>
-                                                    <Dropdown.Toggle>
-                                                        <li class={' d-flex align-items-center justify-content-center '}>
-                                                            {langdetect == 'en' && (
-                                                                <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                                    <p class="m-0 p-0 mr-1 ml-1">{authdetailsContext?.currencyname_en}</p>
-                                                                    <MdKeyboardArrowDown />
-                                                                </div>
-                                                            )}
-                                                            {langdetect == 'ar' && (
-                                                                <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                                    <p class="m-0 p-0 ml-1 mr-1">{authdetailsContext?.currencyname_ar}</p>
-                                                                    <MdKeyboardArrowDown />
-                                                                </div>
-                                                            )}
-                                                        </li>
-                                                    </Dropdown.Toggle>
-                                                    <Dropdown.Menu>
-                                                        {authdetailsContext?.instinfo?.instcurrencies?.map(function (item, index) {
-                                                            return (
-                                                                <Dropdown.Item
-                                                                    class="m-0 p-0"
-                                                                    onClick={() => {
-                                                                        setcurrencyfunccontext(item);
-                                                                    }}
-                                                                >
-                                                                    <div class="row m-0 w-100">
-                                                                        <div class="col-lg-12 p-0 d-flex justify-content-start">
-                                                                            <div class={`${header_cssstyles.dropdownitemcontainer}`}>
-                                                                                <p
-                                                                                    class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
-                                                                                    style={{
-                                                                                        fontSize: sectionproperties.dropdown_fontsize + 'px',
-                                                                                        fontWeight: sectionproperties.dropdown_fontweight,
-                                                                                        textTransform: sectionproperties.dropdown_texttransform,
-                                                                                    }}
-                                                                                >
-                                                                                    <FaMoneyBillWave />
-                                                                                    <span class={'ml-2 mr-2'}>{langdetect == 'en' ? item.currencyname_en : item.currencyname_ar}</span>
-                                                                                </p>
-                                                                            </div>
-                                                                        </div>
-                                                                        {index != authdetailsContext?.instinfo?.instcurrencies?.length - 1 && (
-                                                                            <div class="col-lg-12 p-0">
-                                                                                <hr class="m-0" />
-                                                                            </div>
-                                                                        )}
-                                                                    </div>
-                                                                </Dropdown.Item>
-                                                            );
-                                                        })}
-                                                    </Dropdown.Menu>
-                                                </Dropdown>
-                                            </div>
-                                        )}
-                                        {/* here */}
-                                        {sectionproperties.searchbar_show == 'Hide' &&
-                                            sectionproperties.logocentered == 'Centered' &&
-                                            sectionproperties.cartBtnShow == 'Hide' &&
-                                            sectionproperties.favBtnShow == 'Hide' && (
-                                                <div
-                                                    className={'allcentered resposiveheader_languagedropdown'}
-                                                    style={{
-                                                        marginLeft: langdetect == 'en' ? '0.25rem' : 0,
-                                                        marginRight: langdetect == 'ar' ? '0.25rem' : 0,
-                                                    }}
-                                                >
-                                                    {langdetect == 'en' && (
-                                                        <div
-                                                            className={' row m-0 w-100 allcentered '}
-                                                            style={{ direction: 'rtl', color: sectionproperties.cart_BtnTextcolor_resp }}
-                                                            onClick={() => {
-                                                                setlang('ar');
-                                                            }}
-                                                        >
-                                                            <p class="m-0 p-0 font-weight-500">ع</p>
-                                                            <i className={langdetect == 'en' ? 'h-100 allcentered mr-1' : 'h-100 allcentered ml-1'}>
-                                                                <BiChevronDown size={20} />
-                                                            </i>
-                                                        </div>
-                                                    )}
-                                                    {langdetect == 'ar' && (
-                                                        <div
-                                                            className={' row m-0 w-100 allcentered '}
-                                                            style={{ direction: 'ltr', color: sectionproperties.cart_BtnTextcolor_resp }}
-                                                            onClick={() => {
-                                                                setlang('en');
-                                                            }}
-                                                        >
-                                                            <p class="m-0 p-0 font-weight-500 mr-1">En</p>
-                                                            <i className="h-100 allcentered">
-                                                                <BiChevronDown size={20} />
-                                                            </i>
-                                                        </div>
-                                                    )}
-                                                </div>
-                                            )}
-                                        {sectionproperties.logocentered == 'Not Centered' && sectionproperties.showlanuagecontainer == 'Show' && (
-                                            <div
-                                                class={langdetect == 'en' ? ' allcentered m-0 cursor-pointer ml-1 ' : ' m-0 cursor-pointer mr-1 '}
-                                                style={{ minWidth: '30px' }}
-                                                onClick={() => {
-                                                    if (langdetect == 'en') {
-                                                        setlang('ar');
                                                     } else {
-                                                        setlang('en');
+                                                        setopenmenuCanvas(true);
+                                                        setactiveTab('menu');
                                                     }
                                                 }}
                                             >
-                                                {langdetect == 'en' && (
-                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 allcentered w-100 '}>
-                                                        <p class="m-0 p-0 d-flex align-items-center w-100">
-                                                            En{' '}
-                                                            <i class="h-100 allcentered ml-auto pl-3">
-                                                                <BsChevronDown />
-                                                            </i>
-                                                        </p>
-                                                    </div>
-                                                )}
-                                                {langdetect == 'ar' && (
-                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 allcentered w-100 '}>
-                                                        <p class="m-0 p-0 d-flex align-items-center w-100">
-                                                            ع{' '}
-                                                            <i class="h-100 allcentered mr-auto pr-3">
-                                                                <BsChevronDown />
-                                                            </i>
-                                                        </p>
-                                                    </div>
-                                                )}
-                                            </div>
-                                        )}
+                                                {menuactive == false && <FiMenu size={sectionproperties.resp_sidenav_size} color={sectionproperties.resp_sidenav_color} />}
+                                                {menuactive == true && <AiOutlineClose size={sectionproperties.resp_sidenav_size} color={sectionproperties.resp_sidenav_color} />}
+                                            </i>
+                                        </div>
                                     </div>
+
                                     {menuactive == true && (
                                         <div
                                             class="px-4 py-4 scrollvertical"

package/{srcoriginal → srcoman}/TabexComponents/Headers/Modernheader/Modernheader.jsx

@@ -455,28 +455,14 @@ const Modernheader = (props) => {
                                             <li class={' d-flex align-items-center justify-content-center '}>
                                                 {langdetect == 'en' && (
                                                     <div class={' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p
-                                                            class="m-0 p-0 mr-2 ml-2"
-                                                            style={{
-                                                                color: sectionproperties.searchbaricon_color,
-                                                            }}
-                                                        >
-                                                            {authdetailsContext?.currencyname_en}
-                                                        </p>
-                                                        <MdKeyboardArrowDown color={sectionproperties.searchbaricon_color} />
+                                                        <p class="m-0 p-0 mr-2 ml-2">{authdetailsContext?.currencyname_en}</p>
+                                                        <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
                                                 {langdetect == 'ar' && (
                                                     <div class={' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p
-                                                            class="m-0 p-0 ml-2 mr-2"
-                                                            style={{
-                                                                color: sectionproperties.searchbaricon_color,
-                                                            }}
-                                                        >
-                                                            {authdetailsContext?.currencyname_ar}
-                                                        </p>
-                                                        <MdKeyboardArrowDown color={sectionproperties.searchbaricon_color} />
+                                                        <p class="m-0 p-0 ml-2 mr-2">{authdetailsContext?.currencyname_ar}</p>
+                                                        <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
                                             </li>
@@ -498,7 +484,6 @@ const Modernheader = (props) => {
                                                                             fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                                             fontWeight: sectionproperties.dropdown_fontweight,
                                                                             textTransform: sectionproperties.dropdown_texttransform,
-                                                                            color: sectionproperties.searchbaricon_color,
                                                                         }}
                                                                     >
                                                                         <span class={'ml-2 mr-2'}>{langdetect == 'en' ? item.currencyname_en : item.currencyname_ar}</span>

package/{srcoriginal → srcoman}/TabexComponents/Headers/Simpleheader/Simpleheader.jsx

@@ -359,32 +359,7 @@ const Simpleheader = (props) => {
             {templateproperties_context.showsocialmedia == 'Show' && (
                 <SocialMediaSection sectionpropertiesprops={sectionproperties} templateproperties_contextprops={templateproperties_context} actions={actions} />
             )}
-            {/* Show when logged in */}
             {sectionproperties.showfloatingbtn == 'Show' && (
-                <div
-                    style={{
-                        position: 'fixed',
-                        bottom: 15,
-                        right: 15,
-                        zIndex: 2000,
-                        transition: 'all 0.3s ease-out',
-                        width: '100%',
-                        display: sectionproperties.showfloatingbtn == 'Show when logged in' ? 'none' : 'flex',
-                    }}
-                    class="text-end"
-                >
-                    <div
-                        class={header_cssstyles.floatingbtn + ' allcentered '}
-                        style={{}}
-                        onClick={() => {
-                            routingcountext(sectionproperties.floatingbtnlink, false, '');
-                        }}
-                    >
-                        <p class="m-0 p-0">{langdetect == 'en' ? sectionproperties.floatingbtntxten : sectionproperties.floatingbtntxtar}</p>
-                    </div>
-                </div>
-            )}
-            {sectionproperties.showfloatingbtn == 'Show when logged in' && authdetailsContext.loggedin && (
                 <div
                     style={{
                         position: 'fixed',
@@ -608,7 +583,7 @@ const Simpleheader = (props) => {
                                                 </i>
                                             </div>
                                         )}
-                                        {sectionproperties.userbtnstyle == 'Style 2' && !authdetailsContext.loggedin && (
+                                        {sectionproperties.userbtnstyle == 'Style 2' && !authdetailsContext.loggedin && sectionproperties.ShowUserBtn == 'Show' && (
                                             <div
                                                 class={`${header_cssstyles.user_btn}` + ' allcentered '}
                                                 onClick={() => {
@@ -627,7 +602,7 @@ const Simpleheader = (props) => {
                                                 </p>
                                             </div>
                                         )}
-                                        {sectionproperties.userbtnstyle == 'Style 2' && authdetailsContext.loggedin && (
+                                        {sectionproperties.userbtnstyle == 'Style 2' && authdetailsContext.loggedin && sectionproperties.ShowUserBtn == 'Show' && (
                                             <Dropdown>
                                                 <Dropdown.Toggle>
                                                     <div className={header_cssstyles.userBtnLoggedinContainer + ' allcentered '} sytle={{ position: 'relative' }}>
@@ -729,7 +704,7 @@ const Simpleheader = (props) => {
                                                 </Dropdown.Menu>
                                             </Dropdown>
                                         )}
-                                        {sectionproperties.userbtnstyle == 'Style 1' && (
+                                        {sectionproperties.userbtnstyle == 'Style 1' && sectionproperties.ShowUserBtn == 'Show' && (
                                             <Dropdown>
                                                 <Dropdown.Toggle>
                                                     {!authdetailsContext.loggedin && (

package/{srcoriginal → srcoman}/TabexComponents/Sections/BackgroundImages/DynamicForm/DynamicForm.jsx

@@ -8,6 +8,7 @@ import { BsChevronLeft } from '@react-icons/all-files/bs/BsChevronLeft';
 import { BsChevronRight } from '@react-icons/all-files/bs/BsChevronRight';
 // 49
 import { Modal } from 'react-bootstrap';
+import { fontSize } from '@mui/system';
 const DynamicForm = (props) => {
     const lang = props.actions.lang;
     const langdetect = props.actions.langdetect;
@@ -127,26 +128,50 @@ const DynamicForm = (props) => {
         }
         if (item.type == 'date') {
             return (
-                <div class="row m-0 w-100 mb-3">
-                    <div class="col-lg-12 text-start mb-2">
-                        <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
-                            {langdetect == 'en' ? item.title_en : item.title_ar} {item.isrequired == 1 ? '*' : ''}
-                        </p>
+                <div class={'col-md-12 col-lg-' + sectionproperties.numberofcolsperrow}>
+                    <div class="row m-0 w-100 mb-3">
+                        <div class="col-lg-12 text-start mb-2">
+                            <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
+                                {langdetect == 'en' ? item.title_en : item.title_ar} <sup class="text-danger">{item.isrequired == 1 ? '*' : ''}</sup>
+                            </p>
+                        </div>
+                        {sectionproperties.datestartdate == 'Today' && (
+                            <div class="col-lg-12 text-start">
+                                <input
+                                    type={type}
+                                    value={item.value}
+                                    onChange={(event) => {
+                                        updateformfield(event.target.value, index);
+                                    }}
+                                    min={currentDate}
+                                    className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
+                                />
+                            </div>
+                        )}
+                        {sectionproperties.datestartdate == 'All' && (
+                            <div class="col-lg-12 text-start">
+                                <input
+                                    type={type}
+                                    value={item.value}
+                                    onChange={(event) => {
+                                        updateformfield(event.target.value, index);
+                                    }}
+                                    className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
+                                />
+                            </div>
+                        )}
                     </div>
-                    {sectionproperties.datestartdate == 'Today' && (
-                        <div class="col-lg-12 text-start">
-                            <input
-                                type={type}
-                                value={item.value}
-                                onChange={(event) => {
-                                    updateformfield(event.target.value, index);
-                                }}
-                                min={currentDate}
-                                className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
-                            />
+                </div>
+            );
+        } else {
+            return (
+                <div class={'col-md-12 col-lg-' + sectionproperties.numberofcolsperrow}>
+                    <div class="row m-0 w-100 mb-3">
+                        <div class="col-lg-12 text-start mb-2">
+                            <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
+                                {langdetect == 'en' ? item.title_en : item.title_ar} <sup class="text-danger">{item.isrequired == 1 ? '*' : ''}</sup>
+                            </p>
                         </div>
-                    )}
-                    {sectionproperties.datestartdate == 'All' && (
                         <div class="col-lg-12 text-start">
                             <input
                                 type={type}
@@ -157,20 +182,22 @@ const DynamicForm = (props) => {
                                 className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
                             />
                         </div>
-                    )}
+                    </div>
                 </div>
             );
-        } else {
-            return (
+        }
+    };
+    const textareaitem = (item, index) => {
+        return (
+            <div class={'col-md-12 col-lg-12'}>
                 <div class="row m-0 w-100 mb-3">
                     <div class="col-lg-12 text-start mb-2">
                         <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
-                            {langdetect == 'en' ? item.title_en : item.title_ar} {item.isrequired == 1 ? '*' : ''}
+                            {langdetect == 'en' ? item.title_en : item.title_ar} <sup class="text-danger">{item.isrequired == 1 ? '*' : ''}</sup>
                         </p>
                     </div>
                     <div class="col-lg-12 text-start">
-                        <input
-                            type={type}
+                        <TextareaAutosize
                             value={item.value}
                             onChange={(event) => {
                                 updateformfield(event.target.value, index);
@@ -179,26 +206,6 @@ const DynamicForm = (props) => {
                         />
                     </div>
                 </div>
-            );
-        }
-    };
-    const textareaitem = (item, index) => {
-        return (
-            <div class="row m-0 w-100 mb-3">
-                <div class="col-lg-12 text-start mb-2">
-                    <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
-                        {langdetect == 'en' ? item.title_en : item.title_ar} {item.isrequired == 1 ? '*' : ''}
-                    </p>
-                </div>
-                <div class="col-lg-12 text-start">
-                    <TextareaAutosize
-                        value={item.value}
-                        onChange={(event) => {
-                            updateformfield(event.target.value, index);
-                        }}
-                        className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
-                    />
-                </div>
             </div>
         );
     };
@@ -208,25 +215,27 @@ const DynamicForm = (props) => {
             var decoditems = JSON.parse(itemsarr);
             if (decoditems != undefined && Array.isArray(decoditems)) {
                 return (
-                    <div class="row m-0 w-100 mb-3">
-                        <div class="col-lg-12 text-start mb-2">
-                            <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
-                                {langdetect == 'en' ? item.title_en : item.title_ar} {item.isrequired == 1 ? '*' : ''}
-                            </p>
-                        </div>
-                        <div class="col-lg-12 text-start">
-                            <select
-                                value={item.value}
-                                onChange={(event) => {
-                                    updateformfield(event.target.value, index);
-                                }}
-                                className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
-                            >
-                                <option value="">{langdetect == 'en' ? 'Choose' : 'إختر'}</option>
-                                {decoditems?.map(function (sitem) {
-                                    return <option value={sitem.optionname_en}>{langdetect == 'en' ? sitem.optionname_en : sitem.optionname_ar}</option>;
-                                })}
-                            </select>
+                    <div class={'col-md-12 col-lg-' + sectionproperties.numberofcolsperrow}>
+                        <div class="row m-0 w-100 mb-3">
+                            <div class="col-lg-12 text-start mb-2">
+                                <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
+                                    {langdetect == 'en' ? item.title_en : item.title_ar} <sup class="text-danger">{item.isrequired == 1 ? '*' : ''}</sup>
+                                </p>
+                            </div>
+                            <div class="col-lg-12 text-start">
+                                <select
+                                    value={item.value}
+                                    onChange={(event) => {
+                                        updateformfield(event.target.value, index);
+                                    }}
+                                    className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
+                                >
+                                    <option value="">{langdetect == 'en' ? 'Choose' : 'إختر'}</option>
+                                    {decoditems?.map(function (sitem) {
+                                        return <option value={sitem.optionname_en}>{langdetect == 'en' ? sitem.optionname_en : sitem.optionname_ar}</option>;
+                                    })}
+                                </select>
+                            </div>
                         </div>
                     </div>
                 );
@@ -266,7 +275,7 @@ const DynamicForm = (props) => {
             width: sectionproperties.generalbtn_width + '%',
             height: sectionproperties.generalbtn_height + 'px',
             backgroundColor: sectionproperties.generalbtn_bgColor,
-            borderRadius: sectionproperties.generalbtn_bgColor,
+            borderRadius: sectionproperties.generalbtnborderradius + 'px',
             color: sectionproperties.generalbtn_textColor,
             fontSize: sectionproperties.generalbtn_fontsize,
             fontWeight: sectionproperties.generalbtn_fontweight,
@@ -307,6 +316,14 @@ const DynamicForm = (props) => {
                 backgroundColor: '#044da6',
             },
         }),
+        sectiontitle: css({
+            color: sectionproperties.sectionTitleColor,
+            fontSize: sectionproperties.sectionTitleFontSize + 'px',
+            fontWeight: sectionproperties.sectionTitleFontWeight,
+            '@media (max-width: 800px)': {
+                fontSize: sectionproperties.sectionTitleFontSizeresp,
+            },
+        }),
     };
     return (
         <div
@@ -354,14 +371,7 @@ const DynamicForm = (props) => {
                                 marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
                             }}
                         >
-                            <p
-                                class="m-0 p-0"
-                                style={{
-                                    color: sectionproperties.sectionTitleColor,
-                                    fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                    fontWeight: sectionproperties.sectionTitleFontWeight,
-                                }}
-                            >
+                            <p class={form_cssstyles.sectiontitle + ' m-0 p-0 '} style={{}}>
                                 {langdetect == 'en' ? formtitleen : formtitlear}
                             </p>
                         </div>
@@ -519,14 +529,7 @@ const DynamicForm = (props) => {
                             marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
                         }}
                     >
-                        <p
-                            class="m-0 p-0"
-                            style={{
-                                color: sectionproperties.sectionTitleColor,
-                                fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                fontWeight: sectionproperties.sectionTitleFontWeight,
-                            }}
-                        >
+                        <p class={form_cssstyles.sectiontitle + ' m-0 p-0 '} style={{}}>
                             {langdetect == 'en' ? formtitleen : formtitlear}
                         </p>
                     </div>