:root {
    --div-bgcolor: #6495ed; /*選單最外層容器背景顏色*/
    --div-color: #b8c7ce; /*選單最外層容器文字顏色*/

    --menu-header-bgcolor: #6495ed; /*選單標題背景顏色，目前是顯示登入 人員名稱*/
    --menu-header-color: black; /*選單標題文字顏色，目前是顯示登入 人員名稱*/

    --menu-p1-bgcolor: #87cefa; /*選單第一層容器背景顏色*/
    --menu-p1-color: black; /*選單第一層容器文字顏色*/
    --menu-p1-hover-bgcolor: #87cefa; /*選單第一層點擊背景顏色*/
    --menu-p1-hover-color: black; /*選單第一層點擊文字顏色*/
    --menu-p2-fontfanily: Impact; /*選單第一層字型*/


    --menu-p2-bgcolor: #e0ffff; /*選單第二層容器背景顏色*/
    --menu-p2-color: black; /*選單第二層容器文字顏色*/
    --menu-p2-hover-bgcolor: #e0ffff; /*選單第二層點擊背景顏色*/
    --menu-p2-hover-color: black; /*選單第二層點擊文字顏色*/
    --menu-p2-fontfanily: DFKai-sb; /*選單第二層字型*/
}

/*:root {
    --div-bgcolor: #222d32;*/ /*選單最外層容器背景顏色*/
    /*--div-color: #b8c7ce;*/ /*選單最外層容器文字顏色*/

    /*--menu-header-bgcolor: #1a2226;*/ /*選單標題背景顏色，目前是顯示登入 人員名稱*/
    /*--menu-header-color: #b8c7ce;*/ /*選單標題文字顏色，目前是顯示登入 人員名稱*/

    /*--menu-p1-bgcolor: #222d32;*/ /*選單第一層容器背景顏色*/
    /*--menu-p1-color: #b8c7ce;*/ /*選單第一層容器文字顏色*/
    /*--menu-p1-hover-bgcolor: #1e282c;*/ /*選單第一層點擊背景顏色*/
    /*--menu-p1-hover-color: #fff;*/ /*選單第一層點擊文字顏色*/
    /*--menu-p2-fontfanily: Impact;*/ /*選單第一層字型*/


    /*--menu-p2-bgcolor: #222d32;*/ /*選單第二層容器背景顏色*/
    /*--menu-p2-color: #b8c7ce;*/ /*選單第二層容器文字顏色*/
    /*--menu-p2-hover-bgcolor: #1e282c;*/ /*選單第二層點擊背景顏色*/
    /*--menu-p2-hover-color: #fff;*/ /*選單第二層點擊文字顏色*/
    /*--menu-p2-fontfanily: DFKai-sb;*/ /*選單第二層字型*/
/*}*/



/*為了Modal互動視窗的置中所設定的CSS*/
.modal-dialog-centered {
    justify-content: center;
}


.animate-menu {
    position: fixed;
    top: 0;
    width: 220px;
    height: 100%;
    transition: all 0.3s ease;
    background-color: var(--div-bgcolor);
    color: var(--div-color);
    z-index: 1022;
}

.animate-menu-left {
  left: -220px; }
  .animate-menu-left.animate-menu-open {
    left: 0; }


.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--menu-p1-bgcolor);
}
    .sidebar-menu > li {
        position: relative;
        margin: 0;
        padding: 0;
        background-color: var(--menu-p1-bgcolor);
    }
        .sidebar-menu > li > ul > li {
            background-color: var(--menu-p2-bgcolor);
        }

        .sidebar-menu > li > a {
            padding: 12px 5px 12px 15px;
            display: block;
            border-left: 3px solid transparent;
            color: var(--menu-p1-color);
            text-decoration: none;
            font-family: var(--menu-p1-fontfanily);
        }
        .sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
            color: var(--menu-p1-hover-color);
            background: var(--menu-p1-hover-bgcolor);
        }

        .sidebar-menu > li > a > svg {
            transform: rotate(90deg);
        }
        .sidebar-menu > li > a.collapsed>svg {
            transform: rotate(0deg);
        }

    .sidebar-menu li.sidebar-header {
        padding: 10px 25px 10px 15px;
        font-size: 12px;
        background-color: var(--menu-header-bgcolor);
        color: var(--menu-header-color);
    }

    .sidebar-menu > li:hover > ul > li > a:hover {
        color: var(--menu-p2-hover-color);
        background: var(--menu-p2-hover-bgcolor);
    }
    .sidebar-menu a {
        color: var(--menu-p2-color);
        text-decoration: none;
        font-family: var(--menu-p2-fontfanily);
        font-style: italic;
    }





/*
    NavBar遮罩
*/
.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(51, 51, 51, 0.7);
    z-index: 1021;
    opacity: 0;
    transition: all .5s ease-in-out;
    left: 200px;
    top: 0;
}

.overlay.active {
    display: block;
    opacity: 1;
}


/*適用於UpdateMeber頁面  501px以上執行*/
@media screen and (min-width : 501px) {
    #AskPasswordContent {
        width: 430px;
    }
}


/*適用於Login_Member頁面  501px以上執行*/
@media screen and (min-width : 501px) {
    #LoginBody {
        overflow-x: hidden;
        background: #02a0e9;
    }
    #LoginPic {
        /*border-radius: 50%;*/
        /*width: 720px;*/
    }
    #LogoDiv2 {
        display: none;
    }
}

/*適用於Login_Member頁面  500px以下執行*/
@media screen and (max-width : 500px) {
    #LogoDiv2 {
        display: block;
    }
}