#rough-sea {
    padding: 7px;
    height: 95% !important;
}

    #rough-sea * {
        height: auto !important;
    }

    #rough-sea label {
        cursor: pointer;
    }

    #rough-sea input:disabled,
    #rough-sea input:disabled ~ label {
        cursor: not-allowed;
    }

    #rough-sea .event-list {
        padding-bottom: 10px;
    }

    #rough-sea .event-time-list {
        padding-bottom: 15px;
    }

        #rough-sea .event-list select,
        #rough-sea .event-time-list span {
            width: 100%;
            padding: 5px;
            background-color: #DCD9DE;
            border: none;
            cursor: pointer;
            /*font-weight: bolder;*/
            font-size: 15px;
        }

            #rough-sea .event-list select:disabled {
                cursor: not-allowed;
            }

        #rough-sea .event-time-list span {
            display: inline-block;
            width: 96%;
            padding: 3px 6px;
            cursor: default;
        }

        #rough-sea .event-time-list.disabled span {
            color: #7b7b7b;
        }


    #rough-sea .cwb-typhoon {
        padding-bottom: 10px;
    }

        #rough-sea .cwb-typhoon > * {
            display: inline-block;
            vertical-align: middle;
        }

        #rough-sea .cwb-typhoon input[name="visibleCWB"] {
            display: none;
        }

        #rough-sea .cwb-typhoon label {
            font-size: 16px
        }

        #rough-sea .cwb-typhoon .switch-button {
            width: 60px;
            height: 20px;
            cursor: pointer;
            border: 3px black solid;
            border-radius: 5px;
            background-color: #FFB8B8;
        }

        #rough-sea .cwb-typhoon input[name="visibleCWB"]:disabled ~ .switch-button {
            cursor: not-allowed;
        }

        #rough-sea .cwb-typhoon input[name="visibleCWB"]:not(:checked) ~ .switch-button::after {
            content: "off";
            line-height: 20px;
            font-size: 17px;
            font-weight: bolder;
            padding-left: 5px;
            color: #fff;
        }

        #rough-sea .cwb-typhoon input[name="visibleCWB"]:checked ~ .switch-button:before {
            content: "on";
            line-height: 20px;
            font-size: 17px;
            font-weight: bolder;
            padding-left: 3px;
            color: #fff;
        }

        #rough-sea .cwb-typhoon input[name="visibleCWB"]:checked ~ .switch-button:after {
            content: "";
            float: right;
            display: inline-block;
            width: 50%;
            height: 22px;
            background-color: #fff;
            border: 3px black solid;
            border-radius: 5px;
            margin: -3px;
        }

        #rough-sea .cwb-typhoon input[name="visibleCWB"]:not(:checked) ~ .switch-button::before {
            content: "";
            float: left;
            display: inline-block;
            width: 50%;
            height: 22px;
            background-color: #fff;
            border: 3px black solid;
            border-radius: 5px;
            margin: -3px;
        }

    #rough-sea .rough-sea-list {
        padding-bottom: 20px;
        font-size: 15px;
    }

        #rough-sea .rough-sea-list .rough-sea-list-item input[type="radio"] ~ div,
        #rough-sea .rough-sea-list .rough-sea-list-item input[type="radio"] ~ label .tip-icon {
            display: none;
        }

        #rough-sea .rough-sea-list .rough-sea-list-item input[type="radio"]:checked ~ div {
            display: block;
        }

        #rough-sea .rough-sea-list .rough-sea-list-item input[type="radio"]:checked ~ label .tip-icon {
            display: inline;
            position: relative;
            top: 5px;
            width: 25px;
            cursor: default;
        }

        #rough-sea .rough-sea-list .rough-sea-list-item .rough-sea-legend {
            width: 100%;
        }

        #rough-sea .rough-sea-list .rough-sea-list-item .degree {
            text-align: center;
            position: relative;
            width: 85%;
            top: 5px;
            left: 23px;
        }

            #rough-sea .rough-sea-list .rough-sea-list-item .degree .degree-text,
            #rough-sea .rough-sea-list .rough-sea-list-item .degree ul {
                display: inline-block;
                width: 100%;
                padding: 5px;
                background-color: #DCD9DE;
                border: none;
                cursor: pointer;
                font-weight: bolder;
                /*padding-left: 36%;*/
            }

                #rough-sea .rough-sea-list .rough-sea-list-item .degree .degree-text .text-icon {
                    font-size: 12px;
                    float: right;
                }

            #rough-sea .rough-sea-list .rough-sea-list-item .degree ul {
                position: absolute;
                left: 0;
                top: 32px;
                max-height: 100px;
                overflow: auto;
                border-top: 1px white solid;
            }

                #rough-sea .rough-sea-list .rough-sea-list-item .degree ul.hide {
                    display: none;
                }

                #rough-sea .rough-sea-list .rough-sea-list-item .degree ul li {
                    padding-left: 6px;
                }

                    #rough-sea .rough-sea-list .rough-sea-list-item .degree ul li:hover {
                        color: white;
                        background-color: #bebebe;
                    }

    #rough-sea .oceanic-info .title {
        display: block;
        text-align: center;
        width: 100%;
        font-weight: bolder;
        font-size: 16px;
        padding: 5px 0;
    }

    #rough-sea .oceanic-info a {
        width: 100%;
        display: block;
        cursor: pointer;
        font-weight: 700;
        padding: 2px 0;
        color: #66b3ff;
        text-decoration: underline;
    }

        #rough-sea .oceanic-info a:hover {
            color: #389CFF;
        }


#nc-highchart-wrapper {
    position: absolute;
    top: 90px;
    left: 280px;
    width: 650px;
    height: 290px;
    background-color: white;
    border-radius: 5px;
    border: 2px #e0e0e0 solid;
}

    #nc-highchart-wrapper .head {
        border-bottom: 2px #e0e0e0 solid;
        padding: 3px 8px;
        cursor: all-scroll;
        /*padding-bottom: 5px;*/
    }

        #nc-highchart-wrapper .head > * {
            display: inline-block;
            line-height: 25px;
            vertical-align: top;
        }

        #nc-highchart-wrapper .head .title {
            width: 96%;
        }

        #nc-highchart-wrapper .head .close {
            width: 20px;
            height: 25px;
            background: url(../images/other/close.png) no-repeat 50%;
            cursor: pointer;
        }

    #nc-highchart-wrapper .body {
        padding-top: 5px;
    }

#nc-info {
    width: 170px;
}

    #nc-info > * {
        display: inline-block;
        line-height: 5px;
        vertical-align: middle
    }

    #nc-info .info {
        margin-right: 6px;
    }

    #nc-info img {
        cursor: pointer;
    }