:root {
    /* QR相關 */
    --MsgWindowsBarBackgroundColor: #96BA60; /* 訊息視窗上方標題背景顏色 */
    --MsgWindowsBarFontColor: #FFFFFF; /* 訊息視窗上方標題字體顏色 */
    --MsgWindowsBackgroundColor: #FFFFFF; /* 訊息視窗背景顏色 */
    --MsgWindowsFontColor: #265012; /* 訊息視窗字體顏色 */

    --MsgWindowsButtonBackgroundColor: #96BA60; /* 訊息視窗按鈕背景顏色 */
    --MsgWindowsButtonFontColor: #FFFFFF; /* 訊息視窗按鈕文字顏色 */

    --MsgButtonBackgroundColor: #96BA60; /* 小視窗按鈕 */

    --msgCloseButtonBackgroundColor: #7a7a7a; /* 小視窗關閉按鈕背景色 */
    --msgCloseButtonFontColor: #FFFFFF; /* 小視窗關閉按鈕文字顏色 */
    --msgCloseButtonMouseBackgroundColor: #9b9b9b; /* 小視窗關閉按鈕滑鼠移過背景色 */
    --msgCloseButtonMouseFontColor: #FFFFFF; /* 小視窗關閉按鈕滑鼠移過文字顏色 */
    --msgCloseButtonClickBackgroundColor: #626262; /* 小視窗關閉按鈕滑鼠點下背景顏色 */
    --msgCloseButtonLineColor: #7a7a7a; /* 小視窗關閉按鈕框線顏色 */
}

#msgbg {
    /*position: absolute;*/
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgb(8, 8, 12);
    width: 100%; /*寬度設定為100%，這樣才能使隱藏背景層覆蓋原頁面*/
    height: 100%;
    filter: alpha(opacity=30); /*設定透明度為60%*/
    opacity: 0.3; /*非IE瀏覽器下設定透明度為60%*/
    display: none;
    z-Index: 2000;
}

.msgBoxIcon {
    position: absolute;
    /* 
            width: 40px;
            height: 40px;
 */
    left: 25px;
    top: 10px;
    color: #ffffff;
}
/* 
        .msgBoxIcon {
            position: absolute;
            width: 40px;
            height: 40px;
            left: 20px;
            top: 8px;
            background: url('@DBList.CompleteUrl()images/outline_dvr_black_48dp-w.png');
            background-size: 40px;
        }
 */
.msgbox {
    /*position: absolute;*/
    /*position: fixed;*/
    /*position: relative;*/
    position: Sticky;
    box-shadow: 5px 5px 5px rgba(155, 154, 154, 0.781);
    /*border-radius: 5px;*/

    background-color: var(--MsgWindowsBackgroundColor);
    display: none;
    min-height: 200px;
    max-height: 2000px;
    width: 50%;
    top: 10%;
    left: 25%;
    z-Index: 2010;
    border-radius: 20px 20px 20px 20px;
    /*display:inline-block;*/
    height: 500px;
    position: fixed;
}

@media (min-width: 900px) and (max-width: 1000px) {
    .msgbox {
        width: 60%;
        left: 20%;
    }
}

@media (min-width: 800px) and (max-width: 900px) {
    .msgbox {
        width: 70%;
        left: 15%;
    }
}

@media (min-width: 200px) and (max-width: 800px) {
    .msgbox {
        width: 80%;
        left: 10%;
    }
}

@media (max-width: 200px) {
    .msgbox {
        width: 100%;
        left: 0%;
    }
}

.msgButton {
    font-size: 30px;
    /* 水平置中 */
    justify-content: center;
    display: inline-block;
    text-align: right;
    cursor: pointer; /* http://www.flycan.com/article/css/css-cursor-209.html */
}

.msg_title {
    display: inline-block;
    /*width: 100%;*/
    font-size: 25px;
    font-family: Microsoft JhengHei; /* 字型設定為微軟正黑體 */
    font-weight: bold;
    border-radius: 20px 20px 20px 20px;
}

.msgboxContent {
    margin: 10px 10px;
    display: inline-block;
    height: auto;
    /* 水平置中 */
    justify-content: center;
    text-align: left; /* 水平置左 */
    display: flex;
    justify-content: center;
}

.msgContent {
    position: absolute;
    top: 60px;
    bottom: 60px;
    right: 0px;
    left: 20px;
    font-family: Microsoft JhengHei; /* 字型設定為微軟正黑體 */
    font-size: 20px;
    margin: 10px 10px;
    height: auto;
    color: #224450;
    overflow-y: auto;
}

.msgboxTable {
    border: 0px;
    width: 100%;
    position: absolute;
    right: 35px;
    bottom: 35px;
}

.msgboxButton {
    border: 0px;
    width: 100%;
    /* 水平置中 */
    justify-content: center;
    text-align: center;
    display: flex;
}

.msgboxTitleBar {
    width: 100%;
    height: 50px;
    border-radius: 20px 20px 0px 0px;
    background-color: var(--ContentTitleBackgroundColor1);
}

.msg_TitleBarContent {
    display: inline-block; /* 水平布局 */
    width: auto;
    position: absolute;
    top: 7px;
    left: 80px;
    color: var(--MsgWindowsBarFontColor);
}

.msg_TitleBarX {
    display: inline-block; /* 水平布局 */
    width: 40px;
    position: absolute;
    /* top: 7px;  */
    right: 0px;
    /* left: 80px; */
    color: var(--MsgWindowsBarFontColor);
}

.msgTable {
    border-radius: 20px 20px 20px 20px;
}

/* 小視窗按鈕 */
.clsMsgButtonBackgroundColor { /* 按鈕背景 */
    background-color: var(--MsgButtonBackgroundColor);
}

.clsMsgButton { /* 按鈕文字顏色 */
    background-color: var(--msgCloseButtonBackgroundColor);
    color: var(--msgCloseButtonFontColor) !important;
    font-family: Microsoft JhengHei; /* 字型設定為微軟正黑體 */
    border: 2px var(--msgCloseButtonLineColor) solid;
    font-size: 20px;
    font-weight: bold;
    transition: 0.25s;
    padding: 2px;
}

    .clsMsgButton:hover { /* 按鈕1文字顏色(滑鼠移過) */
        background-color: var(--msgCloseButtonMouseBackgroundColor);
        border: 2px var(--msgCloseButtonLineColor) solid;
        color: var(--msgCloseButtonMouseFontColor) !important;
    }

    .clsMsgButton:active {
        /* :active是滑鼠點擊元素的狀態 */
        background-color: var(--msgCloseButtonClickBackgroundColor) !important;
        border: 2px var(--msgCloseButtonLineColor) solid !important;
        box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .2);
    }

.QRCodeOutSide {
    display: block;
    position: static;
}

.msgContentTable {
    width: 100%;
}

/*
.msgContentTableRow {
    background-color: #d4d4d4 !important;
    color: @strContentTableTitleRowFontColor;
}

.msgContentTableDataRow1 {
    background-color: #ffffff !important;
    color: @strContentTableTitleRowFontColor;
}

.msgContentTableDataRow2 {
    background-color: #cde4ff !important;
    color: @strContentTableTitleRowFontColor;
}

*/