Kentaro Fukunaga 83e297cc9b Merged PR 821: 画面実装(パートナーライセンス一覧画面&階層構造変更ポップアップ)
## 概要
[Task3854: 画面実装(パートナーライセンス一覧画面&階層構造変更ポップアップ)](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/3854)

- パートナーライセンス一覧に「Change Owner」ボタンを配置し、表示制御およびクリック時にポップアップ表示する処理の実装
- アカウント階層構造変更ポップアップの処理全体実装
- サーバー側のエラーコード定義

## レビューポイント
- 「一括」を表現するためのドロップダウンの構築や処理周りで改善点ないか(to:斎藤くん)
- コンポーネントでの状態管理でお作法に違反しているところないか(to:斎藤くん)
- 修正箇所がほかの機能に影響していないか
    - パートナーライセンス一覧の画面表示に何らか悪影響ないか?(to:ガンさん)

## 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/Task3854?csf=1&web=1&e=jBGQrR

## クエリの変更
- なし

## 動作確認状況
- ローカルで確認しました
    - 第一階層でログインしてかつ第三または第四視点での一覧を確認しているときにChangeOwnerボタンが表示される
    - ボタン押下すると、仕様通りにポップアップの表示が行われる
    - ポップアップにて入力項目に入力できる&バリデーション効いている
    - ポップアップにて実行ボタン押下するとAPI実行できる&処理結果に応じて仕様通りの挙動をすること
- 行った修正がデグレを発生させていないことを確認できるか
  - 具体的にどのような確認をしたか
    - パートナーライセンス画面に新規ボタンを配置した&新規ポップアップの実装のみのため、
ポップアップでの処理が正常終了/失敗/何もせず閉じた場合に元の画面の表示が今まで通り動くことを確認済み。
2024-03-13 07:41:25 +00:00

2769 lines
56 KiB
SCSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
a {
cursor: pointer;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button {
appearance: none;
padding: 0;
border: none;
outline: none;
background-color: transparent;
cursor: pointer;
}
html {
color: #333333;
font-size: 16px;
line-height: 1.7;
letter-spacing: 0;
font-weight: normal;
}
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
position: relative;
}
h1 {
font-size: 2.4rem;
line-height: 3.14rem;
letter-spacing: 0.07rem;
font-weight: normal;
}
h2 {
font-size: 2rem;
line-height: 2.57rem;
letter-spacing: 0.07rem;
font-weight: normal;
}
h3 {
font-size: 1.6rem;
line-height: 2rem;
letter-spacing: 0.07rem;
font-weight: normal;
}
h4 {
font-size: 1.2rem;
line-height: 1.57rem;
letter-spacing: 0.07rem;
font-weight: normal;
}
h5 {
font-size: 1.1rem;
line-height: 1.57rem;
letter-spacing: 0.06rem;
font-weight: normal;
}
.wrap {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-template-areas: "header" "main" "footer";
min-height: 100vh;
}
.header {
grid-area: header;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-shadow: 0 0 3px #282828;
background: linear-gradient(#ffffff, #ffffff 70%, #f0f0f0 100%);
z-index: 4;
}
.headerLogo {
margin: 1.2rem 2rem 1.5rem;
font-size: 1.71rem;
line-height: 2rem;
letter-spacing: 0.07rem;
font-weight: normal;
}
.headerLogo img {
width: 280px;
}
.headerSub {
margin: 1.4rem 2rem 1rem;
font-size: 1.8rem;
line-height: 2rem;
letter-spacing: 0.07rem;
font-weight: normal;
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;
letter-spacing: 0.07rem;
font-weight: normal;
border-left: 1px #e6e6e6 solid;
}
.headerMenu ul li a {
display: block;
padding: 0.2rem 2.5rem 0.2rem;
color: #333333;
text-decoration: none;
-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;
}
.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;
border-bottom: 0.7rem #282828 solid;
border-left: 0.7rem transparent solid;
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
}
.accountInfo {
position: absolute;
right: 2rem;
bottom: 0.3rem;
font-size: 0.9rem;
line-height: 1.6rem;
letter-spacing: 0.04rem;
font-weight: normal;
}
.accountIcon {
width: 1.4rem;
vertical-align: top;
}
.accountSignout {
display: inline-block;
margin-left: 1rem;
color: #999999;
font-size: 0.8rem;
cursor: pointer;
-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;
}
.accountSignout .accountIcon {
opacity: 0.5;
margin-right: 0.2rem;
-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;
}
.accountSignout:hover {
color: #333333;
}
.accountSignout:hover .accountIcon {
opacity: 1;
}
_:-ms-lang(x)::-ms-backdrop,
.header {
width: 100vw;
position: fixed;
top: 0px;
}
.main {
grid-area: main;
}
.mainSmall {
width: 600px;
margin: 0 auto;
padding: 3.2rem 0;
}
_:-ms-lang(x)::-ms-backdrop,
.main {
padding-top: 116px;
}
_:-ms-lang(x)::-ms-backdrop,
.mainLogin {
margin-top: 116px;
}
.footer {
grid-area: footer;
padding: 0.6rem 0;
text-align: center;
font-size: 13px;
line-height: 1.45;
letter-spacing: 0.4px;
font-weight: normal;
color: #999999;
}
h2,
h3 {
display: inline-block;
max-width: 72%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
h2 .brCrumb,
h2 + .brCrumb,
h3 .brCrumb,
h3 + .brCrumb {
display: inline;
margin-left: 1rem;
font-size: 1.5rem;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
}
h2 .brCrumb::before,
h2 + .brCrumb::before,
h3 .brCrumb::before,
h3 + .brCrumb::before {
content: "-";
}
h2 .brCrumb .tlIcon,
h2 + .brCrumb .tlIcon,
h3 .brCrumb .tlIcon,
h3 + .brCrumb .tlIcon {
width: 1.6rem;
margin: 0 0.2rem 0 0.5rem;
vertical-align: text-top;
}
.brCrumbAcc {
margin-bottom: 1rem;
}
.brCrumbAcc li {
padding-left: 1.1rem;
font-size: 1.2rem;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
position: relative;
}
.brCrumbAcc li::before {
content: "";
border-top: 8px #333333 solid;
border-right: 6px transparent solid;
border-left: 6px transparent solid;
position: absolute;
top: 50%;
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;
}
.brCrumbLicense {
margin: 1rem 0 0.6rem;
}
.brCrumbLicense li {
display: inline-block;
max-width: calc(25% - 1.4rem);
font-size: 1.1rem;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.brCrumbLicense li:not(:last-child) {
padding-right: 1.4rem;
}
.brCrumbLicense li:not(:last-child)::after {
content: "";
border-top: 5px transparent solid;
border-bottom: 5px transparent solid;
border-left: 7px #333333 solid;
position: absolute;
top: 45%;
right: 0.4rem;
transform: translateY(-50%);
}
.brCrumbLicense li a {
color: #333333;
text-decoration: none;
}
.brCrumbLicense li a:hover {
color: #0084b2;
}
.buttonNormal {
display: inline-block;
width: 15rem;
padding: 0.8rem 2rem;
color: #ffffff;
background: #004086;
border: 1px #004086 solid;
text-decoration: none;
border-radius: 0.3rem;
position: relative;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
-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;
}
.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;
padding: 0.8rem 2rem;
color: #004086;
background: #ffffff;
border: 1px #004086 solid;
text-decoration: none;
border-radius: 0.3rem;
position: relative;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
-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;
}
.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;
color: #004086;
text-decoration: none;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
-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;
}
.buttonText:hover {
opacity: 0.7;
}
.buttonText.small {
width: auto;
padding: 0.75rem 0;
}
.formList {
display: flex;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.formList dt,
.formList dd {
font-size: 16px;
line-height: 1.7;
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%;
text-align: left;
font-size: 1.4rem;
line-height: 1.7;
letter-spacing: 0.07rem;
font-weight: normal;
}
.formList dt.formTitle.alignCenter {
text-align: center;
}
.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 {
text-overflow: ellipsis;
}
.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;
border: 1px #999999 solid;
background: #ffffff;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
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;
height: 40px;
float: right;
margin-top: -40px;
margin-right: 45px;
position: relative;
}
.formIconEye img {
width: 2.5rem;
}
.formCheck {
width: 1.2rem;
height: 1.2rem;
margin-right: 0.5rem;
accent-color: #282828;
vertical-align: bottom;
cursor: pointer;
}
.formCheck:disabled {
cursor: default;
}
.formRadio {
width: 1.2rem;
height: 1.2rem;
margin-top: -0.2rem;
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;
white-space: pre-line;
}
.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;
color: #999999;
font-size: 15px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
white-space: pre-line;
}
.formError {
display: block;
padding-top: 0.3rem;
color: #e60000;
font-size: 15px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
white-space: pre-line;
}
.formConfirm {
width: 350px;
padding: 0.6rem 0.6rem;
background: #f0f0f0;
box-sizing: border-box;
word-wrap: break-word;
}
.formSubmit {
min-width: 15rem;
padding: 0.8rem 2rem;
border: 1px #999999 solid;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
opacity: 0.7;
pointer-events: none;
border-radius: 0.3rem;
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;
}
.formSubmit.isActive {
cursor: pointer;
opacity: 1;
color: #ffffff;
background: #004086;
border: 1px #004086 solid;
pointer-events: auto;
}
.formSubmit.isActive:hover {
background: rgba(0, 94, 184, 0.7);
}
.formButtonFul {
min-width: 15rem;
padding: 0.8rem 0.8rem;
border: 1px #999999 solid;
background: #ffffff;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
cursor: pointer;
border-radius: 0.3rem;
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;
}
.formButtonFul:hover {
background: #f0f0f0;
}
.formButton {
padding: 0.8rem 0.8rem;
border: 1px #999999 solid;
background: #ffffff;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
cursor: pointer;
border-radius: 0.3rem;
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;
}
.formButton:hover {
background: #f0f0f0;
}
.formDelete {
min-width: 15rem;
padding: 0.8rem 2rem;
border: 1px #999999 solid;
color: #ffffff;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
background: #e60000;
border: 1px #e60000 solid;
opacity: 1;
border-radius: 0.3rem;
position: relative;
cursor: pointer;
-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;
}
.formDelete:hover {
background: rgba(230, 0, 0, 0.7);
}
.formBack {
width: 15rem;
padding: 0.8rem 2rem;
border: 1px #999999 solid;
background: #ffffff;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
cursor: pointer;
-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;
}
.formBack:hover {
background: #f0f0f0;
}
.formButtonTx {
padding: 0.2rem 2rem;
border: none;
background: none;
color: #0084b2;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
cursor: pointer;
-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;
}
.formButtonTx:hover {
text-decoration: underline;
}
.formDone {
width: 100px;
}
.formTrash {
width: 50px;
filter: brightness(0) saturate(100%) invert(10%) sepia(97%) saturate(7447%)
hue-rotate(17deg) brightness(95%) contrast(117%);
}
.listVertical {
width: 600px;
display: flex;
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%;
background: #ffffff;
font-size: 16px;
line-height: 1.4;
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;
white-space: pre-line;
}
.listVertical dt.overLine {
padding: 0.4rem 4%;
line-height: 1.15;
}
.listVertical dd {
width: 42%;
text-align: right;
word-break: break-all;
}
.listVertical dd .isAlert {
color: #ff5a33;
}
.listDocument {
margin-bottom: 3rem;
}
.listDocument li {
padding: 0 0 0 1.5rem;
margin-bottom: 1rem;
position: relative;
}
.listDocument li::before {
content: "";
width: 0.5rem;
height: 0.5rem;
background: #333333;
border-radius: 50%;
position: absolute;
top: 0.2rem;
left: 0;
}
.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;
margin: 0 auto;
border: 3px solid #999999;
border-top: 3px solid transparent;
border-radius: 50%;
animation: load 0.8s linear 0s infinite;
}
.icLoading {
width: 50px;
vertical-align: middle;
position: absolute;
animation: load 0.8s linear 0s infinite;
}
@keyframes load {
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%;
background: rgba(0, 0, 0, 0.6);
position: fixed;
z-index: 6;
}
.modal.isShow .modalBox {
display: block;
}
.modalBox {
display: none;
width: 600px;
max-height: 95vh;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 0.3rem;
overflow: auto;
}
.modalTitle {
display: flex;
justify-content: space-between;
padding: 0.6rem 4% 0.6rem;
background: #ffffff;
font-size: 1.6rem;
line-height: 2rem;
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 .formInput[type="file"] {
border: none;
background: inherit;
}
.modal .formInput[type="file"].isHide {
display: none;
}
.modal .form label {
padding: 0.5rem 0 0.2rem;
}
.modal .form label.formFileButton {
padding: 0.5rem 0.8rem;
border: 1px #999999 solid;
background: #ffffff;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.01rem;
font-weight: normal;
cursor: pointer;
border-radius: 0.3rem;
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;
}
.modal .form label.formFileButton:hover {
background: #f0f0f0;
}
.modal .formFileName {
display: inline-block;
width: 350px;
padding: 0.6rem 0.8rem;
border: 1px #e6e6e6 solid;
background: #e6e6e6;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
text-align: left;
}
.modal .form .icLoading {
bottom: 1.5rem;
left: calc(50% - 25px);
}
.modal .form .tableWrap {
max-height: 100%;
overflow-x: hidden;
margin-bottom: 1rem;
}
.modal .form .table {
width: 95%;
margin: 0 auto;
}
.modal .form .table .tableHeader th {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 0.4rem 0.5rem;
background: #282828;
}
.modal .form .table td {
padding: 0.6rem 0.4rem;
}
.modal .form .table .formInput {
width: inherit;
padding: 0.2rem 0.5rem;
}
.modal .form .table.backup .formCheck {
margin-right: 0;
}
.modal .form .table.backup th:first-child {
padding: 0 0.2rem;
}
.modal .form .table.backup td {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.modal .form .table.backup td:first-child {
padding: 0.6rem 0.2rem;
}
.modal .form .table.optionItem select {
width: 123px;
}
.modal .form .pagenation {
margin-bottom: 1.5rem;
padding-right: 2.5%;
}
.modal .encryptionPass {
display: none;
}
.modal .encryptionPass.isShow {
display: block;
}
.pageHeader {
padding: 0.3rem 2.5rem 0.2rem;
background: #282828;
color: #ffffff;
margin-bottom: 2rem;
}
.pageTitle {
display: inline-block;
padding-right: 1.5rem;
font-size: 1.4rem;
line-height: 1.4rem;
letter-spacing: 0.07rem;
font-weight: 500;
}
.pageTx {
display: inline-block;
padding-left: 2rem;
font-size: 1.4rem;
line-height: 1.4rem;
letter-spacing: 0.07rem;
font-weight: 500;
position: relative;
}
.pageTx::before {
content: "";
border-top: 6px transparent solid;
border-bottom: 6px transparent solid;
border-left: 8px #ffffff solid;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.pagenation {
margin-bottom: 3rem;
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;
padding: 0.3rem 0.7rem;
font-size: 13px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
text-decoration: none;
color: #333333;
border: 1px #a5a5a5 solid;
border-radius: 0.2rem;
opacity: 0.4;
pointer-events: none;
background: #ffffff;
}
.pagenationNav a.isActive {
opacity: 1;
pointer-events: inherit;
}
.pagenationNav a.isActive:hover {
background: #f5f5f5;
}
.pagenationTotal {
color: #999999;
}
.pagenation.widthMid {
width: 1000px;
}
.pagenation.widthSml {
width: 750px;
}
.pagenation.widthMin {
width: 600px;
}
_:-ms-lang(x)::-ms-backdrop,
.pagenationNav a {
height: 30px;
}
.snackbar {
width: 800px;
display: flex;
justify-content: flex-start;
padding: 0.8rem 1.5rem;
color: #ffffff;
background: #00b4aa;
position: fixed;
top: -100%;
left: 50%;
transform: translateX(-50%);
border-radius: 0.3rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
z-index: 10;
opacity: 0;
-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;
}
.snackbar.isShow {
opacity: 1;
top: 0.2rem;
left: 50%;
z-index: 11;
-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;
}
.snackbar.isAlert {
background: #ff5a33;
}
.snackbarMessage {
width: calc(800px - 3rem - 3.3rem);
font-size: 16px;
line-height: 1.7;
letter-spacing: 0;
font-weight: normal;
}
.snackbarIcon {
width: 1.5rem;
margin-right: 1rem;
vertical-align: middle;
}
.snackbarIconClose {
width: 0.8rem;
}
.snackbarIconClose:hover {
cursor: pointer;
}
.table {
width: 100%;
margin-bottom: 1rem;
}
.table tr:not(.tableHeader) {
background: #ffffff;
}
.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;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
}
.table td .isAlert {
color: #ff5a33;
}
.tableHeader {
background: #282828;
}
.tableHeader th {
padding: 0.4rem 0.7rem;
vertical-align: middle;
color: #ffffff;
font-size: 13px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
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;
border-right: 0.35rem transparent solid;
border-left: 0.35rem transparent solid;
position: absolute;
top: 50%;
right: 0.5rem;
transform: translateY(-50%);
opacity: 0.4;
-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;
}
.tableHeader th .hasSort:hover {
cursor: pointer;
}
.tableHeader th .hasSort:hover::before {
opacity: 1;
}
.tableHeader th .hasSort.isActiveZa::before {
opacity: 1;
}
.tableHeader th .hasSort.isActiveZa: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.isActiveAz::before {
border-top: none;
border-right: 0.35rem transparent solid;
border-bottom: 0.4rem #ffffff solid;
border-left: 0.35rem transparent solid;
opacity: 1;
}
.tableHeader th .hasSort.isActiveAz: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;
height: 100%;
cursor: col-resize;
position: absolute;
top: 0;
right: -0.3rem;
z-index: 3;
}
.tableHeader th.noLine {
border-right: none;
}
.tableHeader th.noLine::after {
display: none;
}
.wrap.home {
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;
background-size: cover;
}
}
.header.home {
background: none;
box-shadow: none;
}
.header.home .headerLogo {
margin: 2rem 2.5rem 2rem;
}
.header.home .headerSub {
display: none;
}
@media only screen and (min-width: 1280px) {
.pgHome {
width: 1064px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
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;
margin: 3vh 0 0 0;
padding: 0 0 0;
text-align: center;
}
.pgHome .ODMSlogo img {
width: auto;
vertical-align: middle;
}
}
.pgHome > div {
width: 400px;
margin: 3rem auto 0;
padding: 2rem;
background: #ffffff;
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;
line-height: 1.6;
letter-spacing: 0;
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;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
opacity: 0;
-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;
}
.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,
.partners > div,
.workflow > div,
.support > div {
padding: 0 2rem;
position: relative;
}
.account > div .icLoading,
.user > div .icLoading,
.license > div .icLoading,
.dictation > div .icLoading,
.partners > div .icLoading,
.workflow > div .icLoading,
.support > div .icLoading {
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,
.workflow .table tr.tableHeader th.clm0,
.support .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),
.workflow .table tr:not(.tableHeader),
.support .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,
.workflow .table tr:not(.tableHeader):hover .menuInTable,
.support .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,
.workflow .table tr:not(.tableHeader).isSelected,
.support .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,
.workflow .table tr:not(.tableHeader).isSelected:hover,
.support .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,
.workflow .table tr:not(.tableHeader).isSelected .menuInTable,
.support .table tr:not(.tableHeader).isSelected .menuInTable {
display: block;
}
.account .table td,
.user .table td,
.license .table td,
.dictation .table td,
.partners .table td,
.workflow .table td,
.support .table td {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
}
.account .table td.clm0,
.user .table td.clm0,
.license .table td.clm0,
.dictation .table td.clm0,
.partners .table td.clm0,
.workflow .table td.clm0,
.support .table td.clm0 {
width: 0px;
padding: 0 0;
overflow: visible;
position: sticky;
left: 0;
z-index: 2;
}
.account .table.user th::after,
.user .table.user th::after,
.license .table.user th::after,
.dictation .table.user th::after,
.partners .table.user th::after,
.workflow .table.user th::after,
.support .table.user th::after {
display: none;
}
.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,
.workflow .table.user tr:not(.tableHeader) td,
.support .table.user tr:not(.tableHeader) td {
padding-bottom: 2rem;
vertical-align: top;
}
.user .table {
margin-bottom: 0;
}
.user .tableWrap {
max-width: calc(100vw - 5.1rem);
max-height: 90vh;
overflow-x: scroll;
margin-bottom: 5rem;
}
.formList.userImport .formTitle {
padding: 1rem 4% 0;
line-height: 1.2;
}
.formList.userImport dt:not(.formTitle) {
width: 30%;
padding: 0 4% 0 4%;
font-size: 0.9rem;
}
.formList.userImport dt:not(.formTitle):nth-of-type(odd) {
background: #f0f0f0;
}
.formList.userImport dt:not(.formTitle):nth-of-type(odd) + dd {
background: #f0f0f0;
}
.formList.userImport dd {
width: 58%;
padding: 0.2rem 4% 0.2rem 0;
margin-bottom: 0;
white-space: pre-line;
word-wrap: break-word;
font-size: 0.9rem;
line-height: 1.2;
}
.formList.userImport dd.full {
width: 100%;
padding: 0.2rem 4% 0.2rem 4%;
}
.formList.userImport dd.full .buttonText {
padding: 0 0 0.8rem;
}
.formList.userImport dd .menuLink {
display: inline-block;
margin-bottom: 0.6rem;
padding: 0.5rem 1.5rem 0.5rem 1.3rem;
}
.account .listVertical {
margin-bottom: 3rem;
}
.account .listVertical dd .formInput {
max-width: 100%;
}
.account .listVertical dd.full {
width: 100%;
padding-top: 0;
background: none;
}
.account .listVertical dd.full.odd {
background: #f5f5f5;
}
.account .listVertical dd.formComment {
text-align: left;
font-size: 0.9rem;
word-break: break-word;
}
.account .box100 .formComment {
display: block;
width: 600px;
text-align: left;
}
.account .box100.alignRight {
width: calc(1200px + 3rem);
text-align: right;
}
.account .box100.alignRight .formComment {
margin-left: 648px;
text-align: right;
}
.menuAction {
margin-bottom: 0.6rem;
}
.menuAction li {
display: inline-block;
margin-right: 0.5rem;
}
.menuAction li:last-child {
margin-right: 0;
}
.menuAction.inTable {
margin-bottom: 0;
}
.menuAction.inTable .menuLink {
padding: 0.3rem 0.5rem 0.3rem 0.5rem;
opacity: 0;
}
.menuAction.inTable .menuLink .menuIcon {
width: 1.2rem;
}
.menuAction.inTable .menuLink.isActive {
opacity: 1;
}
.menuAction.inTable .colorLink {
display: block;
padding: 0.3rem 0.5rem 0.3rem 0.5rem;
font-size: 13px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
text-decoration: none;
border: 1px #999999 solid;
border-radius: 0.2rem;
opacity: 0;
pointer-events: none;
background: #ffffff;
-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;
}
.menuAction.inTable .colorLink.isActive {
cursor: pointer;
opacity: 1;
color: #ffffff;
background: #004086;
border: 1px #004086 solid;
pointer-events: inherit;
}
.menuAction.inTable .colorLink.isActive:hover {
background: rgba(0, 94, 184, 0.7);
}
.menuLink {
display: block;
padding: 0.3rem 0.5rem 0.3rem 0.3rem;
font-size: 13px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
text-decoration: none;
color: #333333;
border: 1px #a5a5a5 solid;
border-radius: 0.2rem;
opacity: 0.3;
pointer-events: none;
background: #ffffff;
-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;
}
.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;
left: 0.7rem;
bottom: 0.5rem;
opacity: 0;
-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;
}
.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;
line-height: 1.4;
letter-spacing: 0.02rem;
font-weight: normal;
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;
}
tr.isSelected .menuInTable li a.isDisable {
pointer-events: none;
opacity: 0.3;
}
.icCheckCircle {
width: 20px;
vertical-align: bottom;
}
.icInTable {
width: 24px;
vertical-align: bottom;
}
.wrap.manage .header,
.wrap.manage .main {
background: #def5fd;
}
.manageInfo {
width: 800px;
display: flex;
justify-content: flex-start;
padding: 0.2rem 1.5rem;
color: #0084b2;
border: 1px #0084b2 solid;
border-radius: 0.3rem;
background: #def5fd;
position: absolute;
top: 0.2rem;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
z-index: 5;
-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;
}
.manage .txNormal {
width: calc(800px - 3rem - 3.3rem);
font-size: 16px;
line-height: 1.7;
letter-spacing: 0;
font-weight: normal;
padding-top: 0.5rem;
line-height: 1.4;
}
.manage .txNormal span {
display: inline-block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
}
.manageIcon {
width: 1.5rem;
margin-right: 1rem;
vertical-align: middle;
filter: brightness(0) saturate(100%) invert(31%) sepia(75%) saturate(1954%)
hue-rotate(172deg) brightness(90%) contrast(101%);
}
.manageIconClose {
width: 1.5rem;
filter: brightness(0) saturate(100%) invert(31%) sepia(75%) saturate(1954%)
hue-rotate(172deg) brightness(90%) contrast(101%);
}
.manageIconClose:hover {
cursor: pointer;
}
.license .checkAvail {
height: 30px;
padding: 0 0.3rem 0.3rem 0;
margin-top: -30px;
box-sizing: border-box;
}
.license .checkAvail label {
cursor: pointer;
}
.license .checkAvail label .formCheck {
vertical-align: middle;
}
.license .listVertical dd img[src*="circle"] {
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;
top: 50%;
left: 0.4rem;
border-top: 6px transparent solid;
border-bottom: 6px transparent solid;
border-left: 8px #282828 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.isOpen::after {
content: "";
width: 100%;
border-bottom: 1px #999999 solid;
position: absolute;
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;
top: 50%;
left: 0.4rem;
border-top: 8px #282828 solid;
border-right: 6px transparent solid;
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 td:last-child {
width: 120px;
text-align: right;
}
.formList dd.ownerChange {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 0;
}
.formList dd.ownerChange p.Owner,
.formList dd.ownerChange p.newOwner {
width: 150px;
}
.formList dd.ownerChange .arrowR {
width: 8%;
height: 20px;
margin-top: 10px;
margin-right: 2%;
background: #e6e6e6;
position: relative;
}
.formList dd.ownerChange .arrowR::after {
content: "";
border-top: 20px transparent solid;
border-bottom: 20px transparent solid;
border-left: 20px #e6e6e6 solid;
position: absolute;
top: 50%;
right: -15px;
transform: translateY(-50%);
}
.formList dd.ownerChange + .full {
width: 66%;
margin-left: 30%;
margin-bottom: -10px;
text-align: center;
}
.formList dd.ownerChange + .full .transOwner {
width: 100px;
}
.formList dd.lowerTrans {
margin-bottom: 1.5rem;
position: relative;
text-align: center;
}
.formList dd.lowerTrans select,
.formList dd.lowerTrans span {
margin: 0 auto;
}
.formList dd .txName {
display: block;
width: 150px;
padding: 0.2rem 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dictation .menuAction {
margin-top: -1rem;
height: 34px;
position: relative;
}
.dictation .menuAction .alignLeft {
position: absolute;
left: 0;
}
.dictation .menuAction .alignLeft .menuLink {
padding: 0.3rem 0.3rem 0.3rem 0.5rem;
}
.dictation .menuAction .alignLeft .menuIcon {
margin-right: 0;
margin-left: 0.4rem;
}
.dictation .displayOptions {
display: none;
margin-bottom: 0.6rem;
padding: 0.3rem 1rem;
background: #f0f0f0;
position: relative;
}
.dictation .displayOptions li {
display: inline-block;
}
.dictation .displayOptions li label {
padding: 0.3rem 0;
font-size: 13px;
line-height: 1.4;
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;
border-bottom: 0.6rem #f0f0f0 solid;
border-left: 0.6rem transparent solid;
position: absolute;
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;
font-size: 14px;
line-height: 1.4;
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;
font-size: 14px;
line-height: 1.1;
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;
top: 0;
background: #282828;
z-index: 3;
}
.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;
top: 0;
left: 0;
width: 100%;
height: 100%;
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"],
.dictation .table.dictation tr.isSelected img[alt="encrypted"] {
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 .menuInTable li:nth-child(3) {
border-right: none;
}
.dictation .table.dictation td .menuInTable li a.mnCancel {
margin-left: 3rem;
}
.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;
overflow: visible;
position: sticky;
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;
}
.formList.property .formTitle {
padding: 1rem 4% 0;
line-height: 1.2;
}
.formList.property dt:not(.formTitle) {
width: 30%;
padding: 0 4% 0 4%;
font-size: 0.9rem;
}
.formList.property dt:not(.formTitle):nth-of-type(odd) {
background: #f0f0f0;
}
.formList.property dt:not(.formTitle):nth-of-type(odd) + dd {
background: #f0f0f0;
}
.formList.property dt:has(+ dd.hasInput) {
padding-top: 0.4rem;
}
.formList.property dd {
width: 58%;
padding: 0.2rem 4% 0.2rem 0;
margin-bottom: 0;
white-space: pre-line;
word-wrap: break-word;
line-height: 1.2;
}
.formList.property dd img {
height: 1.1rem;
}
.formList.property dd .formInput.short {
width: 250px;
padding: 0.3rem 0.3rem 0.1rem;
}
.formList.property dd .formSubmit {
min-width: auto;
padding: 0.2rem 0.5rem;
position: absolute;
right: 0.5rem;
}
.formList.property dd.full {
width: 100%;
padding: 0.2rem 4% 0.2rem 4%;
}
.formList.property dd.full .buttonText {
padding: 0 0 0.8rem;
}
.formList.property dd.full .buttonText img {
vertical-align: text-bottom;
margin-right: 0.5rem;
}
.formList dd.formChange {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
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;
overflow-y: scroll;
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;
padding: 0.2rem 0 0.2rem 1.5rem;
margin-right: 0;
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-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-size: 1.3rem;
}
.formChange > p {
width: 6%;
height: 20px;
background: #e6e6e6;
position: relative;
}
.formChange > p::before {
content: "";
border-top: 20px transparent solid;
border-right: 20px #e6e6e6 solid;
border-bottom: 20px transparent solid;
position: absolute;
top: 50%;
left: -15px;
transform: translateY(-50%);
}
.formChange > p::after {
content: "";
border-top: 20px transparent solid;
border-bottom: 20px transparent solid;
border-left: 20px #e6e6e6 solid;
position: absolute;
top: 50%;
right: -15px;
transform: translateY(-50%);
}
.partners .table.partner {
position: relative;
min-width: 100%;
}
.partners .table.partner tr {
position: relative;
}
.partners .table.partner tr.tableHeader th {
position: -webkit-sticky;
position: sticky;
top: 0;
background: #282828;
z-index: 1;
}
.partners .table.partner tr.tableHeader th::after {
display: none;
}
.partners .table.partner td {
padding-bottom: 2rem;
vertical-align: top;
}
.partners .table.partner td.txWsline {
white-space: pre;
}
.partners .table.partner.role4 {
margin-top: 3rem;
}
.partners .table.partner:not(.role4) tr th:last-of-type,
.partners .table.partner:not(.role4) tr td:last-of-type {
display: none;
}
.workflow .table {
margin-bottom: 0;
}
.workflow .table.workflow {
min-width: 100%;
}
.workflow .table.workflow tr {
position: relative;
}
.workflow .table.workflow th::after {
display: none;
}
.workflow .table.workflow td {
padding-bottom: 2rem;
vertical-align: top;
}
.workflow .table.workflow td.txWsline {
white-space: pre;
}
.workflow .table.group,
.workflow .table.template {
width: 600px;
}
.workflow .table.group td:last-child,
.workflow .table.template td:last-child {
text-align: right;
}
.workflow .table.worktype {
width: 1000px;
}
.workflow .table.worktype td:last-child {
text-align: right;
}
.workflow .table .menuLink {
min-width: 3rem;
text-align: center;
}
.workflow .menuAction.worktype {
width: 1000px;
}
.workflow .menuAction.worktype .selectMenu {
padding-top: 0.5rem;
float: right;
font-size: 0.9rem;
}
.workflow .menuAction.worktype .formInput {
max-width: 350px;
margin-left: 0.5rem;
padding: 0.2rem 0.8rem;
font-size: 0.9rem;
text-overflow: ellipsis;
}
.formList dd.formChange {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
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;
overflow-y: scroll;
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;
padding: 0.4rem 0 0.4rem 1.5rem;
margin-right: 0;
background: url(../assets/images/circle.svg) no-repeat left center;
background-size: 1.3rem;
white-space: pre-line;
word-break: break-all;
line-height: 1.3;
}
.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-size: 1.3rem;
}
.formChange ul.chooseMember li input:checked + label,
.formChange ul.holdMember li input:checked + label {
padding: 0.4rem 1.5rem 0.4rem 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-size: 1.3rem;
}
.formChange > p {
width: 6%;
height: 20px;
background: #e6e6e6;
position: relative;
}
.formChange > p::before {
content: "";
border-top: 20px transparent solid;
border-right: 20px #e6e6e6 solid;
border-bottom: 20px transparent solid;
position: absolute;
top: 50%;
left: -15px;
transform: translateY(-50%);
}
.formChange > p::after {
content: "";
border-top: 20px transparent solid;
border-bottom: 20px transparent solid;
border-left: 20px #e6e6e6 solid;
position: absolute;
top: 50%;
right: -15px;
transform: translateY(-50%);
}
.alignCenter {
text-align: center;
}
.alignLeft {
text-align: left;
}
.alignRight {
text-align: right;
}
.floatNone {
float: none;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.linkTx {
color: #0084b2;
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;
}
.borderTop {
border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
}
.borderBottom {
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
}
.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;
}
.paddSide0 {
padding: 0 0.5rem;
}
.paddSide1 {
padding: 0 1rem;
}
.paddSide2 {
padding: 0 2rem;
}
.paddSide3 {
padding: 0 3rem;
}
.txContents {
padding: 3rem;
}
.txNormal {
font-size: 16px;
line-height: 1.7;
letter-spacing: 0;
font-weight: normal;
}
.txIcon {
width: 1.1rem;
}
.txWsline {
white-space: pre-line;
}
.txWswrap {
white-space: pre-wrap;
}
/*# sourceMappingURL=style.css.map */