From 3df4dc557b0949f817e196e34d320b30d77ceb41 Mon Sep 17 00:00:00 2001
From: "oura.a" <oura.a@nds-tyo.co.jp>
Date: Tue, 18 Jul 2023 00:59:57 +0000
Subject: [PATCH] =?UTF-8?q?Merged=20PR=20236:=20[=E5=89=8DPBI=E6=AE=8B?=
 =?UTF-8?q?=E4=BD=9C=E6=A5=AD]=E7=94=BB=E9=9D=A2=E3=83=87=E3=82=B6?=
 =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=82=92=E4=BE=9D=E9=A0=BC=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 概要
[Task2203: [前PBI残作業]画面デザインを依頼する](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2203)

タスク 2203: [前PBI残作業]画面デザインを依頼する
テキストボックスを5分割した際のデザインをデザイナーさんに依頼し、取り込みました。

## レビューポイント
なし

## UIの変更
https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task2203?csf=1&web=1&e=WRd4LO

## 動作確認状況
ローカルで動作確認済み

## 補足
なし
---
 .../LicensePage/cardLicenseActivatePopup.tsx  |  27 +-
 dictation_client/src/styles/app.module.scss   | 642 ++++++++----------
 .../src/styles/app.module.scss.d.ts           |  19 +-
 3 files changed, 303 insertions(+), 385 deletions(-)

diff --git a/dictation_client/src/pages/LicensePage/cardLicenseActivatePopup.tsx b/dictation_client/src/pages/LicensePage/cardLicenseActivatePopup.tsx
index bdc265b..328e813 100644
--- a/dictation_client/src/pages/LicensePage/cardLicenseActivatePopup.tsx
+++ b/dictation_client/src/pages/LicensePage/cardLicenseActivatePopup.tsx
@@ -233,14 +233,13 @@ export const CardLicenseActivatePopup: React.FC<
                 )}
               </label>
             </dt>
-            <dd className="">
+            <dd className={styles.last}>
               <textarea
                 id="textarea1"
+                name="key1"
                 value={keyNumber1}
-                rows={1}
-                cols={TEXTAREASIZE}
+                className={styles.formInputKey}
                 ref={ref1}
-                style={{ resize: "none", fontSize: "16px" }}
                 // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus
                 onChange={(e) => {
@@ -266,11 +265,10 @@ export const CardLicenseActivatePopup: React.FC<
               />
               <textarea
                 id="textarea2"
+                name="key2"
                 value={keyNumber2}
-                rows={1}
-                cols={TEXTAREASIZE}
+                className={styles.formInputKey}
                 ref={ref2}
-                style={{ resize: "none", fontSize: "16px" }}
                 onChange={(e) => {
                   let cursorPos = 0;
                   cursorPos = e.target.selectionStart;
@@ -294,11 +292,10 @@ export const CardLicenseActivatePopup: React.FC<
               />
               <textarea
                 id="textarea3"
+                name="key3"
                 value={keyNumber3}
-                rows={1}
-                cols={TEXTAREASIZE}
+                className={styles.formInputKey}
                 ref={ref3}
-                style={{ resize: "none", fontSize: "16px" }}
                 onChange={(e) => {
                   let cursorPos = 0;
                   cursorPos = e.target.selectionStart;
@@ -322,11 +319,10 @@ export const CardLicenseActivatePopup: React.FC<
               />
               <textarea
                 id="textarea4"
+                name="key4"
                 value={keyNumber4}
-                rows={1}
-                cols={TEXTAREASIZE}
+                className={styles.formInputKey}
                 ref={ref4}
-                style={{ resize: "none", fontSize: "16px" }}
                 onChange={(e) => {
                   let cursorPos = 0;
                   cursorPos = e.target.selectionStart;
@@ -350,11 +346,10 @@ export const CardLicenseActivatePopup: React.FC<
               />
               <textarea
                 id="textarea5"
+                name="key5"
                 value={keyNumber5}
-                rows={1}
-                cols={TEXTAREASIZE}
+                className={styles.formInputKey}
                 ref={ref5}
-                style={{ resize: "none", fontSize: "16px" }}
                 onChange={(e) => {
                   let cursorPos = 0;
                   cursorPos = e.target.selectionStart;
diff --git a/dictation_client/src/styles/app.module.scss b/dictation_client/src/styles/app.module.scss
index fd3c27c..fd2a171 100644
--- a/dictation_client/src/styles/app.module.scss
+++ b/dictation_client/src/styles/app.module.scss
@@ -215,7 +215,6 @@ h5 {
   background: linear-gradient(#ffffff, #ffffff 70%, #f0f0f0 100%);
   z-index: 4;
 }
-
 .headerLogo {
   margin: 1.2rem 2rem 1.5rem;
   font-size: 1.71rem;
@@ -223,11 +222,9 @@ h5 {
   letter-spacing: 0.07rem;
   font-weight: normal;
 }
-
 .headerLogo img {
   width: 280px;
 }
-
 .headerSub {
   margin: 1.4rem 2rem 1rem;
   font-size: 1.8rem;
@@ -237,17 +234,14 @@ h5 {
   font-weight: 600;
   text-align: right;
 }
-
 .headerMenu {
   width: 100%;
 }
-
 .headerMenu ul {
   display: flex;
   flex-wrap: wrap;
   padding: 0 2rem;
 }
-
 .headerMenu ul li {
   font-size: 1.3rem;
   line-height: 2rem;
@@ -255,7 +249,6 @@ h5 {
   font-weight: normal;
   border-left: 1px #e6e6e6 solid;
 }
-
 .headerMenu ul li a {
   display: block;
   padding: 0.2rem 2.5rem 0.2rem;
@@ -266,19 +259,16 @@ h5 {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .headerMenu ul li a:hover {
   background: #f5f5f5;
   text-decoration: underline;
 }
-
 .headerMenu ul li a.isActive {
   font-weight: 600;
   pointer-events: none;
   position: relative;
   background: #e6e6e6;
 }
-
 .headerMenu ul li a.isActive::after {
   content: "";
   border-right: 0.7rem transparent solid;
@@ -299,7 +289,6 @@ h5 {
   letter-spacing: 0.04rem;
   font-weight: normal;
 }
-
 .accountIcon {
   width: 1.4rem;
   vertical-align: top;
@@ -315,7 +304,6 @@ _:-ms-lang(x)::-ms-backdrop,
 .main {
   grid-area: main;
 }
-
 .mainSmall {
   width: 600px;
   margin: 0 auto;
@@ -352,12 +340,10 @@ h3 .brCrumb {
   letter-spacing: 0.04rem;
   font-weight: normal;
 }
-
 h2 .brCrumb::before,
 h3 .brCrumb::before {
   content: "-";
 }
-
 h2 .brCrumb .tlIcon,
 h3 .brCrumb .tlIcon {
   width: 1.6rem;
@@ -368,7 +354,6 @@ h3 .brCrumb .tlIcon {
 .brCrumbAcc {
   margin-bottom: 1rem;
 }
-
 .brCrumbAcc li {
   padding-left: 1.1rem;
   font-size: 1.2rem;
@@ -377,7 +362,6 @@ h3 .brCrumb .tlIcon {
   font-weight: normal;
   position: relative;
 }
-
 .brCrumbAcc li::before {
   content: "";
   border-top: 8px #333333 solid;
@@ -388,11 +372,9 @@ h3 .brCrumb .tlIcon {
   left: 0;
   transform: translateY(-50%);
 }
-
 .brCrumbAcc li:nth-of-type(2) {
   margin-left: 1.1rem;
 }
-
 .brCrumbAcc li:nth-of-type(3) {
   margin-left: 2.2rem;
 }
@@ -416,25 +398,20 @@ h3 .brCrumb .tlIcon {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .buttonNormal:hover {
   background: rgba(0, 64, 134, 0.7);
 }
-
 .buttonNormal.small {
   width: auto;
   padding: 0.75rem 2rem;
 }
-
 .buttonNormal.red {
   background: #e60000;
   border: 1px #e60000 solid;
 }
-
 .buttonNormal.red:hover {
   background: rgba(230, 0, 0, 0.7);
 }
-
 .buttonBase {
   display: inline-block;
   width: 15rem;
@@ -454,16 +431,13 @@ h3 .brCrumb .tlIcon {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .buttonBase:hover {
   background: rgba(0, 64, 134, 0.04);
 }
-
 .buttonBase.small {
   width: auto;
   padding: 0.75rem 2rem;
 }
-
 .buttonText {
   display: inline-block;
   padding: 0.8rem 0;
@@ -478,11 +452,9 @@ h3 .brCrumb .tlIcon {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .buttonText:hover {
   opacity: 0.7;
 }
-
 .buttonText.small {
   width: auto;
   padding: 0.75rem 0;
@@ -493,7 +465,6 @@ h3 .brCrumb .tlIcon {
   flex-wrap: wrap;
   margin-bottom: 3rem;
 }
-
 .formList dt,
 .formList dd {
   font-size: 16px;
@@ -501,13 +472,11 @@ h3 .brCrumb .tlIcon {
   letter-spacing: 0;
   font-weight: normal;
 }
-
 .formList dt {
   width: 22%;
   padding: 0.5rem 4% 0;
   text-align: right;
 }
-
 .formList dt.formTitle {
   width: 100%;
   padding: 0.5rem 4%;
@@ -517,37 +486,36 @@ h3 .brCrumb .tlIcon {
   letter-spacing: 0.07rem;
   font-weight: normal;
 }
-
 .formList dt.overLine {
   padding: 0 4% 0;
   line-height: 1.4;
 }
-
 .formList dd {
   width: 66%;
   padding-right: 4%;
   margin-bottom: 1.5rem;
 }
-
 .formList dd.full {
   width: 100%;
   padding-right: 0;
   background: none;
 }
-
 .formList.hasbg {
   border-top: 2px #282828 solid;
   background: #fafafa;
 }
-
+.form select:invalid {
+  color: #999999;
+}
+.form select option {
+  color: #333333;
+}
 .form select option[disabled] {
   background: #f5f5f5;
 }
-
 .form select option[value=""] {
   color: #999999;
 }
-
 .formInput {
   width: 350px;
   padding: 0.6rem 0.8rem;
@@ -559,28 +527,29 @@ h3 .brCrumb .tlIcon {
   letter-spacing: 0;
   font-weight: normal;
 }
-
 .formInput:focus {
   outline: 0;
 }
-
 .formInput[readonly] {
   border: 1px #e6e6e6 solid;
   background: #e6e6e6;
 }
-
+.formInput[disabled] {
+  border: 1px #e6e6e6 solid;
+  color: #999999;
+}
 .formInput.isError {
   background: rgba(229, 0, 0, 0.08);
 }
-
 .formInput.password[type="password"] + span {
   background: url(../assets/images/visibility_off.svg) no-repeat top right;
 }
-
 .formInput.password[type="text"] + span {
   background: url(../assets/images/visibility.svg) no-repeat top right;
 }
-
+.formInput.short {
+  width: 150px;
+}
 .formIconEye {
   display: inline-block;
   width: 40px;
@@ -590,11 +559,9 @@ h3 .brCrumb .tlIcon {
   margin-right: 45px;
   position: relative;
 }
-
 .formIconEye img {
   width: 2.5rem;
 }
-
 .formCheck {
   width: 1.2rem;
   height: 1.2rem;
@@ -603,7 +570,9 @@ h3 .brCrumb .tlIcon {
   vertical-align: bottom;
   cursor: pointer;
 }
-
+.formCheck:disabled {
+  cursor: default;
+}
 .formRadio {
   width: 1.2rem;
   height: 1.2rem;
@@ -611,15 +580,41 @@ h3 .brCrumb .tlIcon {
   margin-right: 0.3rem;
   accent-color: #282828;
   vertical-align: middle;
+  cursor: pointer;
+}
+.formRadio:disabled {
+  cursor: default;
 }
-
 .form label {
   display: inline-block;
   padding: 0.6rem 0;
   margin-right: 1rem;
   cursor: pointer;
 }
-
+.form label:has(input:disabled) {
+  cursor: default;
+}
+.formInputKey {
+  resize: none;
+  width: 60px;
+  height: 1.1rem;
+  overflow: hidden;
+  margin-right: 0.5rem;
+  padding: 0.6rem 0.1rem;
+  border: 1px #999999 solid;
+  background: #ffffff;
+  font-size: 18px;
+  line-height: 1;
+  letter-spacing: 0;
+  font-weight: normal;
+  text-align: center;
+}
+.formInputKey:focus {
+  outline: 0;
+}
+.formInputKey.isError {
+  background: rgba(229, 0, 0, 0.08);
+}
 .formComment {
   display: inline-block;
   padding-top: 0.5rem;
@@ -629,7 +624,6 @@ h3 .brCrumb .tlIcon {
   letter-spacing: 0;
   font-weight: normal;
 }
-
 .formError {
   display: block;
   padding-top: 0.3rem;
@@ -639,14 +633,12 @@ h3 .brCrumb .tlIcon {
   letter-spacing: 0;
   font-weight: normal;
 }
-
 .formConfirm {
   width: 350px;
   padding: 0.6rem 0.6rem;
   background: #f0f0f0;
   box-sizing: border-box;
 }
-
 .formSubmit {
   min-width: 15rem;
   padding: 0.8rem 2rem;
@@ -664,7 +656,6 @@ h3 .brCrumb .tlIcon {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .formSubmit.isActive {
   cursor: pointer;
   opacity: 1;
@@ -673,11 +664,9 @@ h3 .brCrumb .tlIcon {
   border: 1px #004086 solid;
   pointer-events: auto;
 }
-
 .formSubmit.isActive:hover {
   background: rgba(0, 94, 184, 0.7);
 }
-
 .formButton {
   padding: 0.8rem 0.8rem;
   border: 1px #999999 solid;
@@ -694,11 +683,9 @@ h3 .brCrumb .tlIcon {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .formButton:hover {
   background: #f0f0f0;
 }
-
 .formBack {
   width: 15rem;
   padding: 0.8rem 2rem;
@@ -714,11 +701,9 @@ h3 .brCrumb .tlIcon {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .formBack:hover {
   background: #f0f0f0;
 }
-
 .formButtonTx {
   padding: 0.2rem 2rem;
   border: none;
@@ -734,11 +719,9 @@ h3 .brCrumb .tlIcon {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .formButtonTx:hover {
   text-decoration: underline;
 }
-
 .formDone {
   width: 100px;
 }
@@ -749,7 +732,13 @@ h3 .brCrumb .tlIcon {
   flex-wrap: wrap;
   border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
 }
-
+.listVertical .listHeader {
+  width: 100%;
+  padding: 0.4rem 4%;
+  vertical-align: middle;
+  color: #ffffff;
+  background: #282828;
+}
 .listVertical dt,
 .listVertical dd {
   padding: 0.8rem 4%;
@@ -758,23 +747,40 @@ h3 .brCrumb .tlIcon {
   letter-spacing: 0.04rem;
   font-weight: normal;
 }
-
 .listVertical dt:nth-of-type(odd),
 .listVertical dd:nth-of-type(odd) {
   background: #f5f5f5;
 }
-
 .listVertical dt {
   width: 42%;
   text-align: left;
   position: relative;
 }
-
 .listVertical dd {
   width: 42%;
   text-align: right;
 }
 
+.boxFlex {
+  display: flex;
+  flex-wrap: wrap;
+}
+.boxFlex.aru {
+  justify-content: space-around;
+}
+.boxFlex.btw {
+  justify-content: space-between;
+}
+.boxFlex.str {
+  align-items: flex-start;
+}
+.box100 {
+  width: 100%;
+}
+.box50 {
+  width: 50%;
+}
+
 .loadingBoxSpinner {
   width: 50px;
   height: 50px;
@@ -796,23 +802,19 @@ h3 .brCrumb .tlIcon {
   0% {
     transform: rotate(0);
   }
-
   60% {
     transform: rotate(280deg);
   }
-
   100% {
     transform: rotate(360deg);
   }
 }
-
 .modal {
   -moz-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .modal.isShow {
   width: 100%;
   height: 100%;
@@ -820,11 +822,9 @@ h3 .brCrumb .tlIcon {
   position: fixed;
   z-index: 5;
 }
-
 .modal.isShow .modalBox {
   display: block;
 }
-
 .modalBox {
   display: none;
   width: 600px;
@@ -837,7 +837,6 @@ h3 .brCrumb .tlIcon {
   border-radius: 0.3rem;
   overflow: auto;
 }
-
 .modalTitle {
   display: flex;
   justify-content: space-between;
@@ -848,54 +847,56 @@ h3 .brCrumb .tlIcon {
   letter-spacing: 0;
   font-weight: 600;
 }
-
 .modalTitle img:hover {
   cursor: pointer;
 }
-
 .modalTitle img.off {
   cursor: none;
   pointer-events: none;
   opacity: 0.4;
 }
-
 .modalTitleIcon {
   width: 1rem;
 }
-
 .modal .formList {
   margin-bottom: 0;
 }
-
 .modal .formList.hasbg {
   border-top: none;
 }
-
 .modal .formList dd {
   margin-bottom: 0.5rem;
 }
-
 .modal .formList dd.last {
   margin-bottom: 1.5rem;
 }
-
 .modal .formList .slideSet {
   width: 100%;
   display: flex;
+  flex-wrap: wrap;
+}
+.modal .formList .slideSet dt {
+  width: 22%;
+}
+.modal .formList .slideSet dd {
+  width: 66%;
 }
-
 .modal .formInput {
   padding: 0.5rem 0.8rem;
 }
-
 .modal .form label {
   padding: 0.5rem 0 0.2rem;
 }
-
 .modal .form .icLoading {
   bottom: 1.5rem;
   left: calc(50% - 25px);
 }
+.modal .encryptionPass {
+  display: none;
+}
+.modal .encryptionPass.isShow {
+  display: block;
+}
 
 .pageHeader {
   padding: 0.3rem 2.5rem 0.2rem;
@@ -903,7 +904,6 @@ h3 .brCrumb .tlIcon {
   color: #ffffff;
   margin-bottom: 2rem;
 }
-
 .pageTitle {
   display: inline-block;
   padding-right: 1rem;
@@ -912,25 +912,21 @@ h3 .brCrumb .tlIcon {
   letter-spacing: 0.07rem;
   font-weight: 500;
 }
-
 .pageTx {
   display: inline-block;
 }
 
 .pagenation {
   margin-bottom: 3rem;
-  text-align: right;
-  /*&-nav{ a{ display: inline-block; padding: .5rem; margin-right: .5rem; color: $color-blues;
+  text-align: right; /*&-nav{ a{ display: inline-block; padding: .5rem; margin-right: .5rem; color: $color-blues;
 			@include font-styling(.9rem, 1.6, 0.04rem); &:last-child{ margin-right: 0; } &:visited{ color: $color-blues; } svg{ margin: 0 .5rem; width: .5rem; vertical-align: middle; fill: $color-blues; &.prev{ } } &:hover{ opacity: .7; } &[href=""]{ color: $color-subtxt; text-decoration: none; pointer-events: none; svg{ fill: $color-subtxt; } } } }*/
 }
-
 .pagenationNav {
   font-size: 0.8rem;
   line-height: 1.6;
   letter-spacing: 0.04rem;
   font-weight: normal;
 }
-
 .pagenationNav a {
   display: inline-block;
   margin: 0 1px;
@@ -946,16 +942,13 @@ h3 .brCrumb .tlIcon {
   opacity: 0.4;
   pointer-events: none;
 }
-
 .pagenationNav a.isActive {
   opacity: 1;
   pointer-events: inherit;
 }
-
 .pagenationNav a.isActive:hover {
   background: #f5f5f5;
 }
-
 .pagenationTotal {
   color: #999999;
 }
@@ -986,7 +979,6 @@ _:-ms-lang(x)::-ms-backdrop,
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .snackbar.isShow {
   opacity: 1;
   top: 0.2rem;
@@ -997,11 +989,9 @@ _:-ms-lang(x)::-ms-backdrop,
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .snackbar.isAlert {
   background: #ff5a33;
 }
-
 .snackbarMessage {
   width: calc(800px - 3rem - 3.3rem);
   font-size: 16px;
@@ -1009,17 +999,14 @@ _:-ms-lang(x)::-ms-backdrop,
   letter-spacing: 0;
   font-weight: normal;
 }
-
 .snackbarIcon {
   width: 1.5rem;
   margin-right: 1rem;
   vertical-align: middle;
 }
-
 .snackbarIconClose {
   width: 0.8rem;
 }
-
 .snackbarIconClose:hover {
   cursor: pointer;
 }
@@ -1028,15 +1015,12 @@ _:-ms-lang(x)::-ms-backdrop,
   width: 100%;
   margin-bottom: 1rem;
 }
-
 .table tr:nth-child(2n + 3) {
   background: #f5f5f5;
 }
-
 .table tr:last-child {
   border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
 }
-
 .table td {
   padding: 0.8rem 0.7rem;
   font-size: 15px;
@@ -1044,15 +1028,12 @@ _:-ms-lang(x)::-ms-backdrop,
   letter-spacing: 0;
   font-weight: normal;
 }
-
 .table td .isAlert {
   color: #ff5a33;
 }
-
 .tableHeader {
   background: #282828;
 }
-
 .tableHeader th {
   padding: 0.4rem 0.7rem;
   vertical-align: middle;
@@ -1064,13 +1045,11 @@ _:-ms-lang(x)::-ms-backdrop,
   text-align: left;
   position: relative;
 }
-
 .tableHeader th .hasSort {
   display: block;
   width: calc(100% - 0.5rem);
   padding-right: 0.5rem;
 }
-
 .tableHeader th .hasSort::before {
   content: "";
   border-top: 0.4rem #ffffff solid;
@@ -1086,26 +1065,21 @@ _:-ms-lang(x)::-ms-backdrop,
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .tableHeader th .hasSort:hover {
   cursor: pointer;
 }
-
 .tableHeader th .hasSort:hover::before {
   opacity: 1;
 }
-
 .tableHeader th .hasSort.isActiveAz::before {
   opacity: 1;
 }
-
 .tableHeader th .hasSort.isActiveAz:hover::before {
   border-top: none;
   border-right: 0.35rem transparent solid;
   border-bottom: 0.4rem #ffffff solid;
   border-left: 0.35rem transparent solid;
 }
-
 .tableHeader th .hasSort.isActiveZa::before {
   border-top: none;
   border-right: 0.35rem transparent solid;
@@ -1113,18 +1087,15 @@ _:-ms-lang(x)::-ms-backdrop,
   border-left: 0.35rem transparent solid;
   opacity: 1;
 }
-
 .tableHeader th .hasSort.isActiveZa:hover::before {
   border-top: 0.4rem #ffffff solid;
   border-right: 0.35rem transparent solid;
   border-bottom: none;
   border-left: 0.35rem transparent solid;
 }
-
 .tableHeader th:not(:last-child) {
   border-right: 1px #999999 solid;
 }
-
 .tableHeader th:not(:last-child)::after {
   content: "";
   width: 0.6rem;
@@ -1135,11 +1106,9 @@ _:-ms-lang(x)::-ms-backdrop,
   right: -0.3rem;
   z-index: 3;
 }
-
 .tableHeader th.noLine {
   border-right: none;
 }
-
 .tableHeader th.noLine::after {
   display: none;
 }
@@ -1148,7 +1117,6 @@ _:-ms-lang(x)::-ms-backdrop,
   background: url("../assets/images/top-bg.png") no-repeat center 20vh;
   background-size: cover;
 }
-
 @media only screen and (min-width: 1280px) {
   .wrap.home {
     background: url("../assets/images/top-bg.png") no-repeat center 18vh;
@@ -1160,11 +1128,9 @@ _:-ms-lang(x)::-ms-backdrop,
   background: none;
   box-shadow: none;
 }
-
 .header.home .headerLogo {
   margin: 2rem 2.5rem 2rem;
 }
-
 .header.home .headerSub {
   display: none;
 }
@@ -1179,16 +1145,13 @@ _:-ms-lang(x)::-ms-backdrop,
     align-items: center;
   }
 }
-
 .pgHome .ODMSlogo {
   text-align: center;
   padding: 2rem 0 0;
 }
-
 .pgHome .ODMSlogo img {
   width: 200px;
 }
-
 @media only screen and (min-width: 1280px) {
   .pgHome .ODMSlogo {
     width: 400px;
@@ -1196,13 +1159,11 @@ _:-ms-lang(x)::-ms-backdrop,
     padding: 0 0 0;
     text-align: center;
   }
-
   .pgHome .ODMSlogo img {
     width: auto;
     vertical-align: middle;
   }
 }
-
 .pgHome > div {
   width: 400px;
   margin: 3rem auto 0;
@@ -1211,19 +1172,16 @@ _:-ms-lang(x)::-ms-backdrop,
   box-shadow: 0 0 5px #aaa;
   border-radius: 0.3rem;
 }
-
 @media only screen and (min-width: 1280px) {
   .pgHome > div {
     margin: 3vh 0 0 0;
   }
 }
-
 .pgHomeLinks {
   width: calc(400px - 4rem);
   margin: 0 auto;
   text-align: center;
 }
-
 .pgHomeLinks dt {
   padding: 0 0 0.5rem 1rem;
   font-size: 16px;
@@ -1232,13 +1190,11 @@ _:-ms-lang(x)::-ms-backdrop,
   font-weight: normal;
   text-align: left;
 }
-
 .pgHomeLinks dt:first-of-type {
   display: inline-block;
   width: 45%;
   padding: 0 0 0.5rem 0;
 }
-
 .pgHomeLinks dd a .buttonIcon {
   width: 16px;
   height: 16px;
@@ -1252,23 +1208,21 @@ _:-ms-lang(x)::-ms-backdrop,
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .pgHomeLinks dd a:hover .buttonIcon {
   top: 50%;
   right: 1.7rem;
   opacity: 1;
 }
-
 .pgHomeLinks dd:first-of-type {
   display: inline-block;
   width: 45%;
   text-align: left;
 }
-
 .pgHomeLinks dd .formInput {
   width: auto;
 }
 
+.account > div,
 .user > div,
 .license > div,
 .dictation > div,
@@ -1276,7 +1230,7 @@ _:-ms-lang(x)::-ms-backdrop,
   padding: 0 2rem;
   position: relative;
 }
-
+.account > div .icLoading,
 .user > div .icLoading,
 .license > div .icLoading,
 .dictation > div .icLoading,
@@ -1284,14 +1238,51 @@ _:-ms-lang(x)::-ms-backdrop,
   top: 5.5rem;
   left: calc(50% - 25px);
 }
-
+.account .table tr.tableHeader th.clm0,
+.user .table tr.tableHeader th.clm0,
+.license .table tr.tableHeader th.clm0,
+.dictation .table tr.tableHeader th.clm0,
+.partners .table tr.tableHeader th.clm0 {
+  width: 0px;
+  padding: 0 0;
+}
+.account .table tr:not(.tableHeader),
 .user .table tr:not(.tableHeader),
 .license .table tr:not(.tableHeader),
 .dictation .table tr:not(.tableHeader),
 .partners .table tr:not(.tableHeader) {
   position: relative;
 }
-
+.account .table tr:not(.tableHeader):hover .menuInTable,
+.user .table tr:not(.tableHeader):hover .menuInTable,
+.license .table tr:not(.tableHeader):hover .menuInTable,
+.dictation .table tr:not(.tableHeader):hover .menuInTable,
+.partners .table tr:not(.tableHeader):hover .menuInTable {
+  opacity: 1;
+}
+.account .table tr:not(.tableHeader).isSelected,
+.user .table tr:not(.tableHeader).isSelected,
+.license .table tr:not(.tableHeader).isSelected,
+.dictation .table tr:not(.tableHeader).isSelected,
+.partners .table tr:not(.tableHeader).isSelected {
+  background: #0084b2;
+  color: #ffffff;
+}
+.account .table tr:not(.tableHeader).isSelected:hover,
+.user .table tr:not(.tableHeader).isSelected:hover,
+.license .table tr:not(.tableHeader).isSelected:hover,
+.dictation .table tr:not(.tableHeader).isSelected:hover,
+.partners .table tr:not(.tableHeader).isSelected:hover {
+  color: #ffffff;
+}
+.account .table tr:not(.tableHeader).isSelected .menuInTable,
+.user .table tr:not(.tableHeader).isSelected .menuInTable,
+.license .table tr:not(.tableHeader).isSelected .menuInTable,
+.dictation .table tr:not(.tableHeader).isSelected .menuInTable,
+.partners .table tr:not(.tableHeader).isSelected .menuInTable {
+  display: block;
+}
+.account .table td,
 .user .table td,
 .license .table td,
 .dictation .table td,
@@ -1302,71 +1293,169 @@ _:-ms-lang(x)::-ms-backdrop,
   white-space: nowrap;
   position: relative;
 }
-
-.user .table.user tr:not(.tableHeader),
-.license .table.user tr:not(.tableHeader),
-.dictation .table.user tr:not(.tableHeader),
-.partners .table.user tr:not(.tableHeader) {
+.account .table td.clm0,
+.user .table td.clm0,
+.license .table td.clm0,
+.dictation .table td.clm0,
+.partners .table td.clm0 {
+  width: 0px;
+  padding: 0 0;
+  overflow: visible;
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}
+.account .table.user,
+.user .table.user,
+.license .table.user,
+.dictation .table.user,
+.partners .table.user {
+  margin-bottom: 5rem;
+}
+.account .table.user tr:not(.tableHeader) td,
+.user .table.user tr:not(.tableHeader) td,
+.license .table.user tr:not(.tableHeader) td,
+.dictation .table.user tr:not(.tableHeader) td,
+.partners .table.user tr:not(.tableHeader) td {
+  padding-bottom: 2rem;
+  vertical-align: top;
+}
+.account.account .listVertical,
+.user.account .listVertical,
+.license.account .listVertical,
+.dictation.account .listVertical,
+.partners.account .listVertical {
+  margin-bottom: 3rem;
+}
+.account.account .listVertical dd .formInput,
+.user.account .listVertical dd .formInput,
+.license.account .listVertical dd .formInput,
+.dictation.account .listVertical dd .formInput,
+.partners.account .listVertical dd .formInput {
+  max-width: 100%;
+}
+.account.account .listVertical dd .formCheckToggle,
+.user.account .listVertical dd .formCheckToggle,
+.license.account .listVertical dd .formCheckToggle,
+.dictation.account .listVertical dd .formCheckToggle,
+.partners.account .listVertical dd .formCheckToggle {
+  position: relative;
   cursor: pointer;
 }
-
-.user .table.user tr:not(.tableHeader):hover,
-.license .table.user tr:not(.tableHeader):hover,
-.dictation .table.user tr:not(.tableHeader):hover,
-.partners .table.user tr:not(.tableHeader):hover {
-  color: #0084b2;
+.account.account .listVertical dd .formCheckToggle .toggleBase,
+.user.account .listVertical dd .formCheckToggle .toggleBase,
+.license.account .listVertical dd .formCheckToggle .toggleBase,
+.dictation.account .listVertical dd .formCheckToggle .toggleBase,
+.partners.account .listVertical dd .formCheckToggle .toggleBase {
+  display: inline-block;
+  width: 2.8rem;
+  height: 1.6rem;
+  margin-right: 0.5rem;
+  border-radius: 0.8rem;
+  background: #e6e6e6;
+  vertical-align: bottom;
+  position: relative;
+  -moz-transition: all 0.3s ease-out;
+  -ms-transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
 }
-
-.user .table.user tr:not(.tableHeader).isSelected,
-.license .table.user tr:not(.tableHeader).isSelected,
-.dictation .table.user tr:not(.tableHeader).isSelected,
-.partners .table.user tr:not(.tableHeader).isSelected {
-  color: #ffffff;
+.account.account .listVertical dd .formCheckToggle .toggleBase::after,
+.user.account .listVertical dd .formCheckToggle .toggleBase::after,
+.license.account .listVertical dd .formCheckToggle .toggleBase::after,
+.dictation.account .listVertical dd .formCheckToggle .toggleBase::after,
+.partners.account .listVertical dd .formCheckToggle .toggleBase::after {
+  content: "";
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 50%;
+  background: #999999;
+  position: absolute;
+  top: 0.15rem;
+  left: 0.15rem;
+  -moz-transition: all 0.15s ease-out;
+  -ms-transition: all 0.15s ease-out;
+  -webkit-transition: all 0.15s ease-out;
+  transition: all 0.15s ease-out;
 }
-
-.user .table.user tr:not(.tableHeader).isSelected:hover,
-.license .table.user tr:not(.tableHeader).isSelected:hover,
-.dictation .table.user tr:not(.tableHeader).isSelected:hover,
-.partners .table.user tr:not(.tableHeader).isSelected:hover {
-  color: #ffffff;
+.account.account .listVertical dd .formCheckToggle input,
+.user.account .listVertical dd .formCheckToggle input,
+.license.account .listVertical dd .formCheckToggle input,
+.dictation.account .listVertical dd .formCheckToggle input,
+.partners.account .listVertical dd .formCheckToggle input {
+  position: absolute;
+  width: 0;
+  heigh: 0;
 }
-
-.user .table.user tr:not(.tableHeader).isSelected td,
-.license .table.user tr:not(.tableHeader).isSelected td,
-.dictation .table.user tr:not(.tableHeader).isSelected td,
-.partners .table.user tr:not(.tableHeader).isSelected td {
-  background: #0084b2;
+.account.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
+.user.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
+.license.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
+.dictation.account
+  .listVertical
+  dd
+  .formCheckToggle
+  input:checked
+  ~ .toggleBase,
+.partners.account
+  .listVertical
+  dd
+  .formCheckToggle
+  input:checked
+  ~ .toggleBase {
+  background: #c4eeec;
 }
-
-.user .table.user tr:not(.tableHeader).isSelected .menuInTable,
-.license .table.user tr:not(.tableHeader).isSelected .menuInTable,
-.dictation .table.user tr:not(.tableHeader).isSelected .menuInTable,
-.partners .table.user tr:not(.tableHeader).isSelected .menuInTable {
-  display: block;
+.account.account
+  .listVertical
+  dd
+  .formCheckToggle
+  input:checked
+  ~ .toggleBase::after,
+.user.account
+  .listVertical
+  dd
+  .formCheckToggle
+  input:checked
+  ~ .toggleBase::after,
+.license.account
+  .listVertical
+  dd
+  .formCheckToggle
+  input:checked
+  ~ .toggleBase::after,
+.dictation.account
+  .listVertical
+  dd
+  .formCheckToggle
+  input:checked
+  ~ .toggleBase::after,
+.partners.account
+  .listVertical
+  dd
+  .formCheckToggle
+  input:checked
+  ~ .toggleBase::after {
+  background: #00b4aa;
+  top: 0.15rem;
+  left: 1.35rem;
 }
 
 .menuAction {
   margin-bottom: 0.6rem;
 }
-
 .menuAction li {
   display: inline-block;
   margin-right: 0.5rem;
 }
-
 .menuAction.inTable {
   margin-bottom: 0;
 }
-
 .menuAction.inTable .menuLink {
   padding: 0.3rem 0.5rem 0.3rem 0.5rem;
   opacity: 0;
 }
-
 .menuAction.inTable .menuLink.isActive {
   opacity: 1;
 }
-
 .menuAction.inTable .colorLink {
   display: block;
   padding: 0.3rem 0.5rem 0.3rem 0.5rem;
@@ -1385,7 +1474,6 @@ _:-ms-lang(x)::-ms-backdrop,
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .menuAction.inTable .colorLink.isActive {
   cursor: pointer;
   opacity: 1;
@@ -1394,15 +1482,12 @@ _:-ms-lang(x)::-ms-backdrop,
   border: 1px #004086 solid;
   pointer-events: inherit;
 }
-
 .menuAction.inTable .colorLink.isActive:hover {
   background: rgba(0, 94, 184, 0.7);
 }
-
 .menuAction.alignRight {
   margin-top: -1rem;
 }
-
 .menuLink {
   display: block;
   padding: 0.3rem 0.5rem 0.3rem 0.3rem;
@@ -1422,22 +1507,18 @@ _:-ms-lang(x)::-ms-backdrop,
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .menuLink.isActive {
   opacity: 1;
   pointer-events: inherit;
 }
-
 .menuLink.isActive:hover {
   background: #f5f5f5;
 }
-
 .menuIcon {
   width: 1.4rem;
   margin-right: 0.4rem;
   vertical-align: bottom;
 }
-
 .menuInTable {
   width: auto;
   position: absolute;
@@ -1449,17 +1530,14 @@ _:-ms-lang(x)::-ms-backdrop,
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
-
 .menuInTable li {
   display: inline-block;
   margin-right: 0.5rem;
   padding-right: 0.5rem;
 }
-
 .menuInTable li:not(:last-child) {
   border-right: 1px #999999 solid;
 }
-
 .menuInTable li a {
   display: block;
   font-size: 12px;
@@ -1469,16 +1547,13 @@ _:-ms-lang(x)::-ms-backdrop,
   text-decoration: none;
   color: #0084b2;
 }
-
 .menuInTable li a:hover {
   opacity: 0.7;
 }
-
 .menuInTable li a.isDisable {
   color: #999999;
   pointer-events: none;
 }
-
 tr.isSelected .menuInTable li a {
   color: #ffffff;
 }
@@ -1497,49 +1572,39 @@ tr.isSelected .menuInTable li a {
   filter: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(5814%)
     hue-rotate(143deg) brightness(96%) contrast(101%);
 }
-
 .license .listVertical dd img[src*="block"] {
   filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(2633%)
     hue-rotate(340deg) brightness(102%) contrast(101%);
 }
-
 .license .table.history {
   width: 1000px;
 }
-
 .license .table.history td:last-child {
   width: 200px;
   text-align: right;
 }
-
 .license .table.cardHistory {
   width: 750px;
 }
-
 .license .table.cardHistory td:last-child {
   width: 50%;
 }
-
 .license .table.partner tr {
   position: relative;
 }
-
 .license .table.partner tr td[title="View child accounts"] {
   padding-left: 1.5rem;
   position: relative;
   cursor: pointer;
   background-size: none;
 }
-
 .license .table.partner tr td[title="View child accounts"]:hover {
   color: #0084b2;
 }
-
 .license .table.partner tr td[title="View child accounts"] a {
   color: inherit;
   text-decoration: none;
 }
-
 .license .table.partner tr td[title="View child accounts"]::before {
   content: "";
   position: absolute;
@@ -1550,32 +1615,26 @@ tr.isSelected .menuInTable li a {
   border-left: 8px #0084b2 solid;
   transform: translateY(-50%);
 }
-
 .license .table.partner tr td[title="Return"] {
   position: relative;
   cursor: pointer;
 }
-
 .license .table.partner tr td[title="Return"]:hover {
   color: #0084b2;
 }
-
 .license .table.partner tr.role3 td[title="View child accounts"]::before {
   border-top: 6px transparent solid;
   border-bottom: 6px transparent solid;
   border-left: 8px #00b4aa solid;
 }
-
 .license .table.partner tr.role4 td[title="View child accounts"]::before {
   border-top: 6px transparent solid;
   border-bottom: 6px transparent solid;
   border-left: 8px #faa306 solid;
 }
-
 .license .table.partner tr.role5 td:first-child::before {
   display: none;
 }
-
 .license .table.partner tr.isOpen::after {
   content: "";
   width: 100%;
@@ -1584,19 +1643,15 @@ tr.isSelected .menuInTable li a {
   bottom: 0;
   left: 0;
 }
-
 .license .table.partner tr.isOpen td {
   padding: 0.3rem 0.7rem;
 }
-
 .license .table.partner tr.isOpen td:nth-child(n + 2) {
   color: #999999;
 }
-
 .license .table.partner tr.isOpen td:first-child {
   padding-left: 1.5rem;
 }
-
 .license .table.partner tr.isOpen td:first-child::before {
   content: "";
   position: absolute;
@@ -1607,72 +1662,58 @@ tr.isSelected .menuInTable li a {
   border-left: 6px transparent solid;
   transform: translateY(-50%);
 }
-
 .license .table.partner tr.isOpen ~ tr td:first-child {
   padding-left: 2.5rem;
 }
-
 .license .table.partner tr.isOpen ~ tr td:first-child::before {
   top: 50%;
   left: 1.4rem;
 }
-
 .license .table.partner tr.isOpen + .isOpen::after {
   width: calc(100% - 1.4rem);
   left: 1.4rem;
 }
-
 .license .table.partner tr.isOpen + .isOpen ~ tr td:first-child {
   padding-left: 3.5rem;
 }
-
 .license .table.partner tr.isOpen + .isOpen ~ tr td:first-child::before {
   top: 50%;
   left: 2.4rem;
 }
-
 .license .table.partner tr.isOpen + .isOpen + .isOpen::after {
   width: calc(100% - 2.4rem);
   left: 2.4rem;
 }
-
 .license .table.partner tr.isOpen.role2,
 .license .table.partner tr.isOpen.role3,
 .license .table.partner tr.isOpen.role4 {
   background: #fafafa;
 }
-
 .license .table.partner tr.isOpen.role3::after {
   border-bottom: 3px #00b4aa solid;
 }
-
 .license .table.partner tr.isOpen.role3 td:first-child::before {
   border-top: 8px #00b4aa solid;
   border-right: 6px transparent solid;
   border-left: 6px transparent solid;
 }
-
 .license .table.partner tr.isOpen.role4::after {
   border-bottom: 3px #faa306 solid;
 }
-
 .license .table.partner tr.isOpen.role4 td:first-child::before {
   border-top: 8px #faa306 solid;
   border-right: 6px transparent solid;
   border-left: 6px transparent solid;
 }
-
 .license .table.partner td:last-child {
   width: 120px;
   text-align: right;
 }
-
-.license .table.partner td img[src*="circle.svg"] {
+.license .table.partner td img[src*="circle"] {
   filter: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(5814%)
     hue-rotate(143deg) brightness(96%) contrast(101%);
 }
-
-.license .table.partner td img[src*="block.svg"] {
+.license .table.partner td img[src*="block"] {
   filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(2633%)
     hue-rotate(340deg) brightness(102%) contrast(101%);
 }
@@ -1684,11 +1725,9 @@ tr.isSelected .menuInTable li a {
   background: #f0f0f0;
   position: relative;
 }
-
 .dictation .displayOptions li {
   display: inline-block;
 }
-
 .dictation .displayOptions li label {
   padding: 0.3rem 0;
   font-size: 13px;
@@ -1696,17 +1735,14 @@ tr.isSelected .menuInTable li a {
   letter-spacing: 0.02rem;
   font-weight: normal;
 }
-
 .dictation .displayOptions li label .formCheck {
   width: 0.9rem;
   height: 0.9rem;
   margin-right: 0.3rem;
 }
-
 .dictation .displayOptions.isShow {
   display: block;
 }
-
 .dictation .displayOptions::before {
   content: "";
   border-right: 0.6rem transparent solid;
@@ -1716,16 +1752,13 @@ tr.isSelected .menuInTable li a {
   top: -0.5rem;
   right: 3rem;
 }
-
 .dictation .table {
   margin-bottom: 0;
 }
-
 .dictation .tableFilter {
   padding-top: 0.8rem;
   margin-bottom: 0.8rem;
 }
-
 .dictation .tableFilter li {
   display: inline-block;
   margin-right: 0.3rem;
@@ -1734,22 +1767,18 @@ tr.isSelected .menuInTable li a {
   letter-spacing: 0.02rem;
   font-weight: normal;
 }
-
 .dictation .tableFilter li label {
   cursor: pointer;
 }
-
 .dictation .tableFilter li label .formCheck {
   width: 0.9rem;
   height: 0.9rem;
   margin-right: 0.3rem;
 }
-
 .dictation .tableFilter2 {
   padding-top: 0.8rem;
   margin-bottom: 0.8rem;
 }
-
 .dictation .tableFilter2 li {
   display: inline-block;
   margin-right: 0.5rem;
@@ -1758,49 +1787,40 @@ tr.isSelected .menuInTable li a {
   letter-spacing: 0.02rem;
   font-weight: normal;
 }
-
 .dictation .tableFilter2 li a {
   display: block;
   color: #0084b2;
   text-decoration: none;
   padding-right: 0.5rem;
 }
-
 .dictation .tableFilter2 li a:hover {
   opacity: 0.7;
 }
-
 .dictation .tableFilter2 li a.isDisable {
   color: #999999;
   pointer-events: none;
 }
-
 .dictation .tableFilter2 li a span {
   display: inline-block;
   padding: 0 0.2rem;
   color: #333333;
 }
-
 .dictation .tableFilter2 li:not(:last-child) a {
   border-right: 1px #999999 solid;
 }
-
 .dictation .tableWrap {
   max-width: calc(100vw - 5.1rem);
   max-height: 90vh;
   overflow-x: scroll;
   margin-bottom: 1rem;
 }
-
 .dictation .table.dictation {
   position: relative;
   min-width: 100%;
 }
-
 .dictation .table.dictation tr {
   position: relative;
 }
-
 .dictation .table.dictation tr.tableHeader th {
   position: -webkit-sticky;
   position: sticky;
@@ -1808,12 +1828,10 @@ tr.isSelected .menuInTable li a {
   background: #282828;
   z-index: 1;
 }
-
 .dictation .table.dictation tr.tableHeader th.clm0 {
   width: 0px;
   padding: 0 0;
 }
-
 .dictation .table.dictation tr.tableHeader th:not(:last-child)::before {
   content: "";
   position: absolute;
@@ -1824,20 +1842,16 @@ tr.isSelected .menuInTable li a {
   border-right: 0.1rem #e6e6e6 solid;
   z-index: -1;
 }
-
 .dictation .table.dictation tr:hover .menuInTable {
   opacity: 1;
 }
-
 .dictation .table.dictation tr.isSelected {
   background: #0084b2;
   color: #ffffff;
 }
-
 .dictation .table.dictation tr.isSelected:hover {
   color: #ffffff;
 }
-
 .dictation .table.dictation tr.isSelected img[alt="Uploaded"],
 .dictation .table.dictation tr.isSelected img[alt="Finished"],
 .dictation .table.dictation tr.isSelected img[alt="InProgress"],
@@ -1845,20 +1859,16 @@ tr.isSelected .menuInTable li a {
   filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%)
     hue-rotate(110deg) brightness(110%) contrast(101%);
 }
-
 .dictation .table.dictation td {
   padding-bottom: 2rem;
   vertical-align: top;
 }
-
 .dictation .table.dictation td:has(img[alt="encrypted"]) {
   text-align: center;
 }
-
 .dictation .table.dictation td:has(img[alt="encrypted"]) img {
   height: 1.1rem;
 }
-
 .dictation .table.dictation td.clm0 {
   width: 0px;
   padding: 0 0;
@@ -1867,158 +1877,127 @@ tr.isSelected .menuInTable li a {
   left: 0;
   z-index: 2;
 }
-
 .dictation .table.dictation td img {
   height: 1.3rem;
   margin-right: 0.2rem;
   margin-left: -0.4rem;
   vertical-align: middle;
 }
-
 .dictation .table.dictation td.txWsline {
   white-space: pre;
 }
-
 .dictation .table.dictation.hidePri th.opPri,
 .dictation .table.dictation.hidePri td.opPri {
   display: none;
 }
-
 .dictation .table.dictation.hideSize th.opSize,
 .dictation .table.dictation.hideSize td.opSize {
   display: none;
 }
-
 .dictation .table.dictation.hideUpd th.opUpd,
 .dictation .table.dictation.hideUpd td.opUpd {
   display: none;
 }
-
 .dictation .table.dictation.hideC1 th.clm1,
 .dictation .table.dictation.hideC1 td.clm1 {
   display: none;
 }
-
 .dictation .table.dictation.hideC2 th.clm2,
 .dictation .table.dictation.hideC2 td.clm2 {
   display: none;
 }
-
 .dictation .table.dictation.hideC3 th.clm3,
 .dictation .table.dictation.hideC3 td.clm3 {
   display: none;
 }
-
 .dictation .table.dictation.hideC4 th.clm4,
 .dictation .table.dictation.hideC4 td.clm4 {
   display: none;
 }
-
 .dictation .table.dictation.hideC5 th.clm5,
 .dictation .table.dictation.hideC5 td.clm5 {
   display: none;
 }
-
 .dictation .table.dictation.hideC6 th.clm6,
 .dictation .table.dictation.hideC6 td.clm6 {
   display: none;
 }
-
 .dictation .table.dictation.hideC7 th.clm7,
 .dictation .table.dictation.hideC7 td.clm7 {
   display: none;
 }
-
 .dictation .table.dictation.hideC8 th.clm8,
 .dictation .table.dictation.hideC8 td.clm8 {
   display: none;
 }
-
 .dictation .table.dictation.hideC9 th.clm9,
 .dictation .table.dictation.hideC9 td.clm9 {
   display: none;
 }
-
 .dictation .table.dictation.hideC10 th.clm10,
 .dictation .table.dictation.hideC10 td.clm10 {
   display: none;
 }
-
 .dictation .table.dictation.hideC11 th.clm11,
 .dictation .table.dictation.hideC11 td.clm11 {
   display: none;
 }
-
 .dictation .table.dictation.hideC12 th.clm12,
 .dictation .table.dictation.hideC12 td.clm12 {
   display: none;
 }
-
 .dictation .table.dictation.hideC13 th.clm13,
 .dictation .table.dictation.hideC13 td.clm13 {
   display: none;
 }
-
 .dictation .table.dictation.hideC14 th.clm14,
 .dictation .table.dictation.hideC14 td.clm14 {
   display: none;
 }
-
 .dictation .table.dictation.hideC15 th.clm15,
 .dictation .table.dictation.hideC15 td.clm15 {
   display: none;
 }
-
 .dictation .table.dictation.hideC16 th.clm16,
 .dictation .table.dictation.hideC16 td.clm16 {
   display: none;
 }
-
 .dictation .table.dictation.hideO1 th.op1,
 .dictation .table.dictation.hideO1 td.op1 {
   display: none;
 }
-
 .dictation .table.dictation.hideO2 th.op2,
 .dictation .table.dictation.hideO2 td.op2 {
   display: none;
 }
-
 .dictation .table.dictation.hideO3 th.op3,
 .dictation .table.dictation.hideO3 td.op3 {
   display: none;
 }
-
 .dictation .table.dictation.hideO4 th.op4,
 .dictation .table.dictation.hideO4 td.op4 {
   display: none;
 }
-
 .dictation .table.dictation.hideO5 th.op5,
 .dictation .table.dictation.hideO5 td.op5 {
   display: none;
 }
-
 .dictation .table.dictation.hideO6 th.op6,
 .dictation .table.dictation.hideO6 td.op6 {
   display: none;
 }
-
 .dictation .table.dictation.hideO7 th.op7,
 .dictation .table.dictation.hideO7 td.op7 {
   display: none;
 }
-
 .dictation .table.dictation.hideO8 th.op8,
 .dictation .table.dictation.hideO8 td.op8 {
   display: none;
 }
-
 .dictation .table.dictation.hideO9 th.op9,
 .dictation .table.dictation.hideO9 td.op9 {
   display: none;
 }
-
 .dictation .table.dictation.hideO10 th.op10,
 .dictation .table.dictation.hideO10 td.op10 {
   display: none;
@@ -2032,13 +2011,11 @@ tr.isSelected .menuInTable li a {
   width: 92%;
   padding: 0 4%;
 }
-
 .formList dd.formChange ul.chooseMember,
 .formList dd.formChange ul.holdMember {
   width: calc(40% - 2px);
   border: 1px #999999 solid;
 }
-
 .formChange ul.chooseMember,
 .formChange ul.holdMember {
   height: 250px;
@@ -2046,17 +2023,14 @@ tr.isSelected .menuInTable li a {
   padding: 0.5rem;
   background: #ffffff;
 }
-
 .formChange ul.chooseMember li.changeTitle,
 .formChange ul.holdMember li.changeTitle {
   font-weight: 600;
 }
-
 .formChange ul.chooseMember li .formCheck,
 .formChange ul.holdMember li .formCheck {
   display: none;
 }
-
 .formChange ul.chooseMember li input + label,
 .formChange ul.holdMember li input + label {
   display: block;
@@ -2065,35 +2039,29 @@ tr.isSelected .menuInTable li a {
   background: url(../assets/images/circle.svg) no-repeat left center;
   background-size: 1.3rem;
 }
-
 .formChange ul.chooseMember li input + label:hover,
 .formChange ul.holdMember li input + label:hover {
-  background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left
-    center;
+  background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center;
   background-size: 1.3rem;
 }
-
 .formChange ul.chooseMember li input:checked + label,
 .formChange ul.holdMember li input:checked + label {
   padding: 0.2rem 1rem 0.2rem 0;
   background: url(../assets/images/check_circle_fill.svg) no-repeat right center;
   background-size: 1.3rem;
 }
-
 .formChange ul.chooseMember li input:checked + label:hover,
 .formChange ul.holdMember li input:checked + label:hover {
-  background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat
-    right center;
+  background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat right
+    center;
   background-size: 1.3rem;
 }
-
 .formChange > p {
   width: 6%;
   height: 20px;
   background: #e6e6e6;
   position: relative;
 }
-
 .formChange > p::before {
   content: "";
   border-top: 20px transparent solid;
@@ -2104,7 +2072,6 @@ tr.isSelected .menuInTable li a {
   left: -15px;
   transform: translateY(-50%);
 }
-
 .formChange > p::after {
   content: "";
   border-top: 20px transparent solid;
@@ -2120,11 +2087,9 @@ tr.isSelected .menuInTable li a {
   position: relative;
   min-width: 100%;
 }
-
 .partners .table.partner tr {
   position: relative;
 }
-
 .partners .table.partner tr.tableHeader th {
   position: -webkit-sticky;
   position: sticky;
@@ -2132,66 +2097,22 @@ tr.isSelected .menuInTable li a {
   background: #282828;
   z-index: 1;
 }
-
-.partners .table.partner tr.tableHeader th.clm0 {
-  width: 0px;
-  padding: 0 0;
-}
-
-.partners .table.partner tr.tableHeader th:not(:last-child)::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-right: 0.1rem #e6e6e6 solid;
-  z-index: -1;
-}
-
-.partners .table.partner tr:hover .menuInTable {
-  opacity: 1;
-}
-
-.partners .table.partner tr.isSelected {
-  background: #0084b2;
-  color: #ffffff;
-}
-
-.partners .table.partner tr.isSelected:hover {
-  color: #ffffff;
-}
-
 .partners .table.partner td {
   padding-bottom: 2rem;
   vertical-align: top;
 }
-
-.partners .table.partner td.clm0 {
-  width: 0px;
-  padding: 0 0;
-  overflow: visible;
-  position: sticky;
-  left: 0;
-  z-index: 2;
-}
-
 .partners .table.partner td.txWsline {
   white-space: pre;
 }
-
 .partners .table.partner.role4 {
   margin-top: 3rem;
 }
-
 .partners .table.partner.role4 td {
   padding-bottom: 0.7rem;
 }
-
 .partners .table.partner.role4 .menuInTable {
   display: none;
 }
-
 .partners .table.partner:not(.role4) tr th:last-of-type,
 .partners .table.partner:not(.role4) tr td:last-of-type {
   display: none;
@@ -2200,11 +2121,9 @@ tr.isSelected .menuInTable li a {
 .alignCenter {
   text-align: center;
 }
-
 .alignLeft {
   text-align: left;
 }
-
 .alignRight {
   text-align: right;
 }
@@ -2214,21 +2133,25 @@ tr.isSelected .menuInTable li a {
   text-decoration: none;
   cursor: pointer;
 }
-
 .linkTx img {
   width: 1rem;
   margin: 0 4px;
   vertical-align: middle;
 }
-
 .linkTx:hover {
   text-decoration: underline;
 }
+.linkBottom {
+  margin-top: 5rem;
+  padding: 0 2rem;
+  font-size: 14px;
+  position: absolute;
+  bottom: 3rem;
+}
 
 .borderTop {
   border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
 }
-
 .borderBottom {
   border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
 }
@@ -2236,31 +2159,24 @@ tr.isSelected .menuInTable li a {
 .marginBtm0 {
   margin-bottom: 0.5rem;
 }
-
 .marginBtm1 {
   margin-bottom: 1rem;
 }
-
 .marginBtm2 {
   margin-bottom: 2rem;
 }
-
 .marginBtm3 {
   margin-bottom: 3rem;
 }
-
 .marginBtm5 {
   margin-bottom: 5rem;
 }
-
 .marginRgt1 {
   margin-right: 0.9rem;
 }
-
 .marginRgt2 {
   margin-right: 1.5rem;
 }
-
 .marginRgt3 {
   margin-right: 3rem;
 }
@@ -2268,15 +2184,12 @@ tr.isSelected .menuInTable li a {
 .paddSide0 {
   padding: 0 0.5rem;
 }
-
 .paddSide1 {
   padding: 0 1rem;
 }
-
 .paddSide2 {
   padding: 0 2rem;
 }
-
 .paddSide3 {
   padding: 0 3rem;
 }
@@ -2287,15 +2200,12 @@ tr.isSelected .menuInTable li a {
   letter-spacing: 0;
   font-weight: normal;
 }
-
 .txIcon {
   width: 1.1rem;
 }
-
 .txWsline {
   white-space: pre-line;
 }
-
 .txWswrap {
   white-space: pre-wrap;
 }
diff --git a/dictation_client/src/styles/app.module.scss.d.ts b/dictation_client/src/styles/app.module.scss.d.ts
index 3d79c3e..d5c69ed 100644
--- a/dictation_client/src/styles/app.module.scss.d.ts
+++ b/dictation_client/src/styles/app.module.scss.d.ts
@@ -28,9 +28,11 @@ declare const classNames: {
   readonly formInput: "formInput";
   readonly isError: "isError";
   readonly password: "password";
+  readonly short: "short";
   readonly formIconEye: "formIconEye";
   readonly formCheck: "formCheck";
   readonly formRadio: "formRadio";
+  readonly formInputKey: "formInputKey";
   readonly formComment: "formComment";
   readonly formError: "formError";
   readonly formConfirm: "formConfirm";
@@ -40,6 +42,13 @@ declare const classNames: {
   readonly formButtonTx: "formButtonTx";
   readonly formDone: "formDone";
   readonly listVertical: "listVertical";
+  readonly listHeader: "listHeader";
+  readonly boxFlex: "boxFlex";
+  readonly aru: "aru";
+  readonly btw: "btw";
+  readonly str: "str";
+  readonly box100: "box100";
+  readonly box50: "box50";
   readonly loadingBoxSpinner: "loadingBoxSpinner";
   readonly icLoading: "icLoading";
   readonly modal: "modal";
@@ -50,6 +59,7 @@ declare const classNames: {
   readonly modalTitleIcon: "modalTitleIcon";
   readonly last: "last";
   readonly slideSet: "slideSet";
+  readonly encryptionPass: "encryptionPass";
   readonly pageHeader: "pageHeader";
   readonly pageTitle: "pageTitle";
   readonly pageTx: "pageTx";
@@ -72,12 +82,16 @@ declare const classNames: {
   readonly ODMSlogo: "ODMSlogo";
   readonly pgHomeLinks: "pgHomeLinks";
   readonly buttonIcon: "buttonIcon";
+  readonly account: "account";
   readonly user: "user";
   readonly license: "license";
   readonly dictation: "dictation";
   readonly partners: "partners";
-  readonly isSelected: "isSelected";
+  readonly clm0: "clm0";
   readonly menuInTable: "menuInTable";
+  readonly isSelected: "isSelected";
+  readonly formCheckToggle: "formCheckToggle";
+  readonly toggleBase: "toggleBase";
   readonly menuAction: "menuAction";
   readonly inTable: "inTable";
   readonly menuLink: "menuLink";
@@ -87,7 +101,6 @@ declare const classNames: {
   readonly isDisable: "isDisable";
   readonly icCheckCircle: "icCheckCircle";
   readonly icInTable: "icInTable";
-  readonly 'svg"': 'svg"';
   readonly history: "history";
   readonly cardHistory: "cardHistory";
   readonly partner: "partner";
@@ -100,7 +113,6 @@ declare const classNames: {
   readonly tableFilter: "tableFilter";
   readonly tableFilter2: "tableFilter2";
   readonly tableWrap: "tableWrap";
-  readonly clm0: "clm0";
   readonly txWsline: "txWsline";
   readonly hidePri: "hidePri";
   readonly opPri: "opPri";
@@ -167,6 +179,7 @@ declare const classNames: {
   readonly alignCenter: "alignCenter";
   readonly alignLeft: "alignLeft";
   readonly linkTx: "linkTx";
+  readonly linkBottom: "linkBottom";
   readonly borderTop: "borderTop";
   readonly borderBottom: "borderBottom";
   readonly marginBtm0: "marginBtm0";