From 6a69773dd6c133823f58a4e3605bb39768eccb24 Mon Sep 17 00:00:00 2001
From: bangae1 <bangae2@gmail.com>
Date: Mon, 26 May 2025 20:59:58 +0900
Subject: [PATCH] =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/contract/ContractList.vue           |   6 +-
 .../pages/contract/ContractSave.vue           | 168 ++----------------
 .../pages/contract/ContractView.vue           | 127 ++-----------
 .../pages/estimate/EstimateList.vue           |  14 +-
 .../pages/estimate/EstimateUpdate.vue         | 136 ++------------
 .../pages/estimate/EstimateView.vue           | 139 ++-------------
 src/scss/components/_custom-contract.scss     | 162 +++++++++++++++++
 src/scss/css-variables/_colors.scss           |   2 +
 src/scss/css-variables/_rtl.scss              |   2 +-
 9 files changed, 223 insertions(+), 533 deletions(-)
 create mode 100644 src/scss/components/_custom-contract.scss

diff --git a/src/components/pages/contract/ContractList.vue b/src/components/pages/contract/ContractList.vue
index 08f8db4..7b9dabf 100644
--- a/src/components/pages/contract/ContractList.vue
+++ b/src/components/pages/contract/ContractList.vue
@@ -232,7 +232,7 @@ watch(selUser, (value) => {
 }
 
 .table-container {
-  border-radius: 10px;
+  border-radius: 0.3rem;
   border: 1px solid var(--fade-grey);
   thead {
     background-color: var(--primary) !important;
@@ -247,8 +247,6 @@ watch(selUser, (value) => {
   }
 }
 
-
-
 .datatable-toolbar {
   //display: flex;
   align-items: center;
@@ -256,7 +254,7 @@ watch(selUser, (value) => {
   background-color: var(--white);
   border: 1px solid var(--fade-grey);
   border-radius: 0.75rem;
-  padding: 20px;
+  padding: 15px;
   color: var(--modal-text);
   &.is-reversed {
     flex-direction: row-reverse;
diff --git a/src/components/pages/contract/ContractSave.vue b/src/components/pages/contract/ContractSave.vue
index 30f028a..ba22287 100644
--- a/src/components/pages/contract/ContractSave.vue
+++ b/src/components/pages/contract/ContractSave.vue
@@ -87,53 +87,12 @@ watch(pbAtts.value, (newValue) => {
     class="form-layout"
   >
     <div class="form-body">
-      <!--Fieldset-->
-<!--      <div class="form-fieldset">-->
-<!--        <div class="form-outer">-->
-<!--          <div class="fieldset-heading">-->
-<!--            <h4>업체정보</h4>-->
-<!--          </div>-->
-<!--          <div class="columns is-multiline">-->
-<!--            <div class="column is-12">-->
-<!--              <VField>-->
-<!--                <VLabel>회사명</VLabel>-->
-<!--                <VControl>-->
-<!--                  <div class="content">-->
-<!--                    <p>{{ user.compNm }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--            <div class="column is-6">-->
-<!--              <VField>-->
-<!--                <VLabel>사업자번호</VLabel>-->
-<!--                <VControl>-->
-<!--                  <div class="content">-->
-<!--                    <p>{{ user.bizNo }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--            <div class="column is-6">-->
-<!--              <VField>-->
-<!--                <VLabel>대표자명</VLabel>-->
-<!--                <VControl>-->
-<!--                  <div class="content">-->
-<!--                    <p>{{ user.repNm }}</p>-->
-<!--                  </div>-->
-<!--                </VControl>-->
-<!--              </VField>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-      <!--Fieldset-->
       <div class="form-fieldset">
         <div class="form-outer">
           <div class="fieldset-heading">
             <h4>가격조사</h4>
           </div>
-          <div class="columns is-multiline">
+          <div class="columns">
             <div class="column is-6">
               <VField horizontal>
                 <VLabel>No</VLabel>
@@ -154,6 +113,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>제목</VLabel>
@@ -164,6 +125,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>내용</VLabel>
@@ -176,6 +139,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>등록기간</VLabel>
@@ -186,6 +151,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField>
                 <VLabel>첨부파일</VLabel>
@@ -310,120 +277,5 @@ watch(pbAtts.value, (newValue) => {
 <style lang="scss" scoped>
 @import '/@src/scss/abstracts/all';
 @import '/@src/scss/components/forms-outer';
-
-.form-layout {
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-.form-fieldset {
-  max-width: 786px;
-  animation: fadeInLeft 0.5s;
-}
-
-input {
-  width: 120px !important;
-}
-
-.file-cta {
-  padding-left:0em;
-  padding-right:0em;
-}
-
-.file-icon {
-  margin: 0px;
-}
-
-.datatable-table {
-  tr {
-    border: 1px solid var(--fade-grey);
-    td {
-      border: 0px;
-    }
-  }
-}
-
-
-ul {
-  list-style-type: none;
-}
-
-.file-delete {
-  font-size: 10px;
-  padding-left:5px;
-}
-
-.label {
-  font-size: 1rem;
-  font-weight: bold;
-}
-
-.fieldset-heading {
-  border-bottom: 1px solid var(--fade-grey) !important;
-  padding-bottom: 10px !important;
-  h4 {
-    font-size: 1.3em;
-    color: var(--modal-text) !important;
-  }
-}
-
-.form-outer {
-  padding: 20px !important;
-  border: 1px solid var(--fade-grey) !important;
-  background-color: var(--modal-background) !important;
-}
-
-.form-fieldset {
-  max-width: 90%;
-}
-
-.field{
-  label {
-    color: var(--modal-text) !important;
-    font-weight:bold !important;
-  }
-  p {
-    font-weight: lighter !important;
-  }
-}
-
-.is-horizontal {
-  padding: 10px 0;
-  label {
-    width: 100px;
-  }
-}
-
-.estimate-file-wrapper {
-  display:flex;
-  justify-content: space-between;
-  border:1px solid #ccc;
-  border-radius:5px;
-  padding:10px 20px;
-  margin-bottom:10px;
-  .estimate-file-download, .estimate-file-delete {
-    font-size: 20px;
-    line-height: 40px;
-    padding-left: 30px;
-    cursor: pointer;
-  }
-  .estimate-file-img {
-    font-size: 40px;
-    padding-right: 50px;
-  }
-  .estimate-file-name {
-    width: 400px;
-    line-height: 40px;
-  }
-  .estimate-file-size {
-    width: 150px;
-    line-height: 40px;
-  }
-}
-
-.file-trigger {
-  margin-left: 10px;
-  height:15px;
-  padding:10px 10px;
-}
+@import '/@src/scss/components/custom-contract';
 </style>
diff --git a/src/components/pages/contract/ContractView.vue b/src/components/pages/contract/ContractView.vue
index 8c0c6bf..719d2ff 100644
--- a/src/components/pages/contract/ContractView.vue
+++ b/src/components/pages/contract/ContractView.vue
@@ -133,7 +133,7 @@ watch(pbAtts.value, (newValue) => {
           <div class="fieldset-heading">
             <h4>가격조사</h4>
           </div>
-          <div class="columns is-multiline">
+          <div class="columns">
             <div class="column is-6">
               <VField horizontal>
                 <VLabel>No</VLabel>
@@ -154,6 +154,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>제목</VLabel>
@@ -164,6 +166,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>내용</VLabel>
@@ -176,6 +180,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>등록기간</VLabel>
@@ -186,6 +192,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField>
                 <VLabel>첨부파일</VLabel>
@@ -266,120 +274,5 @@ watch(pbAtts.value, (newValue) => {
 <style lang="scss" scoped>
 @import '/@src/scss/abstracts/all';
 @import '/@src/scss/components/forms-outer';
-
-.form-layout {
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-.form-fieldset {
-  max-width: 786px;
-  animation: fadeInLeft 0.5s;
-}
-
-input {
-  width: 120px !important;
-}
-
-.file-cta {
-  padding-left:0em;
-  padding-right:0em;
-}
-
-.file-icon {
-  margin: 0px;
-}
-
-.datatable-table {
-  tr {
-    border: 1px solid var(--fade-grey);
-    td {
-      border: 0px;
-    }
-  }
-}
-
-
-ul {
-  list-style-type: none;
-}
-
-.file-delete {
-  font-size: 10px;
-  padding-left:5px;
-}
-
-.label {
-  font-size: 1rem;
-  font-weight: bold;
-}
-
-.fieldset-heading {
-  border-bottom: 1px solid var(--fade-grey) !important;
-  padding-bottom: 10px !important;
-  h4 {
-    font-size: 1.3em;
-    color: var(--modal-text) !important;
-  }
-}
-
-.form-outer {
-  padding: 20px !important;
-  border: 1px solid var(--fade-grey) !important;
-  background-color: var(--modal-background) !important;
-}
-
-.form-fieldset {
-  max-width: 90%;
-}
-
-.field{
-  label {
-    color: var(--modal-text) !important;
-    font-weight:bold !important;
-  }
-  p {
-    font-weight: lighter !important;
-  }
-}
-
-.is-horizontal {
-  padding: 10px 0;
-  label {
-    width: 100px;
-  }
-}
-
-.estimate-file-wrapper {
-  display:flex;
-  justify-content: space-between;
-  border:1px solid #ccc;
-  border-radius:5px;
-  padding:10px 20px;
-  margin-bottom:10px;
-  .estimate-file-download, .estimate-file-delete {
-    font-size: 20px;
-    line-height: 40px;
-    padding-left: 30px;
-    cursor: pointer;
-  }
-  .estimate-file-img {
-    font-size: 40px;
-    padding-right: 50px;
-  }
-  .estimate-file-name {
-    width: 400px;
-    line-height: 40px;
-  }
-  .estimate-file-size {
-    width: 150px;
-    line-height: 40px;
-  }
-}
-
-.file-trigger {
-  margin-left: 10px;
-  height:15px;
-  padding:10px 10px;
-}
+@import '/@src/scss/components/custom-contract';
 </style>
diff --git a/src/components/pages/estimate/EstimateList.vue b/src/components/pages/estimate/EstimateList.vue
index 758415c..b970893 100644
--- a/src/components/pages/estimate/EstimateList.vue
+++ b/src/components/pages/estimate/EstimateList.vue
@@ -119,7 +119,7 @@ function onTabLeave(e: any) {
           <thead>
             <th>No</th>
             <th>제목</th>
-            <th>조사금액</th>
+            <th class="text-right">조사금액</th>
             <th>담당자</th>
             <th>등록일시</th>
             <th>진행상태</th>
@@ -141,7 +141,7 @@ function onTabLeave(e: any) {
                   </div>
                 </div>
               </td>
-              <td>{{ estimate.totAmt.toString().replace(regex.currency, ',') }}</td>
+              <td class="text-right">{{ estimate.totAmt.toString().replace(regex.currency, ',') }}</td>
               <td>{{ estimate.mngNm }}</td>
               <td>{{ dateFormat.millisecondsRemove(estimate.estDt) }}</td>
               <td>{{ estimate.estStat }} <span v-if="estimate.estStatCd === '0300' || estimate.estStatCd === '0400'">({{ dateFormat.converterDate(estimate.svyDt) }})</span></td>
@@ -184,6 +184,10 @@ function onTabLeave(e: any) {
 </template>
 
 <style lang="scss">
+.text-right {
+  text-align:right !important;
+}
+
 .is-navbar {
   .datatable-toolbar {
     padding-top: 30px;
@@ -191,12 +195,14 @@ function onTabLeave(e: any) {
 }
 
 .table-container {
-  border-radius: 10px;
+  border-radius: 0.3rem;
   border: 1px solid var(--fade-grey);
   thead {
     background-color: var(--primary) !important;
     th {
       color: #fff;
+      text-align:center !important;
+      border: 1px solid #ededed;
     }
   }
 }
@@ -320,7 +326,7 @@ function onTabLeave(e: any) {
     vertical-align: middle;
     padding: 12px 20px;
     border-bottom: 1px solid var(--fade-grey);
-
+    //border: 1px solid var(--fade-grey);
     &:last-child {
       text-align: right;
     }
diff --git a/src/components/pages/estimate/EstimateUpdate.vue b/src/components/pages/estimate/EstimateUpdate.vue
index 5c9416e..d295b59 100644
--- a/src/components/pages/estimate/EstimateUpdate.vue
+++ b/src/components/pages/estimate/EstimateUpdate.vue
@@ -160,7 +160,7 @@ watch(pbAtts.value, (newValue) => {
             <h4>가격조사</h4>
           </div>
 
-          <div class="columns is-multiline">
+          <div class="columns">
             <div class="column is-6">
               <VField horizontal>
                 <VLabel>No</VLabel>
@@ -181,6 +181,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>제목</VLabel>
@@ -191,6 +193,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>내용</VLabel>
@@ -203,6 +207,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>등록기간</VLabel>
@@ -213,6 +219,8 @@ watch(pbAtts.value, (newValue) => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField>
                 <VLabel>첨부파일</VLabel>
@@ -333,130 +341,6 @@ watch(pbAtts.value, (newValue) => {
 <style lang="scss" scoped>
 @import '/@src/scss/abstracts/all';
 @import '/@src/scss/components/forms-outer';
+@import '/@src/scss/components/custom-contract';
 
-.form-layout {
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-.form-fieldset {
-  max-width: 786px;
-  animation: fadeInLeft 0.5s;
-}
-
-input {
-  width: 120px !important;
-}
-
-.file-cta {
-  padding-left:0em;
-  padding-right:0em;
-}
-
-.file-icon {
-  margin: 0px;
-}
-
-tr {
-  border: 1px solid var(--fade-grey);
-  td {
-    border: 0px;
-  }
-}
-
-.file-delete {
-  font-size: 10px;
-  padding-left:5px;
-}
-
-a.mouse-pointer {
-  text-decoration: none;
-}
-
-.file-download {
-  color: var(--light-text);
-  &:hover {
-    color: var(--primary);
-  }
-}
-
-.label {
-  font-size: 1rem;
-  font-weight: bold;
-}
-
-.fieldset-heading {
-  border-bottom: 1px solid var(--fade-grey) !important;
-  padding-bottom: 10px !important;
-  h4 {
-    font-size: 1.3em;
-    color: var(--modal-text) !important;
-  }
-}
-
-.form-outer {
-  padding: 20px !important;
-  border: 1px solid var(--fade-grey) !important;
-  background-color: var(--modal-background) !important;
-}
-
-.form-fieldset {
-  max-width: 90%;
-}
-
-.field{
-  label {
-    color: var(--modal-text) !important;
-    font-weight:bold !important;
-  }
-  p {
-    font-weight: lighter !important;
-  }
-}
-
-.is-horizontal {
-  padding: 10px 0;
-  label {
-    width: 100px;
-  }
-}
-
-.estimate-file-wrapper {
-  display:flex;
-  justify-content: space-between;
-  border:1px solid #ccc;
-  border-radius:5px;
-  padding:10px 20px;
-  margin-bottom:10px;
-  .estimate-file-download, .estimate-file-delete {
-    font-size: 15px;
-    line-height: 40px;
-    padding-left: 30px;
-    cursor: pointer;
-  }
-  .estimate-file-img {
-    font-size: 40px;
-    padding-right: 50px;
-  }
-  .estimate-file-name {
-    width: 400px;
-    line-height: 40px;
-  }
-  .estimate-file-size {
-    width: 200px;
-    line-height: 40px;
-  }
-}
-
-.estimate-file-download, .estimate-file-delete, .fa-plus-circle {
-  &:hover {
-    color: var(--primary);
-  }
-}
-
-.file-trigger {
-  margin-left: 10px;
-  height:15px;
-  padding:10px 10px;
-}
 </style>
diff --git a/src/components/pages/estimate/EstimateView.vue b/src/components/pages/estimate/EstimateView.vue
index 89d32b8..beae2a2 100644
--- a/src/components/pages/estimate/EstimateView.vue
+++ b/src/components/pages/estimate/EstimateView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { iDtlSpec, iEstimate, UserData, iPbAtt } from '/@src/utils/types'
+import regex from '/@src/utils/regex'
 
 const props = defineProps<{
   estimate: iEstimate
@@ -112,7 +113,7 @@ const totPrc = computed(() => {
             <h4>가격조사</h4>
           </div>
 
-          <div class="columns is-multiline">
+          <div class="columns">
             <div class="column is-6">
               <VField horizontal>
                 <VLabel>No</VLabel>
@@ -123,6 +124,8 @@ const totPrc = computed(() => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-6">
               <VField horizontal>
                 <VLabel>분야</VLabel>
@@ -133,6 +136,8 @@ const totPrc = computed(() => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>제목</VLabel>
@@ -143,6 +148,8 @@ const totPrc = computed(() => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>내용</VLabel>
@@ -155,6 +162,8 @@ const totPrc = computed(() => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField horizontal>
                 <VLabel>등록기간</VLabel>
@@ -165,6 +174,8 @@ const totPrc = computed(() => {
                 </VControl>
               </VField>
             </div>
+          </div>
+          <div class="columns">
             <div class="column is-12">
               <VField>
                 <VLabel>첨부파일</VLabel>
@@ -236,7 +247,7 @@ const totPrc = computed(() => {
                           <th>규격</th>
                           <th>수량</th>
                           <th>단위</th>
-                          <th>단가</th>
+                          <th class="text-right">단가</th>
                           <th>금액</th>
                         </thead>
                         <tbody v-for="(dtl, index) in props.estimate.dtlSpecs" :key="dtl.dtlSpNo">
@@ -246,8 +257,8 @@ const totPrc = computed(() => {
                             <td>{{ dtl.spec }}</td>
                             <td>{{ dtl.qty }}</td>
                             <td>{{ dtl.unit }}</td>
-                            <td>{{ estimates[index].unitPrc }}</td>
-                            <td>{{ totPrc[index] || 0 }}</td>
+                            <td class="text-right">{{ String(estimates[index].unitPrc).replace(regex.currency, ',') }}</td>
+                            <td>{{ String(totPrc[index]).replace(regex.currency, ',') || 0 }}</td>
                           </tr>
                         </tbody>
                       </table>
@@ -266,124 +277,6 @@ const totPrc = computed(() => {
 <style lang="scss" scoped>
 @import '/@src/scss/abstracts/all';
 @import '/@src/scss/components/forms-outer';
+@import '/@src/scss/components/custom-contract';
 
-.form-layout {
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-.form-fieldset {
-  max-width: 786px;
-  animation: fadeInLeft 0.5s;
-}
-
-input {
-  width: 120px !important;
-}
-
-.file-cta {
-  padding-left:0em;
-  padding-right:0em;
-}
-
-.file-icon {
-  margin: 0px;
-}
-
-tr {
-  border: 1px solid var(--fade-grey);
-  td {
-    border: 0px;
-  }
-}
-
-.file-delete {
-  font-size: 10px;
-  padding-left:5px;
-}
-
-a.mouse-pointer {
-  text-decoration: none;
-}
-
-.file-download {
-  color: var(--light-text);
-  &:hover {
-    color: var(--primary);
-  }
-}
-
-.label {
-  font-size: 1rem;
-  font-weight: bold;
-}
-
-.fieldset-heading {
-  border-bottom: 1px solid var(--fade-grey) !important;
-  padding-bottom: 10px !important;
-  h4 {
-    font-size: 1.3em;
-    color: var(--modal-text) !important;
-  }
-}
-
-.form-outer {
-  padding: 20px !important;
-  border: 1px solid var(--fade-grey) !important;
-  background-color: var(--modal-background) !important;
-}
-
-.form-fieldset {
-  max-width: 90%;
-}
-
-.field{
-  label {
-    color: var(--modal-text) !important;
-    font-weight:bold !important;
-  }
-  p {
-    font-weight: lighter !important;
-  }
-}
-
-.is-horizontal {
-  padding: 10px 0;
-  label {
-    width: 100px;
-  }
-}
-
-.estimate-file-wrapper {
-  display:flex;
-  justify-content: space-between;
-  border:1px solid #ccc;
-  border-radius:5px;
-  padding:10px 20px;
-  margin-bottom:10px;
-  .estimate-file-download, .estimate-file-delete {
-    font-size: 20px;
-    line-height: 40px;
-    padding-left: 30px;
-    cursor: pointer;
-  }
-  .estimate-file-img {
-    font-size: 40px;
-    padding-right: 50px;
-  }
-  .estimate-file-name {
-    width: 400px;
-    line-height: 40px;
-  }
-  .estimate-file-size {
-    width: 150px;
-    line-height: 40px;
-  }
-}
-
-.estimate-file-download, .estimate-file-delete, .fa-plus-circle {
-  &:hover {
-    color: var(--primary);
-  }
-}
 </style>
diff --git a/src/scss/components/_custom-contract.scss b/src/scss/components/_custom-contract.scss
new file mode 100644
index 0000000..22887dd
--- /dev/null
+++ b/src/scss/components/_custom-contract.scss
@@ -0,0 +1,162 @@
+.form-outer {
+  .columns {
+    border: 1px solid #ccc;
+    .column {
+      padding: 0 !important;
+      .field {
+        padding: 0 !important;
+        .label {
+          padding: 8px !important;
+          //padding: 0 !important;
+          margin: 0 !important;
+          background-color: var(--primary);
+          color: #fff !important;
+        }
+        .control {
+          padding: 8px !important;
+        }
+      }
+    }
+  }
+}
+
+.form-layout {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.form-fieldset {
+  max-width: 786px;
+  animation: fadeInLeft 0.5s;
+}
+
+input {
+  width: 120px !important;
+}
+
+.file-cta {
+  padding-left:0em;
+  padding-right:0em;
+}
+
+.file-icon {
+  margin: 0px;
+}
+
+.datatable-table {
+  th {
+    padding: 10px !important;
+    border: 1px solid #ededed;
+  }
+  tr {
+    padding: 10px !important;
+    border: 1px solid var(--fade-grey);
+    td {
+      padding: 5px 10px !important;
+      border: 1px solid #ededed;
+      input {
+        height: 2.5em;
+      }
+    }
+  }
+}
+
+ul {
+  list-style-type: none;
+}
+
+.file-delete {
+  font-size: 10px;
+  padding-left:5px;
+}
+
+a.mouse-pointer {
+  text-decoration: none;
+}
+
+.file-download {
+  color: var(--light-text);
+  &:hover {
+    color: var(--primary);
+  }
+}
+
+.label {
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.fieldset-heading {
+  border-bottom: 1px solid var(--fade-grey) !important;
+  padding-bottom: 10px !important;
+  h4 {
+    font-size: 1.3em;
+    color: var(--modal-text) !important;
+  }
+}
+
+.form-outer {
+  padding: 20px !important;
+  border: 1px solid var(--fade-grey) !important;
+  background-color: var(--modal-background) !important;
+}
+
+.form-fieldset {
+  max-width: 90%;
+}
+
+.field{
+  label {
+    color: var(--modal-text) !important;
+    font-weight:bold !important;
+  }
+  p {
+    font-weight: lighter !important;
+  }
+}
+
+.is-horizontal {
+  padding: 10px 0;
+  label {
+    width: 100px;
+  }
+}
+
+.estimate-file-wrapper {
+  display:flex;
+  justify-content: space-between;
+  border:1px solid #ccc;
+  border-radius:5px;
+  padding:0px 20px;
+  margin-bottom:10px;
+  .estimate-file-download, .estimate-file-delete {
+    font-size: 20px;
+    line-height: 40px;
+    padding-left: 30px;
+    cursor: pointer;
+  }
+  .estimate-file-img {
+    font-size: 40px;
+    padding-right: 50px;
+  }
+  .estimate-file-name {
+    width: 400px;
+    line-height: 40px;
+  }
+  .estimate-file-size {
+    width: 150px;
+    line-height: 40px;
+  }
+}
+
+.estimate-file-download, .estimate-file-delete, .fa-plus-circle {
+  &:hover {
+    color: var(--primary);
+  }
+}
+
+.file-trigger {
+  margin-left: 10px;
+  height:15px;
+  padding:10px 10px;
+}
\ No newline at end of file
diff --git a/src/scss/css-variables/_colors.scss b/src/scss/css-variables/_colors.scss
index 5717c65..665ce4a 100644
--- a/src/scss/css-variables/_colors.scss
+++ b/src/scss/css-variables/_colors.scss
@@ -70,6 +70,7 @@
   --dark-text: #283252;
   --light-text: #a2a5b9;
   --modal-text: #283252;
+  --modal-text-reverse: #fff;
   // Additional colors
   --secondary: #336aeb;
   --purple: #8168b1;
@@ -90,6 +91,7 @@
   --border: color-mix(in oklab, var(--dark-sidebar), white 12%);
   --dark-text: #0b0d13;
   --modal-text: #fff;
+  --modal-text-reverse: #283252;
   --placeload-nuance-from: rgb(255 255 255 / 15%);
   --placeload-nuance-to: rgb(255 255 255 / 24%);
 
diff --git a/src/scss/css-variables/_rtl.scss b/src/scss/css-variables/_rtl.scss
index 63a24fd..d5e94e9 100644
--- a/src/scss/css-variables/_rtl.scss
+++ b/src/scss/css-variables/_rtl.scss
@@ -2,7 +2,7 @@
 
 :root {
   --transform-direction: 1;
-  zoom:1.2;
+  zoom:1.1;
 }
 
 [dir='rtl'] {