水本 祐希 1f5bfdaf3e Merged PR 253: 画面実装(パートナーライセンス一覧画面)(初期表示部分)
## 概要
[Task2212: 画面実装(パートナーライセンス一覧画面)(初期表示部分)](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2212)

パートナーライセンス一覧画面の初期表示を実装しました。
本タスクでのレビュー対象・対象外は以下となりますので、ご確認をお願いします。
■対象
・全体の画面レイアウト
・「Order License」「Order History」「License Card」「Card History」ボタンのログインtierによる表示制御
・「Order License」「License Card」ボタンの押下時の挙動
・表内の値(固定値)
■対象外
・パンくずリストの表示内容、押下時の挙動
・「return」ボタンの表示制御、押下時の挙動
・ページネーション周りの挙動
・「Order History」「Card History」ボタンの押下時の挙動
・表内の「Order History」「View Details」ボタンの表示制御、押下時の挙動
・表内のアカウント押下時の挙動

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

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

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

## 補足
パンくずリスト・表・ページネーション部分は、挙動を作成するタスクで外出しして別コンポーネントにする予定です。
2023-07-25 07:57:38 +00:00

2187 lines
44 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;
}
_:-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 .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,
h3 .brCrumb::before {
content: "-";
}
h2 .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;
padding-right: 1.4rem;
font-size: 1.1rem;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
position: relative;
}
.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.overLine {
padding: 0 4% 0;
line-height: 1.4;
}
.formList dd {
width: 66%;
padding-right: 4%;
margin-bottom: 1.5rem;
}
.formList dd.full {
width: 100%;
padding-right: 0;
background: none;
}
.formList.hasbg {
border-top: 2px #282828 solid;
background: #fafafa;
}
.form select:invalid {
color: #999999;
}
.form select option {
color: #333333;
}
.form select option[disabled] {
background: #f5f5f5;
}
.form select option[value=""] {
color: #999999;
}
.formInput {
width: 350px;
padding: 0.6rem 0.8rem;
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;
}
.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;
}
.formError {
display: block;
padding-top: 0.3rem;
color: #e60000;
font-size: 15px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
}
.formConfirm {
width: 350px;
padding: 0.6rem 0.6rem;
background: #f0f0f0;
box-sizing: border-box;
}
.formSubmit {
min-width: 15rem;
padding: 0.8rem 2rem;
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);
}
.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;
}
.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;
}
.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%;
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;
}
.listVertical dd {
width: 42%;
text-align: right;
}
.boxFlex {
display: flex;
flex-wrap: wrap;
}
.boxFlex.aru {
justify-content: space-around;
}
.boxFlex.btw {
justify-content: space-between;
}
.boxFlex.str {
align-items: flex-start;
}
.box100 {
width: 100%;
}
.box50 {
width: 50%;
}
.loadingBoxSpinner {
width: 50px;
height: 50px;
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: 5;
}
.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 .form label {
padding: 0.5rem 0 0.2rem;
}
.modal .form .icLoading {
bottom: 1.5rem;
left: calc(50% - 25px);
}
.modal .encryptionPass {
display: none;
}
.modal .encryptionPass.isShow {
display: block;
}
.pageHeader {
padding: 0.3rem 2.5rem 0.2rem;
background: #282828;
color: #ffffff;
margin-bottom: 2rem;
}
.pageTitle {
display: inline-block;
padding-right: 1rem;
font-size: 1.4rem;
line-height: 1.4rem;
letter-spacing: 0.07rem;
font-weight: 500;
}
.pageTx {
display: inline-block;
}
.pagenation {
margin-bottom: 3rem;
text-align: right; /*&-nav{ a{ display: inline-block; padding: .5rem; margin-right: .5rem; color: $color-blues;
@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;
}
.pagenationNav a.isActive {
opacity: 1;
pointer-events: inherit;
}
.pagenationNav a.isActive:hover {
background: #f5f5f5;
}
.pagenationTotal {
color: #999999;
}
_:-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: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.isActiveAz::before {
opacity: 1;
}
.tableHeader th .hasSort.isActiveAz:hover::before {
border-top: none;
border-right: 0.35rem transparent solid;
border-bottom: 0.4rem #ffffff solid;
border-left: 0.35rem transparent solid;
}
.tableHeader th .hasSort.isActiveZa::before {
border-top: none;
border-right: 0.35rem transparent solid;
border-bottom: 0.4rem #ffffff solid;
border-left: 0.35rem transparent solid;
opacity: 1;
}
.tableHeader th .hasSort.isActiveZa:hover::before {
border-top: 0.4rem #ffffff solid;
border-right: 0.35rem transparent solid;
border-bottom: none;
border-left: 0.35rem transparent solid;
}
.tableHeader th:not(:last-child) {
border-right: 1px #999999 solid;
}
.tableHeader th:not(:last-child)::after {
content: "";
width: 0.6rem;
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 {
padding: 0 2rem;
position: relative;
}
.account > div .icLoading,
.user > div .icLoading,
.license > div .icLoading,
.dictation > div .icLoading,
.partners > 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 {
width: 0px;
padding: 0 0;
}
.account .table tr:not(.tableHeader),
.user .table tr:not(.tableHeader),
.license .table tr:not(.tableHeader),
.dictation .table tr:not(.tableHeader),
.partners .table tr:not(.tableHeader) {
position: relative;
}
.account .table tr:not(.tableHeader):hover .menuInTable,
.user .table tr:not(.tableHeader):hover .menuInTable,
.license .table tr:not(.tableHeader):hover .menuInTable,
.dictation .table tr:not(.tableHeader):hover .menuInTable,
.partners .table tr:not(.tableHeader):hover .menuInTable {
opacity: 1;
}
.account .table tr:not(.tableHeader).isSelected,
.user .table tr:not(.tableHeader).isSelected,
.license .table tr:not(.tableHeader).isSelected,
.dictation .table tr:not(.tableHeader).isSelected,
.partners .table tr:not(.tableHeader).isSelected {
background: #0084b2;
color: #ffffff;
}
.account .table tr:not(.tableHeader).isSelected:hover,
.user .table tr:not(.tableHeader).isSelected:hover,
.license .table tr:not(.tableHeader).isSelected:hover,
.dictation .table tr:not(.tableHeader).isSelected:hover,
.partners .table tr:not(.tableHeader).isSelected:hover {
color: #ffffff;
}
.account .table tr:not(.tableHeader).isSelected .menuInTable,
.user .table tr:not(.tableHeader).isSelected .menuInTable,
.license .table tr:not(.tableHeader).isSelected .menuInTable,
.dictation .table tr:not(.tableHeader).isSelected .menuInTable,
.partners .table tr:not(.tableHeader).isSelected .menuInTable {
display: block;
}
.account .table td,
.user .table td,
.license .table td,
.dictation .table td,
.partners .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 {
width: 0px;
padding: 0 0;
overflow: visible;
position: sticky;
left: 0;
z-index: 2;
}
.account .table.user,
.user .table.user,
.license .table.user,
.dictation .table.user,
.partners .table.user {
margin-bottom: 5rem;
}
.account .table.user tr:not(.tableHeader) td,
.user .table.user tr:not(.tableHeader) td,
.license .table.user tr:not(.tableHeader) td,
.dictation .table.user tr:not(.tableHeader) td,
.partners .table.user tr:not(.tableHeader) td {
padding-bottom: 2rem;
vertical-align: top;
}
.account.account .listVertical,
.user.account .listVertical,
.license.account .listVertical,
.dictation.account .listVertical,
.partners.account .listVertical {
margin-bottom: 3rem;
}
.account.account .listVertical dd .formInput,
.user.account .listVertical dd .formInput,
.license.account .listVertical dd .formInput,
.dictation.account .listVertical dd .formInput,
.partners.account .listVertical dd .formInput {
max-width: 100%;
}
.account.account .listVertical dd .formCheckToggle,
.user.account .listVertical dd .formCheckToggle,
.license.account .listVertical dd .formCheckToggle,
.dictation.account .listVertical dd .formCheckToggle,
.partners.account .listVertical dd .formCheckToggle {
position: relative;
cursor: pointer;
}
.account.account .listVertical dd .formCheckToggle .toggleBase,
.user.account .listVertical dd .formCheckToggle .toggleBase,
.license.account .listVertical dd .formCheckToggle .toggleBase,
.dictation.account .listVertical dd .formCheckToggle .toggleBase,
.partners.account .listVertical dd .formCheckToggle .toggleBase {
display: inline-block;
width: 2.8rem;
height: 1.6rem;
margin-right: 0.5rem;
border-radius: 0.8rem;
background: #e6e6e6;
vertical-align: bottom;
position: relative;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.account.account .listVertical dd .formCheckToggle .toggleBase::after,
.user.account .listVertical dd .formCheckToggle .toggleBase::after,
.license.account .listVertical dd .formCheckToggle .toggleBase::after,
.dictation.account .listVertical dd .formCheckToggle .toggleBase::after,
.partners.account .listVertical dd .formCheckToggle .toggleBase::after {
content: "";
width: 1.3rem;
height: 1.3rem;
border-radius: 50%;
background: #999999;
position: absolute;
top: 0.15rem;
left: 0.15rem;
-moz-transition: all 0.15s ease-out;
-ms-transition: all 0.15s ease-out;
-webkit-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.account.account .listVertical dd .formCheckToggle input,
.user.account .listVertical dd .formCheckToggle input,
.license.account .listVertical dd .formCheckToggle input,
.dictation.account .listVertical dd .formCheckToggle input,
.partners.account .listVertical dd .formCheckToggle input {
position: absolute;
width: 0;
heigh: 0;
}
.account.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
.user.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
.license.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
.dictation.account
.listVertical
dd
.formCheckToggle
input:checked
~ .toggleBase,
.partners.account
.listVertical
dd
.formCheckToggle
input:checked
~ .toggleBase {
background: #c4eeec;
}
.account.account
.listVertical
dd
.formCheckToggle
input:checked
~ .toggleBase::after,
.user.account
.listVertical
dd
.formCheckToggle
input:checked
~ .toggleBase::after,
.license.account
.listVertical
dd
.formCheckToggle
input:checked
~ .toggleBase::after,
.dictation.account
.listVertical
dd
.formCheckToggle
input:checked
~ .toggleBase::after,
.partners.account
.listVertical
dd
.formCheckToggle
input:checked
~ .toggleBase::after {
background: #00b4aa;
top: 0.15rem;
left: 1.35rem;
}
.menuAction {
margin-bottom: 0.6rem;
}
.menuAction li {
display: inline-block;
margin-right: 0.5rem;
}
.menuAction.inTable {
margin-bottom: 0;
}
.menuAction.inTable .menuLink {
padding: 0.3rem 0.5rem 0.3rem 0.5rem;
opacity: 0;
}
.menuAction.inTable .menuLink.isActive {
opacity: 1;
}
.menuAction.inTable .colorLink {
display: block;
padding: 0.3rem 0.5rem 0.3rem 0.5rem;
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);
}
.menuAction.alignRight {
margin-top: -1rem;
}
.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;
}
.icCheckCircle {
width: 20px;
vertical-align: bottom;
}
.icInTable {
width: 24px;
vertical-align: bottom;
}
.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 .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: 1;
}
.dictation .table.dictation tr.tableHeader th.clm0 {
width: 0px;
padding: 0 0;
}
.dictation .table.dictation tr.tableHeader th:not(:last-child)::before {
content: "";
position: absolute;
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: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 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 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.role4 td {
padding-bottom: 0.7rem;
}
.partners .table.partner.role4 .menuInTable {
display: none;
}
.partners .table.partner:not(.role4) tr th:last-of-type,
.partners .table.partner:not(.role4) tr td:last-of-type {
display: none;
}
.alignCenter {
text-align: center;
}
.alignLeft {
text-align: left;
}
.alignRight {
text-align: 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;
position: absolute;
bottom: 3rem;
}
.borderTop {
border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
}
.borderBottom {
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
}
.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;
}
.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 */