#cap-dashboard-wrapper {
    position: absolute;
    right: 25%;
    top: 150px;
    width: 300px;
    height: 420px;
    border-radius: 8px;
    background-color: #fff;
    cursor: default;
    z-index: 1;
}

    #cap-dashboard-wrapper .head {
        width: 100%;
        height: 30px;
        margin: 0 auto;
        border-radius: 8px 8px 0 0;
        background-color: #444444;
        cursor: move;
    }

        #cap-dashboard-wrapper .head > * {
            display: inline-block;
            line-height: 30px;
            vertical-align: middle;
        }

        #cap-dashboard-wrapper .head .previous {
            width: 30px;
            height: 30px;
        }

            #cap-dashboard-wrapper .head .previous.show {
                cursor: pointer;
                background: url(../images/CAPDashboard/previous.png) no-repeat 50%;
            }

        #cap-dashboard-wrapper .head .title {
            height: 100%;
            width: 231px;
            margin-left: -4px;
            padding-left: 5px;
            color: white;
        }

        #cap-dashboard-wrapper .head .close {
            width: 30px;
            height: 30px;
            background: url(../images/other/隱藏視窗off.png) no-repeat 50%;
            margin-left: -4px;
            cursor: pointer;
        }

    #cap-dashboard-wrapper .content {
        width: 100%;
        height: 91%;
        max-height: 91%;
        margin: 0 auto;
        overflow-y: auto;
    }

        #cap-dashboard-wrapper .content .buttons {
            width: 93%;
            margin: 0 auto;
            padding: 5px 0 0 0;
            text-align: center;
            /*background-color: yellow;*/
        }

            #cap-dashboard-wrapper .content .buttons.hide {
                display: none;
            }

            #cap-dashboard-wrapper .content .buttons > * {
                display: inline-block;
            }

            #cap-dashboard-wrapper .content .buttons .cap-alert {
                width: 28%;
                margin: 2px 3px;
                cursor: pointer;
                border: 4px #80D1FF solid;
                border-radius: 10px;
                background-size: cover !important;
            }

                #cap-dashboard-wrapper .content .buttons .cap-alert:after {
                    content: "";
                    display: block;
                    padding-bottom: 100%;
                }

            #cap-dashboard-wrapper .content .buttons:not(.hide) + .alert-list {
                display: none;
            }

        #cap-dashboard-wrapper .content .alert-list .tips {
            display: block;
            margin: 8px;
            font-size: 15px;
            color: #9d9d9d;
        }

        #cap-dashboard-wrapper .content .alert-list .alert-item {
            padding-top: 7px;
            width: 93%;
            margin: 0 auto;
        }

            #cap-dashboard-wrapper .content .alert-list .alert-item .item-title > * {
                display: inline-block;
                vertical-align: middle;
            }

            #cap-dashboard-wrapper .content .alert-list .alert-item .item-title > .icon {
                width: 10px;
                height: 10px;
                border: 2px #bebebe solid;
                border-radius: 10px;
            }

            #cap-dashboard-wrapper .content .alert-list .alert-item .item-title > .text {
                font-size: 15px;
                font-weight: 700;
                margin-left: 6px;
            }

            #cap-dashboard-wrapper .content .alert-list .alert-item .item-content {
                width: 100%;
            }

                #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper {
                    padding: 2px 0;
                }

                    #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper.level2 {
                        display: none;
                        width: 94.3%;
                        margin-left: 15px;
                    }

                        #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper.level2.show {
                            display: block;
                        }

                    #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper.level3 {
                        display: none;
                        width: 88.8%;
                        margin-left: 30px;
                    }

                    #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper > * {
                        display: inline-block;
                        vertical-align: top;
                    }

                    #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper .toggle-hide {
                        width: 15px;
                        height: 15px;
                        cursor: pointer;
                        margin-top: 6px;
                        background: url(../images/CAPDashboard/toggle-close.png) no-repeat 50%;
                    }

                    #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper .level-content {
                        width: 90%;
                        margin-left: 7px;
                    }

                        #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper .level-content > .text {
                            display: inline-block;
                            vertical-align: top;
                            cursor: pointer;
                            padding: 3px 0;
                            /*background-color:yellow;*/
                        }

                            #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper .level-content > .text.active {
                                color: #41BAFF;
                            }

                    #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper.level1 .level-content > .text {
                        width: 78px;
                        font-size: 15px;
                    }

                    #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper.level2 .level-content > .text {
                        width: 70px;
                        font-size: 14px;
                    }

                    #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper.level3 .level-content > .text {
                        width: 70px;
                        font-size: 14px;
                    }

                    #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper.close .level-content {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding-top: 5px;
                    }

                        #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper.close .level-content .text {
                            width: auto;
                            display: inline;
                        }

                            #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper.close .level-content .text:not(:last-child):after {
                                /*display: inline-block;*/
                                content: "、";
                                width: 15px;
                            }

                    #cap-dashboard-wrapper .content .alert-list .alert-item .item-content .item-wrapper.level1.close ~ .level2 {
                        display: none;
                    }

        #cap-dashboard-wrapper .content .gale {
            background: url(../images/CAPDashboard/buttons_on/gale.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.gale {
            background: url(../images/CAPDashboard/buttons_off/gale.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .reservoir {
            background: url(../images/CAPDashboard/buttons_on/reservoir.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.reservoir {
            background: url(../images/CAPDashboard/buttons_off/reservoir.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .flooding {
            background: url(../images/CAPDashboard/buttons_on/flooding.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.flooding {
            background: url(../images/CAPDashboard/buttons_off/flooding.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .landslip {
            background: url(../images/CAPDashboard/buttons_on/landslip.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.landslip {
            background: url(../images/CAPDashboard/buttons_off/landslip.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .typhoon {
            background: url(../images/CAPDashboard/buttons_on/typhoon.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.typhoon {
            background: url(../images/CAPDashboard/buttons_off/typhoon.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .high-river {
            background: url(../images/CAPDashboard/buttons_on/high-river.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.high-river {
            background: url(../images/CAPDashboard/buttons_off/high-river.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .called-off-work-and-school {
            background: url(../images/CAPDashboard/buttons_on/called-off-work-and-school.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.called-off-work-and-school {
            background: url(../images/CAPDashboard/buttons_off/called-off-work-and-school.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .fog {
            background: url(../images/CAPDashboard/buttons_on/fog.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.fog {
            background: url(../images/CAPDashboard/buttons_off/fog.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .torrential-rain {
            background: url(../images/CAPDashboard/buttons_on/torrential-rain.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.torrential-rain {
            background: url(../images/CAPDashboard/buttons_off/torrential-rain.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .earthquake {
            background: url(../images/CAPDashboard/buttons_on/earthquake.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.earthquake {
            background: url(../images/CAPDashboard/buttons_off/earthquake.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .low-temperature {
            background: url(../images/CAPDashboard/buttons_on/low-temperature.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.low-temperature {
            background: url(../images/CAPDashboard/buttons_off/low-temperature.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .road-closed {
            background: url(../images/CAPDashboard/buttons_on/road-closed.png) no-repeat 50%;
        }

        #cap-dashboard-wrapper .content .danger.road-closed {
            background: url(../images/CAPDashboard/buttons_off/road-closed.png) no-repeat 50%;
            background-color: rgb(189,26,33);
        }

        #cap-dashboard-wrapper .content .air-quality {
            background-image: url('../images/CAPDashboard/buttons_on/air-quality.png');
        }

        #cap-dashboard-wrapper .content .danger.air-quality  {
            background-image: url('../images/CAPDashboard/buttons_off/air-quality.png');
        }

        #cap-dashboard-wrapper .content .extraDanger.air-quality {
            background-image: url('../images/CAPDashboard/buttons_off/air-quality.png');
        }

        #cap-dashboard-wrapper .content .ultimateDanger.air-quality {
            background-image: url('../images/CAPDashboard/buttons_off/air-quality.png');
        }

        #cap-dashboard-wrapper .content .landlines {
            background-image: url('../images/CAPDashboard/buttons_on/landlines.png');
        }

        #cap-dashboard-wrapper .content .danger.landlines {
            background-image: url('../images/CAPDashboard/buttons_off/landlines.png');
        }

        #cap-dashboard-wrapper .content .mobiles {
            background-image: url('../images/CAPDashboard/buttons_on/mobiles.png');
        }

        #cap-dashboard-wrapper .content .danger.mobiles {
            background-image: url('../images/CAPDashboard/buttons_off/mobiles.png');
        }

        #cap-dashboard-wrapper .content .electric {
            background-image: url('../images/CAPDashboard/buttons_on/electricity.png');
        }

        #cap-dashboard-wrapper .content .danger.electric {
            background-image: url('../images/CAPDashboard/buttons_off/electricity.png');
        }

        #cap-dashboard-wrapper .content .ultimateDanger {
            background-color: rgb(114,51,26) !important;
            border-color: rgb(161, 77, 36) !important;
        }

            #cap-dashboard-wrapper .content .ultimateDanger:hover {
                background-color: rgb(90, 39, 21) !important;
            }

        #cap-dashboard-wrapper .content .extraDanger {
            border-color: rgb(168, 112, 215) !important;
            background-color: rgb(112,39,196) !important;
        }

            #cap-dashboard-wrapper .content .extraDanger:hover {
                background-color: rgb(85, 22, 160) !important;
            }

        #cap-dashboard-wrapper .content .danger {
            border-color: rgb(238,35,12) !important;
            background-color: rgb(189,26,33) !important;
        }

            #cap-dashboard-wrapper .content .danger:hover {
                background-color: rgb(158,33,4) !important;
            }

        #cap-dashboard-wrapper .content .warning {
            border-color: rgb(255,147,0) !important;
            background-color: rgb(235,131,42);
        }

            #cap-dashboard-wrapper .content .warning:hover {
                background-color: rgb(194,99,20);
            }

        #cap-dashboard-wrapper .content .alert {
            border-color: rgb(251,233,101) !important;
            background-color: rgb(243,211,5);
        }

            #cap-dashboard-wrapper .content .alert:hover {
                background-color: rgb(214,184,4);
            }