saito.k 25b7936bf4 Merged PR 747: デザイン反映
## 概要
[Task3670: デザイン反映](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/3670)

- ユーザー一覧画面のヘッダーのスタイル修正
  - ブラウザのサイズに合わせて折り返すようにした
  - ユーザー一覧のテーブルを横スクロールできるように修正
- ライセンス履歴画面にパンくずリストを表示
- OptionItem更新ポップアップのスタイル修正
  - 端が切れてしまっていたため枠に収まるようにした
- Typistを「Selected」と「Pool」で選択するUIのスタイル修正
  - typist名やグループ名が長くてもチェックアイコンに重ならないようにした

## レビューポイント
- 特になし

## 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/Task3670?csf=1&web=1&e=zIcngJ
## 動作確認状況
- ローカルで確認

## 補足
- 相談、参考資料などがあれば
2024-02-14 01:50:38 +00:00

2652 lines
53 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;
}
.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 .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;
}
.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 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.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 */