/**{
			padding:0;
			margin:0;
			box-sizing:border-box;
		}*/
		body{/*new*/
			font-family:'Poppins',sans-serif;
			overflow-y: auto; /* Allows vertical scrolling for the entire page if content overflows */
            overflow-x: hidden; /* Keeps horizontal scrolling hidden if not needed */
		}
		ul{
			list-style:none;
		}
		a{
			text-decoration:none;
		}
		header{/*new*/
			position:sticky;
			top:0px;
			background-color:#333333;
			width:100%;
			z-index:1000;
			height: 3rem; /* Explicitly define header height if not already */
		}
		section{/*new*/
			position:relative;
			height:calc(100vh - 5rem);
			width:100%;
			overflow-y: auto;
			scroll-behavior:smooth;
		}
		/* Define CSS variables for consistent sizing and positioning */
        :root {
            --input-max-width: 250px; /* Max width for input fields */
            --label-min-width: 120px; /* Min width for labels */
            --label-margin-right: 10px; /* Margin between label and input */
            --jiaicon-width: 28px; /* Width of the jiaicon button */
            --jiaicon-margin-left: 5px; /* Margin of the jiaicon button */

            /* Calculated values */
            --input-width: var(--input-max-width);
            --label-width-plus-margin: calc(var(--label-min-width) + var(--label-margin-right));
            --input-in-group-width: calc(var(--input-max-width) - var(--jiaicon-width) - var(--jiaicon-margin-left));
        }

		.overlay{
			position:absolute;
			width:100%;
			height:100%;
			top:0;
			left:0;
			background-color:rgb(56,165,238,0.5);
		}
		.mycontainer{
			max-width:80rem;
			padding:0 2rem;
			height:3rem;
			margin:0 auto;
			display:flex;
			position:relative;
		}
		.logo-container{
			flex:1;
			display:flex;
			align-items:flex-start;
		}
		.nav-btn{
			flex:4;
			display:flex;
			height:3rem;
			min-width:0;
			align-items:center;
			flex-wrap:nowrap;
		}
		.nav-links{
			flex:7;
			height:100%;
		}
		.nav-side{
			flex:0 0 auto;
			margin-left:auto;
			min-width:0;
			height:100%;
			display:flex;
			align-items:center;
		}
		.log-sign{
			display:flex;
			justify-content:flex-start;
			align-items:center;
			flex:3;
		}
		.log-sign{
			position:relative;
		}
		.log-sign:hover > .dropdown,.dropdown-link:hover > .dropdown{
			transform:translate(0,0);
			opacity:1;
			pointer-events:auto;
		}
		.logo{
			color:#fff;
			font-size:1.1rem;
			font-weight:600;
			letter-spacing:2px;
			text-transform:uppercase;
			line-height:3rem;
		}
		.logo span{
			font-weight:300;
		}
		.sidehead{
		    width:5%;

		}
		.buckle{
			display:inline-block;
			padding:.5rem 1.3rem;
			font-size:.8rem;
			color:white;
			border-radius:2rem;
			line-height:1;
			margin:0 .2rem;
			transition:.3s;
			text-transform:uppercase;
		}
		.buckle.solid,.buckle.transparent:hover{
			background-color:#fff;
			color:#69bde7;
		}
		.buckle.transparent,.buckle.solid:hover{
			background-color:transparent;
			color:#fff;
		}
		.nav-links > ul, .nav-side > ul{
			display:flex;
			justify-content:center;
			align-items:center;
			height:100%;
			margin:0;
			flex-wrap:nowrap;
		}
		.nav-side > ul{
			justify-content:flex-end;
			min-width:0;
		}
		.authenticated-user-menu{
			flex:0 0 auto;
		}
		.authenticated-user-menu > a{
			white-space:nowrap;
		}
		.organization-context-menu{
			min-width:0;
		}
		#organizShow5{
			max-width:14rem;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
		}
		.nav-link{
			position:relative;
		}
		.nav-link > a{
			line-height:3rem;
			color:#fff;
			padding:0 .8rem;
			letter-spacing:1px;
			font-size:.8rem;
			display:flex;
			align-items:center;
			justify-content:space-between;
			transition:.5s;
			transform: translateY(-3px);
		}
		.nav-link > a > i{
			margin-left:.2rem;
		}
		.nav-link:hover > a{
			transform:scale(1.1);
			color:#0088cc;
		}
		.mdropdown{
			position:absolute;
			top:100%;
			left:0;
			width:10rem;
			transform:translateY(10px);
			opacity:0;
			pointer-events:none;
			transition:.5s;
		}

		.mdropdown ul{
			position:relative;
			top:-0.5rem;
		}
		.mdropdown ul li{
			border-bottom:1px solid rgba(0,0,0,0.3);
		}
		.mdropdown-link > a{
			display:flex;
			background-color:#333333;
			color:white !important;
			padding:.5rem 1rem;
			font-size:.8rem;
			align-items:center;
			justify-content:space-between;
			transition:.3s;
		}
		.logout-form {
			margin: 0;
		}
		.logout-link {
			display: flex;
			width: 100%;
			background-color: #333333;
			color: white;
			padding: .5rem 1rem;
			border: 0;
			font: inherit;
			text-align: left;
			cursor: pointer;
		}
		.logout-link:hover,
		.logout-link:focus {
			color: #0088cc;
		}
		.nav-side > ul > li >a{
			border-left:2px solid white;
		}
		.mdropdown-link:hover > a{
			color:#0088cc !important;
		}
		.mdropdown-link:not(:nth-last-child(2)){
			border-bottom:1px solid #efefef;
		}
		.mdropdown-link i{
			transform:rotate(-90deg);
		}
		.mdropdown-link:first-child:hover ~ .arrow{
			background-color:#3498db;
		}
		.mdropdown-link{
			position:relative;
		}
		.nav-link:hover > .mdropdown,.mdropdown-link:hover > .mdropdown{
			transform:tranlate(0,0);
			opacity:1;
			pointer-events:auto;
		}
		.hamburger-menu-container{
			flex:1;
			display:none;
			align-items:center;
			justify-content:flex-end;
		}
		.hamburger-menu{
			width:2.5rem;
			height:2.5rem;
			display:flex;
			align-items:center;
			justify-content:center;
		}
		.hamburger-menu div{
			width:1.6rem;
			height:3px;
			border-radius:3px;
			background-color:#fff;
			position:relative;
			z-index:1001;
			transition:.5s;
		}
		.hamburger-menu div:before,.hamburger-menu div:after{
			content:'';
			position:absolute;
			width:inherit;
			height:inherit;
			background-color:#fff;
			border-radius:3px;
			transition:.5s;
		}
		.hamburger-menu div:before{
			transform:translateY(-7px);
		}
		.hamburger-menu div:after{
			transform:translateY(7px);
		}
		#check{
			position:absolute;
			top:50%;
			right:2rem;
			transform:translateY(-50%);
			width:2.5rem;
			height:2.5rem;
			z-index:90000;
			cursor:pointer;
			opacity:0;
			display:none;
		}
		#check:checked ~ .hamburger-menu-container .hamburger-menu div{
			background-color:transparent;
		}
		#check:checked ~ .hamburger-menu-container .hamburger-menu div:before{
			transform:translateY(0) rotate(-45deg);
		}
		#check:checked ~ .hamburger-menu-container .hamburger-menu div:after{
			transform:translateY(0) rotate(45deg);
		}

		.custom-alert-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .custom-alert {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: yellow; /* Set background color to yellow */
            color: #000000; /* Set font color to black */
            border: 10px solid #007bff; /* Set border to blue (#007bff) */
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            z-index: 9999;
        }

        .ok-button {
            margin-top: 10px;
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

		#financialyear input{
			margin: auto;
		}

		#financialyear ul{
/*			position:relative;
/*			right:95px;/*how to adjust*/
			float:right;
		}

		.slideShow {/*new*/
            border: 1px #eeeeee solid;
            position: relative;
            width: 100%;
            max-height: 100%;
            height: 100%;
            display: flex;
            align-items: center;    /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            overflow: hidden; /* 确保内容不会溢出设定的框 */
            background-color: #000;
        }

        .pic {/*new*/
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;  /* 占据 .slideShow 的全部宽度 */
            height: 100%; /* 占据 .slideShow 的全部高度 (受 max-height 限制) */
            display: flex; /* 也使用 flex 来居中其子元素 (li) */
            align-items: center;
            justify-content: center;
        }

        .pic li {/*new*/
            width: 100%;  /* 占据 .pic 的全部宽度 */
            height: 100%; /* 占据 .pic 的全部高度 */
            display: flex; /* 也使用 flex 来居中其子元素 (img) */
            align-items: center;
            justify-content: center;
        }

        .pic img {/*new*/
            display: block; /* 消除可能的底部间隙 */
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            margin: 0 auto;
        }

        footer {/*new*/
            height: 2rem; /* Example footer height, adjust as needed */
            width: 100%;
            background-color: #333333; /* Example background, match your design */
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #tabletest {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto; /* Ensures column widths are determined by content */
        }

        #tabletest th {
            padding: 8px;
            text-align: center;
            border: 1px solid #ddd;
            /* Optional: Prevent header text from wrapping, forcing header to match content width */
            white-space: nowrap;
        }

        #tabletest td {
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
            /* Optional: Prevent text from wrapping for cells where you want full content visible */
            /* white-space: nowrap; */

            /* For cells with potentially very long content (e.g., Description),
               you might want to allow wrapping or set a max-width with overflow */
            /* If you want description to wrap */
            word-break: break-word; /* Helps break long words */
            /* If you want a max-width for description and then overflow */
            /* max-width: 200px; */ /* Example max-width for specific columns */
            /* overflow: hidden; */
            /* text-overflow: ellipsis; */ /* Add ellipsis for hidden overflow */
        }

        /* Sticky header styles (keep as is, they are fine) */
        #tabletest thead th {
            position: sticky;
            top: 0;
            background-color: #f8f9fa; /* Header background color */
            z-index: 2;
            box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
        }

        /* Styles for Pricing.html */
        .pricetable {
            font-family: Arial, sans-serif;
            margin: 40px auto;
            max-width: 800px;
            background-color: #f8f9fa;
            color: #333;
            font-size: 16px;
            padding: 20px;
        }
        .pricetable h1 { /* Targeting h1 specific to pricetable */
            text-align: center;
            color: #004080;
            margin-bottom: 20px;
        }
        .pricetable > p {
            font-size: 16px;
            margin-bottom: 20px;
        }
        .pricetable table { /* Targeting table specific to pricetable */
            width: 100%;
            border-collapse: collapse;
            margin-top: 30px;
            background-color: #fff;
        }
        .pricetable th, .pricetable td { /* Targeting th, td specific to pricetable */
            border: 1px solid #cccccc;
            padding: 14px;
            text-align: left;
            font-size: 16px;
        }
        .pricetable th { /* Targeting th specific to pricetable */
            background-color: #e6f0ff;
            color: #003366;
        }
        .pricetable tr:nth-child(even) { /* Targeting tr specific to pricetable */
            background-color: #f2f6ff;
        }
        .note {
            margin-top: 30px;
            font-size: 16px;
            color: #666;
        }
        .note p {
            font-size: 16px;
        }
        .note ol {
            padding-left: 0;
            margin-left: 0;
            list-style-position: inside;
        }

        /* Styles for INRegistration.html form layout */
        #AssetDetail form .form-row,
        #BankashDetail form .form-row,
        #BankSdetail form .form-row,
        #ClientDetail form .form-row,
        #DistributionDetail form .form-row,
        #InventoryDetail form .form-row,
        #INRegistration form .form-row,
        #LoanDetail form .form-row,
        #OpenbalDetail form .form-row,
        #OrganizDetail form .form-row,
        #ProfitItemDetail form .form-row{
            width: 100%;
            height: 60px; /* 统一每行的固定高度 */
            display: flex;
            align-items: center; /* 垂直居中内容 */
            justify-content: center; /* 将 .input-container 整体水平居中 */
        }

        #AssetDetail form .input-container,
        #BankashDetail form .input-container,
        #ClientDetail form .input-container,
        #DistributionDetail form .input-container,
        #InventoryDetail form .input-container,
        #INRegistration form .input-container,
        #LoanDetail form .input-container,
        #OpenbalDetail form .input-container,
        #OrganizDetail form .input-container,
        #ProfitItemDetail form .input-container{
            display: flex; /* 使用 Flexbox 布局 label 和 input */
            align-items: center; /* 垂直居中 label 和 input */
            /*justify-content: space-between;  将 label 推到左侧，input 推到右侧 */
            justify-content:flex-start;
            width: 100%; /* 占据 .form-row 内部可用宽度 */
            max-width: 400px; /* 限制表单输入区域的最大宽度，保持美观 */
        }


        #AssetDetail form .input-container label,
        #BankashDetail form .input-container label,
        #ClientDetail form .input-container label,
        #DistributionDetail form .input-container label,
        #InventoryDetail form .input-container label,
        #INRegistration form .input-container label,
        #LoanDetail form .input-container label,
        #OpenbalDetail form .input-container label,
        #OrganizDetail form .input-container label,
        #ProfitItemDetail form .input-container label{
            flex-shrink: 0; /* 防止 label 缩小 */
            min-width: 120px; /* 给 label 一个最小宽度，确保对齐一致性 */
            text-align: left; /* label 文本左对齐 */
            margin-right: 10px; /* label 和 input 之间的间距 */
            color: #232323; /* 确保 label 颜色可见 */
            position: static; /* 覆盖可能的绝对定位 */
            left: auto;
            top: auto;
        }

        #AssetDetail form .input-container input[type="text"],
        #AssetDetail form .input-container input[type="date"],
        #BankashDetail form .input-container input[type="text"],
        #ClientDetail form .input-container input[type="text"],
        #DistributionDetail form .input-container input[type="text"],
        #InventoryDetail form .input-container input[type="text"],
        #INRegistration form .input-container input[type="text"],
        #INRegistration form .input-container input[type="email"],
        #INRegistration form .input-container input[type="password"],
        #LoanDetail form .input-container input[type="text"],
        #LoanDetail form .input-container input[type="date"],
        #OpenbalDetail form .input-container input[type="text"],
        #OrganizDetail form .input-container input[type="text"],
        #OrganizDetail form .input-container input[type="date"],
        #ProfitItemDetail form .input-container input[type="text"]{
            flex-grow: 1; /* input 填充剩余空间 */
            max-width: 250px; /* input 自身的最大宽度 */
            text-align: center; /* input 文本右对齐 */
            background-color: #fff; /* 输入框背景色 */
            border: 1px solid #ccc; /* 输入框边框 */
            height: 28px; /* 输入框高度 */
            line-height: 28px; /* 文本行高与高度匹配 */
            box-sizing: border-box; /* 边框和填充包含在元素总宽度内 */
        }

        /* 针对“I have read and agreed...”这一行的特殊样式 */
        #INRegistration form .terms-privacy-row .input-container {
            display: flex;
            justify-content: flex-start; /* 复选框和文本左对齐 */
            flex-wrap: wrap; /* 允许文本过长时换行 */
            align-items: flex-start; /* 换行时顶部对齐 */
            max-width: 450px; /* 调整此行最大宽度 */
            padding: 0 10px;
        }

        #INRegistration form .terms-privacy-row .input-container input[type='checkbox'] {
            flex-shrink: 0; /* 防止复选框缩小 */
            margin-right: 8px; /* 增加复选框与文本之间的间距 */
            /* 如果需要微调垂直位置，可以尝试添加 margin-top，例如：margin-top: 2px; */
        }

        #INRegistration form .terms-privacy-row .input-container span {
            flex-grow: 1;
            text-align: left;
            font-size: 14px; /* 调整文本字体大小 */
            line-height: 1.4; /* 调整文本行高 */
            word-break: break-word; /* 允许长单词在需要时断开 */
        }


        /* 1. 确保所有 form 内部元素遵循一致的盒模型 */
        #BankSdetail form *,
        #BankSdetail form *:before,
        #BankSdetail form *:after {
            box-sizing: border-box;
        }

        #BankSdetail form .input-container {
            display: flex;
            align-items: center;
            position: relative;
            width: 100%;
            max-width: 400px; /* 统一最大宽度 */
        }

        /* 3. 统一 Label 宽度，确保左侧对齐 */
        #BankSdetail form .input-container label {
            flex-shrink: 0;
            width: 120px; /* 使用固定宽度而非 min-width 以确保严格对齐 */
            margin-right: 10px;
            text-align: left;
            color: #232323;
        }

        /* 4. 关键修正：统一右侧输入区域的宽度 */
        /* 无论是普通 input 还是 input-and-button-group，都应占据相同的总宽度 */
        #BankSdetail form .input-container > input[type="text"],
        #BankSdetail form .input-container > input[type="date"]{
            flex: 1;
            max-width: 250px; /* 强制所有输入组件（含带按钮的组）最大宽度一致 */
            text-align: center;
        }

        /* 针对 BankSdetail 中带有下拉菜单和按钮的输入框 */
        #BankSdetail form .input-container .dropdown-toggle {
            text-align: right; /* 确保下拉菜单输入框的文本右对齐 */
        }


        /* 6. 修正按钮样式，确保它在容器内部 */
        #BankSdetail form .input-container .jiaicon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            /*margin-left: 8px;  给按钮和输入框之间留点呼吸空间 */
            cursor: pointer;
            background-size: contain;
        }

        /* 新增/修改：确保 .input-container 是下拉菜单的定位上下文 */
        #BankSdetail form .input-container.dropdown /* 针对直接包含 input 和 ul 的 input-container */
       { /* 针对包含 input, ul 和 button 的组 */
            position: relative !important; /* 确保子元素可以基于此进行绝对定位 */
            display: flex !important;
            align-items: center;
        }

        /* 统一设置 BankSdetail 中所有下拉菜单的基础样式 */
        #BankSdetail form .input-container .dropdown-menu {
            position: absolute !important; /* 强制绝对定位 */
            top: 100% !important; /* 强制定位在父元素（输入框/组）的正下方 */
            padding: 0 !important; /* 移除默认的 ul padding */
            margin: 0 !important; /* 移除默认的 ul margin */
            border: 1px solid #ccc !important;
            background-color: #fff !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
            z-index: 1050 !important;
            list-style: none !important; /* 移除列表点 */
            max-height: 200px !important; /* 限制高度并启用滚动 */
            overflow-y: auto !important;
            /* 关键：重置任何可能由 JavaScript 或其他样式设置的 left 或 transform 属性 */
            left: var(--label-width-plus-margin);/*130px !important;  对齐父元素的左侧 */
            width: var(--input-width);
            min-width: unset !important;
            box-sizing: border-box;
            transform: none !important; /* 禁用可能导致偏移的 CSS 变换 */
        }

        /* 3. 针对带有右侧“+”按钮的行进行特殊处理 (如 Bank, Item) */
        #AssetDetail form .input-container:has(.jiaicon).dropdown > .dropdown-menu,
        #BankSdetail form .input-container:has(.jiaicon).dropdown > .dropdown-menu,
        #OpenbalDetail form .input-container:has(.jiaicon).dropdown > .dropdown-menu{
            width: calc(var(--input-max-width) - var(--jiaicon-width)) !important; /* 减去按钮约 30px 的空间 */
        }

        /* Styles for OrganizDetail.html form layout */
        #OrganizDetail form .form-section-header {
            font-weight: 700;
            height: 27px;
            margin-bottom: 10px; /* 标题下方的间距 */
            text-align: center; /* 标题居中 */
            width: 100%;
            max-width: 400px; /* 与表单字段宽度匹配 */
            margin-left: auto;
            margin-right: auto;
        }

        /* 针对 OrganizDetail 中带有下拉菜单的输入框 */
        #OrganizDetail form .input-container .dropdown-toggle {
            text-align: right; /* Ensure dropdown input text is right-aligned*/
        }

        #OpenbalDetail form .input-container .dropdown-menu,
        #AssetDetail form .input-container .dropdown-menu,
        #LoanDetail form .input-container .dropdown-menu,
        #ProfitItemDetail form .input-container .dropdown-menu,
        #OrganizDetail form .input-container .dropdown-menu {
            position: absolute;
            top: 100%; /* Position directly below the input container */
            width: var(--input-width); /* Match input field's max-width*/
            left: calc(var(--label-width-plus-margin) - 3px); /* Align with the start of the input field*/
            right: auto; /* Ensure left takes precedence*/
            padding: 0; /* Remove default ul padding*/
            margin: 0; /* Remove default ul margin*/
            border: 1px solid #ccc;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 1050; /* Ensure dropdown is above other content*/
            list-style: none; /* Remove list points*/
            max-height: 200px; /* Limit height and enable scrolling*/
            overflow-y: auto;
            transform: none; /* Reset any potentially conflicting transforms*/
        }



        /* Styles for OpenbalDetail.html form layout */
        #OpenbalDetail form .form-row{
            width: 100%;
            height: 60px; /* 统一每行的固定高度 */
            display: flex;
            align-items: center;
            justify-content: center; /* 将 .input-container 整体水平居中 */
            overflow: visible !important; /* 允许下拉菜单溢出边界显示 */
        }



        /* 针对 OpenbalDetail 中带有下拉菜单的输入框 */
        #OpenbalDetail form .input-container .dropdown-toggle {
            text-align: right; /* 确保下拉菜单输入框的文本右对齐 */
        }


        /* Specific alignment for dropdowns that are direct children of .input-container.dropdown
           (e.g., Financial year, Category, Account) */
        #OpenbalDetail form .input-container.dropdown > .dropdown-menu {
            width: var(--input-width); /* Match input field's max-width */
            left: var(--label-width-plus-margin); /* Align with the start of the input field */
            right: auto; /* Ensure left takes precedence */
        }



        /* Ensure no parent elements clip the dropdowns unexpectedly */
        /* Check these containers in your HTML and adjust their overflow if necessary. */
        /* For example, if .form-row or .well.form-inline are clipping: */
        #OpeningBal .form-row,
        #OrganizDetail .form-row,
        #OpeningBal form.well.form-inline,
        #OrganizDetail form.well.form-inline,
        #BankashDetail .form-row,
        #BankashDetail form.well.form-horizontal,
        #InventoryDetail .form-row,
        #InventoryDetail form.well.form-horizontal,
        #AssetDetail .form-row,
        #AssetDetail form.well.form-horizontal,
        #LoanDetail .form-row,
        #LoanDetail form.well.form-horizontal,
        #ProfitItemDetail .form-row,
        #ProfitItemDetail form.well.form-horizontal,
        .contentstyle {
            overflow: visible; /* Allows content, like dropdowns, to extend beyond their boundaries */
        }

        #AssetDetail form .input-container.with-unit,
        #LoanDetail form .input-container.with-unit,
        #ClientDetail form .input-container.dropdown{
            position: relative !important; /* 确保子元素可以基于此进行绝对定位 */
            /* 移除 ClientDetail.html 中内联的 display:inline-flex; 样式，
               因为 .input-container 已经有了 display: flex; */
        }

        #ClientDetail form .input-container .dropdown-menu,
        #BankashDetail form .input-container .dropdown-menu,
        #InventoryDetail form .input-container .dropdown-menu{ /* */
            position: absolute !important; /* 强制绝对定位 */
            top: 100% !important; /* 强制定位在父元素（输入框/组）的正下方 */
            left: var(--label-width-plus-margin);/*130px !important;  对齐父元素的左侧 */
            width: 245px; /* 宽度与父元素相同 */
            padding: 0 !important;
            margin: 0 !important;
            border: 1px solid #ccc !important;
            background-color: #fff !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
            z-index: 1050 !important;
            list-style: none !important;
            max-height: 200px !important;
            overflow-y: auto !important;
            transform: none !important;
        }

        #LoanDetail form .input-container.with-unit .unit-percent,
        #DistributionDetail form .input-container.with-unit .unit-percent,
        #AssetDetail form .input-container.with-unit .unit-percent {
            position: absolute;
            top: 50%; /* Vertically center */
            right: 10px; /* Position from the right edge of the input container */
            transform: translateY(-50%); /* Adjust for perfect vertical centering */
            font-weight: bold;
            pointer-events: none; /* Allows clicks to pass through to the input */
        }

        .terms-privacy-row .input-container {
            display: flex;
            align-items: center;
            justify-content: flex-start; /* 确保靠左对齐 */
            gap: 10px;
            margin-top: 10px;
        }

        .terms-privacy-row input[type="checkbox"] {
            width: auto; /* 防止被全局样式强制拉长 */
            height: auto;
        }

        #tab tbody ul {
            margin: 0 !important;
            padding: 0 !important;
            /*display: block;  确保不影响垂直对齐 */
        }

        #tab td {
            vertical-align: middle; /* 强制所有单元格内容居中对齐 */
        }



#scrollContainer {
    max-height: 800px; /* Adjust height as needed */
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 0px;
}

.popover-title {
    background: #0088cc;
	color: white;
}

.popover.bottom .arrow:after {
    border-bottom-color: #0088cc;
}

.error {
	color: red;
}


.txt_freetrial{
	background-color: green;
	height:13px;
	margin-top:5px!important;
	padding-top:4px!important;
}


.organiz-css{
	padding-top:0px;
	padding-bottom:0px;
	margin-left: 10px;
	height:28px;
	border:0px solid blue;
	border-radius:5px;
	list-style-type: none;
}

.contentstyle{
	background-color: #dedef8;
	margin:2rem auto;
	padding:1.5em 0.9375em;
	position:relative;
}

.float-menu{
	position:absolute;
	top:3.25em;
	/*right:9.375em;*/
	right:-8%;
	opacity: 0.75;
	color: white;
	text-align: right;
	cursor: pointer;
}

form div div ul{
	background-color:#00FFFF;
	height:100px;
    overflow-y:scroll;

}

#Dashboard button{
	height:2em;
	width:50%;
	margin:1.875em 0 0 7em;
}
#Dashboard div{
	margin:0 0 1.875em 0;
	list-style-type: none;
}
#Dashboard div ul{
	width:50%;
	margin:0 0 0 0;
	left:91px;
}


#AcctTranDetail{
	/*height:40em;*/
	width:30%;
	position:relative;
}

#Asset,#AssetDetail,#BankAccount,#BankashDetail,#BankSdetail,#Client,#ClientDetail,#Dashboard,#Distribution,#DistributionDetail,#INcountingSign,#INRegistration,#Inventory,#InventoryDetail,#Loan,#LoanDetail,#ProfitItem,#ProfitItemDetail,#Organization,#OrganizDetail,#OpeningBal,#OpenbalDetail,#UploadBank,#UploadInvoice {
	width:440px;
}

#BankStatement,#Invoice,#InternalData,#AcctTran{
	/*height:40em;*/
	width:80%;
}

#Openbal{
	/*height:40em;*/
	width:50%;
}

#InvoiceDetail,#InternalDetail {
	/*height:40em;*/
	width:70%;
}

.contentstyle h2{
	margin: 0 0 1em 0;
}

/* 1. 容器居中并设置定位基准 */
.loginfo {
    margin: 0 auto 30px auto; /* 左右居中 */
    position: relative;
    width: 100%;
    max-width: 300px; /* 限制宽度，使其在页面中间更美观 */
    display: flex;
    flex-direction: column;
}

/* 2. Label 初始状态：在输入框内部 */
.loginfo label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    transition: all 0.3s ease; /* 添加平滑动画 */
    pointer-events: none; /* 确保点击 label 也能触发 input */
    font-size: 1rem;
    z-index: 1;
}

/* 3. Input 样式优化 */
.loginfo input {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 10px 10px 0 10px; /* 底部和顶部留出空间 */
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    text-align: left; /* 输入文字靠左对齐 */
    box-sizing: border-box;
    outline: none;
}

/* 4. 核心逻辑：当 input 获得焦点，或里面有内容时，Label 向上移动 */
.loginfo input:focus + label,
.loginfo input:not(:placeholder-shown) + label {
    top: 1px; /* 移动到输入框上方 */
    left: 5px;
    font-size: 0.8rem;
    color: #0088cc;
    background-color: transparent; /* 如果背景色干扰，可以设为透明 */
    transform: translateY(0);
}

/* 5. 隐藏原生的 placeholder，因为它会和我们的 Label 重叠 */
.loginfo input::placeholder {
    color: transparent;
}

.loginfoot{
	width:300px;
}

.loginfoot .pull-right,.registfoot .pull-right{
	padding-top:16px;
}

.loginfoot .pull-right a,.registfoot .pull-right a{
	margin-right:20px;
}

.registfoot{
	width:300px;
}

.txt_createanorgan {
	width: 72%;
}



.scheduleDate2{
          display: none;
          z-index: 999;
          position: fixed;
          _position: absolute;
		  right: 0px;
          bottom: 0;
          width: 236px;
          height: 196px;
          overflow: hidden;
}

.itemtype{
	display:none;
}

input{
    height:28px;
    line-height:28px;
    padding: 0;
    border:1px solid #aaa;
	background-color:#fff;
	text-align:center;
}

/* 容器设置为相对定位 */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* 输入框右侧留出百分号的空间 */
#percentage {
    padding-right: 25px !important;
    width: 100%;
}

/* 百分号样式：固定在右侧 */
.unit-percent-overlay {
    position: absolute;
    right: 10px;
    color: #666;
    pointer-events: none; /* 关键：点击百分号时，焦点仍会落在输入框上 */
    display: none; /* 默认隐藏，有内容再显示 */
}

/* 当输入框有内容或获得焦点时显示百分号 */
#percentage:not(:placeholder-shown) + .unit-percent-overlay,
#percentage:focus + .unit-percent-overlay {
    display: inline;
}

#InvoiceDetail ul li input, #InvoiceDetail ul input, #InternalDetail ul li input, #InternalDetail ul input{
	margin: 0 20px 0 0!important;
}


#AcctTranDetail label,#AssetDetail label,#BankashDetail label,#BankSdetail label,#ClientDetail label,#DistributionDetail label,#InventoryDetail label,#LoanDetail label,#OpeningBal label,#OrganizDetail label,#ProfitItemDetail label{
	left:10px;
	top:2px;
}

form li{
	list-style-type: none;
}

#BankStatement form ul li input,#Invoice form ul li input{
	height:30px;
	margin:0 30px 0 0;
	width:50px;
}

#BankStatement form li,#Invoice form li{
	margin: 0 0 0px 0!important;
}

#InvoiceDetail form table tr td input,#InternalDetail form table tr td input{
	margin: 0 0 0 0!important;
}

#INcountingSign form div div{
	text-align:center;
}

.txt_terms,.txt_privacy{
	margin-right:20px;
}

.nav li{
	padding-top:0;
}

pre{
	padding:0 0 0 0;
	font-size: 14px;
    line-height: 18px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	border:none;
	background-color: transparent;
}

.jiaicon{
	background-image: url('../images/test4.png');
	background-repeat: no-repeat;
	background-color: transparent;
	height: 24px;
	width: 24px;
	padding:0 0 0 0;
	border:none;
}

.addlineicon{
	background-image: url('../images/bigAdd.png');
	background-repeat: no-repeat;
	background-color: transparent;
	height: 48px;
	width: 48px;
	border:none;
}

.saveicon{
	background-image: url('../images/save.png');
	background-repeat: no-repeat;
	background-color: transparent;
	height: 64px;
	width: 64px;
	border:none;
}

.backwardicon{
	background-image: url('../images/backward.png');
	background-repeat: no-repeat;
	background-color: transparent;
	height: 64px;
	width: 64px;
	border:none;
}

.biaoqianicon{
	background-image: url('../images/Capture4.png');
	background-repeat: no-repeat;
	background-color: transparent;
	height: 50px;
	width: 50px;
	border:none;
}

input.error {
	border: 1px solid red;
}

.dropdown {
    position: relative; /* 确保下拉菜单相对于按钮定位 */
}

.dropdown-menu {
    position: absolute;
    left: auto; /* 左对齐下拉菜单 */
    width: auto; /* 使菜单宽度与按钮一致（可选） */
    transform: none; /* 如果存在偏移，确保居中 */
}


/* ===============================
   ≤ 920px（平板）
================================ */
@media screen and (max-width: 920px){

    .mycontainer{
        padding: 0 1rem;
    }

    .nav-link > a{
        font-size: 0.7rem;
        padding: 0 .5rem;
    }

    .logo{
        font-size: 1rem;
    }

    .buckle{
        padding: .4rem 1rem;
        font-size: .7rem;
    }

    /* AI widget 缩小 */
    #ai-widget{
        width: 260px;
        height: 420px;
    }

    /* 表格优化 */
    #tabletest th,
    #tabletest td{
        padding: 6px;
        font-size: 0.8rem;
    }
}


/* ===============================
   ≤ 600px（手机）
================================ */
@media only screen and (max-width: 600px){

    /* 显示汉堡菜单 */
    .hamburger-menu-container{
        display:flex;
    }

    #check{
        display:block;
    }

    /* 隐藏原导航 */
    .nav-btn{
        position: fixed;
        top: 3rem;
        left: 0;
        width: 100%;
        height: calc(100vh - 3rem);
        background-color: #333;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        transform: translateX(-100%);
        transition: .5s;
    }

    /* 点击展开 */
    #check:checked ~ .nav-btn{
        transform: translateX(0);
    }

    .nav-links{
        width: 100%;
        height: auto;
    }

    .nav-links ul{
        flex-direction: column;
        width: 100%;
    }

    .nav-side{
        width: 100%;
        margin-left: 0;
        height: auto;
    }

    .nav-side > ul{
        flex-direction: column;
        width: 100%;
        height: auto;
        align-items: stretch;
    }

    #organizShow5{
        max-width: none;
    }

    .nav-link{
        width: 100%;
    }

    .nav-link > a{
        width: 100%;
        padding: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        justify-content: space-between;
    }

    /* dropdown 改为展开式 */
    .mdropdown{
        position: static;
        width: 100%;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        display: none;
    }

    .nav-link:hover > .mdropdown{
        display: block;
    }

    .mdropdown-link > a{
        padding: 0.8rem 1.5rem;
    }

    /* 登录按钮 */
    .log-sign{
        width: 100%;
        justify-content: center;
        margin-top: 1rem;
    }

    /* AI widget 手机适配 */
    #ai-widget{
        width: 90%;
        right: 5%;
        height: 400px;
    }

    #ai-open{
        right: 5%;
    }

    /* footer */
    footer{
        font-size: 0.8rem;
    }
}


/* ===============================
   ≥ 768px（桌面/恢复布局）
================================ */
@media only screen and (min-width: 768px){

    .hamburger-menu-container{
        display: none;
    }

    #check{
        display: none;
    }

    .nav-btn{
        position: relative;
        transform: none !important;
        flex-direction: row;
        height: 3rem;
        align-items: center;
        flex-wrap: nowrap;
        background: none;
    }

    .nav-links ul{
        flex-direction: row;
    }

    .nav-link > a{
        border: none;
    }

    .mdropdown{
        position: absolute;
        display: block;
        opacity: 0;
        pointer-events: none;
    }

    .nav-link:hover > .mdropdown{
        opacity: 1;
        pointer-events: auto;
    }
}





/* =========================================================
   Invoice Detail responsive layout
   2026-09-11
   ========================================================= */

/* ---------- General Invoice layout ---------- */

#InvoiceDetail {
    box-sizing: border-box;
    max-width: 1100px;
}

#InvoiceDetail #form {
    box-sizing: border-box;
    width: 100%;
    padding: 18px 20px 28px;
}

#InvoiceDetail #tab {
    width: 100%;
    table-layout: fixed;
}

#InvoiceDetail #tab th {
    padding: 7px 5px;
    vertical-align: middle;
    line-height: 1.25;
}

#InvoiceDetail #tab td {
    padding: 5px;
    box-sizing: border-box;
}

#InvoiceDetail #tab input {
    box-sizing: border-box;
    min-width: 0;
    height: 30px;
}

#InvoiceDetail #tab .jiaicon {
    vertical-align: middle;
}


/* Top: Date / Invoice No / Transaction Method */

#InvoiceDetail .nav-pills {
    display: flex;
    gap: 20px;
    margin: 0 0 18px;
    padding: 0;
}

#InvoiceDetail .nav-pills > li {
    float: none;
    flex: 1 1 0;
    min-width: 0;
}

#InvoiceDetail .nav-pills > li > input {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    margin: 0 !important;
}


/* Payment details */

#InvoiceDetail #form > div[style*="width:50%"] {
    width: 60% !important;
    box-sizing: border-box;
}

#InvoiceDetail #form > table[style*="width:50%"] {
    width: 60% !important;
    box-sizing: border-box;
    table-layout: fixed;
    margin-bottom: 16px;
}

#InvoiceDetail #form > table[style*="width:50%"] th,
#InvoiceDetail #form > table[style*="width:50%"] td {
    padding: 6px 8px;
}

#InvoiceDetail #form > table[style*="width:50%"] input {
    height: 30px;
    box-sizing: border-box;
}


/* =========================================================
   Tablet
   ========================================================= */

@media screen and (max-width: 920px) {

    #InvoiceDetail {
        width: 88% !important;
        max-width: none;
    }

    #InvoiceDetail #form {
        padding: 16px;
    }

    #InvoiceDetail .nav-pills {
        gap: 10px;
    }

    #InvoiceDetail #tab th {
        font-size: 13px;
        white-space: normal;
    }

    #InvoiceDetail #tab td {
        padding: 4px;
    }

    #InvoiceDetail #form > div[style*="width:50%"],
    #InvoiceDetail #form > table[style*="width:50%"] {
        width: 70% !important;
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media screen and (max-width: 600px) {

    #InvoiceDetail {
        width: calc(100% - 28px) !important;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    #InvoiceDetail h2 {
        margin: 20px 0 24px;
        font-size: 25px;
    }

    #InvoiceDetail #form {
        padding: 18px 18px 28px;
    }


    /* Date / Invoice No / Transaction Method */

    #InvoiceDetail .nav-pills {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 18px;
    }

    #InvoiceDetail .nav-pills > li {
        width: 100%;
        flex: none;
    }

    #InvoiceDetail .nav-pills > li > input {
        width: 100%;
        height: 32px;
        margin: 0 !important;
    }


    /*
       Invoice detail table:
       keep it as a table, but give it enough horizontal space.
       On narrow phones the table itself can scroll rather than
       crushing Transaction Category and Item.
    */

    #InvoiceDetail #tab {
        display: block;
        width: 100%;
        overflow-x: auto;
        table-layout: fixed;
        -webkit-overflow-scrolling: touch;
    }

    #InvoiceDetail #tab thead,
    #InvoiceDetail #tab tbody {
        width: 560px;
        min-width: 560px;
        display: table;
        table-layout: fixed;
    }

    #InvoiceDetail #tab th {
        padding: 7px 4px;
        font-size: 13px;
        white-space: normal;
        line-height: 1.2;
    }

    #InvoiceDetail #tab td {
        padding: 5px 4px;
    }

    #InvoiceDetail #tab th:nth-child(1),
    #InvoiceDetail #tab td:nth-child(1) {
        width: 22% !important;
    }

    #InvoiceDetail #tab th:nth-child(2),
    #InvoiceDetail #tab td:nth-child(2) {
        width: 11% !important;
    }

    #InvoiceDetail #tab th:nth-child(3),
    #InvoiceDetail #tab td:nth-child(3) {
        width: 11% !important;
    }

    #InvoiceDetail #tab th:nth-child(4),
    #InvoiceDetail #tab td:nth-child(4) {
        width: 28% !important;
    }

    #InvoiceDetail #tab th:nth-child(5),
    #InvoiceDetail #tab td:nth-child(5) {
        width: 28% !important;
    }


    /* Add line button */

    #InvoiceDetail .addlineicon {
        margin-top: 12px;
        margin-bottom: 10px;
    }



    /* Payment details uses full width on mobile */

    #InvoiceDetail #form > div[style*="width:50%"],
    #InvoiceDetail #form > table[style*="width:50%"] {
        width: 100% !important;
    }

    #InvoiceDetail #form > table[style*="width:50%"] {
        table-layout: fixed;
    }

    #InvoiceDetail #form > table[style*="width:50%"] th,
    #InvoiceDetail #form > table[style*="width:50%"] td {
        width: 50% !important;
        padding: 5px;
    }


    /* Back / Save buttons */

    #InvoiceDetail .backwardicon,
    #InvoiceDetail .saveicon {
        margin-top: 12px;
    }


    /*
       Modal opened from Invoice.
       Existing inline min-width:400px is too wide for phones.
    */

    #winModal > div {
        width: calc(100% - 30px) !important;
        min-width: 0 !important;
        max-width: 500px;
        box-sizing: border-box;
    }

    #winFrame {
        width: 100% !important;
    }
}



/* =========================================================
   Invoice totals layout
   ========================================================= */

#InvoiceDetail .invoice-totals-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: end;
    margin-top: 14px;
    margin-bottom: 14px;
}

#InvoiceDetail .invoice-total-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#InvoiceDetail .invoice-total-field label {
    flex: 0 0 auto;
    margin: 0;
    font-weight: 400;
}

#InvoiceDetail .invoice-total-field input {
    width: 100%;
    min-width: 0;
    height: 32px;
    box-sizing: border-box;
}

#InvoiceDetail .invoice-gst-select {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

#InvoiceDetail .invoice-gst-select #gst {
    width: 100%;
    margin: 0 !important;
}

#InvoiceDetail .invoice-gst-select .dropdown-menu {
    min-width: 100%;
}


/* Tablet */
@media screen and (max-width: 920px) {

    #InvoiceDetail .invoice-totals-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
    }

    #InvoiceDetail .invoice-total-field:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
    }
}


/* Mobile */
@media screen and (max-width: 600px) {

    #InvoiceDetail .invoice-totals-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 14px;
        margin-bottom: 16px;
    }

    #InvoiceDetail .invoice-total-field {
        width: 100%;
    }

    #InvoiceDetail .invoice-total-field label {
        width: 68px;
        flex: 0 0 68px;
    }

    #InvoiceDetail .invoice-total-field input,
    #InvoiceDetail .invoice-gst-select {
        flex: 1 1 auto;
        width: auto;
    }

    #InvoiceDetail .invoice-total-field:last-child {
        max-width: none;
    }
}


/* =========================================================
   Account Balance dropdown
   Keep labels and values compact while preserving alignment.
   ========================================================= */

.account-balance-row {
    display: grid;
    grid-template-columns: 110px max-content;
    column-gap: 8px;
    align-items: center;
    justify-content: start;
}


/* =========================================================
   Distribution Detail
   Allow the Distribution form to use the available modal width.
   ========================================================= */

#DistributionDetail {
    width: calc(100% - 20px);
    max-width: 560px;
    min-width: 0;
    box-sizing: border-box;
}

#DistributionDetail form {
    width: 100%;
    box-sizing: border-box;
}

#DistributionDetail form .input-container {
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
}


#DistributionDetail form .input-container.with-unit {
    position: relative;
}


/* =========================================================
   AI Widget - manual height resize
   ========================================================= */

#ai-widget {
    min-height: 320px;
    max-height: calc(100vh - 20px);
}

/*
 * Bottom resize handle.
 * Header remains responsible for moving the widget.
 */
#ai-widget .ai-widget-resize-handle {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 12px;
    cursor: ns-resize;
    touch-action: none;
    z-index: 30;
}

#ai-widget .ai-widget-resize-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 42px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.28);
}

#ai-widget.ai-widget-resizing,
#ai-widget.ai-widget-resizing * {
    user-select: none;
}

#ai-widget.ai-widget-resizing {
    transition: none !important;
}

@media only screen and (max-width: 600px) {
    #ai-widget {
        min-height: 280px;
        max-height: calc(100vh - 16px);
    }
}


/* =========================================================
   AI Widget - expandable conversation area
   When the widget is resized, extra height is assigned to
   the content area above the input controls.
   ========================================================= */

#ai-widget {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

/* Header keeps its natural height. */
#ai-widget > .ai-header {
    flex: 0 0 auto;
}

/*
 * Main AI reading area.
 * This is the area that grows when the widget is made taller.
 */
#ai-widget > .ai-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

/*
 * Input controls stay at the bottom instead of leaving
 * the resized space underneath them.
 */
#ai-widget > .ai-input-area {
    flex: 0 0 auto;
}

/* Optional panels must not consume the flexible empty space. */
#ai-widget > #ai-debug-panel,
#ai-widget > #ai-usage-panel,
#ai-widget > #ai-sources-panel,
#ai-widget > #ai-response {
    flex: 0 0 auto;
}

/*
 * Leave a little room for the resize handle at the bottom.
 */
#ai-widget {
    padding-bottom: 12px;
}

/* =========================================================
   Nested data-entry modal sizing - final scoped rules
   ========================================================= */

/* Update bank transaction -> Add new bank account */
.bank-transaction-nested-modal > div {
    width: min(680px, calc(100vw - 40px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.bank-transaction-nested-modal > div > #winFrame {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Add new bank account -> Add new people */
.bank-account-nested-modal > div {
    width: min(540px, calc(100vw - 24px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.bank-account-nested-modal > div > #winFrame {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Narrow iframe / mobile fallback */
@media only screen and (max-width: 520px) {
    .bank-transaction-nested-modal > div,
    .bank-account-nested-modal > div {
        width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* =========================================================
   ClientDetail / Add new people - mobile responsive layout
   Desktop layout remains unchanged.
   ========================================================= */

@media only screen and (max-width: 600px) {

    /*
     * ClientDetail must fit inside the iframe viewport.
     * The desktop width of 440px must not force horizontal overflow.
     */
    #ClientDetail {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        min-width: 0 !important;
        margin: 12px auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    #ClientDetail form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #ClientDetail form .form-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /*
     * Keep label + input on one row where possible,
     * but allow the input to shrink with the phone width.
     */
    #ClientDetail form .input-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #ClientDetail form .input-container label {
        min-width: 110px !important;
        margin-right: 8px !important;
        flex: 0 0 110px !important;
    }

    #ClientDetail form .input-container input[type="text"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /*
     * Keep the Save button inside the visible ClientDetail area.
     */
    #ClientDetail .saveicon {
        float: none !important;
        display: block !important;
        margin: 12px 8px 0 auto !important;
    }
}

/* =========================================================
   Report financial-year dropdown
   Align dropdown exactly with its input field.
   ========================================================= */

.financial-year-field {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.financial-year-field > input {
    display: block;
    box-sizing: border-box;
}

.financial-year-field > .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
    transform: none !important;
    z-index: 1050;
}

/* =========================================================
   Expense Details - Financial Year dropdown alignment
   ========================================================= */

#financialyear {
    position: relative !important;
    display: inline-block !important;
}

#financialyear > input {
    display: block;
    box-sizing: border-box;
}

#financialyear > .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    transform: none !important;
    z-index: 1050;
}

/* =========================================================
   Profit & Loss table alignment
   ========================================================= */

/* Last Year / This Year headers */
#tabletest table thead th:nth-child(2),
#tabletest table thead th:nth-child(3) {
    text-align: center !important;
}

/* Account / description column */
#tabletest table tbody td:first-child {
    text-align: left !important;
}

/* All Last Year / This Year amounts */
#tabletest table tbody td:nth-child(2),
#tabletest table tbody td:nth-child(3) {
    text-align: right !important;
}

/* =========================================================
   Account table layout
   ========================================================= */

/* 固定三列宽度：
   ID 10%
   Type 45%
   Name 45%
   Name 比原来的约 2/3 宽度缩减约 1/3
*/
.account-table {
    width: 77.5%;
    table-layout: fixed;
}

.account-table th:nth-child(1),
.account-table td:nth-child(1) {
    width: 10%;
}

.account-table th:nth-child(2),
.account-table td:nth-child(2) {
    width: 22.5%;
}

.account-table th:nth-child(3),
.account-table td:nth-child(3) {
    width: 45%;
}

/* ID 列标题和 radio button 居中 */
.account-table th:nth-child(1),
.account-table td:nth-child(1) {
    text-align: center !important;
}

/* Radio button 本身居中 */
.account-table td:nth-child(1) input[type="radio"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   People table - center ID radio buttons
   ========================================================= */

#Client #tabletest th:first-child,
#Client #tabletest td:first-child {
    text-align: center !important;
}

#Client #tabletest td:first-child input[type="radio"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   Inventory table - center ID radio button
   ========================================================= */

#Inventory #tabletest th:first-child,
#Inventory #tabletest td[data-label="ID"] {
    text-align: center !important;
}

#Inventory #tabletest td[data-label="ID"] > a {
    display: block;
    width: 100%;
}

#Inventory #tabletest td[data-label="ID"] input[type="radio"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   Distribution table - center ID radio button
   ========================================================= */

#Distribution #tabletest th:first-child,
#Distribution #tabletest td[data-label="ID"] {
    text-align: center !important;
}

#Distribution #tabletest td[data-label="ID"] > a {
    display: block;
    width: 100%;
}

#Distribution #tabletest td[data-label="ID"] input[type="radio"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   Profit Item dropdown - exactly match input width
   ========================================================= */

#ProfitItemDetail form .input-container.dropdown > .dropdown-menu {
    left: var(--label-width-plus-margin) !important;
    width: calc(100% - var(--label-width-plus-margin)) !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    right: auto !important;
    transform: none !important;
}

/* =========================================================
   Loan dropdown - exactly match input width
   ========================================================= */

#LoanDetail form .input-container.dropdown > .dropdown-menu {
    left: var(--label-width-plus-margin) !important;
    width: calc(100% - var(--label-width-plus-margin)) !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    right: auto !important;
    transform: none !important;
}

/* =========================================================
   Asset dropdown - exactly match input width
   Exclude rows with + button
   ========================================================= */

#AssetDetail form .input-container.dropdown:not(:has(.jiaicon)) > .dropdown-menu {
    left: var(--label-width-plus-margin) !important;
    width: calc(100% - var(--label-width-plus-margin)) !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    right: auto !important;
    transform: none !important;
}

/* =========================================================
   Opening Balance dropdown - exactly match input width
   Exclude rows with + button
   ========================================================= */

#OpenbalDetail form .input-container.dropdown:not(:has(.jiaicon)) > .dropdown-menu {
    left: var(--label-width-plus-margin) !important;
    width: calc(100% - var(--label-width-plus-margin)) !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    right: auto !important;
    transform: none !important;
}

/* =========================================================
   Bank transaction dropdown - exactly match input width
   Exclude rows with + button
   ========================================================= */

#BankSdetail form .input-container.dropdown:not(:has(.jiaicon)) > .dropdown-menu {
    left: var(--label-width-plus-margin) !important;
    width: calc(100% - var(--label-width-plus-margin)) !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    right: auto !important;
    transform: none !important;
}

/* =========================================================
   Invoice top Transaction Method dropdown
   Exactly match the input width
   ========================================================= */

#InvoiceDetail .nav-pills > li.dropdown {
    position: relative !important;
}

#InvoiceDetail .nav-pills > li.dropdown > .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}

/* =========================================================
   Invoice Transaction Category dropdown
   Exactly match its input width
   ========================================================= */

#InvoiceDetail #tab .acctransactionselect {
    position: relative !important;
}

#InvoiceDetail #tab .acctransactionselect > .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}

/* =========================================================
   Invoice Payment Details - TranDetail dropdown
   Exactly match the input width
   ========================================================= */

#InvoiceDetail #form .paywayselect {
    position: relative !important;
}

#InvoiceDetail #form .paywayselect > .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}

/* =====================================================
   RWD_01_ORGANIZATIONS_V1

   Responsive Organizations layout.
   Applies to mobile portrait and mobile landscape.
   Desktop layout remains unchanged.
===================================================== */

@media screen and (max-width: 767.98px),
       screen and (orientation: landscape)
       and (max-height: 600px)
       and (pointer: coarse) {

    /* Main Organizations container */
    #Organization {
        width: calc(100% - 24px) !important;
        max-width: 440px !important;
        min-width: 0 !important;
        margin: 16px auto !important;
        padding: 16px 12px !important;
        box-sizing: border-box !important;
    }

    /* Prevent form layout from overflowing */
    #Organization form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Keep the table inside its container */
    #Organization #tabletest {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto;
    }

    #Organization #tabletest th,
    #Organization #tabletest td {
        padding: 8px 5px;
        font-size: 13px;
        white-space: normal;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }

    #Organization #tabletest th:first-child,
    #Organization #tabletest td:first-child {
        width: 44px;
        text-align: center;
    }

    /* Move the sidebar inside the content area */
    #Organization .float-menu {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 12px 0 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        text-align: center;
        box-sizing: border-box;
    }

    #Organization .float-menu .panel-body {
        width: 100%;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* Horizontal action toolbar */
    #Organization .sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: center;

        gap: 10px;
        width: 100%;
        float: none !important;
    }

    #Organization .sm-menu > button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        float: none !important;
        position: static !important;

        flex: 0 0 48px;
        width: 48px !important;
        min-width: 48px !important;
        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 6px !important;
        touch-action: manipulation;
    }

    #Organization .sm-menu > br {
        display: none !important;
    }
}


/* =====================================================
   RWD_02A_LANDSCAPE_NAV_V1
   Phone landscape navigation.
   Scope: 601–960px wide, up to 600px high.
   Desktop layout outside this range is unchanged.
===================================================== */

@media screen and (min-width: 601px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    header .mycontainer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
    }

    header .hamburger-menu-container {
        display: flex !important;
    }

    header #check {
        display: block !important;
    }

    header .nav-btn {
        position: fixed !important;
        top: 3rem !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 3rem) !important;
        height: calc(100dvh - 3rem) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;

        background: #333;
        box-sizing: border-box;

        transform: translateX(-100%) !important;
        transition: transform .3s ease;
    }

    header #check:checked ~ .nav-btn {
        transform: translateX(0) !important;
    }

    header .nav-links,
    header .nav-side {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
    }

    header .nav-links > ul,
    header .nav-side > ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        height: auto !important;
        padding: 0;
        margin: 0;
    }

    header .nav-link {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    header .nav-link > a {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 12px 16px !important;
        justify-content: space-between;
        font-size: 14px !important;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    header .mdropdown {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;

        display: none;
        opacity: 1;
        transform: none !important;
        pointer-events: auto;
        box-sizing: border-box;
    }

    header .nav-link:hover > .mdropdown,
    header .nav-link:focus-within > .mdropdown {
        display: block !important;
    }

    header .mdropdown > ul {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    header .mdropdown-link {
        max-width: 100%;
        box-sizing: border-box;
    }

    header .mdropdown-link > a {
        display: block;
        padding: 10px 20px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    header .organization-context-menu
           .mdropdown-link[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    header .account-balance-row {
        grid-template-columns:
            minmax(0, 110px) minmax(0, 1fr);
        max-width: 100%;
    }

    /* Keep the closed Inni launcher in the viewport. */
    #ai-open:not([hidden]) {
        position: fixed !important;
        right: 12px !important;
        bottom: 12px !important;
    }
}


/* =====================================================
   RWD_02C_MOBILE_NAV_V1

   Mobile navigation:
   - Portrait and landscape
   - Independent scrolling
   - Click-controlled submenu
   - No hover-triggered submenu on mobile
===================================================== */

@media screen and (max-width: 600px),
       screen and (min-width: 601px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    header .mycontainer {
        height: 3rem;
    }

    header .nav-btn {
        position: fixed !important;
        top: 3rem !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 3rem) !important;
        height: calc(100dvh - 3rem) !important;

        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;

        padding: 0 0 max(24px, env(safe-area-inset-bottom)) !important;
        margin: 0 !important;

        background: #333 !important;
        box-sizing: border-box !important;

        transform: translateX(-100%) !important;
        transition: transform .25s ease;
        z-index: 1100;
    }

    header #check:checked ~ .nav-btn {
        transform: translateX(0) !important;
    }

    header .nav-links,
    header .nav-side {
        flex: 0 0 auto !important;

        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header .nav-links > ul,
    header .nav-side > ul {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header .nav-link {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header .nav-link > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        min-height: 46px;
        height: auto !important;

        padding: 12px 18px !important;
        margin: 0 !important;

        line-height: 1.4 !important;
        font-size: 14px !important;
        transform: none !important;

        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(255,255,255,.15);
        overflow-wrap: anywhere;
    }

    /* Suppress hover opening on touch/mobile navigation. */
    header .nav-link > .mdropdown,
    header .nav-link:hover > .mdropdown,
    header .nav-link:focus-within > .mdropdown {
        display: none !important;
        position: static !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: none !important;
        transition: none !important;
    }

    /* Only explicit clicks expand the submenu. */
    header .nav-link.inni-submenu-open > .mdropdown {
        display: block !important;
        pointer-events: auto !important;
    }

    header .mdropdown > ul {
        position: static !important;
        top: auto !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header .mdropdown-link {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    header .mdropdown-link > a,
    header .mdropdown-link > form > button {
        display: flex;
        align-items: center;

        width: 100%;
        min-height: 44px;
        padding: 10px 24px !important;

        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }

    header .organization-context-menu
           .mdropdown-link[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    header .account-balance-row {
        grid-template-columns:
            minmax(0, 110px) minmax(0, 1fr);
    }

    header .nav-link.inni-submenu-open > a {
        background: #404040;
        color: #ffffff;
    }
}


/* =====================================================
   RWD_02D_NAV_WIDTH_V1
   Mobile navigation drawer width: 85%, max 360px.
   Preserve existing menu interactions and scrolling.
===================================================== */

@media screen and (max-width: 600px),
       screen and (min-width: 601px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    header .nav-btn {
        width: min(85vw, 360px) !important;
        max-width: min(85vw, 360px) !important;
        min-width: 0 !important;

        left: 0 !important;
        right: auto !important;

        box-sizing: border-box !important;
    }

    /* Completely offscreen while the menu is closed. */
    header #check:not(:checked) ~ .nav-btn {
        transform: translateX(-100%) !important;
    }

    /* Slide into the viewport when opened. */
    header #check:checked ~ .nav-btn {
        transform: translateX(0) !important;
    }

    /* Prevent submenu contents from stretching the drawer. */
    header .nav-links,
    header .nav-side,
    header .nav-links > ul,
    header .nav-side > ul,
    header .mdropdown,
    header .mdropdown > ul {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Keep account balance contents inside the drawer. */
    header .account-balance-row {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        grid-template-columns:
            minmax(0, 110px)
            minmax(0, 1fr);
    }

    header .account-balance-row > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* =====================================================
   RWD_02E_ACCOUNT_BALANCE_V1

   Compact Account Balance inside mobile navigation.
   Portrait and landscape only.
   Desktop navigation remains unchanged.
===================================================== */

@media screen and (max-width: 600px),
       screen and (min-width: 601px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Account balance panel */
    header .organization-context-menu
           .mdropdown-link[style*="min-width"] {

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 12px !important;
        box-sizing: border-box !important;

        background: #ffffff;
    }

    /* Four compact rows */
    header .organization-context-menu
           .account-balance-row {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) auto !important;

        column-gap: 12px !important;
        row-gap: 4px !important;

        align-items: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 5px 0 !important;
        margin: 0 !important;

        font-size: 12px !important;
        line-height: 1.5 !important;

        box-sizing: border-box !important;
    }

    /* Left labels */
    header .organization-context-menu
           .account-balance-row > :first-child {

        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;

        text-align: left !important;
        white-space: normal !important;

        overflow-wrap: anywhere;
    }

    /* Right amounts */
    header .organization-context-menu
           .account-balance-row > :last-child {

        display: inline-block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        justify-self: end !important;
        text-align: right !important;

        font-size: 12px !important;
        line-height: 1.4 !important;

        white-space: normal !important;
        overflow-wrap: anywhere;

        box-sizing: border-box !important;
    }

    /* Prevent Bootstrap badges stretching across panel */
    header .organization-context-menu
           .account-balance-row .badge {

        display: inline-block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 4px 7px !important;
        margin: 0 !important;

        border-radius: 5px !important;

        font-size: 11px !important;
        font-weight: 600 !important;

        text-align: right !important;
        vertical-align: middle !important;
    }

    /* Compact account links */
    header .organization-context-menu
           .mdropdown-link > a {

        min-height: 42px !important;
        padding: 10px 15px !important;

        font-size: 13px !important;
    }
}


/* =====================================================
   RWD_03A_BANK_DATA_V1
   Bank Data responsive table
   Mobile portrait and landscape only
===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Main Bank Data panel */
    #BankStatement {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Reserve room for the action buttons */
    #BankStatement > form {
        width: calc(100% - 48px) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Independent table scrolling */
    #BankStatement #scrollContainer {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        max-height: min(600px, 65dvh) !important;

        overflow-x: auto !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;

        box-sizing: border-box !important;
    }

    /* Keep all columns readable */
    #BankStatement #tabletest {
        width: 680px !important;
        min-width: 680px !important;
        max-width: none !important;

        table-layout: fixed !important;
        border-collapse: collapse;
    }

    #BankStatement #tabletest th,
    #BankStatement #tabletest td {
        padding: 7px 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        box-sizing: border-box;
    }

    /* ID */
    #BankStatement #tabletest th:nth-child(1),
    #BankStatement #tabletest td:nth-child(1) {
        width: 42px;
        text-align: center !important;
    }

    /* Date */
    #BankStatement #tabletest th:nth-child(2),
    #BankStatement #tabletest td:nth-child(2) {
        width: 100px;
        white-space: nowrap !important;
        word-break: normal !important;
    }

    /* Bank account */
    #BankStatement #tabletest th:nth-child(3),
    #BankStatement #tabletest td:nth-child(3) {
        width: 105px;
        overflow-wrap: anywhere;
    }

    /* Transaction method */
    #BankStatement #tabletest th:nth-child(4),
    #BankStatement #tabletest td:nth-child(4) {
        width: 70px;
    }

    /* Description */
    #BankStatement #tabletest th:nth-child(5),
    #BankStatement #tabletest td:nth-child(5) {
        width: 235px;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Amount */
    #BankStatement #tabletest th:nth-child(6),
    #BankStatement #tabletest td:nth-child(6) {
        width: 128px;
        white-space: nowrap !important;
        word-break: normal !important;
        text-align: right !important;
        padding-right: 10px !important;
    }

    /* Hide existing data-only column */
    #BankStatement #tabletest th:nth-child(7),
    #BankStatement #tabletest td:nth-child(7) {
        display: none !important;
    }

    /* Keep action menu within the panel */
    #BankStatement .float-menu {
        position: absolute !important;
        top: 3.25em !important;
        right: 0 !important;
        left: auto !important;
        width: 44px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #BankStatement .float-menu .panel-body {
        padding: 0 !important;
    }

    #BankStatement .float-menu .sm-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 44px !important;
        gap: 6px;
    }

    #BankStatement .float-menu .sm-menu > br {
        display: none !important;
    }

    #BankStatement .float-menu .sm-menu > button {
        width: 44px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 6px !important;
    }
}


/* =====================================================
   RWD_03A1_BANK_BUTTONS_V1
   Bank Data: place action buttons below the table.
   Mobile portrait and phone landscape only.
   Desktop and other pages remain unchanged.
===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Restore full available width for the table. */
    #BankStatement > form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Keep table horizontal scrolling independent. */
    #BankStatement #scrollContainer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    /* Move the action menu into normal document flow. */
    #BankStatement .float-menu.sidehead {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        float: none !important;
        clear: both !important;

        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #BankStatement .float-menu .panel-body {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Arrange Import, Add, Edit, Delete horizontally. */
    #BankStatement .float-menu .sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;

        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #BankStatement .float-menu .sm-menu > br {
        display: none !important;
    }

    #BankStatement .float-menu .sm-menu > button {
        display: inline-flex !important;
        flex: 0 0 44px !important;

        align-items: center !important;
        justify-content: center !important;

        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;

        padding: 6px !important;
        margin: 0 !important;

        border-radius: 5px !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }

    #BankStatement #selected-text {
        max-width: 100%;
        overflow-wrap: anywhere;
        margin-top: 10px;
    }
}


/* =====================================================
   RWD_03A2_LANDSCAPE_TABLE_FILL_V1

   Bank Data: expand table to fill available space
   in phone landscape.

   Portrait and desktop layouts remain unchanged.
===================================================== */

@media screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #BankStatement #tabletest {
        width: 100% !important;
        min-width: 680px !important;
        max-width: none !important;

        table-layout: fixed !important;
    }

    #BankStatement #scrollContainer {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}


/* ====================================================
   RWD_03B_INVOICE_V2
   Invoice responsive layout.
   Mobile portrait and compact landscape only.
   No desktop or other page changes.
==================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Invoice {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #Invoice > form {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #Invoice #scrollContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        max-height: min(600px, 65dvh) !important;

        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        box-sizing: border-box !important;
    }

    #Invoice #tabletest {
        width: 100% !important;
        min-width: 760px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    #Invoice #tabletest th,
    #Invoice #tabletest td {
        padding: 7px 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        box-sizing: border-box;
    }

    /* ID */
    #Invoice #tabletest th:nth-child(1),
    #Invoice #tabletest td:nth-child(1) {
        width: 42px;
        text-align: center !important;
    }

    /* Date */
    #Invoice #tabletest th:nth-child(2),
    #Invoice #tabletest td:nth-child(2) {
        width: 100px;
        white-space: nowrap !important;
        word-break: normal !important;
    }

    /* Transaction */
    #Invoice #tabletest th:nth-child(3),
    #Invoice #tabletest td:nth-child(3) {
        width: 100px;
        overflow-wrap: anywhere;
    }

    /* Description */
    #Invoice #tabletest th:nth-child(4),
    #Invoice #tabletest td:nth-child(4) {
        width: 220px;
        overflow-wrap: anywhere;
        white-space: normal !important;
    }

    /* Invoice No. */
    #Invoice #tabletest th:nth-child(5),
    #Invoice #tabletest td:nth-child(5) {
        width: 180px;
        overflow-wrap: anywhere;
        white-space: normal !important;
    }

    /* Total Amount */
    #Invoice #tabletest th:nth-child(6),
    #Invoice #tabletest td:nth-child(6) {
        width: 118px;
        white-space: nowrap !important;
        word-break: normal !important;
        text-align: right !important;
        padding-right: 10px !important;
    }

    /* Preserve original hidden Item column */
    #Invoice #tabletest th:nth-child(7),
    #Invoice #tabletest td:nth-child(7) {
        display: none !important;
    }

    /* Move action buttons below Invoice table */
    #Invoice .float-menu.sidehead {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        float: none !important;
        clear: both !important;

        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Invoice .float-menu .panel-body {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #Invoice .float-menu .sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        max-width: 100% !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #Invoice .float-menu .sm-menu > br {
        display: none !important;
    }

    #Invoice .float-menu .sm-menu > button {
        display: inline-flex !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 6px !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }

    #Invoice #selected-text {
        max-width: 100%;
        margin-top: 10px;
        overflow-wrap: anywhere;
    }
}


/* =====================================================
   RWD_03C_CLIENT_V1
   People / Client responsive layout.
   Three-column compact table and actions below.
   Scoped to #Client. Desktop unchanged.
===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Client {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #Client > form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #Client #scrollContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: min(600px, 65dvh) !important;

        overflow-x: auto !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    #Client #tabletest {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    #Client #tabletest th,
    #Client #tabletest td {
        padding: 8px 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        word-break: normal !important;
        vertical-align: middle;
    }

    /* ID / radio */
    #Client #tabletest th:nth-child(1),
    #Client #tabletest td:nth-child(1) {
        width: 48px !important;
        text-align: center !important;
    }

    /* Name */
    #Client #tabletest th:nth-child(2),
    #Client #tabletest td:nth-child(2) {
        width: 48% !important;
        text-align: left;
    }

    /* Category */
    #Client #tabletest th:nth-child(3),
    #Client #tabletest td:nth-child(3) {
        width: auto !important;
        text-align: left;
    }

    #Client #tabletest input[type="radio"] {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Place action buttons below the table */
    #Client .float-menu.sidehead {
        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;
        float: none !important;
        clear: both !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 12px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Client .float-menu .panel-body {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Client .float-menu .sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;

        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #Client .float-menu .sm-menu > br {
        display: none !important;
    }

    #Client .float-menu .sm-menu > button {
        display: inline-flex !important;
        flex: 0 0 44px !important;

        align-items: center !important;
        justify-content: center !important;

        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 6px !important;
        border-radius: 5px !important;

        box-sizing: border-box !important;
        touch-action: manipulation;
    }

    #Client #selected-text {
        max-width: 100%;
        margin-top: 10px;
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   RWD_03D_ACCOUNT_V1

   Account list responsive layout.
   Scoped to Account only, not OpeningBal.
   Desktop layout unchanged.
   ========================================================= */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Openbal.account-rwd03d {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #Openbal.account-rwd03d > form {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #Openbal.account-rwd03d #scrollContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: min(600px, 62dvh) !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    #Openbal.account-rwd03d .account-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    #Openbal.account-rwd03d .account-table th,
    #Openbal.account-rwd03d .account-table td {
        padding: 8px 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
        word-break: normal !important;
    }

    /* ID / radio */
    #Openbal.account-rwd03d .account-table th:nth-child(1),
    #Openbal.account-rwd03d .account-table td:nth-child(1) {
        width: 44px !important;
        text-align: center !important;
    }

    /* Account type */
    #Openbal.account-rwd03d .account-table th:nth-child(2),
    #Openbal.account-rwd03d .account-table td:nth-child(2) {
        width: 26% !important;
        text-align: left !important;
    }

    /* Account name */
    #Openbal.account-rwd03d .account-table th:nth-child(3),
    #Openbal.account-rwd03d .account-table td:nth-child(3) {
        width: auto !important;
        text-align: left !important;
    }

    #Openbal.account-rwd03d .account-table input[type="radio"] {
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Import / Add / Edit / Delete below the table */
    #Openbal.account-rwd03d .float-menu.sidehead {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Openbal.account-rwd03d .float-menu .panel-body {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Openbal.account-rwd03d .float-menu .sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Openbal.account-rwd03d .float-menu .sm-menu > br {
        display: none !important;
    }

    #Openbal.account-rwd03d .float-menu .sm-menu > button {
        display: inline-flex !important;
        flex: 0 0 44px !important;
        justify-content: center !important;
        align-items: center !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 6px !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }

    #Openbal.account-rwd03d #selected-text {
        max-width: 100%;
        margin-top: 10px;
        overflow-wrap: anywhere;
    }
}

@media screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Openbal.account-rwd03d #scrollContainer {
        max-height: 52dvh !important;
    }
}

/* END RWD_03D_ACCOUNT_V1 */


/* =====================================================
   RWD_03E_OPENING_BALANCE_V1
   Opening Balance list only.
   Account and desktop layouts unchanged.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Openbal.openingbal-rwd03e {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #Openbal.openingbal-rwd03e > form {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #Openbal.openingbal-rwd03e #scrollContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: min(600px, 62dvh) !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    #Openbal.openingbal-rwd03e #tabletest {
        width: 100% !important;
        min-width: 740px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    #Openbal.openingbal-rwd03e #tabletest th,
    #Openbal.openingbal-rwd03e #tabletest td {
        padding: 8px 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
        word-break: normal !important;
    }

    /* ID */
    #Openbal.openingbal-rwd03e #tabletest th:nth-child(1),
    #Openbal.openingbal-rwd03e #tabletest td:nth-child(1) {
        width: 54px !important;
        text-align: center !important;
    }

    /* Date */
    #Openbal.openingbal-rwd03e #tabletest th:nth-child(2),
    #Openbal.openingbal-rwd03e #tabletest td:nth-child(2) {
        width: 105px !important;
        white-space: nowrap !important;
    }

    /* Category */
    #Openbal.openingbal-rwd03e #tabletest th:nth-child(3),
    #Openbal.openingbal-rwd03e #tabletest td:nth-child(3) {
        width: 120px !important;
        overflow-wrap: anywhere;
    }

    /* AccountFullName */
    #Openbal.openingbal-rwd03e #tabletest th:nth-child(4),
    #Openbal.openingbal-rwd03e #tabletest td:nth-child(4) {
        width: 310px !important;
        overflow-wrap: anywhere;
    }

    /* Amount */
    #Openbal.openingbal-rwd03e #tabletest th:nth-child(5),
    #Openbal.openingbal-rwd03e #tabletest td:nth-child(5) {
        width: 145px !important;
        white-space: nowrap !important;
        text-align: right !important;
        padding-right: 10px !important;
        font-variant-numeric: tabular-nums;
    }

    #Openbal.openingbal-rwd03e #tabletest input[type="radio"] {
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Actions below table */
    #Openbal.openingbal-rwd03e .float-menu.sidehead {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Openbal.openingbal-rwd03e .float-menu .panel-body {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Openbal.openingbal-rwd03e .float-menu .sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #Openbal.openingbal-rwd03e .float-menu .sm-menu > br {
        display: none !important;
    }

    #Openbal.openingbal-rwd03e .float-menu .sm-menu > button {
        display: inline-flex !important;
        flex: 0 0 44px !important;
        justify-content: center !important;
        align-items: center !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 6px !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }

    #Openbal.openingbal-rwd03e #selected-text {
        max-width: 100%;
        margin-top: 10px;
        overflow-wrap: anywhere;
    }
}

@media screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {
    #Openbal.openingbal-rwd03e #scrollContainer {
        max-height: 52dvh !important;
    }
}

/* END RWD_03E_OPENING_BALANCE_V1 */


/* =====================================================
   RWD_03F_GENERAL_LEDGER_V1
   General Ledger responsive report.
   Mobile portrait / landscape only.
   Desktop and financial logic unchanged.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    .gl-rwd03f {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 20px 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .gl-rwd03f #topic {
        font-size: 22px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere;
    }

    /* Financial Year / Confirm / PDF controls */

    .gl-rwd03f > form.well.form-inline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .gl-rwd03f > form.well.form-inline > .form-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .gl-rwd03f .financial-year-field {
        max-width: 100% !important;
    }

    .gl-rwd03f input[name="financialyear"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .gl-rwd03f > form button {
        max-width: 100% !important;
        min-height: 36px;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Report and financial-access messages */

    .gl-rwd03f .gl-report-panel {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 12px 8px !important;
        background-color: white;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .gl-rwd03f .gl-report-panel .alert {
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        overflow-wrap: anywhere;
        box-sizing: border-box !important;
    }

    .gl-rwd03f .gl-report-panel .alert button {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Preserve all five ledger columns */

    .gl-rwd03f #ledgerTable {
        width: 100% !important;
        min-width: 780px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    .gl-rwd03f #ledgerTable th,
    .gl-rwd03f #ledgerTable td {
        padding: 8px 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
        word-break: normal !important;
    }

    /* Date */

    .gl-rwd03f #ledgerTable th:nth-child(1),
    .gl-rwd03f #ledgerTable td:nth-child(1) {
        width: 120px !important;
        white-space: nowrap !important;
    }

    /* Journal ID */

    .gl-rwd03f #ledgerTable th:nth-child(2),
    .gl-rwd03f #ledgerTable td:nth-child(2) {
        width: 110px !important;
        white-space: nowrap !important;
    }

    /* Debit / Credit */

    .gl-rwd03f #ledgerTable th:nth-child(3),
    .gl-rwd03f #ledgerTable td:nth-child(3) {
        width: 70px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* Account */

    .gl-rwd03f #ledgerTable th:nth-child(4),
    .gl-rwd03f #ledgerTable td:nth-child(4) {
        width: 320px !important;
        overflow-wrap: anywhere;
    }

    /* Amount: no wrapping or truncated digits */

    .gl-rwd03f #ledgerTable th:nth-child(5),
    .gl-rwd03f #ledgerTable td:nth-child(5) {
        width: 160px !important;
        white-space: nowrap !important;
        text-align: right !important;
        padding-right: 10px !important;
        font-variant-numeric: tabular-nums;
    }
}

/* END RWD_03F_GENERAL_LEDGER_V1 */


/* =====================================================
   RWD_03G_PROFIT_LOSS_V1
   Profit & Loss responsive layout.
   UAT: mobile portrait and landscape.
   Desktop and report logic unchanged.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    .pnl-rwd03g {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
    }

    .pnl-rwd03g #topic {
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    /* Financial year / Confirm / PDF */

    .pnl-rwd03g > form.well.form-inline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 15px !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    .pnl-rwd03g > form .form-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .pnl-rwd03g > form .input-container {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .pnl-rwd03g .financial-year-field {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .pnl-rwd03g input[name="financialyear"] {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .pnl-rwd03g > form button {
        min-height: 36px !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* White report panel */

    .pnl-rwd03g .pnl-report-panel {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 12px 8px !important;
        background-color: white;
        box-sizing: border-box !important;
    }

    /* Access and report error messages */

    .pnl-rwd03g .pnl-report-panel .alert {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
    }

    .pnl-rwd03g .pnl-report-panel .alert button {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Horizontal scrolling belongs to the report table,
       not the entire webpage. */

    .pnl-rwd03g .pnl-table-scroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    .pnl-rwd03g .pnl-table-scroll > table {
        width: 100% !important;
        min-width: 720px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    .pnl-rwd03g .pnl-table-scroll th,
    .pnl-rwd03g .pnl-table-scroll td {
        padding: 8px 7px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    /* Account description */

    .pnl-rwd03g .pnl-table-scroll th:nth-child(1),
    .pnl-rwd03g .pnl-table-scroll td:nth-child(1) {
        width: 330px !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    /* Last Year */

    .pnl-rwd03g .pnl-table-scroll th:nth-child(2),
    .pnl-rwd03g .pnl-table-scroll td:nth-child(2) {
        width: 195px !important;
        white-space: nowrap !important;
        text-align: right !important;
        font-variant-numeric: tabular-nums;
    }

    /* This Year */

    .pnl-rwd03g .pnl-table-scroll th:nth-child(3),
    .pnl-rwd03g .pnl-table-scroll td:nth-child(3) {
        width: 195px !important;
        white-space: nowrap !important;
        text-align: right !important;
        font-variant-numeric: tabular-nums;
    }

    .pnl-rwd03g .pnl-table-scroll thead th:nth-child(2),
    .pnl-rwd03g .pnl-table-scroll thead th:nth-child(3) {
        text-align: center !important;
    }
}

/* END RWD_03G_PROFIT_LOSS_V1 */


/* =====================================================
   RWD_03H_BALANCE_SHEET_V1
   Balance Sheet mobile responsive layout.
   Desktop unchanged.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    .bs-rwd03h {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
    }

    .bs-rwd03h #topic {
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    .bs-rwd03h > form.well.form-inline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 15px !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    .bs-rwd03h > form .form-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .bs-rwd03h > form .input-container,
    .bs-rwd03h .financial-year-field,
    .bs-rwd03h input[name="financialyear"] {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .bs-rwd03h > form button {
        min-height: 36px !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    .bs-rwd03h .bs-report-panel {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .bs-rwd03h .bs-report-panel .alert {
        max-width: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
    }

    .bs-rwd03h .bs-report-panel .alert button {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .bs-rwd03h #balanceTable {
        width: 100% !important;
        min-width: 720px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    .bs-rwd03h #balanceTable th,
    .bs-rwd03h #balanceTable td {
        padding: 8px 7px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    .bs-rwd03h #balanceTable th:nth-child(1),
    .bs-rwd03h #balanceTable td:nth-child(1) {
        width: 330px !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .bs-rwd03h #balanceTable th:nth-child(2),
    .bs-rwd03h #balanceTable td:nth-child(2),
    .bs-rwd03h #balanceTable th:nth-child(3),
    .bs-rwd03h #balanceTable td:nth-child(3) {
        width: 195px !important;
        white-space: nowrap !important;
        text-align: right !important;
        padding-right: 10px !important;
        font-variant-numeric: tabular-nums;
    }

    .bs-rwd03h #balanceTable td[colspan="3"] {
        white-space: normal !important;
        text-align: left !important;
    }
}

/* END RWD_03H_BALANCE_SHEET_V1 */


/* =====================================================
   RWD_03I_EXPENSE_DETAILS_V1
   Expense Details responsive layout.
   UAT only. Desktop and financial logic unchanged.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    .expense-rwd03i {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
    }

    .expense-rwd03i #topic {
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    /* Financial Year, Confirm and Download PDF */

    .expense-rwd03i #expenseForm {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 15px !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    .expense-rwd03i #expenseForm > div {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .expense-rwd03i #financialyear {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .expense-rwd03i #box2 {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .expense-rwd03i #expenseForm button {
        min-height: 36px !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    /* Main white report panel */

    .expense-rwd03i .expense-report-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    .expense-rwd03i .expense-report-panel .panel-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 8px 4px !important;
        box-sizing: border-box !important;
    }

    .expense-rwd03i .expense-report-panel h4 {
        max-width: 100% !important;
        line-height: 1.4 !important;
        overflow-wrap: anywhere;
    }

    /* Financial report access message */

    .expense-rwd03i .expense-report-panel .alert {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
    }

    .expense-rwd03i .expense-report-panel .alert button {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Separate scrolling for Summary and Detail tables */

    .expense-rwd03i .expense-summary-scroll,
    .expense-rwd03i .expense-detail-scroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    /* Summary: Sub-Category / Total Amount */

    .expense-rwd03i .expense-summary-scroll > table {
        width: 100% !important;
        min-width: 480px !important;
        max-width: none !important;
        table-layout: fixed !important;
    }

    .expense-rwd03i .expense-summary-scroll th,
    .expense-rwd03i .expense-summary-scroll td {
        padding: 8px 7px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        box-sizing: border-box !important;
    }

    .expense-rwd03i .expense-summary-scroll th:first-child,
    .expense-rwd03i .expense-summary-scroll td:first-child {
        width: 315px !important;
        overflow-wrap: anywhere;
    }

    .expense-rwd03i .expense-summary-scroll th:nth-child(2),
    .expense-rwd03i .expense-summary-scroll td:nth-child(2) {
        width: 165px !important;
        text-align: right !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }

    /* Detail: Date / JournalNo / Account / Amount */

    .expense-rwd03i .expense-detail-scroll #detailTable {
        width: 100% !important;
        min-width: 790px !important;
        max-width: none !important;
        table-layout: fixed !important;
    }

    .expense-rwd03i #detailTable th,
    .expense-rwd03i #detailTable td {
        padding: 8px 7px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    .expense-rwd03i #detailTable th:nth-child(1),
    .expense-rwd03i #detailTable td:nth-child(1) {
        width: 125px !important;
        white-space: nowrap !important;
    }

    .expense-rwd03i #detailTable th:nth-child(2),
    .expense-rwd03i #detailTable td:nth-child(2) {
        width: 150px !important;
        overflow-wrap: anywhere;
    }

    .expense-rwd03i #detailTable th:nth-child(3),
    .expense-rwd03i #detailTable td:nth-child(3) {
        width: 335px !important;
        overflow-wrap: anywhere;
    }

    .expense-rwd03i #detailTable th:nth-child(4),
    .expense-rwd03i #detailTable td:nth-child(4) {
        width: 180px !important;
        text-align: right !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }
}

/* END RWD_03I_EXPENSE_DETAILS_V1 */


/* =====================================================
   RWD_03J_DEPRECIATION_V1
   Schedule of Depreciation mobile responsive layout.
   Scoped to Depreciation only.
   Desktop and business logic unchanged.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    .depr-rwd03j {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
    }

    .depr-rwd03j > h3 {
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    /* Financial Year / Confirm / Download PDF */

    .depr-rwd03j > form.well.form-inline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 15px !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    .depr-rwd03j > form .form-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .depr-rwd03j > form .input-container,
    .depr-rwd03j .financial-year-field,
    .depr-rwd03j input[name="financialyear"] {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .depr-rwd03j > form button {
        min-height: 36px !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* White report area */

    .depr-rwd03j .depr-report-panel {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
        background-color: white;
    }

    /* Payment and empty-state messages */

    .depr-rwd03j .depr-report-panel .alert {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
    }

    .depr-rwd03j .depr-report-panel .alert button {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .depr-rwd03j .depr-report-panel > .text-center {
        max-width: 100% !important;
        padding: 20px 8px !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
    }

    /* Horizontal scroll only inside the table */

    .depr-rwd03j .depr-table-scroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    /* Ten-column depreciation report */

    .depr-rwd03j .depr-table-scroll #tabletest {
        width: 1320px !important;
        min-width: 1320px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    .depr-rwd03j .depr-table-scroll #tabletest th,
    .depr-rwd03j .depr-table-scroll #tabletest td {
        padding: 8px 7px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    .depr-rwd03j #tabletest th:nth-child(1),
    .depr-rwd03j #tabletest td:nth-child(1) {
        width: 50px !important;
        text-align: center !important;
    }

    .depr-rwd03j #tabletest th:nth-child(2),
    .depr-rwd03j #tabletest td:nth-child(2) {
        width: 230px !important;
        overflow-wrap: anywhere;
    }

    .depr-rwd03j #tabletest th:nth-child(3),
    .depr-rwd03j #tabletest td:nth-child(3) {
        width: 75px !important;
    }

    .depr-rwd03j #tabletest th:nth-child(4),
    .depr-rwd03j #tabletest td:nth-child(4) {
        width: 125px !important;
    }

    .depr-rwd03j #tabletest th:nth-child(5),
    .depr-rwd03j #tabletest td:nth-child(5) {
        width: 165px !important;
    }

    .depr-rwd03j #tabletest th:nth-child(6),
    .depr-rwd03j #tabletest td:nth-child(6) {
        width: 80px !important;
    }

    .depr-rwd03j #tabletest th:nth-child(7),
    .depr-rwd03j #tabletest td:nth-child(7) {
        width: 85px !important;
    }

    .depr-rwd03j #tabletest th:nth-child(8),
    .depr-rwd03j #tabletest td:nth-child(8) {
        width: 80px !important;
    }

    .depr-rwd03j #tabletest th:nth-child(9),
    .depr-rwd03j #tabletest td:nth-child(9) {
        width: 195px !important;
    }

    .depr-rwd03j #tabletest th:nth-child(10),
    .depr-rwd03j #tabletest td:nth-child(10) {
        width: 235px !important;
    }

    .depr-rwd03j #tabletest th {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .depr-rwd03j #tabletest td:nth-child(4),
    .depr-rwd03j #tabletest td:nth-child(5),
    .depr-rwd03j #tabletest td:nth-child(9),
    .depr-rwd03j #tabletest td:nth-child(10) {
        text-align: right !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }

    /* Empty state spans all 10 columns */

    .depr-rwd03j #tabletest td[colspan="10"] {
        width: auto !important;
        text-align: center !important;
        white-space: normal !important;
    }
}

/* END RWD_03J_DEPRECIATION_V1 */


/* =====================================================
   RWD_03K_INVENTORY_LEDGER_V1
   Inventory Ledger responsive layout.
   Scoped to Inventory Ledger only.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    .inventory-ledger-rwd03k {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
    }

    .inventory-ledger-rwd03k > h3 {
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    /* Financial Year and action buttons */

    .inventory-ledger-rwd03k > form.well.form-inline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 15px !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    .inventory-ledger-rwd03k > form .form-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .inventory-ledger-rwd03k > form .input-container,
    .inventory-ledger-rwd03k .financial-year-field,
    .inventory-ledger-rwd03k input[name="financialyear"] {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .inventory-ledger-rwd03k > form button {
        min-height: 36px !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Existing scroll container:
       horizontal and vertical scrolling stay here. */

    .inventory-ledger-rwd03k #scrollContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 600px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    /* Financial Report access message */

    .inventory-ledger-rwd03k #scrollContainer .alert {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
    }

    .inventory-ledger-rwd03k #scrollContainer .alert button {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Eight-column Inventory Ledger */

    .inventory-ledger-rwd03k #scrollContainer #tabletest {
        width: 1140px !important;
        min-width: 1140px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    .inventory-ledger-rwd03k #scrollContainer #tabletest th,
    .inventory-ledger-rwd03k #scrollContainer #tabletest td {
        display: table-cell !important;
        padding: 8px 7px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    .inventory-ledger-rwd03k #tabletest th {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* TransactionType */

    .inventory-ledger-rwd03k #tabletest th:nth-child(1),
    .inventory-ledger-rwd03k #tabletest td:nth-child(1) {
        width: 145px !important;
    }

    /* TransactionDate */

    .inventory-ledger-rwd03k #tabletest th:nth-child(2),
    .inventory-ledger-rwd03k #tabletest td:nth-child(2) {
        width: 150px !important;
        white-space: nowrap !important;
    }

    /* WarehouseType */

    .inventory-ledger-rwd03k #tabletest th:nth-child(3),
    .inventory-ledger-rwd03k #tabletest td:nth-child(3) {
        width: 145px !important;
    }

    /* Item */

    .inventory-ledger-rwd03k #tabletest th:nth-child(4),
    .inventory-ledger-rwd03k #tabletest td:nth-child(4) {
        width: 250px !important;
        overflow-wrap: anywhere;
    }

    /* Price */

    .inventory-ledger-rwd03k #tabletest th:nth-child(5),
    .inventory-ledger-rwd03k #tabletest td:nth-child(5) {
        width: 125px !important;
    }

    /* Total_Cost */

    .inventory-ledger-rwd03k #tabletest th:nth-child(6),
    .inventory-ledger-rwd03k #tabletest td:nth-child(6) {
        width: 125px !important;
    }

    /* Qty */

    .inventory-ledger-rwd03k #tabletest th:nth-child(7),
    .inventory-ledger-rwd03k #tabletest td:nth-child(7) {
        width: 95px !important;
    }

    /* Balance */

    .inventory-ledger-rwd03k #tabletest th:nth-child(8),
    .inventory-ledger-rwd03k #tabletest td:nth-child(8) {
        width: 105px !important;
    }

    .inventory-ledger-rwd03k #tabletest td:nth-child(5),
    .inventory-ledger-rwd03k #tabletest td:nth-child(6),
    .inventory-ledger-rwd03k #tabletest td:nth-child(7),
    .inventory-ledger-rwd03k #tabletest td:nth-child(8) {
        text-align: right !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }
}

/* END RWD_03K_INVENTORY_LEDGER_V1 */


/* =====================================================
   RWD_03K_CONFIRM_HEIGHT_V1
   Inventory Ledger Financial Year / Confirm alignment
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    .inventory-ledger-rwd03k
    input[name="financialyear"] {
        height: 34px !important;
        min-height: 34px !important;
        box-sizing: border-box !important;
    }

    .inventory-ledger-rwd03k
    > form.well.form-inline button.btn-sm {
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        line-height: 32px !important;
        box-sizing: border-box !important;
        vertical-align: middle !important;
    }
}

/* END RWD_03K_CONFIRM_HEIGHT_V1 */


/* =====================================================
   RWD_03J_CONFIRM_HEIGHT_V1
   Depreciation Financial Year / Confirm alignment
   All viewport sizes; Depreciation page only.
   ===================================================== */

.depr-rwd03j > form.well.form-inline
input[name="financialyear"] {
    height: 34px !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.depr-rwd03j > form.well.form-inline
button.btn-sm {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* END RWD_03J_CONFIRM_HEIGHT_V1 */


/* =====================================================
   RWD_03I_CONFIRM_HEIGHT_V1
   Expense Details Financial Year / Confirm alignment
   All viewport sizes; Expense Details page only.
   ===================================================== */

.expense-rwd03i #expenseForm #box2 {
    height: 34px !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.expense-rwd03i #expenseForm button.btn-sm {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* END RWD_03I_CONFIRM_HEIGHT_V1 */


/* =====================================================
   RWD_03L_GST_RETURN_V1
   GST Return responsive layout.
   UAT only - financial logic unchanged.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Main page */

    .gst-rwd03l {
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
    }

    .gst-rwd03l #topic {
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    /* Start Date / End Date / buttons */

    .gst-rwd03l > form.well {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 15px !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    .gst-rwd03l #gst-return-controls {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .gst-rwd03l #gst-return-controls .gst-date-group {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .gst-rwd03l #gst-return-controls input[type="date"] {
        width: 160px !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 28px !important;
        box-sizing: border-box !important;
    }

    .gst-rwd03l #gst-return-controls .gst-button-group {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        max-width: 100% !important;
    }

    .gst-rwd03l #gst-return-controls button.btn {
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        box-sizing: border-box !important;
    }

    /* White GST report container */

    .gst-rwd03l .main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 15px auto !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .gst-rwd03l .main > h3 {
        font-size: 17px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere;
    }

    /* Payment access message */

    .gst-rwd03l .main .alert {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
    }

    .gst-rwd03l .main .alert button {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Each GST table scrolls independently */

    .gst-rwd03l .gst-table-scroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
        margin-bottom: 12px;
    }

    .gst-rwd03l .gst-table-scroll > .gst-report-table {
        display: table !important;
        width: 760px !important;
        min-width: 760px !important;
        max-width: none !important;
        table-layout: auto !important;
        border-collapse: collapse;
    }

    .gst-rwd03l .gst-report-table th,
    .gst-rwd03l .gst-report-table td {
        display: table-cell !important;
        padding: 8px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    .gst-rwd03l .gst-report-table .input-box {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        font-variant-numeric: tabular-nums;
    }

    .gst-rwd03l .gst-report-table
    input[type="date"].input-box {
        min-height: 28px !important;
    }

    .gst-rwd03l .gst-report-table .right-align {
        text-align: right !important;
    }
}

/* END RWD_03L_GST_RETURN_V1 */


/* =====================================================
   RWD_03M_INCOME_TAX_RETURN_V1
   Income Tax Return responsive year/action controls.
   UAT only. Existing tax report layout preserved.
   ===================================================== */

@media screen and (max-width: 768px) {

    .tax-return-page {
        width: calc(100% - 16px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
    }

    .tax-return-page .tax-report-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .tax-return-page .tax-year-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    /* Financial Year occupies the first row.
       Confirm and PDF wrap onto the next row. */

    .tax-return-page .tax-year-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .tax-return-page .tax-year-field {
        display: flex !important;
        flex: 0 0 100% !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .tax-return-page .tax-year-field label {
        display: block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    .tax-return-page .tax-year-field select {
        display: block !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        box-sizing: border-box !important;
    }

    .tax-return-page .tax-year-row > button.btn {
        display: inline-flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: none !important;
        padding: 0 12px !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    /* Preserve existing vertical tax amount layout. */

    .tax-return-page .tax-section,
    .tax-return-page .tax-row,
    .tax-return-page .tax-info {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .tax-return-page .tax-label,
    .tax-return-page .tax-info {
        overflow-wrap: anywhere;
    }
}

/* END RWD_03M_INCOME_TAX_RETURN_V1 */


/* =====================================================
   RWD_03N_CASH_BANK_LIST_V1
   Cash and Bank Accounts responsive list.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #BankAccount.contentstyle {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
    }

    #BankAccount > h2 {
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    #BankAccount > form.well {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    #BankAccount #scrollContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 600px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    #BankAccount #tabletest {
        display: table !important;
        width: 660px !important;
        min-width: 660px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    #BankAccount #tabletest th,
    #BankAccount #tabletest td {
        display: table-cell !important;
        padding: 8px 7px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    #BankAccount #tabletest th:nth-child(1),
    #BankAccount #tabletest td:nth-child(1) {
        width: 55px !important;
        text-align: center !important;
    }

    #BankAccount #tabletest th:nth-child(2),
    #BankAccount #tabletest td:nth-child(2) {
        width: 120px !important;
        overflow-wrap: anywhere;
    }

    #BankAccount #tabletest th:nth-child(3),
    #BankAccount #tabletest td:nth-child(3) {
        width: 230px !important;
        overflow-wrap: anywhere;
    }

    #BankAccount #tabletest th:nth-child(4),
    #BankAccount #tabletest td:nth-child(4) {
        width: 255px !important;
        overflow-wrap: anywhere;
    }

    #BankAccount #tabletest td[colspan="4"] {
        width: auto !important;
        text-align: center !important;
    }

    #BankAccount #tabletest input[type="radio"] {
        margin: 0 auto !important;
        vertical-align: middle !important;
    }

    #BankAccount #selected-text {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }
}

/* END RWD_03N_CASH_BANK_LIST_V1 */


/* =====================================================
   RWD_03N_CASH_BANK_WIDTH_V2
   Portrait: narrower account columns.
   Landscape: eliminate unused right-side space.
   BankAccount page only.
   ===================================================== */

/* Mobile portrait */

@media screen and (max-width: 767.98px) {

    #BankAccount #scrollContainer #tabletest {
        width: 510px !important;
        min-width: 510px !important;
        max-width: none !important;
        table-layout: fixed !important;
    }

    #BankAccount #tabletest th:nth-child(1),
    #BankAccount #tabletest td:nth-child(1) {
        width: 50px !important;
    }

    #BankAccount #tabletest th:nth-child(2),
    #BankAccount #tabletest td:nth-child(2) {
        width: 100px !important;
    }

    #BankAccount #tabletest th:nth-child(3),
    #BankAccount #tabletest td:nth-child(3) {
        width: 190px !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    #BankAccount #tabletest th:nth-child(4),
    #BankAccount #tabletest td:nth-child(4) {
        width: 170px !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}

/* Mobile landscape */

@media screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #BankAccount #scrollContainer #tabletest {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    #BankAccount #tabletest th:nth-child(1),
    #BankAccount #tabletest td:nth-child(1) {
        width: 8% !important;
    }

    #BankAccount #tabletest th:nth-child(2),
    #BankAccount #tabletest td:nth-child(2) {
        width: 17% !important;
    }

    #BankAccount #tabletest th:nth-child(3),
    #BankAccount #tabletest td:nth-child(3) {
        width: 39% !important;
        overflow-wrap: anywhere !important;
    }

    #BankAccount #tabletest th:nth-child(4),
    #BankAccount #tabletest td:nth-child(4) {
        width: 36% !important;
        overflow-wrap: anywhere !important;
    }
}

/* END RWD_03N_CASH_BANK_WIDTH_V2 */


/* =====================================================
   RWD_03O_INVENTORY_LIST_V1
   Settings -> Inventory responsive list.
   UAT only. Business logic unchanged.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Main Inventory container */

    #Inventory.contentstyle {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
    }

    #Inventory > h2 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    /* White form container */

    #Inventory > form.well {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    /* Keep scrolling inside the table container */

    #Inventory #scrollContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 600px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Three-column table */

    #Inventory #scrollContainer #tabletest {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        margin-bottom: 0 !important;
    }

    #Inventory #tabletest th,
    #Inventory #tabletest td {
        display: table-cell !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    #Inventory #tabletest th:nth-child(1),
    #Inventory #tabletest td:nth-child(1) {
        width: 48px !important;
        text-align: center !important;
    }

    #Inventory #tabletest th:nth-child(2),
    #Inventory #tabletest td:nth-child(2) {
        width: 100px !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    #Inventory #tabletest th:nth-child(3),
    #Inventory #tabletest td:nth-child(3) {
        width: auto !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    #Inventory #tabletest td[colspan="3"] {
        width: auto !important;
        text-align: center !important;
    }

    #Inventory #tabletest input[type="radio"] {
        display: block !important;
        margin: 0 auto !important;
        vertical-align: middle !important;
    }

    #Inventory #selected-text {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }
}

/* Landscape: distribute all three columns proportionally */

@media screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Inventory #tabletest th:nth-child(1),
    #Inventory #tabletest td:nth-child(1) {
        width: 8% !important;
    }

    #Inventory #tabletest th:nth-child(2),
    #Inventory #tabletest td:nth-child(2) {
        width: 27% !important;
    }

    #Inventory #tabletest th:nth-child(3),
    #Inventory #tabletest td:nth-child(3) {
        width: 65% !important;
    }
}

/* END RWD_03O_INVENTORY_LIST_V1 */


/* =====================================================
   RWD_03P_ASSETS_LIST_V1
   Settings -> Assets responsive list.
   Scoped to #Asset only.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Asset.contentstyle {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
    }

    #Asset > h2 {
        max-width: 100% !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    #Asset > form.well {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    /* Scrolling belongs to the table, not the page. */

    #Asset #scrollContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 600px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    #Asset #scrollContainer #tabletest {
        display: table !important;
        width: 480px !important;
        min-width: 480px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        margin-bottom: 0 !important;
    }

    #Asset #tabletest th,
    #Asset #tabletest td {
        display: table-cell !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    #Asset #tabletest th {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* ID */

    #Asset #tabletest th:nth-child(1),
    #Asset #tabletest td[data-label="ID"] {
        width: 50px !important;
        text-align: center !important;
    }

    /* Category */

    #Asset #tabletest th:nth-child(2),
    #Asset #tabletest td[data-label="Category"] {
        width: 165px !important;
        overflow-wrap: anywhere !important;
    }

    /* Name */

    #Asset #tabletest th:nth-child(3),
    #Asset #tabletest td[data-label="Name"] {
        width: 150px !important;
        overflow-wrap: anywhere !important;
    }

    /* Start date */

    #Asset #tabletest th:nth-child(4),
    #Asset #tabletest td[data-label="Start date"] {
        width: 115px !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    #Asset #tabletest td[colspan="4"] {
        text-align: center !important;
        width: auto !important;
    }

    #Asset #tabletest input[type="radio"] {
        display: block !important;
        margin: 0 auto !important;
        vertical-align: middle !important;
    }

    #Asset #selected-text {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }
}

/* Mobile landscape: use all available table width. */

@media screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Asset #scrollContainer #tabletest {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #Asset #tabletest th:nth-child(1),
    #Asset #tabletest td[data-label="ID"] {
        width: 8% !important;
    }

    #Asset #tabletest th:nth-child(2),
    #Asset #tabletest td[data-label="Category"] {
        width: 34% !important;
    }

    #Asset #tabletest th:nth-child(3),
    #Asset #tabletest td[data-label="Name"] {
        width: 38% !important;
    }

    #Asset #tabletest th:nth-child(4),
    #Asset #tabletest td[data-label="Start date"] {
        width: 20% !important;
    }
}

/* END RWD_03P_ASSETS_LIST_V1 */


/* =====================================================
   RWD_03Q_LIABILITIES_LIST_V1
   Settings / Liabilities responsive list.
   Scoped to #Loan only.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Loan.contentstyle {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
    }

    #Loan > h2 {
        max-width: 100% !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    #Loan > form.well {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    /* Keep horizontal scrolling inside the table */

    #Loan #scrollContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 600px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    #Loan #scrollContainer #tabletest {
        display: table !important;
        width: 570px !important;
        min-width: 570px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        margin-bottom: 0 !important;
    }

    #Loan #tabletest th,
    #Loan #tabletest td {
        display: table-cell !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    #Loan #tabletest th {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* ID */

    #Loan #tabletest th:nth-child(1),
    #Loan #tabletest td[data-label="ID"] {
        width: 50px !important;
        text-align: center !important;
    }

    /* Category */

    #Loan #tabletest th:nth-child(2),
    #Loan #tabletest td[data-label="Category"] {
        width: 110px !important;
        overflow-wrap: anywhere !important;
    }

    /* Name */

    #Loan #tabletest th:nth-child(3),
    #Loan #tabletest td[data-label="Name"] {
        width: 170px !important;
        overflow-wrap: anywhere !important;
    }

    /* Principal */

    #Loan #tabletest th:nth-child(4),
    #Loan #tabletest td[data-label="Principal"] {
        width: 125px !important;
        text-align: right !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }

    /* Due date */

    #Loan #tabletest th:nth-child(5),
    #Loan #tabletest td[data-label="Due date"] {
        width: 115px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    #Loan #tabletest td[colspan="5"] {
        width: auto !important;
        text-align: center !important;
    }

    #Loan #tabletest input[type="radio"] {
        display: block !important;
        margin: 0 auto !important;
        vertical-align: middle !important;
    }

    #Loan #selected-text {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }
}

/* Mobile landscape: fill available table width */

@media screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Loan #scrollContainer #tabletest {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #Loan #tabletest th:nth-child(1),
    #Loan #tabletest td[data-label="ID"] {
        width: 8% !important;
    }

    #Loan #tabletest th:nth-child(2),
    #Loan #tabletest td[data-label="Category"] {
        width: 17% !important;
    }

    #Loan #tabletest th:nth-child(3),
    #Loan #tabletest td[data-label="Name"] {
        width: 31% !important;
    }

    #Loan #tabletest th:nth-child(4),
    #Loan #tabletest td[data-label="Principal"] {
        width: 24% !important;
    }

    #Loan #tabletest th:nth-child(5),
    #Loan #tabletest td[data-label="Due date"] {
        width: 20% !important;
    }
}

/* END RWD_03Q_LIABILITIES_LIST_V1 */


/* =====================================================
   RWD_03Q_SIDEBAR_BOTTOM_V1
   Liabilities mobile Add/Edit/Delete placement.
   Desktop and shared Sidebar remain unchanged.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Loan .loan-sidebar-bottom-rwd03q {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 12px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    #Loan .loan-sidebar-bottom-rwd03q
    > .float-menu.sidehead {
        display: block !important;
        position: static !important;
        float: none !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #Loan .loan-sidebar-bottom-rwd03q
    .panel-body {
        display: flex !important;
        position: static !important;
        float: none !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Loan .loan-sidebar-bottom-rwd03q
    .btn-group-vertical.sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        position: static !important;
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    #Loan .loan-sidebar-bottom-rwd03q
    .sm-menu > br {
        display: none !important;
    }

    #Loan .loan-sidebar-bottom-rwd03q
    .sm-menu > button.btn {
        display: inline-flex !important;
        position: static !important;
        float: none !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 6px !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
    }

    #Loan .loan-sidebar-bottom-rwd03q
    .sm-menu > button.btn + button.btn {
        margin-left: 0 !important;
    }
}

/* END RWD_03Q_SIDEBAR_BOTTOM_V1 */


/* =====================================================
   RWD_03R_SERVICE_SPENDING_V1
   Settings -> Service and spending
   Organizations-style mobile action toolbar
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #ProfitItem.contentstyle {
        display: block !important;
        position: relative !important;
        float: none !important;
        clear: both !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 20px 12px 16px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #ProfitItem > h2 {
        max-width: 100% !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    #ProfitItem > form {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #ProfitItem #scrollContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 600px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    #ProfitItem #scrollContainer #tabletest {
        display: table !important;
        width: 560px !important;
        min-width: 560px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        margin: 0 !important;
    }

    #ProfitItem #tabletest th,
    #ProfitItem #tabletest td {
        display: table-cell !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
    }

    #ProfitItem #tabletest th {
        white-space: normal !important;
    }

    #ProfitItem #tabletest th:nth-child(1),
    #ProfitItem #tabletest td[data-label="ID"] {
        width: 48px !important;
        text-align: center !important;
    }

    #ProfitItem #tabletest th:nth-child(2),
    #ProfitItem #tabletest td[data-label="Category"] {
        width: 105px !important;
    }

    #ProfitItem #tabletest th:nth-child(3),
    #ProfitItem #tabletest td[data-label="subCategory"] {
        width: 195px !important;
    }

    #ProfitItem #tabletest th:nth-child(4),
    #ProfitItem #tabletest td[data-label="Items"] {
        width: 212px !important;
    }

    #ProfitItem #tabletest td[colspan="4"] {
        width: auto !important;
        text-align: center !important;
    }

    #ProfitItem #tabletest input[type="radio"] {
        display: block !important;
        margin: 0 auto !important;
    }

    /* Organizations-style action toolbar */

    #ProfitItem > .float-menu.sidehead {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    #ProfitItem > .float-menu .panel-body {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    #ProfitItem > .float-menu .sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        float: none !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #ProfitItem > .float-menu .sm-menu > br {
        display: none !important;
    }

    #ProfitItem > .float-menu .sm-menu > button.btn {
        display: inline-flex !important;
        position: static !important;
        float: none !important;
        flex: 0 0 48px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }

    #ProfitItem > .float-menu .sm-menu > button.btn
    + button.btn {
        margin-left: 0 !important;
    }

    #ProfitItem #selected-text {
        display: block !important;
        clear: both !important;
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }
}

/* Phone landscape - use available table width */

@media screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #ProfitItem #scrollContainer #tabletest {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #ProfitItem #tabletest th:nth-child(1),
    #ProfitItem #tabletest td[data-label="ID"] {
        width: 8% !important;
    }

    #ProfitItem #tabletest th:nth-child(2),
    #ProfitItem #tabletest td[data-label="Category"] {
        width: 18% !important;
    }

    #ProfitItem #tabletest th:nth-child(3),
    #ProfitItem #tabletest td[data-label="subCategory"] {
        width: 34% !important;
    }

    #ProfitItem #tabletest th:nth-child(4),
    #ProfitItem #tabletest td[data-label="Items"] {
        width: 40% !important;
    }
}

/* END RWD_03R_SERVICE_SPENDING_V1 */


/* =====================================================
   RWD_03S_DISTRIBUTION_V1
   Settings -> Distribution responsive layout.
   Organizations-style action toolbar.
   Scope: #Distribution only.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Main purple content area */

    #Distribution.contentstyle {
        display: block !important;
        position: relative !important;
        float: none !important;
        clear: both !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 20px 12px 16px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #Distribution > h2 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    /* Form and scroll area */

    #Distribution > form {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Distribution #scrollContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 600px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Three-column table */

    #Distribution #scrollContainer #tabletest {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        margin: 0 !important;
    }

    #Distribution #tabletest th,
    #Distribution #tabletest td {
        display: table-cell !important;
        padding: 8px 5px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    #Distribution #tabletest th {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* ID */

    #Distribution #tabletest th:nth-child(1),
    #Distribution #tabletest td[data-label="ID"] {
        width: 46px !important;
        text-align: center !important;
    }

    /* Distribution item */

    #Distribution #tabletest th:nth-child(2),
    #Distribution #tabletest
    td[data-label="Distribution item"] {
        width: 57% !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    /* Percentage */

    #Distribution #tabletest th:nth-child(3),
    #Distribution #tabletest
    td[data-label="Percentage"] {
        width: auto !important;
        text-align: right !important;
        padding-right: 8px !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }

    /* End row */

    #Distribution #tabletest td[colspan="3"] {
        width: auto !important;
        text-align: center !important;
    }

    #Distribution #tabletest input[type="radio"] {
        display: block !important;
        margin: 0 auto !important;
    }

    /* Move floating Sidebar beneath the table */

    #Distribution > .container-fluid.float-menu.sidehead {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    #Distribution > .float-menu .panel-body {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Organizations-style horizontal toolbar */

    #Distribution > .float-menu .sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Distribution > .float-menu .sm-menu > br {
        display: none !important;
    }

    #Distribution > .float-menu
    .sm-menu > button.btn {
        display: inline-flex !important;
        position: static !important;
        float: none !important;
        flex: 0 0 48px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }

    #Distribution > .float-menu
    .sm-menu > button.btn + button.btn {
        margin-left: 0 !important;
    }

    #Distribution #selected-text {
        display: block !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
        overflow-wrap: anywhere;
    }
}

/* END RWD_03S_DISTRIBUTION_V1 */


/* =====================================================
   RWD_03N_BANKASH_SIDEBAR_BOTTOM_V1
   Settings -> Bank/cash accounts
   Organizations-style mobile action toolbar.
   Existing bank table widths are preserved.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Main purple content area */

    #BankAccount.contentstyle {
        display: block !important;
        position: relative !important;
        float: none !important;
        clear: both !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 20px 12px 16px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #BankAccount > h2 {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere;
    }

    /* Keep form in normal document flow */

    #BankAccount > form {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    /* Retain existing table widths and inner scrolling */

    #BankAccount #scrollContainer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Move floating Sidebar below the table */

    #BankAccount .float-menu.sidehead {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 12px 0 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    #BankAccount .float-menu .panel-body {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Horizontal Add / Edit / Delete toolbar */

    #BankAccount .float-menu .sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;
        position: static !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #BankAccount .float-menu .sm-menu > br {
        display: none !important;
    }

    #BankAccount .float-menu
    .sm-menu > button.btn {
        display: inline-flex !important;
        position: static !important;
        float: none !important;

        flex: 0 0 48px !important;
        align-items: center !important;
        justify-content: center !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;

        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }

    #BankAccount .float-menu
    .sm-menu > button.btn + button.btn {
        margin-left: 0 !important;
    }

    #BankAccount #selected-text {
        display: block !important;
        clear: both !important;
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }
}

/* END RWD_03N_BANKASH_SIDEBAR_BOTTOM_V1 */


/* =====================================================
   RWD_03O_INVENTORY_SIDEBAR_BOTTOM_V1
   Settings / Inventory
   Organizations-style mobile action toolbar.
   CSS only. Existing Inventory table retained.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #Inventory.contentstyle {
        display: block !important;
        position: relative !important;
        float: none !important;
        clear: both !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 20px 12px 16px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #Inventory > h2 {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    #Inventory > form.well {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        box-sizing: border-box !important;
    }

    #Inventory #scrollContainer {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Disable global absolute positioning */

    #Inventory .float-menu.sidehead {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    #Inventory .float-menu .panel-body {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Horizontal Add / Edit / Delete */

    #Inventory .float-menu .sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Inventory .float-menu .sm-menu > br {
        display: none !important;
    }

    #Inventory .float-menu .sm-menu > button.btn {
        display: inline-flex !important;
        position: static !important;
        float: none !important;
        flex: 0 0 48px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }

    #Inventory .float-menu .sm-menu
    > button.btn + button.btn {
        margin-left: 0 !important;
    }

    #Inventory #selected-text {
        display: block !important;
        clear: both !important;
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }
}

/* END RWD_03O_INVENTORY_SIDEBAR_BOTTOM_V1 */


/* =====================================================
   RWD_03P_ASSETS_SIDEBAR_BOTTOM_V1
   Settings -> Assets
   Organizations-style mobile action toolbar.
   Existing four-column table remains unchanged.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Full-width purple content area */

    #Asset.contentstyle {
        display: block !important;
        position: relative !important;
        float: none !important;
        clear: both !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 20px 12px 16px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #Asset > h2 {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
    }

    /* Keep form in normal document flow */

    #Asset > form {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    /* Preserve table scrolling */

    #Asset #scrollContainer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow-x: auto !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Move Sidebar below the table */

    #Asset .float-menu.sidehead {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 12px 0 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    #Asset .float-menu .panel-body {
        display: block !important;
        position: static !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Horizontal Add / Edit / Delete buttons */

    #Asset .float-menu .sm-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;

        position: static !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Asset .float-menu .sm-menu > br {
        display: none !important;
    }

    #Asset .float-menu .sm-menu > button.btn {
        display: inline-flex !important;
        position: static !important;
        float: none !important;

        flex: 0 0 48px !important;
        align-items: center !important;
        justify-content: center !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;

        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 6px !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }

    #Asset .float-menu .sm-menu
    > button.btn + button.btn {
        margin-left: 0 !important;
    }

    #Asset #selected-text {
        display: block !important;
        clear: both !important;
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }
}

/* END RWD_03P_ASSETS_SIDEBAR_BOTTOM_V1 */


/* =====================================================
   RWD_03A_BANK_TRANSACTION_DETAIL_V1
   Bank transaction Add / Update mobile form.
   CSS only. UAT.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #BankSdetail.contentstyle {
        display: block !important;
        position: relative !important;
        float: none !important;
        clear: both !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 20px 12px 24px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        text-align: center !important;
    }

    #BankSdetail > h2 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    #BankSdetail form#form {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        text-align: left !important;
    }

    /* Do not override JavaScript-controlled display
       on the Item row. */

    #BankSdetail form#form .form-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 7px 0 !important;
        box-sizing: border-box !important;
    }

    /* Label + input */

    #BankSdetail form#form .input-container {
        display: grid !important;
        grid-template-columns:
            90px minmax(0, 1fr) !important;
        column-gap: 6px !important;
        align-items: center !important;
        justify-content: stretch !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Label + input + Add button */

    #BankSdetail form#form
    .input-container:has(> .jiaicon) {
        grid-template-columns:
            90px minmax(0, 1fr) 28px !important;
    }

    #BankSdetail form#form
    .input-container > label {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: left !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    #BankSdetail form#form
    .input-container > input[type="text"],
    #BankSdetail form#form
    .input-container > input[type="date"] {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: relative !important;
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 3px 5px !important;
        font-size: 12px !important;
        line-height: normal !important;
        box-sizing: border-box !important;
    }

    /* Bank / Item / Distribution plus buttons */

    #BankSdetail form#form
    .input-container > .jiaicon {
        display: block !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
        position: static !important;
        float: none !important;
        transform: none !important;
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-self: center !important;
        align-self: center !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    /* Dropdowns aligned below inputs */

    #BankSdetail form#form
    .input-container.dropdown > .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 96px !important;
        right: auto !important;
        width: calc(100% - 96px) !important;
        min-width: 0 !important;
        max-width: none !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 1050 !important;
    }

    #BankSdetail form#form
    .input-container.dropdown:has(> .jiaicon)
    > .dropdown-menu {
        width: calc(100% - 130px) !important;
    }

    /* Bottom action icons */

    #BankSdetail > .saveicon,
    #BankSdetail > .backwardicon {
        display: inline-block !important;
        position: relative !important;
        float: none !important;
        vertical-align: middle !important;
        margin: 14px 8px 0 !important;
        max-width: calc(50% - 20px) !important;
    }

    /* Nested Add modal */

    #winModal.bank-transaction-nested-modal
    > div {
        width: calc(100vw - 30px) !important;
        min-width: 0 !important;
        max-width: 560px !important;
        max-height: calc(100dvh - 30px) !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    #winModal.bank-transaction-nested-modal
    #winFrame {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* END RWD_03A_BANK_TRANSACTION_DETAIL_V1 */


/* =====================================================
   RWD_03T_ORGANIZATION_DETAIL_V1
   Add / Update Organization responsive form
   UAT only.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Main content */

    #OrganizDetail.contentstyle {
        display: block !important;
        position: relative !important;
        float: none !important;
        clear: both !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        margin: 0 auto !important;
        padding: 20px 12px 24px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
        text-align: center !important;
    }

    #OrganizDetail > h2 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    /* White form */

    #OrganizDetail form#form {
        display: block !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 14px 9px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
        text-align: left !important;
    }

    /* Basic info heading */

    #OrganizDetail form#form
    .form-section-header {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 0 8px !important;
        padding: 0 !important;

        text-align: left !important;
        box-sizing: border-box !important;
    }

    /* Each form row */

    #OrganizDetail form#form .form-row {
        display: flex !important;
        align-items: center !important;
        justify-content: stretch !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 7px 0 !important;

        box-sizing: border-box !important;
    }

    /* Two-column label/input grid */

    #OrganizDetail form#form
    .input-container {
        display: grid !important;
        grid-template-columns:
            112px minmax(0, 1fr) !important;
        column-gap: 7px !important;

        align-items: center !important;
        justify-content: stretch !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Labels */

    #OrganizDetail form#form
    .input-container > label {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: block !important;
        position: static !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: left !important;
        white-space: normal !important;

        box-sizing: border-box !important;
    }

    /* Text and date inputs */

    #OrganizDetail form#form
    .input-container > input[type="text"],
    #OrganizDetail form#form
    .input-container > input[type="date"] {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: block !important;
        position: relative !important;
        flex: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 32px !important;
        min-height: 32px !important;

        margin: 0 !important;
        padding: 3px 6px !important;

        font-size: 12px !important;
        line-height: normal !important;

        box-sizing: border-box !important;
    }

    #OrganizDetail form#form
    input[name="Country"] {
        text-overflow: ellipsis;
    }

    /* Dropdown aligned with input column */

    #OrganizDetail form#form
    .input-container.dropdown > .dropdown-menu {
        position: absolute !important;

        top: 100% !important;
        left: 119px !important;
        right: auto !important;

        width: calc(100% - 119px) !important;
        min-width: 0 !important;
        max-width: none !important;

        max-height: 200px !important;
        overflow-y: auto !important;

        transform: none !important;
        box-sizing: border-box !important;
        z-index: 1050 !important;
    }

    #OrganizDetail form#form
    .dropdown-menu > li > a {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 12px !important;
    }

    /* Back and Save buttons */

    #OrganizDetail > .backwardicon,
    #OrganizDetail > .saveicon {
        display: inline-block !important;
        position: relative !important;
        float: none !important;

        vertical-align: middle !important;

        width: 64px !important;
        height: 64px !important;
        max-width: calc(50% - 16px) !important;

        margin: 14px 10px 0 !important;
    }

    /* Validation messages */

    #OrganizDetail > ul {
        clear: both !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        text-align: left !important;
    }
}

/* END RWD_03T_ORGANIZATION_DETAIL_V1 */


/* =====================================================
   RWD_03U_ACCOUNT_DETAIL_BUTTONS_V1
   Settings -> Add / Edit Account
   Mobile Back-left, Save-right layout.
   Client page unaffected.
   ===================================================== */

/* On desktop retain the original button layout. */

#ClientDetail.account-detail-rwd03u
> .account-actions-rwd03u {
    display: contents;
}

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #ClientDetail.account-detail-rwd03u {
        display: block !important;
        position: relative !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-bottom: 22px !important;
        box-sizing: border-box !important;
    }

    /* The two input fields retain their existing styles. */

    #ClientDetail.account-detail-rwd03u
    > .account-actions-rwd03u {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 18px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 12px auto 0 !important;
        padding: 0 !important;

        clear: both !important;
        box-sizing: border-box !important;
    }

    #ClientDetail.account-detail-rwd03u
    > .account-actions-rwd03u > button {
        display: block !important;
        position: static !important;
        float: none !important;

        flex: 0 0 64px !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    #ClientDetail.account-detail-rwd03u
    > .account-actions-rwd03u > .backwardicon {
        order: 1 !important;
    }

    #ClientDetail.account-detail-rwd03u
    > .account-actions-rwd03u > .saveicon {
        order: 2 !important;
    }
}

/* END RWD_03U_ACCOUNT_DETAIL_BUTTONS_V1 */


/* ===================================================
   RWD_03E_OPENBAL_DETAIL_V1
   Opening Balance Add / Update mobile detail
   CSS-only UAT patch
   =================================================== */

@media screen and (max-width:767.98px),
       screen and (min-width:768px)
       and (max-width:960px)
       and (max-height:600px)
       and (orientation:landscape) {

  #OpenbalDetail.contentstyle {
    display: grid !important;
    grid-template-columns: 1fr 64px 18px 64px 1fr !important;
    grid-template-rows: auto auto auto !important;
    width: calc(100% - 20px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 20px 12px 24px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    float: none !important;
    clear: both !important;
  }

  #OpenbalDetail > h2 {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    font-size: 21px !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  #OpenbalDetail form#form {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #OpenbalDetail form#form .form-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 7px 0 !important;
    box-sizing: border-box !important;
  }

  #OpenbalDetail form#form .input-container {
    display: grid !important;
    grid-template-columns: 104px minmax(0,1fr) !important;
    column-gap: 6px !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #OpenbalDetail form#form
  .input-container:has(> .jiaicon) {
    grid-template-columns:
      104px minmax(0,1fr) 28px !important;
  }

  #OpenbalDetail form#form .input-container > label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  #OpenbalDetail form#form
  .input-container > input[type="text"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  #OpenbalDetail form#form .input-container > .jiaicon {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: block !important;
    position: static !important;
    float: none !important;
    transform: none !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: center !important;
  }

  #OpenbalDetail form#form
  .input-container.dropdown > .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 110px !important;
    right: auto !important;
    width: calc(100% - 110px) !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    box-sizing: border-box !important;
    z-index: 1050 !important;
  }

  #OpenbalDetail form#form
  .input-container.dropdown:has(> .jiaicon)
  > .dropdown-menu {
    width: calc(100% - 138px) !important;
  }

  /* Back left, Save right; keep HTML handlers intact */

  #OpenbalDetail > .backwardicon,
  #OpenbalDetail > .saveicon {
    display: block !important;
    position: static !important;
    float: none !important;
    grid-row: 3 !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #OpenbalDetail > .backwardicon {
    grid-column: 2 !important;
  }

  #OpenbalDetail > .saveicon {
    grid-column: 4 !important;
  }

  #OpenbalDetail > ul {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  /* Existing nested Add Item modal */

  #winModal > div {
    width: calc(100vw - 30px) !important;
    min-width: 0 !important;
    max-width: 560px !important;
    max-height: calc(100dvh - 30px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  #winModal #winFrame {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* END RWD_03E_OPENBAL_DETAIL_V1 */


/* =====================================================
   RWD_03C_PEOPLE_DETAIL_BUTTONS_V1
   Add / Edit People mobile actions.
   Scoped to ClientDetail.html only.
   ===================================================== */

/* Preserve the original desktop presentation. */

#ClientDetail.people-detail-rwd03cb
> .people-actions-rwd03cb {
    display: contents;
}

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #ClientDetail.people-detail-rwd03cb {
        display: block !important;
        position: relative !important;
        float: none !important;
        clear: both !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;
        padding-bottom: 22px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Keep the already working form layout. */

    #ClientDetail.people-detail-rwd03cb
    > .people-actions-rwd03cb {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 18px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 12px auto 0 !important;
        padding: 0 !important;

        clear: both !important;
        box-sizing: border-box !important;
    }

    #ClientDetail.people-detail-rwd03cb
    > .people-actions-rwd03cb > button {
        display: block !important;
        position: static !important;
        float: none !important;

        flex: 0 0 64px !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    /* Back visually precedes Save on mobile. */

    #ClientDetail.people-detail-rwd03cb
    > .people-actions-rwd03cb > .backwardicon {
        order: 1 !important;
    }

    #ClientDetail.people-detail-rwd03cb
    > .people-actions-rwd03cb > .saveicon {
        order: 2 !important;
    }

    #ClientDetail.people-detail-rwd03cb
    > ul {
        clear: both !important;
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }
}

/* END RWD_03C_PEOPLE_DETAIL_BUTTONS_V1 */


/* =====================================================
   RWD_03N_BANK_ACCOUNT_DETAIL_V1
   Bank account Add / Update mobile layout.
   Scope: BankashDetail only.
   CSS only - no business logic changes.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /*
       Main area uses grid to position
       Back and Save without changing HTML.
    */

    #BankashDetail.contentstyle {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) 64px 18px 64px
            minmax(0, 1fr) !important;

        grid-template-rows:
            auto auto auto !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 20px 12px 24px !important;

        float: none !important;
        clear: both !important;
        position: relative !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #BankashDetail > h2 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;

        overflow-wrap: anywhere;
    }

    /* White form */

    #BankashDetail form#form {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;
        padding: 12px 8px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Six form rows */

    #BankashDetail form#form .form-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 7px 0 !important;

        box-sizing: border-box !important;
    }

    /*
       Preserve JavaScript-controlled display
       on the Account holder row.
    */

    #BankashDetail form#form .input-container {
        display: grid !important;

        grid-template-columns:
            112px minmax(0, 1fr) !important;

        column-gap: 6px !important;

        align-items: center !important;
        justify-content: stretch !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /*
       Account holder:
       label + input + plus button.
    */

    #BankashDetail form#form
    .input-container:has(> .jiaicon) {
        grid-template-columns:
            112px minmax(0, 1fr) 28px !important;
    }

    /* Labels */

    #BankashDetail form#form
    .input-container > label {
        display: block !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        position: static !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.4 !important;

        text-align: left !important;
        white-space: normal !important;

        box-sizing: border-box !important;
    }

    /* Text inputs */

    #BankashDetail form#form
    .input-container > input[type="text"] {
        display: block !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        position: relative !important;
        flex: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 32px !important;
        min-height: 32px !important;

        margin: 0 !important;
        padding: 3px 5px !important;

        font-size: 12px !important;
        line-height: normal !important;

        box-sizing: border-box !important;
    }

    /*
       Account numbers and long holder names
       remain editable; no value truncation.
    */

    #BankashDetail form#form
    input[name="AccountNumber"] {
        text-align: left !important;
    }

    /* Account holder plus button */

    #BankashDetail form#form
    .input-container > .jiaicon {
        display: block !important;

        grid-column: 3 !important;
        grid-row: 1 !important;

        position: static !important;
        float: none !important;
        transform: none !important;

        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;

        height: 28px !important;
        min-height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-self: center !important;
        justify-self: center !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    /* Dropdown alignment */

    #BankashDetail form#form
    .input-container.dropdown > .dropdown-menu {
        position: absolute !important;

        top: 100% !important;
        left: 118px !important;
        right: auto !important;

        width: calc(100% - 118px) !important;
        min-width: 0 !important;
        max-width: none !important;

        max-height: 200px !important;
        overflow-y: auto !important;

        transform: none !important;
        box-sizing: border-box !important;
        z-index: 1050 !important;
    }

    #BankashDetail form#form
    .input-container.dropdown:has(> .jiaicon)
    > .dropdown-menu {
        width: calc(100% - 146px) !important;
    }

    /* Back left / Save right */

    #BankashDetail > .backwardicon,
    #BankashDetail > .saveicon {
        display: block !important;

        position: static !important;
        float: none !important;

        grid-row: 3 !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    #BankashDetail > .backwardicon {
        grid-column: 2 !important;
    }

    #BankashDetail > .saveicon {
        grid-column: 4 !important;
    }

    /*
       In modal mode, Back is absent.
       Save remains available.
    */

    /* Nested People modal */

    #winModal.bank-account-nested-modal > div {
        width: calc(100vw - 30px) !important;
        min-width: 0 !important;
        max-width: 560px !important;

        max-height: calc(100dvh - 30px) !important;
        overflow-y: auto !important;

        box-sizing: border-box !important;
    }

    #winModal.bank-account-nested-modal #winFrame {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* END RWD_03N_BANK_ACCOUNT_DETAIL_V1 */


/* =====================================================
   RWD_03O_INVENTORY_DETAIL_V1
   Inventory Detail mobile layout improvement
   Scope: InventoryDetail only
   CSS only - no HTML / JS / controller changes
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #InventoryDetail.contentstyle {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) 64px 18px 64px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 18px 12px 24px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
        float: none !important;
        position: relative !important;
    }

    #InventoryDetail > h2 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;

        text-align: center !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }

    #InventoryDetail form.well.form-horizontal {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 14px !important;
        padding: 14px 10px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #InventoryDetail .form-row {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 7px 0 !important;

        box-sizing: border-box !important;
    }

    #InventoryDetail form .input-container {
        display: grid !important;
        grid-template-columns: 118px minmax(0, 1fr) !important;
        column-gap: 8px !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        position: relative !important;
    }

    #InventoryDetail form .input-container label {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: block !important;
        position: static !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        white-space: normal !important;

        box-sizing: border-box !important;
    }

    #InventoryDetail form .input-container input[type="text"] {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 32px !important;
        min-height: 32px !important;

        margin: 0 !important;
        padding: 3px 6px !important;

        font-size: 12px !important;
        line-height: normal !important;

        box-sizing: border-box !important;
    }

    #InventoryDetail form .input-container.dropdown > .dropdown-menu,
    #InventoryDetail form .input-container .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 126px !important;
        right: auto !important;

        width: calc(100% - 126px) !important;
        min-width: 0 !important;
        max-width: none !important;

        max-height: 200px !important;
        overflow-y: auto !important;

        transform: none !important;
        box-sizing: border-box !important;
        z-index: 1050 !important;
    }

    #InventoryDetail > .backwardicon,
    #InventoryDetail > .saveicon {
        display: block !important;
        position: static !important;
        float: none !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
        z-index: 1 !important;
    }

    #InventoryDetail > .backwardicon {
        grid-row: 3 !important;
        grid-column: 2 !important;
    }

    #InventoryDetail > .saveicon {
        grid-row: 3 !important;
        grid-column: 4 !important;
    }
}

/* END RWD_03O_INVENTORY_DETAIL_V1 */


/* =====================================================
   RWD_03P_ASSET_DETAIL_V1
   Settings -> Add / Edit Asset
   Mobile responsive form
   CSS only - UAT
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Main area and bottom action positions */

    #AssetDetail.contentstyle {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) 64px 18px 64px
            minmax(0, 1fr) !important;

        grid-template-rows:
            auto auto auto !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        position: relative !important;
        float: none !important;
        clear: both !important;

        margin: 0 auto !important;
        padding: 20px 12px 24px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #AssetDetail > h2 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    /* White form */

    #AssetDetail form#form {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;
        padding: 12px 8px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #AssetDetail form#form .form-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 7px 0 !important;

        box-sizing: border-box !important;
    }

    /* Two columns: label and input */

    #AssetDetail form#form .input-container {
        display: grid !important;

        grid-template-columns:
            108px minmax(0, 1fr) !important;

        column-gap: 6px !important;

        align-items: center !important;
        justify-content: stretch !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Distribution has an additional plus button */

    #AssetDetail form#form
    .input-container:has(> .jiaicon) {
        grid-template-columns:
            108px minmax(0, 1fr) 28px !important;
    }

    /* Labels */

    #AssetDetail form#form
    .input-container > label {
        display: block !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        position: static !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.4 !important;

        white-space: normal !important;
        text-align: left !important;

        box-sizing: border-box !important;
    }

    /* Text fields and native date field */

    #AssetDetail form#form
    .input-container > input[type="text"],
    #AssetDetail form#form
    .input-container > input[type="date"] {
        display: block !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        position: relative !important;
        flex: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 32px !important;
        min-height: 32px !important;

        margin: 0 !important;
        padding: 3px 5px !important;

        font-size: 12px !important;
        line-height: normal !important;

        box-sizing: border-box !important;
    }

    #AssetDetail form#form
    input[name="StartDate"] {
        min-width: 0 !important;
        max-width: 100% !important;
        color-scheme: light;
    }

    /* Preserve T.D.R. percentage formatting */

    #AssetDetail form#form
    .input-container > input[name="TaxDepreRate"] {
        padding-right: 30px !important;
    }

    #AssetDetail form#form
    .taxdeprerate .input-container > .unit-percent {
        grid-column: 2 !important;
        grid-row: 1 !important;

        position: relative !important;
        z-index: 2 !important;

        justify-self: end !important;
        align-self: center !important;

        width: auto !important;
        max-width: 25px !important;

        margin: 0 8px 0 0 !important;
        padding: 0 !important;

        right: auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;

        pointer-events: none !important;
    }

    /* Distribution Add button */

    #AssetDetail form#form
    .input-container > .jiaicon {
        display: block !important;

        grid-column: 3 !important;
        grid-row: 1 !important;

        position: static !important;
        float: none !important;
        transform: none !important;

        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;

        height: 28px !important;
        min-height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        justify-self: center !important;
        align-self: center !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    /* Dropdowns align with their text inputs */

    #AssetDetail form#form
    .input-container.dropdown > .dropdown-menu {
        position: absolute !important;

        top: 100% !important;
        left: 114px !important;
        right: auto !important;

        width: calc(100% - 114px) !important;
        min-width: 0 !important;
        max-width: none !important;

        max-height: 200px !important;
        overflow-y: auto !important;

        transform: none !important;
        box-sizing: border-box !important;
        z-index: 1050 !important;
    }

    #AssetDetail form#form
    .input-container.dropdown:has(> .jiaicon)
    > .dropdown-menu {
        width: calc(100% - 142px) !important;
    }

    #AssetDetail form#form
    .dropdown-menu > li > a {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Back left / Save right */

    #AssetDetail > .backwardicon,
    #AssetDetail > .saveicon {
        display: block !important;

        grid-row: 3 !important;

        position: static !important;
        float: none !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    #AssetDetail > .backwardicon {
        grid-column: 2 !important;
    }

    #AssetDetail > .saveicon {
        grid-column: 4 !important;
    }

    #AssetDetail > ul {
        grid-column: 1 / -1 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    /* Nested Distribution Add modal */

    #winModal > div {
        width: calc(100vw - 30px) !important;
        min-width: 0 !important;
        max-width: 560px !important;

        max-height: calc(100dvh - 30px) !important;
        overflow-y: auto !important;

        box-sizing: border-box !important;
    }

    #winModal #winFrame {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* END RWD_03P_ASSET_DETAIL_V1 */


/* =====================================================
   RWD_03Q_LOAN_DETAIL_V1
   Settings -> Add / Edit Loan
   Mobile responsive form
   UAT only - CSS only
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Main container and action button layout */

    #LoanDetail.contentstyle {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            64px 18px 64px
            minmax(0, 1fr) !important;

        grid-template-rows:
            auto auto auto !important;

        position: relative !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 20px 12px 24px !important;

        float: none !important;
        clear: both !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Heading */

    #LoanDetail > h2 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;

        overflow-wrap: anywhere;
    }

    /* White form */

    #LoanDetail form#form {
        display: block !important;

        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;
        padding: 12px 8px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Six form rows */

    #LoanDetail form#form .form-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 7px 0 !important;

        box-sizing: border-box !important;
    }

    /* Two-column field layout */

    #LoanDetail form#form .input-container {
        display: grid !important;

        grid-template-columns:
            105px minmax(0, 1fr) !important;

        column-gap: 6px !important;

        align-items: center !important;
        justify-content: stretch !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Labels */

    #LoanDetail form#form
    .input-container > label {
        display: block !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        position: static !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.4 !important;

        text-align: left !important;
        white-space: normal !important;

        box-sizing: border-box !important;
    }

    /* Text and native date inputs */

    #LoanDetail form#form
    .input-container > input[type="text"],
    #LoanDetail form#form
    .input-container > input[type="date"] {
        display: block !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        position: relative !important;
        flex: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 32px !important;
        min-height: 32px !important;

        margin: 0 !important;
        padding: 3px 6px !important;

        font-size: 12px !important;
        line-height: normal !important;

        box-sizing: border-box !important;
    }

    #LoanDetail form#form
    input[type="date"] {
        color-scheme: light;
        min-width: 0 !important;
    }

    /* Interest rate percent unit */

    #LoanDetail form#form
    .input-container.with-unit
    > input[name="InterestRate"] {
        padding-right: 30px !important;
    }

    #LoanDetail form#form
    .input-container.with-unit
    > .unit-percent {
        grid-column: 2 !important;
        grid-row: 1 !important;

        position: relative !important;

        justify-self: end !important;
        align-self: center !important;

        width: auto !important;
        max-width: 26px !important;

        margin: 0 8px 0 0 !important;
        padding: 0 !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        pointer-events: none !important;
        z-index: 2 !important;
    }

    /* Category dropdown */

    #LoanDetail form#form
    .input-container.dropdown
    > .dropdown-menu {
        position: absolute !important;

        top: 100% !important;
        left: 111px !important;
        right: auto !important;

        width: calc(100% - 111px) !important;
        min-width: 0 !important;
        max-width: none !important;

        max-height: 200px !important;
        overflow-y: auto !important;

        transform: none !important;
        box-sizing: border-box !important;
        z-index: 1050 !important;
    }

    /* Back left / Save right */

    #LoanDetail > .backwardicon,
    #LoanDetail > .saveicon {
        display: block !important;

        grid-row: 3 !important;

        position: static !important;
        float: none !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    #LoanDetail > .backwardicon {
        grid-column: 2 !important;
    }

    #LoanDetail > .saveicon {
        grid-column: 4 !important;
    }

    /* Form validation messages */

    #LoanDetail > ul {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow-wrap: anywhere;
    }
}

/* END RWD_03Q_LOAN_DETAIL_V1 */


/* =====================================================
   RWD_03R_PROFIT_ITEM_DETAIL_V1
   Settings -> Add / Edit Profit Item
   Responsive mobile detail form
   UAT only - CSS only
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Purple content and bottom buttons */

    #ProfitItemDetail.contentstyle {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            64px 18px 64px
            minmax(0, 1fr) !important;

        grid-template-rows: auto auto auto !important;

        position: relative !important;
        float: none !important;
        clear: both !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 20px 12px 24px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Title */

    #ProfitItemDetail > h2 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;

        overflow-wrap: anywhere;
    }

    /* White form */

    #ProfitItemDetail form#form {
        display: block !important;

        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;
        padding: 12px 8px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Three input rows */

    #ProfitItemDetail form#form .form-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 7px 0 !important;

        box-sizing: border-box !important;
    }

    /* Label + input */

    #ProfitItemDetail form#form .input-container {
        display: grid !important;

        grid-template-columns:
            105px minmax(0, 1fr) !important;

        column-gap: 6px !important;

        align-items: center !important;
        justify-content: stretch !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #ProfitItemDetail form#form
    .input-container > label {
        display: block !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        position: static !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: left !important;
        white-space: normal !important;

        box-sizing: border-box !important;
    }

    #ProfitItemDetail form#form
    .input-container > input[type="text"] {
        display: block !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        position: relative !important;
        flex: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 32px !important;
        min-height: 32px !important;

        margin: 0 !important;
        padding: 3px 6px !important;

        font-size: 12px !important;
        line-height: normal !important;

        box-sizing: border-box !important;
    }

    /* Category and subcategory dropdowns */

    #ProfitItemDetail form#form
    .input-container.dropdown > .dropdown-menu {
        position: absolute !important;

        top: 100% !important;
        left: 111px !important;
        right: auto !important;

        width: calc(100% - 111px) !important;
        min-width: 0 !important;
        max-width: none !important;

        max-height: 200px !important;
        overflow-y: auto !important;

        transform: none !important;
        box-sizing: border-box !important;
        z-index: 1050 !important;
    }

    #ProfitItemDetail form#form
    .dropdown-menu > li > a {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Back left, Save right */

    #ProfitItemDetail > .backwardicon,
    #ProfitItemDetail > .saveicon {
        display: block !important;

        grid-row: 3 !important;

        position: static !important;
        float: none !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    #ProfitItemDetail > .backwardicon {
        grid-column: 2 !important;
    }

    #ProfitItemDetail > .saveicon {
        grid-column: 4 !important;
    }

    /* Validation errors */

    #ProfitItemDetail > ul {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow-wrap: anywhere;
    }
}

/* END RWD_03R_PROFIT_ITEM_DETAIL_V1 */


/* =====================================================
   RWD_03V_USER_BALANCE_V1
   User Balance / Payment details responsive layout.

   CSS only, scoped to the exact User Balance structure.
   Preserves all five columns and financial precision.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /*
       Override the template's inline width:900px.
       Match only userbalance.html's direct table structure.
    */

    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) {
        display: block !important;

        position: relative !important;
        float: none !important;
        clear: both !important;

        left: auto !important;
        right: auto !important;
        transform: none !important;

        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 0 auto !important;
        padding: 20px 12px 24px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Payment details heading */

    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) > h3 {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 14px !important;
        padding: 0 !important;

        font-size: 21px !important;
        line-height: 1.4 !important;

        text-align: center !important;
        overflow-wrap: anywhere !important;

        box-sizing: border-box !important;
    }

    /*
       Put horizontal scrolling inside the report,
       not on the whole browser page.
    */

    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) > #scrollContainer {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        max-height: 600px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: auto !important;
        overflow-y: auto !important;

        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* Keep five readable columns */

    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest {
        display: table !important;

        width: 100% !important;
        min-width: 760px !important;
        max-width: none !important;

        table-layout: fixed !important;
        border-collapse: collapse !important;

        margin: 0 !important;
        box-sizing: border-box !important;
    }

    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest th,
    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest td {
        display: table-cell !important;

        padding: 8px 7px !important;

        font-size: 12px !important;
        line-height: 1.45 !important;

        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    /* Transaction Type */

    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest th:nth-child(1),
    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest td:nth-child(1) {
        width: 150px !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    /* Transaction Date */

    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest th:nth-child(2),
    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest td:nth-child(2) {
        width: 125px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* Reference */

    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest th:nth-child(3),
    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest td:nth-child(3) {
        width: 185px !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    /* Financial values: right aligned, no truncation */

    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest th:nth-child(4),
    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest th:nth-child(5),
    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest td:nth-child(4),
    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #tabletest td:nth-child(5) {
        width: 150px !important;
        text-align: right !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }

    /*
       Existing hidden notices also contain 700px inline
       widths. Prevent them from widening the mobile view
       when shown.
    */

    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #PayNotice,
    div.contentstyle:has(
        > #scrollContainer > table#tabletest
    ) #NotComplete {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 16px 10px !important;

        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }
}

/* END RWD_03V_USER_BALANCE_V1 */


/* =====================================================
   RWD_03W_MY_ACCOUNT_V2
   My Account mobile responsive form.
   Dedicated page class; Registration unaffected.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    #INRegistration.my-account-rwd03w {
        display: block !important;
        position: relative !important;
        float: none !important;
        clear: both !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 20px 12px 24px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #INRegistration.my-account-rwd03w > h2 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 18px !important;

        font-size: 21px !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    #INRegistration.my-account-rwd03w form#form {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        margin: 0 auto !important;
        padding: 14px 10px 18px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #INRegistration.my-account-rwd03w
    form#form > .form-row {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 7px 0 !important;

        box-sizing: border-box !important;
    }

    #INRegistration.my-account-rwd03w
    form#form .input-container {
        display: grid !important;

        grid-template-columns:
            108px minmax(0, 1fr) !important;

        column-gap: 7px !important;
        row-gap: 4px !important;

        align-items: center !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #INRegistration.my-account-rwd03w
    form#form .input-container > label {
        display: block !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        position: static !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: left !important;

        white-space: normal !important;
    }

    #INRegistration.my-account-rwd03w
    form#form .input-container > input[type="text"],
    #INRegistration.my-account-rwd03w
    form#form .input-container > input[type="email"] {
        display: block !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 32px !important;
        min-height: 32px !important;

        margin: 0 !important;
        padding: 3px 6px !important;

        font-size: 12px !important;
        line-height: normal !important;

        box-sizing: border-box !important;
    }

    /* Field validation messages */

    #INRegistration.my-account-rwd03w
    form#form .input-container > .error-message {
        grid-column: 2 !important;
        grid-row: 2 !important;

        position: static !important;
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        overflow-wrap: anywhere;
    }

    /* Save button centered below the fields */

    #INRegistration.my-account-rwd03w
    form#form > .saveicon {
        display: block !important;

        position: static !important;
        float: none !important;
        clear: both !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 14px auto 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }
}

/* END RWD_03W_MY_ACCOUNT_V2 */


/* =====================================================
   RWD_03X_LOGIN_PAGE_V1
   UAT Login mobile responsiveness.

   Login form: #INcountingSign
   Public footer: scoped to pages containing login form.
   CSS only.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Login purple content */

    #INcountingSign.well.contentstyle {
        display: block !important;
        position: relative !important;
        float: none !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 12px auto 18px !important;
        padding: 22px 16px 28px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Login heading */

    #INcountingSign > h2 {
        margin: 0 0 24px !important;
        padding: 0 !important;

        font-size: 25px !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    #INcountingSign .txt_signin {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Login form */

    #INcountingSign form#loginForm {
        display: block !important;

        width: 100% !important;
        max-width: 340px !important;
        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        text-align: center !important;
    }

    #INcountingSign form#loginForm > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Email / Password */

    #INcountingSign .loginfo {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 auto 20px !important;
        box-sizing: border-box !important;
    }

    #INcountingSign .loginfo input {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 12px 10px 3px !important;

        font-size: 14px !important;
        line-height: normal !important;
        text-align: left !important;

        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    /* Preserve existing floating-label behavior */

    #INcountingSign .loginfo label {
        left: 10px;
        max-width: calc(100% - 20px);
        font-size: 13px;
    }

    /* Show password */

    #INcountingSign #showPassword {
        width: 17px !important;
        height: 17px !important;

        margin: 0 6px 0 0 !important;
        vertical-align: middle !important;

        cursor: pointer !important;
        accent-color: #128bc7;
    }

    #INcountingSign label[for="showPassword"] {
        display: inline-block !important;
        vertical-align: middle !important;

        margin: 0 !important;
        padding: 8px 4px !important;

        font-size: 13px !important;
        line-height: 1.5 !important;

        cursor: pointer !important;
    }

    /* Submit button */

    #INcountingSign #submitButton {
        display: block !important;
        position: static !important;
        float: none !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 8px auto 14px !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    /* Forgot password and signup links */

    #INcountingSign .txt_forgotpw {
        display: inline-block !important;

        margin-top: 2px !important;
        padding: 4px !important;

        font-size: 15px !important;
        line-height: 1.4 !important;

        overflow-wrap: anywhere;
    }

    #INcountingSign form#loginForm a {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    #INcountingSign form#loginForm
    > div > div[style*="padding-top:30px"] {
        padding-top: 20px !important;
        line-height: 1.5 !important;
    }

    /* Public footer on Login page only */

    body:has(#INcountingSign)
    div[style*="background-color:silver"]:has(
        > span > a
    ) {
        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr))
            !important;

        align-items: center !important;
        justify-items: center !important;
        gap: 6px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 68px !important;

        margin: 0 !important;
        padding: 10px 8px !important;

        font-size: 13px !important;

        box-sizing: border-box !important;
    }

    body:has(#INcountingSign)
    div[style*="background-color:silver"]:has(
        > span > a
    ) > span {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    body:has(#INcountingSign)
    div[style*="background-color:silver"]:has(
        > span > a
    ) > span > a {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 8px 2px !important;

        font-size: 13px !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;

        text-align: center !important;
        overflow-wrap: normal !important;

        box-sizing: border-box !important;
    }

    /* Copyright */

    body:has(#INcountingSign) .txt_copyright {
        display: block !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 42px !important;

        margin: 0 auto !important;
        padding: 12px 14px !important;

        font-size: 12px !important;
        line-height: 1.6 !important;

        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;

        box-sizing: border-box !important;
    }
}

/* END RWD_03X_LOGIN_PAGE_V1 */


/* =====================================================
   RWD_03X_LOGIN_COPYRIGHT_YEAR_TIGHTEN_V1
   Tighten spacing before the dynamic year on public login footer.
   ===================================================== */

body:has(#INcountingSign) .txt_copyright {
    word-spacing: 0 !important;
    letter-spacing: 0 !important;
}

body:has(#INcountingSign) .txt_copyright #cyear,
body:has(#INcountingSign) .txt_copyright .copyright-year-inline {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

/* END RWD_03X_LOGIN_COPYRIGHT_YEAR_TIGHTEN_V1 */


/* =====================================================
   RWD_03Y_PUBLIC_FOOTER_V1
   Public pages: About / Terms / Privacy / Login

   Keep footer links balanced and prevent Inni
   from covering the copyright year.

   Mobile only.
   ===================================================== */

@media screen and (max-width: 767.98px) {

    /* Three public footer links */

    div[style*="background-color:silver"]:has(
        > span > a[href]
    ) {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        align-items: stretch !important;
        justify-items: stretch !important;

        gap: 4px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 72px !important;

        padding: 10px 8px !important;
        margin: 0 !important;

        font-size: 13px !important;
        box-sizing: border-box !important;
    }

    div[style*="background-color:silver"]:has(
        > span > a[href]
    ) > span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 2px !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    div[style*="background-color:silver"]:has(
        > span > a[href]
    ) > span > a {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 8px 2px !important;

        font-size: 13px !important;
        line-height: 1.45 !important;
        font-weight: 600 !important;

        text-align: center !important;
        text-decoration: none;

        white-space: normal !important;
        overflow-wrap: normal !important;

        box-sizing: border-box !important;
    }

    /*
       The copyright follows the public footer
       navigation in layout.html.
       Leave clear space below for the fixed
       Inni button at the bottom-right.
    */

    div:has(
        > div[style*="background-color:silver"]
    ) > div .txt_copyright {
        display: block !important;

        float: none !important;
        clear: both !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 auto !important;
        padding: 12px 12px 76px !important;

        font-size: 12px !important;
        line-height: 1.6 !important;

        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;

        word-spacing: normal !important;
        letter-spacing: normal !important;

        box-sizing: border-box !important;
    }

    /* Keep the dynamically inserted year inline */

    div:has(
        > div[style*="background-color:silver"]
    ) > div .txt_copyright #cyear {
        display: inline !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
        word-spacing: normal !important;
        letter-spacing: normal !important;
    }
}

/* END RWD_03Y_PUBLIC_FOOTER_V1 */


/* =====================================================
   RWD_03Z_FORGOT_PASSWORD_V1
   Forgot Password / Send Verification Code
   UAT mobile responsive layout
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Main purple content */

    .contentstyle.forgot-password-rwd03z {
        display: block !important;
        position: relative !important;

        float: none !important;
        clear: both !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 12px auto 20px !important;
        padding: 20px 12px 24px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Reset password heading */

    .forgot-password-rwd03z > h2 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 22px !important;
        padding: 0 !important;

        font-size: 24px !important;
        line-height: 1.35 !important;

        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    .forgot-password-rwd03z .txt_signin {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* White form */

    .forgot-password-rwd03z > form.well.form-horizontal {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 0 auto !important;
        padding: 20px 16px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Email label */

    .forgot-password-rwd03z
    > form.well.form-horizontal > label {
        display: block !important;
        position: static !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 10px !important;
        padding: 0 !important;

        font-size: 13px !important;
        line-height: 1.5 !important;
        font-weight: 500 !important;

        text-align: left !important;
        white-space: normal !important;
    }

    /* Registered email */

    .forgot-password-rwd03z
    > form.well.form-horizontal
    > input[name="email"] {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 42px !important;
        min-height: 42px !important;

        margin: 0 0 18px !important;
        padding: 8px 12px !important;

        font-size: 15px !important;
        line-height: normal !important;

        text-align: left !important;

        border: 1px solid #ccc !important;
        border-radius: 5px !important;
        background-color: #fff !important;

        box-sizing: border-box !important;
    }

    /* Send Verification Code */

    .forgot-password-rwd03z
    > form.well.form-horizontal
    > button[type="submit"] {
        display: block !important;
        position: static !important;

        float: none !important;
        align-self: center !important;

        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 42px !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 10px 18px !important;

        background: linear-gradient(
            180deg,
            #159de0 0%,
            #0064ce 100%
        ) !important;

        color: #fff !important;
        border: 1px solid #087ac1 !important;
        border-radius: 6px !important;

        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;

        text-align: center !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    .forgot-password-rwd03z
    > form.well.form-horizontal
    > button[type="submit"]:focus-visible {
        outline: 3px solid #333 !important;
        outline-offset: 3px !important;
    }
}

/* END RWD_03Z_FORGOT_PASSWORD_V1 */


/* =====================================================
   RWD_03AA_REGISTRATION_V1
   Free Trial Registration responsive layout.
   UAT only.

   Dedicated registration class keeps My Account
   and other #INRegistration pages unchanged.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Main registration area */

    #INRegistration.registration-rwd03aa {
        display: block !important;
        position: relative !important;
        float: none !important;
        clear: both !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 12px auto 20px !important;
        padding: 20px 12px 24px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Heading */

    #INRegistration.registration-rwd03aa > h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px !important;

        font-size: 24px !important;
        line-height: 1.35 !important;

        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    #INRegistration.registration-rwd03aa .txt_signin {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* White registration form */

    #INRegistration.registration-rwd03aa form#form {
        display: block !important;
        float: none !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        margin: 0 auto !important;
        padding: 16px 12px 22px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
        text-align: left !important;
    }

    /* Four main field rows */

    #INRegistration.registration-rwd03aa
    form#form > .form-row:not(.terms-privacy-row) {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 7px 0 !important;

        box-sizing: border-box !important;
    }

    #INRegistration.registration-rwd03aa
    form#form > .form-row:not(.terms-privacy-row)
    > .input-container {
        display: grid !important;
        grid-template-columns:
            105px minmax(0, 1fr) !important;

        column-gap: 7px !important;
        row-gap: 4px !important;

        align-items: center !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Field labels */

    #INRegistration.registration-rwd03aa
    form#form > .form-row:not(.terms-privacy-row)
    > .input-container > label {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 !important;

        position: static !important;
        float: none !important;
        transform: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: left !important;

        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* Text / Email inputs */

    #INRegistration.registration-rwd03aa
    form#form > .form-row:not(.terms-privacy-row)
    > .input-container > input[type="text"],
    #INRegistration.registration-rwd03aa
    form#form > .form-row:not(.terms-privacy-row)
    > .input-container > input[type="email"] {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;

        position: relative !important;
        float: none !important;
        flex: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 32px !important;
        min-height: 32px !important;

        margin: 0 !important;
        padding: 4px 6px !important;

        font-size: 12px !important;
        line-height: normal !important;
        text-align: left !important;

        box-sizing: border-box !important;
    }

    /* Per-field validation errors */

    #INRegistration.registration-rwd03aa
    form#form .input-container > .error-message {
        grid-column: 2 !important;
        grid-row: 2 !important;

        position: static !important;
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Terms agreement: checkbox and wrapping text */

    #INRegistration.registration-rwd03aa
    form#form > .terms-privacy-row {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 10px 0 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #INRegistration.registration-rwd03aa
    form#form > .terms-privacy-row
    > .input-container {
        display: grid !important;

        grid-template-columns: 20px minmax(0, 1fr)
            !important;

        column-gap: 9px !important;
        align-items: start !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #INRegistration.registration-rwd03aa
    form#form #TermsPrivacy {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: block !important;
        position: static !important;
        float: none !important;

        width: 17px !important;
        height: 17px !important;

        margin: 2px 0 0 !important;
        padding: 0 !important;

        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    #INRegistration.registration-rwd03aa
    form#form label[for="TermsPrivacy"] {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: block !important;
        position: static !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.5 !important;
        font-weight: normal !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: left !important;
    }

    /* Existing Login link */

    #INRegistration.registration-rwd03aa
    form#form > .terms-privacy-row > p {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 12px 0 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.6 !important;

        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Registration Save button */

    #INRegistration.registration-rwd03aa
    form#form > button.saveicon {
        display: block !important;

        position: static !important;
        float: none !important;
        clear: both !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 15px auto 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    /* General validation errors */

    #INRegistration.registration-rwd03aa
    form#form > .form-field-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }
}

/* END RWD_03AA_REGISTRATION_V1 */


/* =====================================================
   RWD_03AB_DASHBOARD_V1
   Dashboard Organization Selection / Notice Board

   Mobile layout only.
   No changes to business logic, dates or statuses.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Main Dashboard */

    #Dashboard.well.contentstyle {
        display: block !important;

        position: relative !important;
        float: none !important;
        clear: both !important;

        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 12px auto 20px !important;
        padding: 20px 12px 24px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Heading */

    #Dashboard > h2 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 24px !important;

        font-size: 21px !important;
        line-height: 1.45 !important;

        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    #Dashboard > h2 .txt_signin {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Create Organization */

    #Dashboard > button.tpopover {
        display: block !important;
        position: relative !important;
        float: none !important;

        width: min(100%, 245px) !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 42px !important;

        margin: 0 auto !important;
        padding: 9px 12px !important;

        font-size: 13px !important;
        line-height: 1.4 !important;

        box-sizing: border-box !important;
        white-space: normal !important;
        cursor: pointer !important;
    }

    /* Choose Organization */

    #Dashboard > .dropdown.showselect {
        display: block !important;
        position: relative !important;

        width: min(100%, 245px) !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #Dashboard > .dropdown.showselect
    > button.dropdown-toggle {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 9px 12px !important;

        font-size: 13px !important;
        line-height: 1.4 !important;

        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #Dashboard > .dropdown.showselect
    > .dropdown-menu {
        left: 0 !important;
        right: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        max-height: 240px !important;
        overflow-y: auto !important;

        box-sizing: border-box !important;
    }

    #Dashboard > .dropdown.showselect
    > .dropdown-menu a {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Notice Board full mobile width */

    #Dashboard .nb-card {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 20px 0 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #Dashboard .nb-header {
        padding: 10px 12px !important;
        font-size: 14px !important;
        text-align: left !important;
    }

    #Dashboard .nb-scroll-container {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
        overflow-y: visible !important;

        box-sizing: border-box !important;
    }

    #Dashboard .nb-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 10px !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #Dashboard .nb-section-title {
        padding: 9px 12px !important;

        font-size: 12px !important;
        line-height: 1.5 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Replace fixed 50/20/30 table columns
       with readable two-row mobile cards. */

    #Dashboard .nb-table,
    #Dashboard .nb-table tbody {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #Dashboard .nb-table tr:not(.eot-row) {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) minmax(0, 1fr) !important;

        column-gap: 10px !important;
        row-gap: 8px !important;

        align-items: start !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 12px 10px !important;

        border-bottom: 1px solid #eeeeef !important;

        box-sizing: border-box !important;
    }

    #Dashboard .nb-table
    tr:not(.eot-row) > td {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        line-height: 1.5 !important;
        font-size: 12px !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;

        box-sizing: border-box !important;
    }

    /* First row: Organization / Year / GST period */

    #Dashboard .nb-table
    tr:not(.eot-row) > .org-name-cell {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        text-align: left !important;
    }

    /* Second row left: Status or due-date label */

    #Dashboard .nb-table
    tr:not(.eot-row) > .org-status-cell {
        grid-column: 1 !important;
        grid-row: 2 !important;

        text-align: left !important;
        align-self: center !important;
    }

    /* Second row right: Action or complete date */

    #Dashboard .nb-table
    tr:not(.eot-row) > .org-action-cell {
        grid-column: 2 !important;
        grid-row: 2 !important;

        text-align: right !important;
        align-self: center !important;
    }

    /* Names, fiscal years, statuses */

    #Dashboard .org-name,
    #Dashboard .org-fy,
    #Dashboard .badge-period {
        display: inline-block !important;
        max-width: 100% !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;

        vertical-align: middle !important;
    }

    #Dashboard .org-status-cell .label {
        display: inline-block !important;

        max-width: 100% !important;
        white-space: normal !important;

        line-height: 1.4 !important;
    }

    /* Action button remains clickable */

    #Dashboard .nb-link-btn {
        display: inline-block !important;

        max-width: 100% !important;
        width: auto !important;

        height: auto !important;
        min-height: 30px !important;

        margin: 0 !important;
        padding: 6px 8px !important;

        font-size: 11px !important;
        line-height: 1.4 !important;

        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;

        box-sizing: border-box !important;
    }

    /* GST and Income Tax dates */

    #Dashboard .date-highlight {
        display: inline-block !important;
        max-width: 100% !important;

        font-size: 12px !important;
        line-height: 1.5 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: right !important;
    }

    /* Extension of Time information */

    #Dashboard .nb-table tr.eot-row {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 0 10px 12px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
    }

    #Dashboard .nb-table tr.eot-row > td {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 0 !important;
        margin: 0 !important;

        font-size: 11px !important;
        line-height: 1.5 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;

        box-sizing: border-box !important;
    }

    #Dashboard .nb-footer {
        width: 100% !important;
        max-width: 100% !important;

        padding: 10px 12px !important;

        font-size: 12px !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }
}

/* END RWD_03AB_DASHBOARD_V1 */


/* =====================================================
   RWD_03AC_INVOICE_TABLE_V1

   Invoice item details:
   - Mobile abbreviated headings
   - Aligned header/data columns
   - Horizontal scrolling inside the item table
   - Five original editable columns retained

   UAT only
   ===================================================== */

#InvoiceDetail .invoice-items-scroll-rwd03ac {
    max-width: 100%;
    min-width: 0;
}

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Independent scrolling surface */

    #InvoiceDetail .invoice-items-scroll-rwd03ac {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        margin: 12px 0 14px !important;
        padding: 0 0 8px !important;

        position: relative !important;
        box-sizing: border-box !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* One actual table layout for all five columns */

    #InvoiceDetail .invoice-items-scroll-rwd03ac #tab {
        display: table !important;

        width: 640px !important;
        min-width: 640px !important;
        max-width: none !important;

        table-layout: fixed !important;
        border-collapse: collapse !important;

        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab thead {
        display: table-header-group !important;
        width: auto !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab tbody {
        display: table-row-group !important;
        width: auto !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab tr {
        display: table-row !important;
        width: auto !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab th,
    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab td {
        display: table-cell !important;

        padding: 5px 4px !important;

        vertical-align: middle !important;
        box-sizing: border-box !important;

        white-space: normal !important;
        text-align: center !important;
    }

    /* Identical header and data column widths:
       Desc 155 | Price 85 | Qty 70 |
       Category 160 | Item 170 = 640 */

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab th:nth-of-type(1),
    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab td:nth-of-type(1) {
        width: 155px !important;
        min-width: 155px !important;
        max-width: 155px !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab th:nth-of-type(2),
    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab td:nth-of-type(2) {
        width: 85px !important;
        min-width: 85px !important;
        max-width: 85px !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab th:nth-of-type(3),
    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab td:nth-of-type(3) {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab th:nth-of-type(4),
    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab td:nth-of-type(4) {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab th:nth-of-type(5),
    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab td:nth-of-type(5) {
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
    }

    /* Inputs remain inside corresponding cells */

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab td input[type="text"] {
        display: block !important;

        min-width: 0 !important;
        max-width: 100% !important;
        height: 32px !important;

        margin: 0 !important;
        padding: 4px 5px !important;

        font-size: 12px !important;
        line-height: normal !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab td:nth-of-type(-n+4) input[type="text"] {
        width: 100% !important;
    }

    /* Keep Item input and its existing Add button */

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab .itemselect input[type="text"] {
        width: calc(100% - 30px) !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab td > ul,
    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab td > ul > li {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Hide original heading visually,
       retain its original HTML and semantic text.
       Show short labels only on mobile. */

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab thead th {
        font-size: 0 !important;
        line-height: 0 !important;
        white-space: nowrap !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab thead th::after {
        display: inline-block !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;
        vertical-align: middle !important;
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab thead th:nth-of-type(1)::after {
        content: "Desc.";
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab thead th:nth-of-type(2)::after {
        content: "Price";
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab thead th:nth-of-type(3)::after {
        content: "Qty";
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab thead th:nth-of-type(4)::after {
        content: "Category";
    }

    #InvoiceDetail .invoice-items-scroll-rwd03ac
    #tab thead th:nth-of-type(5)::after {
        content: "Item";
    }
}

/* END RWD_03AC_INVOICE_TABLE_V1 */


/* =====================================================
   RWD_03AC_INVOICE_LAYOUT_V2

   Add / Edit Invoice
   Fix mobile page and form overflow.

   Keep RWD-03AC Table V1:
   - 640px five-column item table
   - abbreviated mobile headers
   - internal horizontal scrolling

   CSS ONLY - UAT
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* =========================================
       1. Main Invoice container
       ========================================= */

    #InvoiceDetail.contentstyle {
        display: block !important;

        position: relative !important;
        float: none !important;
        clear: both !important;

        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 12px auto 20px !important;
        padding: 18px 12px 24px !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail > h2 {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;

        font-size: 22px !important;
        line-height: 1.35 !important;
        text-align: center !important;

        overflow-wrap: anywhere !important;
    }

    #InvoiceDetail > h2 .txt_signin {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* =========================================
       2. White form
       ========================================= */

    #InvoiceDetail form#form {
        display: block !important;

        position: relative !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 0 !important;
        padding: 16px 10px 22px !important;

        box-sizing: border-box !important;
    }

    /* =========================================
       3. Date / Invoice No / Transaction Type
       ========================================= */

    #InvoiceDetail #form > ul.nav-pills {
        display: flex !important;

        flex-direction: column !important;
        flex-wrap: nowrap !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 16px !important;
        padding: 0 !important;

        gap: 5px !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail #form > ul.nav-pills > li {
        display: block !important;

        position: relative !important;
        float: none !important;
        flex: 0 0 auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail #form > ul.nav-pills
    > li > input {
        display: block !important;

        position: relative !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 36px !important;
        min-height: 36px !important;

        margin: 0 !important;
        padding: 5px 9px !important;

        font-size: 13px !important;
        line-height: normal !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail #form
    input[name="transactiondate"] {
        color-scheme: light;
    }

    #InvoiceDetail #form
    > ul.nav-pills > li.transactiontype
    > .dropdown-menu {
        left: 0 !important;
        right: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }

    /* =========================================
       4. Preserve independent item table scroll
       ========================================= */

    #InvoiceDetail
    .invoice-items-scroll-rwd03ac {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }

    /*
       Do not change #tab width: 640px.
       The existing V1 table owns its columns.
    */

    /* =========================================
       5. Invoice totals
       ========================================= */

    #InvoiceDetail
    .invoice-totals-row {
        display: flex !important;

        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 9px !important;

        margin: 14px 0 16px !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail
    .invoice-total-field {
        display: grid !important;

        grid-template-columns:
            68px minmax(0, 1fr) !important;

        align-items: center !important;
        column-gap: 8px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail
    .invoice-total-field:last-child {
        max-width: 100% !important;
        grid-column: auto !important;
    }

    #InvoiceDetail
    .invoice-total-field > label {
        display: block !important;

        grid-column: 1 !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    #InvoiceDetail
    .invoice-total-field > input,
    #InvoiceDetail
    .invoice-total-field > .invoice-gst-select {
        display: block !important;

        grid-column: 2 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail
    .invoice-total-field > input,
    #InvoiceDetail
    .invoice-gst-select > input {
        height: 34px !important;
        min-height: 34px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 4px 8px !important;

        font-size: 13px !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail
    .invoice-gst-select > .dropdown-menu {
        left: 0 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }

    /* =========================================
       6. Payment Details heading and table
       ========================================= */

    #InvoiceDetail #form
    > div[style*="width:50%"] {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 12px 0 0 !important;
        padding: 5px 7px !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail #form
    > table[style*="width:50%"] {
        display: table !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        table-layout: fixed !important;
        border-collapse: collapse !important;

        margin: 0 0 16px !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail #form
    > table[style*="width:50%"] th,
    #InvoiceDetail #form
    > table[style*="width:50%"] td {
        width: 50% !important;

        padding: 5px 4px !important;
        vertical-align: middle !important;

        font-size: 12px !important;
        line-height: 1.4 !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail #form
    > table[style*="width:50%"] td > li {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail #form
    > table[style*="width:50%"] td input {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 32px !important;
        min-height: 32px !important;

        margin: 0 !important;
        padding: 4px 5px !important;

        font-size: 12px !important;

        box-sizing: border-box !important;
    }

    /* Client/Item field plus button */

    #InvoiceDetail #form
    > table[style*="width:50%"]
    .itemselect > input {
        width: calc(100% - 29px) !important;
    }

    #InvoiceDetail #form
    > table[style*="width:50%"]
    .itemselect > .jiaicon {
        position: absolute !important;

        right: 0 !important;
        top: 4px !important;

        width: 24px !important;
        height: 24px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* =========================================
       7. Bottom buttons
       ========================================= */

    #InvoiceDetail #form
    > .saveicon,
    #InvoiceDetail #form
    > .backwardicon {
        width: 64px !important;
        max-width: 64px !important;
        min-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        box-sizing: border-box !important;
    }

    /* Clear the form's floated action buttons */

    #InvoiceDetail #form::after {
        content: "";
        display: block;
        clear: both;
    }
}

/* END RWD_03AC_INVOICE_LAYOUT_V2 */


/* =====================================================
   RWD_03AC_INVOICE_DROPDOWN_V3

   Invoice Category / Item mobile dropdown overlay.
   Item input and Add button aligned in one row.
   V1 five-column widths retained.
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Item input + Add button */

    #InvoiceDetail
    .invoice-items-scroll-rwd03ac
    #tab .itemselect {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;

        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;

        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail
    .invoice-items-scroll-rwd03ac
    #tab .itemselect > input[type="text"] {
        display: block !important;

        flex: 1 1 auto !important;
        position: relative !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 4px 5px !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail
    .invoice-items-scroll-rwd03ac
    #tab .itemselect > .jiaicon {
        display: block !important;

        position: static !important;
        float: none !important;

        flex: 0 0 28px !important;

        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        background-size: contain !important;
        background-position: center !important;
        box-sizing: border-box !important;

        cursor: pointer !important;
        z-index: 1 !important;
    }

    /* Keep dropdown menus above invoice elements */

    #InvoiceDetail #tab
    .dropdown-menu.rwd03ac-floating {
        position: fixed !important;

        display: block;
        z-index: 20000 !important;

        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 4px 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transform: none !important;
        box-sizing: border-box !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #InvoiceDetail #tab
    .dropdown-menu.rwd03ac-floating li,
    #InvoiceDetail #tab
    .dropdown-menu.rwd03ac-floating a {
        max-width: 100% !important;
        min-width: 0 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #InvoiceDetail #tab
    .dropdown-menu.rwd03ac-floating a {
        display: block !important;
        padding: 8px 10px !important;

        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* Bottom buttons: additional space from Inni */

    #InvoiceDetail #form {
        padding-bottom: 84px !important;
    }
}

/* END RWD_03AC_INVOICE_DROPDOWN_V3 */


/* =====================================================
   RWD_03AC_INVOICE_OVERLAY_V4
   Invoice mobile dropdown overlay and centered actions
   ===================================================== */

@media screen and (max-width: 767.98px),
       screen and (min-width: 768px)
       and (max-width: 960px)
       and (max-height: 600px)
       and (orientation: landscape) {

    /* Back left / Save right: centered as a group */

    #InvoiceDetail #form
    > .invoice-actions-rwd03ac-v4 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: center !important;
        align-items: center !important;

        gap: 18px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 70px !important;

        margin: 18px auto 0 !important;
        padding: 0 0 6px !important;

        position: relative !important;

        box-sizing: border-box !important;
    }

    #InvoiceDetail #form
    > .invoice-actions-rwd03ac-v4
    > .backwardicon,
    #InvoiceDetail #form
    > .invoice-actions-rwd03ac-v4
    > .saveicon {
        display: block !important;

        position: static !important;
        float: none !important;

        flex: 0 0 64px !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Restore ordinary padding: buttons are now in flow */

    #InvoiceDetail #form {
        padding-bottom: 24px !important;
    }

    /* Suppress only the original visually clipped menus
       when the new external overlay is active. */

    body.invoice-dropdown-active-rwd03ac-v4
    #InvoiceDetail #tab
    .acctransactionselect > .dropdown-menu,
    body.invoice-dropdown-active-rwd03ac-v4
    #InvoiceDetail #tab
    .itemselect > .dropdown-menu {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* External overlay: outside the scrolling table */

.invoice-dropdown-overlay-rwd03ac-v4 {
    position: fixed !important;
    z-index: 30000 !important;

    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;

    padding: 3px 0;
    margin: 0;

    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;

    box-shadow: 0 5px 16px rgba(0,0,0,.18);

    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.invoice-dropdown-overlay-rwd03ac-v4[hidden] {
    display: none !important;
}

.invoice-dropdown-overlay-rwd03ac-v4
.invoice-option-rwd03ac-v4 {
    display: block;
    flex: 0 0 auto;

    width: 100%;
    min-height: 36px;

    margin: 0;
    padding: 8px 12px;

    color: #333;
    background: #fff;
    border: 0;

    font-size: 13px;
    line-height: 1.4;

    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;

    cursor: pointer;
}

.invoice-dropdown-overlay-rwd03ac-v4
.invoice-option-rwd03ac-v4:focus-visible,
.invoice-dropdown-overlay-rwd03ac-v4
.invoice-option-rwd03ac-v4:hover {
    background: #e8f2ff;
    outline-offset: -2px;
}

/* END RWD_03AC_INVOICE_OVERLAY_V4 */