/*編輯 (會員資料修改, 密碼變更, )*/
#edit_area {
    margin: 0 auto;
}

    #edit_area > form {
        border: 1px solid #ADADAD;
        border-radius: 3px;
        width: 80%;
        margin: 0 auto;
        padding: 2em;
    }

        #edit_area > form > div {
            margin: 0 auto;
            line-height: 2em;
            padding: 0.25em;
        }

            #edit_area > form > div > h6 {
                display: inline-block;
                margin: 0;
                padding: 0;
                width: 4em;
            }

            #edit_area > form > div > h5 {
                display: inline-block;
                margin: 0;
                padding: 0;
                max-width: 14em;
            }

            #edit_area > form > div > h6::after {
                content: ' : ';
            }

@media (min-width: 1200px) {
}

@media (min-width: 980px) and (max-width: 1199px) {
}

@media (min-width: 768px) and (max-width: 979px) {
}

@media (max-width: 767px) {
    #edit_area > form {
        border: 0px solid #ececec;
        width: 98%;
        padding: 3px;
    }
}

@media (max-width: 480px) {
}

/*修改區域 (確認使用)*/
.modify {
    border: 1px solid #ADADAD;
    border-radius: 3px;
    width: 80%;
    margin: 0 auto;
    padding: 2em;
    margin: 0 auto;
}

    .modify > div {
        margin: 0 auto;
        line-height: 2em;
        padding: 0.25em;
    }

        .modify > div > h6 {
            display: inline-block;
            margin: 0;
            padding: 0;
            width: 6em;
        }

        .modify > div > h5 {
            display: inline-block;
            margin: 0;
            padding: 0;
            max-width: 14em;
        }

        .modify > div > h6::after {
            content: ' : ';
        }

@media (min-width: 1200px) {
}

@media (min-width: 980px) and (max-width: 1199px) {
}

@media (min-width: 768px) and (max-width: 979px) {
}

@media (max-width: 767px) {
    .modify {
        border: 0px solid #ececec;
        width: 98%;
        padding: 3px;
    }
}

@media (max-width: 480px) {
}

/* 配合 ddmg utility 使用的 class*/
.ddmg-msgbox {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 200px;
    min-height: 50px;
    border: 2px solid #ff6a00;
    border-radius: 5px;
    background-color: #ececec;
    z-index: 99;
    padding: 2em;
}

    .ddmg-msgbox > span {
        border: 1px solid #808080;
        border-radius: 50%;
        cursor: pointer;
        font-weight: bold;
        color: #333333;
        font-size: 1.25em;
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        line-height: 1.25em;
        vertical-align: middle;
        text-align: center;
        position: absolute;
        color: #FFF;
        background-color: #ff0000;
        top: 0;
        right: 0;
    }

    .ddmg-msgbox > div {
        text-align: center;
        vertical-align: middle
    }

.ddmg-panel {
    position: fixed;
    background-color: #EFEFEF;
    width: 100vw;
    /*z-index :90是因為有訊息要出現要蓋過它*/
    z-index: 90;
}

    .ddmg-panel > span {
        border: 1px solid #CCCCCC;
        color: #EEEEEE;
        font-size: 18px;
        background-color: red;
        float: right;
        margin-top: 5px;
        margin-right: 5px;
        cursor: pointer;
        padding: 5px;
        border-radius: 8px;
    }

    .ddmg-panel > div {
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
    }

@media (min-width: 1200px) {
}

@media (min-width: 980px) and (max-width: 1199px) {
}

@media (min-width: 768px) and (max-width: 979px) {
}

@media (max-width: 767px) {
    .ddmg-msgbox {
        min-width: 85vw;
        width: 85vw;
        min-height: 50px;
        padding: 0;
    }

        .ddmg-msgbox > span {
            display: block;
        }
}

@media (max-width: 480px) {
}