@media (min-width: 767px) {
    .MenuBarIcon1 {
        background-image: url('../Content/images/MenuBar/1.png');
        width: 172px;
        background-size: 172px auto;
        background-repeat: no-repeat;
        padding: 0;
        margin: 0;
    }

        .MenuBarIcon1:hover,
        .MenuBarIcon1:focus,
        .MenuBarIcon1.active {
            background-image: url('../Content/images/MenuBar/點選1.png');
        }


    .MenuBarIcon2 {
        background-image: url('../Content/images/MenuBar/2.png');
        width: 172px;
        background-size: 172px auto;
        background-repeat: no-repeat;
    }

        .MenuBarIcon2:hover,
        .MenuBarIcon2:focus,
        .MenuBarIcon2.active {
            background-image: url('../Content/images/MenuBar/點選2.png');
        }

    .MenuBarIcon3 {
        background-image: url('../Content/images/MenuBar/3.png');
        width: 172px;
        background-size: 172px auto;
        background-repeat: no-repeat;
    }

        .MenuBarIcon3:hover,
        .MenuBarIcon3:focus,
        .MenuBarIcon3.active {
            background-image: url('../Content/images/MenuBar/點選3.png');
        }

    .MenuBarIcon4 {
        background-image: url('../Content/images/MenuBar/4.png');
        width: 172px;
        background-size: 172px auto;
        background-repeat: no-repeat;
    }

        .MenuBarIcon4:hover,
        .MenuBarIcon4:focus,
        .MenuBarIcon4.active {
            background-image: url('../Content/images/MenuBar/點選4.png');
        }


    .MenuBarIcon5 {
        background-image: url('../Content/images/MenuBar/5.png');
        width: 172px;
        background-size: 172px auto;
        background-repeat: no-repeat;
    }

        .MenuBarIcon5:hover,
        .MenuBarIcon5:focus,
        .MenuBarIcon5.active {
            background-image: url('../Content/images/MenuBar/點選5.png');
        }

    .MenuBarIcon6 {
        background-image: url('../Content/images/MenuBar/6.png');
        width: 172px;
        background-size: 172px auto;
        background-repeat: no-repeat;
    }

        .MenuBarIcon6:active,
        .MenuBarIcon6:focus,
        .MenuBarIcon6:hover,
        .MenuBarFont:active,
        .MenuBarFont:focus,
        .MenuBarFont:hover {
            background-image: url('../Content/images/MenuBar/點選6.png');
        }

    .MenuBarIcon7 {
        background-image: url('../Content/images/MenuBar/7.png');
        width: 172px;
        background-size: 172px auto;
        background-repeat: no-repeat;
    }

        .MenuBarIcon7:active,
        .MenuBarIcon7:focus,
        .MenuBarIcon7:hover {
            background-image: url('../Content/images/MenuBar/點選6.png');
        }

    .titleBar {
        padding: 5px 15px !important;
        color: #FFF !important;
    }

    .titleBar2 {
        padding: 5px 30px !important;
        color: #FFF !important;
    }

    /* Boostrap CSS */
    .dropdown-menu > li > a.MenuBarFont {
        color: #ddd;
    }

    .dropdown-menu > li > a.MenuBarIcon6 {
        color: #ddd;
    }

    .dropdown-submenu:hover > a.MenuBarIcon6 {
        color: #fff;
        background-color: none;
        background-image: url('../Content/images/MenuBar/點選6.png');
    }

    .dropdown-menu > li > a.MenuBarIcon6:hover {
        color: #fff;
    }

    .dropdown-submenu:hover > a.MenuBarIcon6 > a.MenuBarIcon6 {
        color: #fff;
    }

    .dropdown-menu > li > a.MenuBarIcon7 {
        color: #ddd;
    }

    .dropdown-submenu:hover > a.MenuBarIcon7 {
        color: #fff;
        background-color: none;
        background-image: url('../Content/images/MenuBar/點選6.png');
    }

    .dropdown-menu > li > a.MenuBarIcon7:hover {
        color: #fff;
    }

    .dropdown-submenu:hover > a.MenuBarIcon7 > a.MenuBarIcon7 {
        color: #fff;
    }

    .dropdown-menu {
        padding: 0;
    }

    #btnLogOff {
        color: #ddd;
        font-weight: 900;
        text-align: center;
        margin-right: 10px;
        padding: 4.5px;
    }

    .dropdown.Common767 {
        display: none;
    }

    .nav-fix {
        height: 50px;
        position: relative;
    }

        .nav-fix > div > span {
            font-size: large;
            width: 80px;
            position: absolute;
            left: 10px;
            top: 50%;
            margin-top: -12px;
        }

        .nav-fix > div > select#SelectBasin {
            font-size: 16px;
            position: absolute;
            left: 80px;
            top: 50%;
            margin-top: -12px;
            width:auto;
            height:36px;
        }
}


@media (max-width: 767px) {
    .MenuBarIcon1::before {
        content: '颱風豪雨降雨模組';
    }

    .MenuBarIcon2::before {
        content: '避洪減災整備模組';
    }

    .MenuBarIcon3::before {
        content: '流域水情監控模組';
    }

    .MenuBarIcon4::before {
        content: '淹水警戒預報模組';
    }

    .MenuBarIcon5::before {
        content: '災情監控資訊模組';
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a.MenuBarIcon6 {
        color: #777777;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a.MenuBarIcon7 {
        color: #777777;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a.MenuBarFont {
        color: #777777;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > ul > li > a.MenuBarIcon6 {
        color: white;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > ul > li > a.MenuBarIcon7 {
        color: white;
    }

    #btnLogOff {
        color: black;
    }

    .nav-fix {
        padding: 10px 15px;
    }

        .nav-fix > div {
            font-size: initial;
        }

        .nav-fix > select#SelectBasin {
            font-size: initial;
        }
}