/* ライブラリのオーバーライト *********************************************/

.nav-pills .nav-link {
    border: 1px solid lightgray;
    padding: 0.5rem 0.5rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    white-space: nowrap;
    background-color: white;
}

    .nav-pills .nav-link.active {
        background-color: #17a2b8;
    }

.nav-fill > .nav-link, .nav-fill .nav-item {
    flex: 1 1 33%;
    text-align: center;
    /*    max-width: 33%;
*/ white-space: nowrap;
}


.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

table {
    /*    font-size: 1rem;
*/
}


.btn {
    font-size: 1.0rem;
}

button .fas {
    margin-right: 0.25rem;
}

.form-select-sm {
    border-color: black;
    font-size: 1.0rem;
}

.form-control-sm {
    padding: 0rem 0.25rem;
    border: 1px solid gray;
    font-size: 1.0rem;
}

.btn-outline-secondary {
    color: black;
    border-color: black;
}



html, body {
    width: 100%;
    height: 100%;
    font-size: 14px;
}

.page-body {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}




/* page共通　*/


/* 背景色 */

.bc-notice {
    background-color: linen !important;
}




/* 日付・単位系の表示関連 *********************************************/

.data-date {
    color: gray;
    margin-right: 0.25rem;
}

.data-time {
}

.box-status {
    min-width: 6rem;
    border-radius: 3px;
    text-align: center;
}

.box-title {
    /*    font-weight: 700;
*/
}

/* 基準超過用 */
.box-level {
    min-width: 8rem;
    max-width: 8rem;
    text-align: center;
    line-height: 1.5rem;
}

    .box-level .box-level-title {
        margin-left: 0.15rem;
        margin-right: 0.15rem;
        /*white-space: nowrap;*/
    }

    .box-level .box-level-datetime {
        /*    display: none; */ /* 時刻を非表示にする場合*/
        background-color: white;
        color: black;
        text-align: right;
        padding-right: 0.5rem;
    }


.box-float-left {
    display: flex;
    float: left;
}

    .box-float-left > div {
        /*        margin-right: 1rem;*/
    }

.box-float-right {
    display: flex;
    float: right;
}

    .box-float-right > div {
        /* margin-left: 1rem;*/
    }

.box-toolbuttons {
    float: right;
    display: flex;
}

.box-title {
    float: left;
    display: inline-block;
    margin-right: 2rem;
    line-height: 2.0;
    font-size: 1.2rem;
    font-weight: 700;
}

.box-text {
    padding: 0.25rem 0.5rem;
}

.box-text-notice {
    padding: 0.25rem 0.5rem;
    background-color: #ffc107;
    border-radius: 0.3rem;
}



/* 地域選択パネル */
.box-cityselect {
    display: flex;
}

    .box-cityselect > div {
        margin-left: 0.25rem;
    }

/* 観測時刻設定パネル */
.box-datetimepicker {
    display: flex;
}

    .box-datetimepicker > div {
        margin-left: 0.25rem;
    }

    .box-datetimepicker .datetimepicker-text {
        width: 9rem;
        text-align: center;
    }



.excess-exist {
    background-color: #ff6666;
    color: white;
    padding: 0.25rem 0.5rem;
}

.excess-none {
    background-color: #e5e5e5;
    color: gray;
}


/* リストグループ関連 *********************************************/

/* リストグループ－説明 */
.list-group-fullheight {
    height: 100%;
}

    .list-group-fullheight .list-group-item-explain-title {
        height: auto;
    }

    .list-group-fullheight .list-group-item-explain-body {
        height: 100%;
    }


/* リストグループ－凡例 */
.list-group-legend {
    height: 100%;
}

    .list-group-legend .list-group-item-legend-title {
        height: auto;
    }

        .list-group-legend .list-group-item-legend-title .box-title {
            float: left;
        }

    .list-group-legend .list-group-item-legend {
        height: 100%;
    }



/* 市町村 */

.list-group-item-city {
    min-height: 2.5rem;
}

    .list-group-item-city .box-group {
    }

        .list-group-item-city .box-group .box-title {
            /*            float: left;
*/
        }

        .list-group-item-city .box-group .box-level {
            /*            float: right;
*/
        }

        .list-group-item-city .box-group .box-comment {
            /*            float: right;
*/
        }

/* 観測時刻 */
.list-group-item-obstime {
    background-color: #f0f8ff;
}

    .list-group-item-obstime > .box-title {
        float: left;
    }

    .list-group-item-obstime > .box-datetime {
        float: right;
    }

/* 超過状況 */
.list-group-item-excess {
}

    .list-group-item-excess .box-title {
        float: left;
    }

    .list-group-item-excess .box-datetime {
        float: right;
    }

/* リンク用　*/
.list-group-item-pagelink {
    cursor: pointer;
}

    .list-group-item-pagelink > .box-title {
        float: left;
    }

    .list-group-item-pagelink > .box-status {
        float: right;
    }


.list-group-item-header {
    background-color: lightgray;
    height: 2.5rem;
}

.list-group-item-area-title {
    height: 2.5rem;
    background-color: #f1f1f1;
}



.sidebar-frame {
    background-color: #f8f9fa !important;
    width: 250px;
    height: 100%;
    margin: 0rem;
    padding: 0rem;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
}

.sidebar-iframe {
    width: 100%;
    height: 100%;
}

/*** サイドバー **********************************************/
.sidebar {
    background-color: #f8f9fa !important;
    width: 250px;
    height: 100%;
    padding: 0rem;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    background-color: white;
}

    /* ヘッダ */
    .sidebar .sidebar-header {
        width: 100%;
        margin: 0rem;
        padding: 0rem;
        user-select: none;
        border-right: 1px solid lightgray;
        border-bottom: 1px solid lightgray;
        height: 5.5rem;
        cursor: pointer;
    }

        /* ヘッダ */
        .sidebar .sidebar-header .sidebar-header-titlebar {
            width: 100%;
            color: black;
            background-color: #dee2e6;
            padding: 0.5rem;
            height: 2.5rem;
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1.2;
        }

            .sidebar .sidebar-header .sidebar-header-titlebar .title-box {
                float: left;
            }

                .sidebar .sidebar-header .sidebar-header-titlebar .title-box img {
                    height: 1.0rem;
                    /*vertical-align: text-bottom;*/
                }

        .sidebar .sidebar-header .sidebar-header-toolbar {
            width: 100%;
            color: black;
            padding: 0.5rem 0.75rem;
            height: 3rem;
            font-size: 1.2rem;
            line-height: 1.0;
        }

            .sidebar .sidebar-header .sidebar-header-toolbar > div {
                padding-top: 0.25rem;
            }

        .sidebar .sidebar-header .sidebar-header-sidebar-header-toolbar .title-box {
            float: left;
            font-size: 1.2rem;
        }


    .sidebar .sidebar-body {
        height: calc(100% - 5.5rem);
        padding: 0.5rem 0.5rem 3.5rem 0.5rem;
        overflow-y: scroll;
        border-right: 1px solid lightgray;
    }

    .sidebar .sidebar-footer {
        position: absolute;
        width: 100%;
        margin: 0rem;
        padding: 0rem;
        bottom: 0;
        height: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(rgba(255,255,255,0) 0, #fff 5rem);
        text-align: center;
    }

        .sidebar .sidebar-footer .sidebar-body-top {
            position: relative;
            background: lightgray;
            opacity: 0.6;
            border-radius: 5px;
            width: 10rem;
        }

        .sidebar .sidebar-footer .main-body-top a {
            display: block;
            text-decoration: none;
        }

    .sidebar .list-group {
        margin-bottom: 0.75rem;
    }

    .sidebar .list-group-area {
        margin-bottom: 0.25rem;
    }

    .sidebar .list-group-item {
        border-color: gray;
        user-select: none;
        padding: 0.5rem 0.25rem;
    }

        .sidebar .list-group-item .fas {
            margin-right: 0.25rem;
        }

    /* list-group直下のタイトル用 */
    .sidebar .list-group-item-group-title {
        background-color: lightgray;
    }

        .sidebar .list-group-item-group-title > .box-title {
            float: left;
        }

        .sidebar .list-group-item-group-title > .box-help {
            float: right;
        }


    /* マイポイント */
    .sidebar .list-group-item-mypoint {
        padding: 0rem;
        cursor: pointer;
        display: flex;
        flex-flow: column;
    }

        .sidebar .list-group-item-mypoint .box-content {
            width: 100%;
        }

        .sidebar .list-group-item-mypoint .head {
            width: 100%;
            height: 100%;
            background-color: #dee2e6;
            display: inline-block;
            border-bottom: 1px solid lightgray;
        }

            .sidebar .list-group-item-mypoint .head .title {
                padding-left: 0.25rem;
                float: left;
            }

            .sidebar .list-group-item-mypoint .head .update {
                padding-right: 0.25rem;
                float: right;
            }

        .sidebar .list-group-item-mypoint .status {
            padding: 0.25rem;
        }


        .sidebar .list-group-item-mypoint .box-icon {
            float: right;
        }

            .sidebar .list-group-item-mypoint .box-icon img {
                height: 3rem;
                vertical-align: text-bottom;
            }

        .sidebar .list-group-item-mypoint .box-title {
            float: left;
        }

        .sidebar .list-group-item-mypoint .box-datetime {
            float: right;
            display: none;
        }

        .sidebar .list-group-item-mypoint .box-status {
            float: left;
            padding: 0rem 0.25rem !important;
        }

    .sidebar .autoreload {
        display: block;
    }

    .sidebar .newdata {
        animation: newdata 5s ease 1s infinite forwards;
        padding: 0.25rem 0.5rem;
        border-radius: 3px;
    }

@keyframes newdata {
    0% {
        background-color: #0073CE;
    }

    50% {
        background-color: #ff6a00;
    }

    100% {
        background-color: #0073CE;
    }
}




/* お知らせ枠 */
.body-news {
    /*    min-width: 750px;
    max-width: 950px;*/
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    margin-bottom: 0.5rem;
}

    .body-news .list-group-item-news-header {
        display: flex;
        padding: 0.25rem;
    }

        .body-news .list-group-item-news-header .box-title {
            margin-right: 5rem;
        }

        .body-news .list-group-item-news-header .box-buttons {
        }

    .body-news .list-group-item-news-body {
        padding-left: 0.5rem;
        padding-bottom: 0.25rem;
    }

/* 説明・判例枠 */
.body-explain {
    /*    min-width: 750px;
    max-width: 950px;*/
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    margin-bottom: 0.5rem;
}

.body-notice {
    /*    min-width: 750px;
    max-width: 950px;*/
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    margin-bottom: 0.5rem;
}

.body-toolbar {
    /*    min-width: 750px;
    max-width: 950px;*/
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    margin-bottom: 0.5rem;
}

.body-contents {
    margin: 0rem 0rem 0.5rem 0rem;
    box-sizing: border-box;
    width: auto;
}

/*.body-tablecontents {
    min-width: 750px;
    max-width: 950px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}*/

.body-tablecontents {
    max-width: none !important;
    margin: 0rem 0rem 0.5rem 0rem;
    overflow: auto;
}


/* 標準枠 */
.body-box-normal {
    width: 100%;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    background-color: white;
    border: 1px solid transparent;
    border-radius: 3px;
    height: auto;
    overflow: hidden;
    /***/
    /*    display: inline-block;
    box-sizing: border-box;*/
}

.body-box-border {
    width: 100%;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 3px;
    height: auto;
    overflow: hidden;
    /***/
    /*    display: inline-block;
    box-sizing: border-box;*/
}


/* 標準枠 */
.body-box-tabpanel {
    width: 100%;
    padding: 0.0rem 0.0rem 0.5rem 0.0rem;
    border: none;
    border-bottom: 1px solid lightgray;
    height: auto;
    overflow: hidden;
    /***/
    /*    display: inline-block;
    box-sizing: border-box;*/
}

.body-box-scroll {
    width: 100%;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 3px;
    height: auto;
    overflow-x: auto;
    /***/
    /*    display: inline-block;
    box-sizing: border-box;*/
}

/* ニュース枠 */
.body-box-news {
    width: 100%;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    background-color: #dcf9ff;
    border: 1px solid lightgray;
    border-radius: 3px;
    height: auto;
    overflow: hidden;
    /***/
    /*    display: inline-block;
    box-sizing: border-box;*/
}

/* 説明・判例枠 */
.body-box-explain {
    width: 100%;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    background-color: linen;
    border: 1px solid lightgray;
    border-radius: 3px;
    height: auto;
    overflow: hidden;
    /***/
    /*    display: inline-block;
    box-sizing: border-box;*/
}

/* 簡易操作説明枠 */
.body-box-notice {
    width: 100%;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    background-color: #ffc107;
    border: 1px solid lightgray;
    border-radius: 3px;
    height: auto;
    overflow: hidden;
    /***/
    /*    display: inline-block;
    box-sizing: border-box;*/
}

    .body-box-notice .fas {
        margin-left: 0.25rem;
        margin-right: 0.5rem;
    }



/* 標準枠 */
.body-box-thin {
    /* margin-left: 0.25rem; */
    /* margin-right: 0.25rem; */
}

/* テーブル用 */
.body-box-table {
    margin-left: 0rem;
    margin-right: 0rem;
    margin-bottom: 0rem;
    /***/
    display: inline-block;
    box-sizing: border-box;
}

/* テーブル用 */
.body-box-list-group {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    margin-bottom: 0.5rem;
    /***/
    display: inline-block;
    box-sizing: border-box;
}




.table-excess-legend {
}

    .table-excess-legend > tbody > tr > td {
        padding: 0.25rem;
        word-break: break-all;
        word-wrap: break-word !important;
    }

    .table-excess-legend td:nth-of-type(1) {
        width: 8rem;
        text-align: left;
        vertical-align: top;
    }

    .table-excess-legend td:nth-of-type(2) {
        width: auto;
        text-align: left;
        vertical-align: top;
    }





/* 地区・市町一覧 */
.table-areacity {
    height: fit-content;
    width: 100%;
    margin-bottom: 0.5rem;
    vertical-align: top;
}

    .table-areacity > tbody > tr {
    }

        .table-areacity > tbody > tr > td {
            padding: 0rem 0.25rem;
            vertical-align: top;
        }

            .table-areacity > tbody > tr > td:first-child {
                padding-left: 0rem !important;
            }

            .table-areacity > tbody > tr > td:last-child {
                padding-right: 0rem !important;
            }


    .table-areacity .list-group-item {
    }

        .table-areacity .list-group-item .box-group {
            display: inline-block;
        }

        .table-areacity .list-group-item .box-group-title {
            width: 15rem;
            margin-right: 5rem;
        }

        .table-areacity .list-group-item .box-group-dosya {
            width: 8rem;
            margin-right: 5rem;
        }

        .table-areacity .list-group-item .box-group-hanransuii {
            width: 8rem;
            margin-right: 5rem;
        }

        .table-areacity .list-group-item .box-group-suii {
            width: 8rem;
            margin-right: 5rem;
        }




    .table-areacity .list-group-item-header {
        background-color: lightgray;
        line-height: 2.0;
    }

        .table-areacity .list-group-item-header .box-group-title {
            float: left;
        }

        .table-areacity .list-group-item-header .box-group-excess {
            width: 8rem;
            float: right;
            text-align: right;
        }

    .table-areacity .list-group-item-area-title {
        background-color: #f1f1f1;
    }

    /* 全体の超過状況 */
    .table-areacity .list-group-item-excess {
        padding-top: 0.75rem !important;
    }

        .table-areacity .list-group-item-excess > div {
            margin-bottom: 0.5rem;
            height: 1.5rem;
        }

        .table-areacity .list-group-item-excess .box-title {
            float: left;
        }

        .table-areacity .list-group-item-excess .box-status {
            float: right;
        }

        .table-areacity .list-group-item-excess .box-subtitle {
            float: left;
        }

        .table-areacity .list-group-item-excess .box-datetime {
            float: right;
        }



/*** メイン **********************************************/
.main {
    height: 100%;
    padding: 0rem;
    display: flex;
    flex-direction: column;
    width: 100%; /*calc(100vw - 20px);*/
}


    .main .list-group-item {
        padding: 0.25rem;
    }

    /* ヘッダ */
    .main .main-header {
        width: 100%;
        margin: 0rem;
        padding: 0rem;
        user-select: none;
        height: 3.5rem;
        z-index: 1000;
        background-color: #f8f9fa !important;
        border-bottom: 1px solid lightgray;
        display: flex;
    }

        /* パンくずリスト関連 *********************************************/
        .main .main-header .breadcrumb {
            display: block;
            width: 100%;
            margin: 0rem;
            color: black;
            user-select: none;
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1.2;
        }

        /* ヘッダ */
        .main .main-header .main-header-titlebar {
            width: 100%;
            color: black;
            background-color: #aed5fd;
            padding: 0.25rem;
            height: 3.5rem;
            display: inline-block;
        }

            .main .main-header .main-header-titlebar .title-box {
                float: left;
            }

                .main .main-header .main-header-titlebar .title-box img {
                    height: 20px;
                    vertical-align: text-bottom;
                }

        .main .main-header .main-header-toolbar {
            height: 3.0rem;
            color: black;
            padding: 0.5rem 0.75rem;
        }

            .main .main-header .main-header-toolbar .title-box {
                float: right;
            }



    .main .scroll-all {
        overflow: scroll !important;
    }

    .main .main-body {
        width: 100%; /* calc(100vw - 20px);*/
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        display: flex;
        flex-direction: column;
    }


        .main .main-body .list-group {
            width: 100%;
            padding: 0px;
            /*border-radius: 0px;*/
        }

    .main .main-footer {
        position: fixed;
        width: calc(100vw - 20px);
        margin: 0rem;
        padding: 0rem;
        bottom: 0;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(rgba(255,255,255,0) 0, #fff 5rem);
        text-align: center;
    }

        .main .main-footer .main-body-top {
            position: relative;
            background: lightgray;
            opacity: 0.6;
            border-radius: 5px;
            width: 20rem;
        }

            .main .main-footer .main-body-top a {
                display: block;
                text-decoration: none;
            }




/*** マイポイント **********************************************/
.dialog-setup-mypoint {
}

    .dialog-setup-mypoint .table-body-frame {
        width: 100%;
    }

        .dialog-setup-mypoint .table-body-frame > tbody > tr {
        }

            .dialog-setup-mypoint .table-body-frame > tbody > tr > td {
                padding: 0.25rem;
            }


    .dialog-setup-mypoint .dialog-setup-mypoint-legend {
        width: 100%;
        table-layout: fixed;
        margin-bottom: 1rem;
    }

        .dialog-setup-mypoint .dialog-setup-mypoint-legend > tbody > tr {
        }

            .dialog-setup-mypoint .dialog-setup-mypoint-legend > tbody > tr > td {
                border: 1px solid lightgray;
                padding: 0.25rem;
                text-align: center;
            }

                .dialog-setup-mypoint .dialog-setup-mypoint-legend > tbody > tr > td > img {
                    width: 20px;
                }

    .dialog-setup-mypoint .dialog-setup-mypoint-setting {
        width: 100%;
        table-layout: fixed;
        margin-bottom: 1rem;
    }

        .dialog-setup-mypoint .dialog-setup-mypoint-setting > tbody > tr {
        }

            .dialog-setup-mypoint .dialog-setup-mypoint-setting > tbody > tr > td {
                border: 1px solid lightgray;
                padding: 0.25rem;
                text-align: center;
                background-color: white;
            }



/* お知らせ　*/
.main .table-news {
    height: fit-content;
    width: 100%;
    margin-bottom: 0.5rem;
}

    .main .table-news > tbody > tr > td {
        width: 32%;
        padding: 0rem 0.25rem;
        vertical-align: top;
        height: 100%;
    }


.body-width-limit {
    /*    min-width: 900px !important;
*/ /*    max-width: 1000px !important;
*/
}


.table > :not(caption) > * > * {
    padding: 0.25rem 0.25rem;
}

.tablesorter-default {
    margin: initial;
}

.tablesorter-headerUnSorted {
    background-image: url('img/sort_noselect2.png') !important;
    background-repeat: no-repeat;
    background-position: bottom center !important;
}

.tablesorter-headerAsc {
    background-image: url('img/sort_up2.png') !important;
    background-repeat: no-repeat;
    background-position: bottom center !important;
}

.tablesorter-headerDesc {
    background-image: url('img/sort_down2.png') !important;
    background-repeat: no-repeat;
    background-position: bottom center !important;
}


fontsize-075 {
    font-size: 0.75rem;
}