/*===========================================
Member
===========================================*/

/*-------------------------------------------
Login
-------------------------------------------*/
.memberLogin #headerContainer{
    background:none;
    height:64px;
    min-height:64px;
    padding:0;
    overflow:hidden;
}
    .memberLogin .headingContainer{
        opacity:0;
        pointer-events:none;
    }
#login{
    margin:0 auto;
    background-color:#fff;
    padding:30px;
    text-align:center;
}
    #login form{
        display:inline-block;
        text-align:left;
    }
        #login div{
            padding:10px 0;
        }
            #login label{
                display:inline-block;
                width:140px;
                font-weight:700;
                color:#111;
            }
            #login input{
                width:250px;
            }
            #login #CheckCode{
                width:145px;
            }
            #login #vCode{
                display:inline-block;
                vertical-align:top;
                font-size:18px; line-height:36px; font-style:italic;
                margin-left:3px;
                padding:0 8px;
                position:relative;
                background:url(../images/code_mask.png?v=20190717);
                cursor:default;
            }
            #login input[type="submit"]{
                padding:10px;
                margin-top:-10px;
                font-size:1.25rem;
            }
            #login .regAndForgot{
                font-size:14px;
            }
                #login  .regAndForgot i{
                    font-style:normal;
                    color:#ccc;
                }
    #login hr{
        margin:1.5em 0;
    }
@media screen and (max-width:992px){
    .memberLogin #headerContainer{
        height:50px;
        min-height:50px;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    #login{
        padding:0 20px 20px;
    }
        #login form{
            display:block;
        }
            #login div{
                padding:0;
                margin-bottom:10px;
            }
                #login label{
                    width:100%;
                }
                #login input{
                    width:100%;
                }
                #login #CheckCode{
                    width:140px;
                }
        .regAndForgot{
            text-align:left;
        }
            .regAndForgot i{
                display:none;
            }
            .regAndForgot .forgotPW{
                display:block;
                margin-top:15px;
            }
                .regAndForgot .forgotPW strong{
                    display:block;
                }
                .tw .regAndForgot .forgotPW strong,
                .cn .regAndForgot .forgotPW strong{
                    display:inline;
                }
}
@media screen and (max-width:320px){/* i5 */
    #login{
        padding:20px 15px;
    }
}

/*-------------------------------------------
Member Index
-------------------------------------------*/
.memberIndex .btnLogout{
    border-color:var(--main-color);
    font-size:1.15rem;
    margin-top:-12px;
    position:absolute; right:0; z-index:10;
    padding:8px 15px;
}
.dataView .required{
    margin:0;
}
.dataView th{
    padding:5px 12px;
}
    .familyMembers{
        list-style:none; margin:0; padding:0;
    }
        .familyMembers li{
            display:inline-block;
            vertical-align:top;
            margin-right:1em;
            background-color:#f7f7f7;
            padding:3px 10px;
        }
            .familyMembers li i{
                font-size:85%; font-weight:700;
            }
.paymentList .col-freeTitle{
    text-align:left;
}
    .paymentList .usd{
        display:inline-block;
        vertical-align:top;
        width:120px;
    }
.memberIndex .buttons{
    margin-top:20px;
}
.abstractList tbody td[data-th="Revise"] font{
    display:inline-block;
    font-weight:700;
    white-space:nowrap;
    border:2px dotted #aaa;
    padding:5px 10px;
    border-radius:30px;
    transform:rotate(-5deg);
}
    .abstractList tbody td[data-th="Revise"] .accepted{
        border-color:green;
    }
    .abstractList tbody td[data-th="Revise"] .noAccepted{
        border-color:red;
    }
.myAgendaList{
    font-size:14px;
}
    .myAgendaList [class*='material-symbols']{
        display:none;
    }
    .myAgendaList time{
        white-space:nowrap;
    }
        .myAgendaList time span{
            display:block;
        }
@media screen and (max-width:992px){
    .paymentList thead th:nth-child(2){
        width:40%;
    }
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .memberIndex .buttons input{
        padding:10px 15px;
        margin:0 10px 20px;
        min-width:100px;
    }
}
@media screen and (max-width:768px){
    .dataView col{
        display:none;
    }
    .dataView tbody tr{
        display:flex;
        flex-wrap:wrap;
    }
        .dataView tbody th{
            width:20%;
        }
        .dataView tbody td{
            width:80%;
        }
    .myAgendaList thead{
        display:none;
    }
    .myAgendaList tbody tr{
        display:block;
        margin-top:15px;
        padding:10px;
        background-color:#fff;
        /* box-shadow:0 1px 5px rgba(0,0,0,.2); */
    }
    .myAgendaList tbody tr:first-child{
        margin-top:0;
    }
        .myAgendaList tbody td{
            display:block;
            position:relative;
            text-align:left;
            border:none;
            background-color:transparent;
            padding:0 0 0 30px;
            min-height:24px;
        }
        .myAgendaList tbody td[data-th="Seminar"]{
            font-weight:700;
            color:#111;
            padding-bottom:5px;
        }
        .myAgendaList tbody td[data-th="My Agenda"]{
            border-top:1px solid rgba(0,0,0,.1);
            text-align:right;
            margin-top:5px;
            padding-top:5px;
        }
            .myAgendaList tbody td[data-th="My Agenda"] label{
                margin-right:0;
            }
            .myAgendaList tbody td[data-th="My Agenda"]:after{
                content:"to "attr(data-th);
            }
            .myAgendaList [class*='material-symbols']{
                display:inline-block;
                position:absolute; left:0;
                font-size:22px;
                color:#999;
            }
        .myAgendaList tbody td[data-th="Time"]{
        }
            .myAgendaList tbody td[data-th="Time"]:before{
                display:none;
            }
            .myAgendaList tbody td[data-th="Time"] [class*='material-symbols']{
                left:0;
            }
                .myAgendaList tbody td time span{
                    display:inline;
                }
    .abstractList thead{
        display:none;
    }
    .abstractList tbody tr{
        display:block;
        position:relative;
        margin-top:15px;
        padding:10px;
        background-color:#fff;
        /* box-shadow:0 1px 5px rgba(0,0,0,.2); */
    }
    .abstractList tbody tr:first-child{
        margin-top:0;
    }
        .abstractList tbody td{
            display:block;
            position:relative;
            text-align:left;
            border:none;
            background-color:transparent;
            padding:8px 0 8px 0;
            min-height:32px;
        }
            .abstractList tbody td[data-th="No."]{
                background-color:#f0f7fa;
                padding:5px 10px 5px;
                font-weight:700;
                margin:-10px -10px 0;
            }
            .abstractList tbody td[data-th="Date"]{
                position:absolute; top:0; right:10px;
            }
            .abstractList tbody td[data-th="Title"]{
                padding-bottom:20px;
            }
            .abstractList tbody td[data-th="Revise"]{
                position:absolute; bottom:-15px; right:10px;
            }
                .abstractList tbody td[data-th="No."]:before,
                .abstractList tbody td[data-th="Date"]:before{
                    content:attr(data-th)" ";
                    font-weight:700;
                }
                .abstractList tbody td[data-th="Date"]:before{
                    margin-right:5px;
                }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .memberIndex .tableList .explanation{
        display:block;
    }
    .dataView tbody th,
    .dataView tbody td{
        width:100%;
        text-align:left;
    }
    .dataView tbody th{
        border:none;
    }
    .dataView tbody td{
        min-height:42px;
    }
    .paymentList thead th:nth-child(2){
        width:30%;
    }
        .paymentList .usd{
            display:block;
            width:auto;
        }
    .memberIndex .buttons input{
        width:100%;
        margin-left:0; margin-right:0;
    }
}
@media screen and (max-width:375px){/* i6 ~ iX */
    .myAgendaList{
        font-size:13px;
    }
}