/*
Theme Name: SOURCE Child
Theme URI: https://tcd-theme.com/tcd045
Template: source_tcd045
Author: TCD
Author URI: https://tcd-theme.com/
Description: "SOURCE" is a WordPress theme developed to increase the closing rate for web services. This made for online business mainly, so you can put your strengths and achievements on a single page, and compare plans with an easy-to-read price list.
Version: 1.11.1712290603
Updated: 2024-04-05 13:16:43

*/

:root {
    --main-color: black;
    --home-button: #0D56B3 ;
    --even-row-color: #E7E9EB;
    --max-width: 440px ;
}

.aqms_login {
    --main-color: #0D56B3 ;
}

.aqms_monitor {
    --main-color: #0D56B3 ;
    --header-color: #7E8B94;
    --datetime-color: #DEF2FC;
}

.aqms_health {
    --main-color: #0D56B3 ;
    --header-color: #7E8B94 ;
}

.aqms_notice {
    --main-color: #1CA6CD;
    --header-color: #7E8B94;
    --row-color: #E7E9EB;
    --save-message: #44B979;
    --send-message: #E87D0F;
}

.aqms_staff {
    --main-color: #316992;
    --header-color: #7E8B94 ;
    --title-color: #0D56B3 ;
    --datetime-color: #DEF2FC ;
}

.aqms_ammonia {
    --main-color: #666BB4 ;
    --header-color: #7E8B94 ;
    --home-color: #0D56B3 ;
    --even-row-color: #E7E9EB ;
    --ammonia-color1: #E8E5C4;
    --ammonia-color2: #CBCBBE;
    --ammonia-color3: #C1CEB5;
    --ammonia-color4: #A9BEC3;
    --ammonia-color5: #8BB1C3;
    --ammonia-color0: red ;
}


.pc_none {
    @media screen and (min-width: 440px) {
        display: none ;
    }
}
.mb_none {
    @media screen and (max-width: 440px) {
        display: none ;
    }
}

.homeButtonDiv {
    display: flex ;
    justify-content: center ;
    margin-top: 40px ;
}
.homeButton {
    background-color: var(--home-button) ;
    color: white ;
}

/** ヘッダ **/
.aqms_pc_logo {
    transform: scale(0.7);
    display: block ;
}
.aqms_mobile_logo {
    display: none ;
    width: 40px ;
    position: relative ;
    top: 5px ;
}

@media screen and (max-width: 480px) {
    .aqms_pc_logo {
        display: none ;
    }
    .aqms_mobile_logo {
        display: block ;
    }
}

.aqms_header {
    @media screen and (max-width: 470px) {
        img {
            width: 80% ;
        }
    }
}

.aqms_header_button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) ;
    z-index: 30;
    border-radius: 10px;
    padding: 10px;
    color: white;
    font-size: 1.3em ;
    text-decoration: none ;
    padding: 10px 20px ;
    a:hover {
        text-decoration: none ;
    }
}

.aqms_header_button:hover {
    text-decoration: none ;
}

/*** ログイン画面 ***/
.aqms_login {
    .login_bunner {
        align-content: center;
        text-align: center;
        img {
            margin: 0;
        }
    }
    h2 {
        margin: 0 auto !important;
        padding: 0 !important;
        color: var(--main-color);
    }
    .loginBlock {
        margin: 0 auto;
        align-content: center;

        #wpmem_login {
            margin: 0 auto;

            legend {
                display: none;
            }
        }
    }
    .loginRow {
        display: flex ;
    }
    .loginRow > div {
        margin: 0 auto;
        display: grid ;
        grid-template-rows: auto auto;
        grid-template-columns: 2fr 5fr 1fr ;
        @media screen and (max-width: 720px) {
            grid-template-columns: 5fr 1fr;
        }
        > label:first-child {
            align-content: center ;
            grid-column: 1 ;
            @media screen and (max-width: 720px) {
                grid-column: 1 / -1 ;
            }
        }
        > div:first-of-type {
            grid-column: 2;
            @media screen and (max-width: 720px) {
                grid-column: 1 ;
            }
        }
        > label:last-child {
            grid-column: 3 ;
            @media screen and (max-width: 720px) {
                grid-column: 2 ;
                margin-bottom: 15px ;
            }
        }
        > * {
            @media screen and (min-width: 720px) {
                margin: 10px 5px 10px 5px !important;
            }
        }
    }
    .loginRow:has(.userid_label) {
        .password_icon {
            /*display: none ;*/
            opacity: 0 ;
        }
    }
    .toggle_password {
        /*width: 30px;*/
        /*height: 30px;*/
        /*vertical-align: middle;*/

        input[type="checkbox"] {
            display: none;
        }

        .password_icon {
            width: 30px;
            height: 30px;
            background-size: cover;
            position: relative ;
            top: 50% ;
            transform: translateY(-50%) ;
        }
    }
    .toggle_password:not(:has(input:checked)) .password_icon {
        background-image: url('https://suishitsu.kakawari.net/wp-content/uploads/2024/10/icon_view_password.png');
    }
    .toggle_password:has(input:checked) .password_icon {
        background-image: url('https://suishitsu.kakawari.net/wp-content/uploads/2024/10/icon_hidden_password.png');
    }
    .loginButton {
        display: flex;
        margin-top: 30px ;
    }
    
    .loginButton>div {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap ;
        justify-content: center ;
        >label:first-of-type {
            align-content: center;
        }
        > * {
            margin: 0 !important;
        }
        input[type="submit"] {
            border-radius: 15px;
            background-color: var(--home-button);
            color: white;
            border: none;
            padding: 10px 30px ;
            flex-basis: 50% ;
        }
    }
}
/* ホーム画面 */
.home_body {
    display: flex ;
    justify-content: center;
    flex-wrap: nowrap;
    margin-top: 3em ;
    .home_item {
        border-radius: 10px ;
        color: white ;
        display: grid ;
        grid-template-rows: 1fr 1fr 1fr;
        width: 10em ;
        height: 14em ;
        margin: 0 5px ;
        text-align: center ;
        transition: all 0.5s ;
        h3 {
            font-size: 1.3em ;
            margin-top: 0.8em ;
            line-height: 1.4em ;
        }
        span {
            margin: 15px auto ;
            text-align: center ;
            font-size: 0.7em ;
            line-height: 1.5em ;
        }
        img {
            width: 50px ;
        }
    }
    @media screen and (max-width: 480px) {
        .home_item {
            width: 130px ;
            height: 150px ;
            grid-template-rows: 1fr ;
            h3 {
                display: none ;
            }
            span {
                display: none ;
            }
            div {
                align-content: center ;
                img {
                    width: 100px ;
                }
            }
        }
    }
    .home_item:hover {
        opacity: 0.8 ;
        transform: scale(1.05) ;
    }
}
@media screen and (max-width: 480px) {
    .home_body {
        flex-wrap: wrap ;
        .home_item {
            margin-bottom: 5px ;
        }
    }
}

.naviButtonDiv {
    margin-top: 30px ;
}

.naviButtons {
    display: flex ;
    width: 100% ;
}

/* TCDテーマオプションに指定しているＣＳＳ */
.menu_header {
    background-color: #0055BE;
    height: 20vh;
    align-content: center;
    align-items: center;
    text-align: center;
}

.menu_header h1 {
    font-size: 3rem;
    color: white;
    font-weight: bold;
}

.menu_item {
    transition: all .5s;
    justify-content: space-between;
    border-radius: 100px;
    width: 70%;
    cursor: pointer;
    font-weight: bold;
    background-color: #fff;
    border: 2px solid #0055BE;
    color: #0055BE;
    font-size: 2rem;
    display: flex;
    align-items: center;
    letter-spacing: 0.1em;
    margin: 0 auto 40px;
    padding: 0 10px 0 20px;
}

.menu_button2 {
    justify-content: space-between;
    width: 70%;
    cursor: pointer;
    font-weight: bold;
    transition: all .5s;
    padding: 0px 10px 0px 20px;
    border-radius: 100px;
    background-color: #0055BE;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: #ffffff;
    letter-spacing: 0.1em;
    margin: 0 auto 40px;
}

.menu_button2:hover {
    background-color: #0055BE;
}

.menu_button2>img {
    display: flex;
    transition: transform .3s ease-in-out;
}

.menu_button:hover img {
    transform: translateX(-5px);
}

.menu_button2:active {
    transform: scale(0.95);
}

.grey_btn {
    justify-content: center;
    width: 70%;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 4px;
    background-color: #fff;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: #333;
    letter-spacing: 0.1em;
    transition: .3s;
    margin: 0 auto 40px;
    align-content: center;
}

.grey_btn span {
    padding: 0 10px;
}

.grey_btn:hover {
    background-color: #ccc;
    transition: .3s;
}

img {
    margin-right: 5px;
}

.link_btn {
    justify-content: space-between;
    width: 70vw;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 4px;
    background-color: #fff;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: #333;
    letter-spacing: 0.1em;
    transition: .3s;
    margin: 0 auto 40px;
    align-content: center;
}

.grey_btn span {
    padding: 0 10px;
}

.grey_btn:hover {
    background-color: #ccc;
    transition: .3s;
}

img {
    margin-right: 5px;
}

.content_item {
    transition: all .5s;
    justify-content: space-between;
    width: 70vw;
    cursor: pointer;
    font-weight: bold;
    background-color: #fff;
    color: #0055BE;
    padding: 14px 16px 14px 20px;
    font-size: 2rem;
    display: flex;
    align-items: center;
    letter-spacing: 0.1em;
    margin: 0 auto 40px;
}


.menu_list {
    transition: all .5s;
    justify-content: space-between;
    border-radius: 100px;
    width: 70vw;
    cursor: pointer;
    font-weight: bold;
    background-color: #fff;
    border: 2px solid #0055BE;
    color: #0055BE;
    padding: 0 10px 0 20px;
    font-size: 2rem;
    letter-spacing: 0.1em;
    margin: 0 auto 40px;
}

.menu_header {
    background-color: #0055BE;
    height: 20vh;
    align-content: center;
    align-items: center;
    text-align: center;
}

.menu_header h1 {
    font-size: 3rem;
    color: white;
    font-weight: bold;
}

.menu_body {
    width: 80vw;
    margin: 2vh auto;
    text-align: center;
    align-content: center;
}

.menu_button2 span {
    margin-left: 5vw;
    padding: 1.2rem;

}

.menu_item span {
    margin-left: 5vw;
    padding: 1.2rem;
}

.menu_item a {
    display: block;
    text-decoration: none;
}

.menu_item a:hover {
    color: #0055BE;
    text-decoration: none;
}

.menu_item a:visited {
    color: #0055BE;
    text-decoration: none;
}

.menu_list {
    text-align: left;
}

.list_title {
    margin-left: 5vw;
}

.list_wrapper li {
    margin-left: 5vw;
    list-style: none;
}

.menu_list a {
    display: block;
    text-decoration: none;
}

.menu_list a:hover {
    color: #0055BE;
    text-decoration: none;
}

.menu_list a:visited {
    color: #0055BE;
    text-decoration: none;
}
.content_header {
    align-content: center;
    align-items: center;
    text-align: center;
    img {
        width: 50px ;
    }
    span {
        color: var(--main-color);
        font-weight: bold ;
        font-size: 2.5em;
    }
    hr {
        width: 90vw ;
        border: none ;
        border-top: 2px solid var(--main-color);
        margin: 10px ;
        position: absolute ;
        left: 0;
        transform: translateX(5vw);
    }
}

.content_header h1 {
    font-size: 3rem;
    color: #0055BE;
    font-weight: bold;
}

.content_body {
    margin: 2vh auto;
    text-align: center;
    align-content: center;
    hr {
        width: 100% ;
        border: none;
        border-top: 2px dashed var(--main-color);
        margin: 10px;
    }
}

.aqms_monitor .conent_body p {
    color: var(--main-color) ;
    font-weight: bold ;
}
.aqms_notice .content_body p {
    color: var(--main-color);
    font-weight: bold ;
    @media screen and (max-width: 430px) {
        text-align: left ;
        padding-left: 1em ;
    }
}

.aqms_health .content_body p {
    color: var(--main-color) ;
    font-weight: bold ;
}

.content_body h2 {
    font-size: 2rem;
    font-weight: bold;
}

.content_item {
    transition: all .5s;
    justify-content: space-between;
    width: 70vw;
    cursor: pointer;
    font-weight: bold;
    background-color: #fff;
    color: #0055BE;
    padding: 0 10px 0 20px;
    font-size: 2rem;
    display: flex;
    align-items: center;
    letter-spacing: 0.1em;
    margin: 0 auto 40px;
}

.link_btn span {
    margin-left: 5vw;
    padding: 1.2rem;
}

footer {
    position: sticky;
    top: 100vh;
    background-color: #fff;
}

.menu_body h3 {
    font-size: 3rem;
    font-weight: bold;
}

.menu_body hr {
    border-top: 6px dotted #0055BE;
    margin: 90px 25px;
}

.content_body iframe {
    border: 0;
    position: relative;
    left: -40px;
}

.confirmArea {
    width: 100%;
    font-size: 1.5rem;
    font-weight: bold;
}

.colorSpan {
    width: 10vw;
    height: 1.2em;
    border: 1px solid #cccccc;
    display: inline-block;
    align-content: center;
    vertical-align: sub;
}

.confirmMessage {
    margin-bottom: 30px;
    line-height: 0;
}

.confirmMessage p {
    margin: 0 auto;
    line-height: 1rem;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    padding: 10px;
}

.historyTable {
    border: 2px solid #0055BE;
    font-size: 2rem;
}

.historyTable:is(tr, th, td) {
    border: 2px solid #0055BE;
}

.healthTable {
    border: 2px solid #0055BE;
    font-size: 2rem;
}

.healthTable :is(tr, th, td) {
    border: 2px solid #0055BE;
    padding: 10px 20px 10px 20px;
}

.healthTable thead th {
    background-color: #DCF0FB;
}

.healthTable tbody th {
    background-color: #CDFFD2;
}

.healthTable tbody td:not(:empty) {
    background-color: #4BfD5D;
}

.alert {
    color: white;
    background-color: #FF1717 !important;
}

.healthTable tr:has(.alert) .areaName {
    border: 2px double #FF1717 !important;
    background-color: #FF1717 !important;
    color: white;
}

.areaSeparator {
    border-left: 2px solid #DEF2FC ;
    margin: 0 3em;
}

/*
 * 総合モニタ画面用CSS
 */
.aqms_monitor {
    .content_body >div:first-of-type {
        span p {
            font-size: 1em ;
            color: var(--main-color) ;
            font-weight: bold ;
            text-align: left ;
        }
    }
    .content_body >div:nth-of-type(2) {
        margin-top: 30px ;
        color: var(--header-color) ;
        text-align: left ;
        font-weight: bold ;
        h4 {
            font-size: 1.3em ;
            text-align: left ;
        }
        p {
            color: black ;
        }
    }
}

:is(.graphList, .graphList2) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: clip;
    .graphDiv {
        .canvas_overlay {
            z-index: 10;
            width: 100%;
            height: 100%;
            position: relative;
            opacity: 0.5;
            background-color: white;
            top: -350px;
            display: none ;
        }
    
        .loading_symbol {
            position: absolute;
            width: 30px;
            height: 30px;
            top: calc(50% - 15px);
            left: calc(50% - 15px);
            border: 10px solid #0866BE;
            border-top: 10px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @media screen and (min-width: 360px) {
            width: 600px;
            height: 350px;
        }
        margin: 2em 0;
        /*transform: scale(0.6) ;*/
        /*transform-origin: top left ;*/
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
:is(.graphList, .graphList2) >div {
    margin-top: 1.5em;
}

:is(.graphList, .graphList2) h2 {
    background-color: #0055BE;
    color: white;
    font-weight: bold;
    padding: 1.3em;
    font-size: 1.5em;
    letter-spacing: 0.2em;
    margin-top: 0;
    @media screen and (max-width: 430px) {
        text-align: left ;
    }
}

:is(.graphList, .graphList2)>p {
    font-size: 3em;
    font-weight: bold;
    margin: 1em auto 0;
}

.poolList {
    display: flex;

    >div {
        margin: 1em;
    }
}

.poolList h3 {
    font-size: 1.5em;
    margin-top: 2em;
    text-align: left;

    +hr {
        border: 1px solid grey !important;
        margin: 2em auto !important;
    }
}

.selector_area {
    margin-bottom: 0;
    background-color: white;
    position: absolute;
    z-index: 20;
    top: 30vh;
    width: 900px ;
    left: calc(50vw - 450px);
    @media screen and (max-width: 430px) {
        width: 100%;
        left: 0 ;
        top: 0 ;
    }
    >div {
        margin: 2vh 5vw ;
        width: calc(100% - 10vw);

        >div:first-child {
            background-color: #0055BE;
            color: white;
            font-weight: bold;
        }

        >div:last-child {
            text-align: left;
            font-weight: bold;
        }
    }
}

.selector_buttons {
    button {
        border: 1px solid #0055BE;
        border-radius: 100px;
        background-color: #0055BE;
        color: white;
        background-repeat: no-repeat;
        background-size: 20px auto;
        /* 画像のサイズ（幅 高さ）*/
        background-position: right 12px center;
        /* 画像の位置 */
        width: 10em;
        padding: 0.5em;
        padding-left: 1.5em;
        text-align: left;
        margin: 0 10px;
    }
}

#update_settings {
    background-image: url("https://suishitsu.kakawari.net/wp-content/uploads/2024/05/parts_02.png");
}

#close_pool_selector {
    background-image: url("https://suishitsu.kakawari.net/wp-content/uploads/2024/05/btn.png");
}

.select_all {
    button {
        border: 1.5px solid #888888;
        color: transparent;
        background: none;
        background-image: url("https://suishitsu.kakawari.net/wp-content/uploads/2024/05/parts_01.png");
        background-repeat: no-repeat;
        background-size: 20px auto;
        /* 画像のサイズ（幅 高さ）*/
        background-position: center;
        /* 画像の位置 */
        width: 28px;
        height: 28px;
    }
}

.kind_selector {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #cccccc;

    >div {
        padding: 1em 0;
    }
}

.kind_group {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 1.5em;
    > div {
        flex: 1 1 18%;
        max-width: 18%;
    }
}

.area_group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    >div {
        width: 100%;
        height: auto;
        padding: 1em 0;
        text-align: center;
        align-content: center;
    }

    >div:first-child {
        border-right: 1px solid #cccccc;
        font-weight: bold;
        width: 400px ;
        @media screen and (max-width: 430px) {
            width: none ;
        }
    }

    >div:nth-child(2) {
        width: 400px;
        @media screen and (max-width: 430px) {
            width: 120px ;
        }
    }

    >div:last-child {
        border-left: 1px dotted #cccccc;
        font-weight: bold;
        align-content: start;
        padding-left: 1em;
    }
}

.checkbox_line {
    text-align: left;
    line-height: 1.5em;
}

#configToolbar {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap ;
    font-weight: bold;
    justify-content: flex-start;
    margin: 50px auto;
}

#periodSelector {
    display: flex;
    align-items: center;
    margin: 0px 50px;
    @media screen and (max-width: 430px) {
        margin: 0 auto ;
    }

    >span {
        margin-right: 30px;
        @media screen and (max-width: 430px) {
            margin-right: 10px ;
        }
    }
}

#monitorHeader+hr {
    border-top: 3px ridge grey;
    width: 16em;
    margin: 10px auto;
}
.poolSelectArea {
    flex-basis: 100% ;
    @media screen and (max-width: 430px) {
        margin: 0 auto;
    }
}

.poolSelect {
    display: flex;
    font-weight: bold;
    border: 1px solid #aaaaaa;
    border-radius: 5px;
    background-color: var(--header-color);
    color: white ;
    padding: 5px 5px;
    align-items: center;
    width: 350px ;
    cursor: pointer ;
    @media screen and (max-width: 430px) {
        margin: 10px auto 0 ;
        font-size: 15px ;
        width: 320px ;
    }
}

.poolSelect>span {
    border: 6px solid transparent;
    border-left-color: black;
    position: relative;
    right: -9px;
    height: 0;
    width: 0;
    align-self: center;
}
#periodSelector>div {
    width: 10em;
    position: relative;
    background-color: var(--datetime-color);
}

#periodSelector select {
    appearance: none;
    padding: 1.0em 1.3em;
    border: none;
    background: none;
    width: 100%;
    font-weight: bold;
    border: 1px solid black ;
    cursor: pointer ;
}

#periodSelector>div::after {
    content: "";
    border: 7px solid transparent;
    border-top-color: var(--main-color);
    position: absolute;
    top: 50%;
    right: 10px;
    pointer-events: none;
}

.pool_checkbox_group {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

#pool_selector_area {
    background: none;
    z-index: 15;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.selector_back {
    background-color: #0055BE;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0.9;
}

.pool_selector {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 450px;
    overflow-y: scroll;
}

.pool_selector>div:nth-child(odd) {
    background-color: #eeeeee;
}

.pool_selector>div:nth-child(even) {
    background-color: white;
}

.pool_selector>div:first-child {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
}

.pool_selector>div {
    text-align: center;
}

#customPeriod {
    display: flex ;
    flex-direction: column ;
    flex-wrap: wrap ;
}

#customPeriod[inert] {
    opacity: 0.5 ;
}

#customPeriodTable {
    display: table;
    table-layout: fixed;
    width: 50% ;
    @media screen and (max-width: 430px) {
        width: 100% ;
    }
    tbody {
        display: table;
        table-layout: fixed;
    }
    tr .childer {
        width: 20px;
        font-weight: bold;
    }
    tr .unit {
        width: 30px;
        font-weight: bold;
    }
    tr :is(input, select) {
        width: 100%;
        background-color: var(--datetime-color);
        height: 40px;
        padding-left: 5px;
        cursor: pointer ;
    }
    tr :is(th, td) {
        /*border: 1px solid black ;*/
        width: 50px;
        padding: 5px 0;
    }
    tr th {
        width: 50px;
        padding-right: 10px;
        text-align: right;
        @media screen and (max-width: 430px) {
            padding-right: 5px ;
            text-align: center ;
            vertical-align: middle ;
        }
    }
    tr :is(th, td):first-child {
        width: 120px;
    }
    tr :is(th, td):last-child[rowspan] {
        width: 180px ;
        align-content: flex-start ;
    }
    tr :is(th, td):last-child div {
        padding: 12px 15px ;
        margin: 0 10px ;
        border-radius: 5px ;
        background-color: var(--header-color);
        color: white ;
        cursor: pointer ;
    }
    tr :is(th, td):has(span) {
        width: 30px ;
    }
    tbody td span {
        display: block;
        width: 15px;
        height: 15px;
        background-color: var(--header-color);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        transform: rotate(90deg);
    }
}
.customPeriodTitle {
    display: none ;
}
@media screen and (max-width: 430px) {
    #customPeriod {
        .customPeriodTitle {
            display: block ;
            margin-top: 10px ;
        }
        .customPeriodTitleTD {
            display: none ;
        }
    }
}
/* メッセージ作成画面用ＣＳＳ */
.messageFormBody {
    display: flex;
    justify-content: space-between;
    flex-direction: column ;
    > div {
        margin: 20px 0;
    }
}
.messageFormBody:has( .emptyParam) {
    .messageButtons {
        opacity: 0.5 ;
        pointer-events: none ;
    }
} 

#messageColumns {
    display: flex ;
    justify-content: space-between ;
    flex-wrap: wrap ;
}

.messageColumn>div {
    text-align: left;
    margin-bottom: 50px;
    padding: 5px ;
}
/*
.messageColumn :has(div:focus) {
    border: 1px dotted black ;
}
*/
.messageColumn>div:last-child {
    margin-bottom: 0;
}

.messageColumn {
    width: 48%;
    @media screen and (max-width: 430px) {
        width: 100% ;
    }
    /* PC */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .checkboxDiv {
        display: flex ;
        flex-direction: column ;
        > div {
            margin: 10px 0 ;
            display: flex ;
            align-items: flex-start ;
            > label {
                @media screen and (max-width: 430px) {
                    margin-left: 5px ;
                }
            }
        }
    }
}

#messageForm {
    h4 {
        font-size: 1em;
        text-align: left;
        margin: 0px 0 10px;
        color: var(--header-color) ;
    }
    h5 {
        font-size: 1em ;
        text-align: left;
        margin: 0px 0 10px ;
        color: var(--main-color) ;
        position: relative ;
        padding-left: 1em ;
    }
    h5::before {
        content: '' ;
        background-color: var(--main-color) ;
        display: inline-block ;
        width: 12px ;
        height: 12px ;
        position: absolute ;
        left: 0px ;
        top: 50% ;
        transform: translateY(-50%);
    }
    textarea {
        border-radius: 10px;
        width: 100%;
        resize: vertical;
        min-height: 20em;
    }
}

#messageForm :is(textarea, input, select) {
    background-color: #eeeeee;
    border-radius: 5px;
    border: 1px solid grey;
}

.messageColumn table {
    width: auto;
    border-collapse: separate;
    border-spacing: 10px;
}

.areaSelectorDiv {
    display: flex;
    flex-wrap: wrap ;
    >div {
            color: var(--header-color);
            font-weight: bold;
            align-content: center;
    }
}

#areaSelector {
    border: 1px solid var(--header-color);
    border-radius: 5px;
    background-color: var(--header-color);
    padding: 10px 15px;
    font-size: 1em;
    /*width: 40%;*/
    img {
        width: 1em ;
    }
    span {
        color: white ;
        @media screen and (max-width: 430px) {
            font-size: 15px ;
        }
    }
}

#selectedArea {
    font-size: 1em;
    /*width: 40%;*/
    padding: 10px 15px;
    text-align: left;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--header-color) ;
    font-weight: bold ;
}

.dialogBackground {
    z-index: 21;
    position: absolute;
    background-color: grey;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.dialogBackground+div {
    z-index: 22;
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 10px;
    width: 40vw;
    left: 20vw;
    top: 40vh;
    @media screen and (max-width: 430px) {
        width: 80vw ;
        left: 10vw ;
    }
}

#areaSelectorDialog {
    position: fixed ;
    inset: 0px ;
    z-index: 25;
}

#areaSelectorDialog h3 {
    background-color: #0055BE;
    color: white;
    font-size: 1.2em;
    height: 1.5em;
    align-content: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#areaSelectorDialog div:last-child {
    margin: 2px auto;
}

.areaList {
    text-align: left;
    padding: 10px;
    height: 10em;
    overflow-y: scroll;
    overflow-y: clip ;
}

.areaList div {
    background-color: #fff;
    color: black;
    font-weight: bold;
    padding: 5px;
}

.areaList>div:has(input:checked) {
    background-color: rgb(220, 240, 251);
}

.areaList>div {
    position: relative;
}

.areaList>div:hover {
    border: 1px solid #0055FE;
    opacity: 0.8;
}

.areaList>div>label {
    width: 100%;
    position: absolute;
}

#sendFinishDialog {
    position: fixed ;
    z-index: 25 ;
    inset: 0 ;
    .sendFinishDialogBody {
        width: 30vw ;
        @media screen and (max-width: 430px) {
            width: 80vw ;
        }
        > div:first-child {
            background-color: #0055BE ;
            color: white ;
            font-size: 1.3em ;
            padding: 5px ;
            border-top-left-radius: 10px ;
            border-top-right-radius: 10px ;
        }
        div:has( p) {
            height: 7em  ;
            align-content: center ;
            p {
                color: black !important;
                font-size: 1.2em ;
            }
        }
    }
}

#dateSettings:has(#omitDate:checked) {
    #dateSelector {
        opacity: 0.5 ;
        pointer-events: none ;
    }
}
#dateSelector :is(input) {
    width: 145px ;
    @media screen and (max-width: 430px) {
        width: 125px ;
    }
}
#dateSelector :is(input, select) {
    padding: 10px;
    @media screen and (max-width: 430px) {
        padding: 0 ;
    }
    height: 3em;
    vertical-align: middle;
}
/*
#dateSelector :has(input:disabled) {
    opacity: 0.5;
}
*/
.messageButtons {
    display: flex;
    justify-content: space-evenly;
    @media screen and (max-width: 430px) {
        .messageButton {
            width: 60px ;
            flex-direction: column;
        }
    }
}

.messageButton {
    border-radius: 10px;
    width: 25%;
    padding: 1em;
    display: flex;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    align-items: center ;
    img {
        width: 1.5em ;
        @media screen and (max-width: 430px) {
            margin-right: 0;
            margin-bottom: 3px ;
        }
        /*
        position: relative ;
        top: 50% ;
        transform: translateY(-50%);
        */
    }
    @media screen and (max-width: 430px) {
        width: 300px ;
    }
}

.sendMessage {
    background-color: var(--send-message);
    color: white;
}

.saveMessage {
    background-color: var(--save-message);
    color: white;
}
.deleteMessage {
    background-color: var(--header-color) ;
    color: white ;
}

.messageIcon {
    background-color: white;
    border-radius: 100%;
    width: 1em;
    height: 1em;
    color: inherit;
}

.messageIcon span {
    color: inherit;
    position: relative;
    top: -2px;
}

.trashboxDiv {
    display: flex ;
    justify-content: flex-start;
    margin-top: 20px ;
    p {
            color: black !important;
            font-weight: bold;
            margin-left: 1em;
            align-content: center;
            text-align: left ;
    }
}

#trashbox {
    border: 1px solid var(--header-color);
    border-radius: 5px;
    background-color: var(--header-color);
    padding: 10px 15px;
    font-size: 1em;
    /*width: 40%;*/
    img {
        width: 1em;
        @media screen and (max-width: 430px) {
            margin: 0 auto ;
            width: 30px ;
        }
    }

    span {
        color: white;
    }
    @media screen and (max-width: 430px) {
        span {
            display: none ;
        }
    }
}

.aqms_notice {
    .messageButton {
        @media screen and (max-width: 430px) {
            span {
                display: none ;
            }
        }
    }
}

#messageList :not(:has(input:checked)) {
    .trashboxDiv {
        opacity: 0.3 ;
        pointer-events: none;
    }
}

#messageList h2 {
    text-align: center;
    font-size: 2em;
    color: #0055FE;
    margin-bottom: 1.2em;
}

#messageTableDiv {
    max-height: 20em ;
    overflow-y: scroll ;
    overflow-x: hidden ;
    @media screen and (max-width: 430px) {
        overflow-x: scroll ;
    }
}

#messageList table {
    width: 100%;
    table-layout: fixed;
    thead th {
        position: sticky ;
        top: 0 ;
        background-color: var(--header-color);
        z-index: 10 ;
    }
    /*
    tbody {
        display: block ;
        max-height: 20em ;
        overflow-y: scroll ;
        overflow-x: hidden ;
    }
    */
    thead tr, tbody tr {
        display: table ;
        width: 100% ;
        table-layout: fixed ;
    }
    thead {
        /*width: calc(100% - 1em - 1px) ;*/
        position: sticky ;
        top: 0 ;
        left: 0 ;
        z-index: 20 ;
        th {
            text-align: center !important ;
            color: white ;
        }
        th:first-child {
            background-color: var(--header-color) ;
            z-index: 21 ;
        }
    }
    th, td {
        border: 1px dotted black ;
        border-bottom: none ;
    }
    :is(th, td):first-child {
        border-left: none ;
    }
    :is(th, td):last-child {
        border-right: none ;
    }
}

#messageList table tr {
    padding: 10px 10px;
    height: 3em;
    background-color: white ;
}

#messageList table tr:nth-child(even) {
    background-color: #eeeeee;
}

#messageList table :is(th, td) {
    padding: 10px 10px;
    align-content: center;
}

/* 削除チェックボックス */
#messageList table :is(th, td):nth-child(1) {
    width: 20px;
    padding: 0;
    position: sticky ;
    left: 0 ;
    background-color: inherit ;

    label {
        width: 100%;
        height: 100%;
        display: block;
        align-content: center;
    }
}
/* 送信時間 */
#messageList table :is(th, td):nth-child(2) {
    width: 120px;
}
/* 送信先 */
#messageList table :is(th, td):nth-child(3) {
    width: 150px;
    text-align: left;
}
/* 完了報告要否 */
#messageList table :is(th, td):nth-child(4) {
    width: 75px;
    padding: 10px 5px ;
}
/* メッセージ本文 */
#messageList table :is(th, td):nth-child(5) {
    width: 360px;
    max-width: 360px ;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
/* 状態 */
#messageList table :is(th, td):nth-child(6) {
    width: 75px;
    padding: 10px 0 ;
}
/* 表示日時 */
#messageList table :is(th, td):nth-child(7) {
    width: 130px;
    text-align: left;
}

.messageStatus {
    border-radius: 100px;
    font-weight: bold;
    font-size: 0.9em;
    padding: 5px 16px;
    @media screen and (max-width: 430px) {
        padding: 5px 10px ;
    }
}

.savedMessage {
    background-color: #ff6100;
    color: white;
}

.sendedMessage {
    background-color: #1eaa39;
    color: white;
}

.response {
    background-color: var(--main-color);
    color: white;
    border-radius: 100px;
    font-weight: bold;
    font-size: 0.9em;
    padding: 5px 25px;
    @media screen and (max-width: 430px) {
        padding: 5px 12px ;
    }
}

#checkListTable {
    table-layout: fixed;
}

#checkListTable tr {
    padding: 10px 10px;
    height: 3em;
    th:first-child {
        border-top-left-radius: 10px ;
    }
    th:last-child {
        border-top-right-radius: 10px ;
    }
}

#checkListTable tbody tr:nth-child(odd) {
    background-color: #eeeeee;
}

#checkListTable :is(th, td) {
    padding: 10px 10px;
    align-content: center;
    text-align: center;
}

#checkListTable :is(th, td):first-child {
    text-align: left;
}

#checkListTable thead :is(th) {
    background-color: #0055BE;
    color: white;
}

.dialogBody>div:last-child {
    margin: 2px auto;
}

#responseCheckDialog {
    position: fixed ;
    inset: 0 ;
    z-index: 25;
}


/*
 * ヘルスモニタ用CSS
 * 2024/08/02
 * 2024/10/03 updated
 */
.HealthMonitor {
    --meter-width: 300px;
    --meter-height: 150px;
    --inner-width: 180px;
    --inner-height: 90px;
    --needle-width: 8px;
    --needle-height: calc(var(--meter-height) * 0.85);
    --front-circle-width: 30px;
    --front-circle-height: 30px;
    --meter-width: 340px;
    --meter-height: 170px;
    --inner-width: 200px;
    --inner-height: 100px;
    --meter-background: white ;

    --safety-color: #8CC63F;
    --warning-color: #F08E3F;
    --danger-color: #DD484A;

    .safety {
        --label-color: var(--safety-color) ;
    }
    .warning {
        --label-color: var(--warning-color) ;
        --meter-background: #F9EEAF ;
    }
    .danger {
        --label-color: var(--danger-color) ;
        --meter-background: #F7B9B6 ;
    }
    .inactive {
        opacity: 0.5 ;
    }
    .PoolDiv:has(.safety) {
        background-color: var(--meter-background) ;
    }
    .meter-area {
        z-index: 0 ;
        width: 400px ;
        /* height: 290px ; */
        margin: 10px ;
        color: #282A41 ;
        background-color: var(--meter-background) ;
    }
    .half-circle {
        position: relative;
        background: conic-gradient(from -75deg at 50% 80%,
        red 0deg, orange 40deg 50deg, green 80deg 90deg, orange 125deg 120deg, red 180deg 180deg);
        overflow: hidden;
        width: var(--meter-width);
        height: var(--meter-height);
        border-radius: 50% / 100% 100% 0 0;
        margin: 0 auto;
        margin-top: 20px;
    }

    .inner-circle {
        position: absolute;
        background-color: var(--meter-background);
        width: var(--inner-width);
        height: var(--inner-height);
        top: calc(var(--meter-height) - (var(--inner-height)));
        left: calc((var(--meter-width)/2) - (var(--inner-width)/2));
        border-radius: calc(var(--meter-width) * 0.4) calc(var(--meter-width) * 0.4) 0 0;
    }

    .label {
        position: absolute;
        width: 200px;
        text-align: center;
        bottom: -30px;
    }

    .label div {
        display: inline-block;
        width: 33.33%;
    }

    .needle {
        position: absolute;
        /*top: -15px;*/
        width: var(--needle-width) ;
        height: var(--needle-height) ;
        background-color: #282A41;
        transform-origin: bottom;
        transition: transform 0.5s;
        clip-path: polygon(50% 0, 100% 100%, 0 100%) ;
        top: calc(var(--meter-height) * 0.15);
        left: calc(var(--meter-width)/2 - var(--needle-width) / 2);
    }

    .front-circle {
        position: absolute;
        background-color: black;
        z-index: 5;
        top: calc(var(--meter-height) - var(--front-circle-height) / 2);
        left: calc((var(--meter-width)/2) - (var(--front-circle-width) / 2));
        width: var(--front-circle-width);
        height: var(--front-circle-height);
        border-radius: var(--front-circle-width);
    }

    .value-area {
        display: grid ;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        align-items: baseline ;
        width: 100% ;
        > div {
            padding-top: 10px ;
        }
    }
    .meter {
        display: inline-grid ;
        grid-column-start: 1;
        grid-column-end: 6;
        color: black ;
        font-size: 2em ;
        text-align: center ;
    }

    .meter-value {
        display: inline-grid ;
        grid-column-start: 1 ;
        grid-column-end: 4 ;
        color: black ;
        font-weight: bold ;
        font-size: 2.5em ;
        text-align: right ;
    }

    .meter-unit {
        display: inline-grid ;
        color: black ;
        font-size: 2em ;
        font-weight: bold ;
        text-align: left ;
    }

    .GraphDiv {
        display: flex ;
        position: relative ;
        flex-direction: column ;
        border: 2px solid #dddddd ;
        padding: 10px ;
        .graph_overlay {
            display: none ;
            position: absolute ;
            inset: 0 ;
            .overlay_box {
                position: absolute ;
                background-color: #dd484A;
                inset: 0 ;
                opacity: 0.85 ;
            }
            .overlay_message {
                position: absolute ;
                inset: 0 ;
                align-content: center ;
                img {
                    width: 300px ;
                }
                span {
                    font-size: 4em  ;
                    color: white ;
                    font-weight: bold ;
                    p {
                        margin-top: 20px ;
                        color: white ;
                    }
                }
            }
        }
        .loading_overlay {
            .overlay_loading_box {
                position: absolute;
                background-color: white;
                inset: 0;
                opacity: 0.85;
            }
            
            .overlay_loading_circle {
                position: absolute;
                width: 30px;
                height: 30px;
                top: calc(50% - 15px);
                left: calc(50% - 15px);
                border: 10px solid #0866BE;
                border-top: 10px solid #3498db;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }
        }
    }
    .PoolDiv:has(.power_down) .graph_overlay {
        display: block ;
    }

    .PoolDiv:not(:has(:is(.warning, .danger))) .PoolName {
        background-color: var(--safety-color) ;
    }
    .PoolDiv:not(:has(:is(.warning, .danger))) .PoolName::after {
        display: block ;
        content: "SAFETY" ;
        font-size: 1.5em ;
        margin-top: 0.2em ;
    }
    .PoolDiv:has(.warning) .PoolName {
        background-color: var(--warning-color);
    }
    .PoolDiv:has(.warning) .PoolName::after {
        display: block ;
        content: "WARNING" ;
        font-size: 1.5em ;
        margin-top: 0.2em ;
    }
    .PoolDiv:has(.danger, .power_down) .PoolName {
        background-color: var(--danger-color);
    }
    .PoolDiv:has(.danger, .power_down) .PoolName::after {
        display: block ;
        content: "DANGER" ;
        font-size: 1.5em ;
        margin-top: 0.2em ;
    }

    .AreaDiv {
        display: flex ;
    }

    .AreaName {
        font-size: 2em ;
        font-weight: bold ;
        margin: 0 auto ;
        background-color: #0866BE;
        color: white ;
        width: 100% ;
        margin-bottom: 1.5em ;
        padding-top: 1em ;
        padding-bottom: 1em ;
        > p {
            color: white ;
            @media screen and (max-width: 430px) {
                text-align: left ;
                margin-left: 30px ;
            }
        }
    }

    .PoolName {
        font-size: 2.2em ;
        font-weight: bold ;
        margin-bottom: 20px ;
        background-color: var(--safety-color) ;
        color: white ;
        padding-top: 1em ;
        padding-bottom: 1em ;
    }

    .scaleStart {
        position: absolute ;
        bottom: -0.5em ;
        z-index: 10 ;
        height: 2em ;
        writing-mode: vertical-rl ;
        text-orientation: mixed ;
        rotate: 180deg ;
        width: calc(var(--meter-width));
        font-size: 2em;
        font-weight: unset;
        left: 0;
    }

    .scaleEnd {
        position: absolute;
        bottom: -0.5em;
        left: 2em;
        z-index: 10;
        height: 2em ;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        rotate: 0deg ;
        width: calc(var(--meter-width));
        font-size: 2em;
        font-weight: unset;
        left: 0;
    }

    .scaleCenter {
        position: absolute;
        bottom: -1em;
        left: 2em;
        z-index: 10;
        height: 2em ;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        width: calc(var(--meter-width));
        font-size: 2em;
        font-weight: unset;
        left: 0;
    }

    .safeStart {
        position: absolute;
        bottom: -1em;
        left: 2em;
        z-index: 10;
        height: 2em;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        width: calc(var(--meter-width));
        font-size: 2em;
        font-weight: unset;
        left: 0;
    }
    .safeEnd {
        position: absolute;
        bottom: -1em;
        left: 2em;
        z-index: 10;
        height: 2em ;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        width: calc(var(--meter-width));
        font-size: 2em;
        font-weight: unset;
        left: 0;
    }
}

/* スマホ画面用ヘルスモニタ */
.single_pool {
    --meter-width: 300px;
    --meter-height: 150px;
    --inner-width: 180px ;
    --inner-height: 90px ;
    --needle-width: 8px ;
    --needle-height: calc(var(--meter-height) * 0.85) ;
    --front-circle-width: 30px ;
    --front-circle-height: 30px ;

    .half-circle {
        width: var(--meter-width) ;
        height: var(--meter-height) ;
        border-radius: 50% / 100% 100% 0 0 ;
        margin:0 auto ;
        margin-top: 10px ;
    }
    .scaleStart {
        width: calc(var(--meter-width)) ;
        font-size: 2em ;
        font-weight: unset ;
        left: 0 ;
    }
    .scaleEnd {
        width: calc(var(--meter-width)) ;
        font-size: 2em  ;
        font-weight: unset ;
        left: 0 ;
    }
    .safeStart {
        width: calc(var(--meter-width)) ;
        font-size: 2em ;
        font-weight: unset ;
        left: 0 ;
    }
    .safeEnd {
        width: calc(var(--meter-width)) ;
        font-size: 2em ;
        font-weight: unset ;
        left: 0 ;
    }
    .inner-circle {
        width: var(--inner-width) ;
        height: var(--inner-height) ;
        top: calc(var(--meter-height) - (var(--inner-height))) ;
        left: calc((var(--meter-width)/2) - (var(--inner-width)/2)) ;
        border-radius: calc(var(--meter-width) * 0.4) calc(var(--meter-width) * 0.4) 0 0 ;
    }
    .needle {
        top: calc(var(--meter-height) * 0.15) ;
        left: calc(var(--meter-width)/2 - var(--needle-width) / 2) ;
        height: var(--needle-height) ;
    }
    .front-circle {
        top: calc(var(--meter-height) - var(--front-circle-height) / 2) ;
        left: calc((var(--meter-width)/2) - (var(--front-circle-width) / 2)) ;
        width: var(--front-circle-width) ;
        height: var(--front-circle-height) ;
        border-radius: var(--front-circle-width) ;
        background-color: black ;
    }
    .value-area {
        width: 100% ;
        margin-bottom: 10px ;
    }
    .meter {
        font-size: 2em ;
    }
    .meter-value {
        font-size: 2.5em ;
    }
    .meter-unit {
        font-size: 2.0em ;
    }
}

/***** ポータルエリア *****/
.portal-area {
    width: 400px ;
    background-color: #eeeeee;
    align-content: center;
    margin: 10px;
    opacity: 0.0;

    >img {
        width: 180px;
    }
}
/*** スタッフ管理/ログイン履歴画面 ***/
.aqms_staff {
    .staffButton {
        background-color: var(--main-color) ;
        color: white ;
        margin: 0 auto ;
    }
    .staffButtonDiv {
        opacity: 1.0;
        margin: 15px auto ;
    }
}
.aqms_staff .content_body p {
    color: var(--main-color);
    font-weight: bold;
}
.staffForm {
    opacity: 1.0 ;
    margin-top: 20px ;
    h3 {
        color: var(--title-color) ;
    }
}
.staffSelectorDiv {
    color: var(--header-color) ;
    display: flex ;
    flex-wrap: wrap ;
    justify-content: space-around ;
    margin: 20px auto ;
    width: 60% ;

    span {
        font-weight: bold ;
    }
    select {
        border: 1px solid var(--header-color);
        border-radius: 5px;
        padding: 5px 15px;
        width: 250px ;
    }
}
#staffList {
    h4 {
        font-size: 1em ;
        color: var(--main-color) ;
        margin: 10px auto ;
    }
    div:has(table) {
        @media screen and (max-width: 430px) {
            overflow-x: scroll ;
        }
    }
}
.staffSelectCondition {
    display: flex ;
    align-items: center ;
    > div:first-of-type {
        font-weight: bold ;
        width: 100px ;
        @media screen and (max-width: 430px) {
            margin-bottom: 10px ;
        }
    }
    .userSelectDiv {
        height: 100px ;
        > div {
            display: flex ;
            flex-wrap: nowrap ;
            align-items: center ;
            font-weight: bold ;
            > div {
                margin: 0 10px 0 20px ;
                @media screen and (max-width: 430px) {
                    margin: 0 10px 0 5px ;
                }
            }
            select {
                background-color: var(--datetime-color) ;
                height: 40px ;
                padding-left: 5px ;
                width: 250px ;
            }
        }
        @media screen and (max-width: 430px) {
            height: 50px ;
        }
    }
    @media screen and (max-width: 430px) {
        flex-wrap: wrap ;
    }
}
#staffSelectTable {
    display: table ;
    table-layout: fixed ;
    width: 450px ;
    tbody {
        display: table ;
        table-layout: fixed ;
    }
    tr .childer {
        width: 20px;
        font-weight: bold ;
    }
    tr .unit {
        width: 30px ;
        font-weight: bold ;
    }
    tr :is(input, select) {
            width: 100%;
            background-color: var(--datetime-color) ;
            height: 40px ;
            padding-left: 5px ;
    }
    tr :is(th, td) {
        /*border: 1px solid black ;*/
        width: 50px ;
        padding: 5px 0 ;
    }
    tr th {
        width: 100px ;
        padding-right: 10px ;
        text-align: right ;
    }
    tr :is(th, td):first-child {
        width: 70px ;
    }
/*
    tr :is(th, td):last-child {
        width: 200px ;
    }
*/
}

#loginHistoryTable {
    width: 100%;
    table-layout: fixed;
    width: 1150px ;
    thead th {
        position: sticky;
        top: 0;
        background-color: var(--header-color);
        z-index: 10;
    }
    tbody {
        display: block;
        max-height: 20em;
        overflow-y: scroll;
        overflow-x: hidden;
        @media screen and (max-width: 430px) {
            width: 1133px ;
        }
    }
    thead, tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    thead {
        width: calc(100% - 1em - 1px);

        th {
            text-align: center !important;
            color: white;
        }
    }
    :is(th, td) {
        border-right: 1px dotted black;
        padding: 10px 10px;
        align-content: center;    }

    :is(th, td):first-child {
        width: 120px ;
    }
    :is(th, td):nth-child(5) {
        border-right: none ;
        width: 80px ;
    }
    :is(th, td):nth-child(6) {
        border-right: none ;
        width: 20px ;
    }
    :is(th, td):nth-child(7) {
        width: 80px ;
    }
    :is(th, td):last-child {
        border-right: none;
    }
    tr {
        padding: 10px 10px;
        height: 3em;
    }
    tr:nth-child(even) {
        background-color: #eeeeee;
    }
    tbody td span {
        display: block;
        width: 15px;
        height: 15px;
        background-color: var(--header-color);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        transform: rotate(90deg);
    }
}

#loginIDList {
    div:has(>table) {
        @media screen and (max-width: 430px) {
            overflow-x: scroll;
        }
    }
}

#loginIDListHeader {
    display: grid ;
    grid-template-columns: 1fr 2fr 1fr ;
    margin-bottom: 5px ;
    h2 {
        align-self: center ;
    }
}
#updateStaff {
    width: 200px ;
    padding: 10px 30px ;
    border-radius: 10px ;
}
#updateStaffFinishDialog {
    position: fixed;
    z-index: 40;
    inset: 0;

    .updateStaffFinishDialogBody {
        width: 30vw;
        left: calc(50% - 15vw) ;
        @media screen and (max-width: 430px) {
            width: 80vw ;
            left: calc(50% - 40vw) ;
        }
        z-index: 42 ;

        >div:first-child {
            background-color: #0055BE;
            color: white;
            font-size: 1.3em;
            padding: 5px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        div:has(p) {
            height: 7em;
            align-content: center;

            p {
                color: black !important;
                font-size: 1.2em;
            }
        }
        >div:last-child {
            margin-bottom: 10px ;
        }
    }
}
#loginIDTable {
    width: 100%;
    height: 26em ;
    table-layout: fixed;
    @media screen and (max-width: 430px) {
        width: 600px;
    }

    thead th {
        position: sticky;
        top: 0;
        background-color: var(--header-color);
        z-index: 10;
    }

    tbody {
        display: block;
        height: 360px;
        overflow-y: scroll;
        overflow-x: hidden;
        @media screen and (max-width: 430px) {
            width: 583px ;
        }
    }

    thead,
    tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    thead {
        width: calc(100% - 1em - 1px);

        th {
            text-align: center !important;
            color: white;
        }
    }

    :is(th, td) {
        border-right: 1px dotted black;
        padding: 10px 10px;
        align-content: center;
    }

    tr {
        padding: 10px 10px;
        height: 3em;
    }

    tr:nth-child(even) {
        background-color: #eeeeee;
    }
    tbody td label {
        display: flex ;
        align-items: center;
        justify-content: center ;
        width: 100% ;
        height: 100% ;
    }
    :is(thead, tbody) tr :is(th, td):first-of-type {
        width: 50px ;
        padding: 0 ;
    }
    :is(thead, tbody) tr :is(th, td):last-of-type {
        width: 150px ;
        padding: 0 ;
    }
    tbody td input[type=text] {
        width: 100% ;
    }
}

/** アンモニア測定履歴 **/
.aqms_ammonia {
    .content_body>div:first-of-type {
        span p {
            font-size: 1em;
            color: var(--main-color);
            font-weight: bold;
            text-align: center;
            @media screen and (max-width: 430px) {
                text-align: left ;
                margin-left: 1em ;
            }
        }
    }

    .content_body>div:nth-of-type(2) {
        margin-top: 30px;
        color: var(--header-color);
        text-align: left;
        font-weight: bold;

        h4 {
            font-size: 1.3em;
            text-align: left;
        }

        p {
            color: black;
        }
    }
}
.ammoniaSelectorDiv {
    color: var(--header-color);
    display: flex;
    justify-content: space-around;
    margin: 20px auto;
    width: 60%;
    @media screen and (max-width: 430px) {
        width: unset ;
        flex-wrap: wrap ;
        > div {
            display: flex ;
            align-items: center ;
        }
    }

    span {
        font-weight: bold;
    }

    select {
        border: 1px solid var(--header-color);
        border-radius: 5px;
        padding: 5px 15px;
        width: 250px;
    }
}
#ammoniaList {
    overflow-x:hidden ;
    max-height: 20em;
    @media screen and (max-width: 430px) {
        overflow-x: scroll;
    }
}
#ammoniaHistoryTable {
    --safety-color: #8AC43B;
    --warning-color: #F08E3F;
    --danger-color: #E0595B;

    width: 100%;
    table-layout: fixed;

    thead th {
        position: sticky;
        top: 0;
        background-color: var(--header-color);
        z-index: 10;
    }
/*
    tbody {
        display: block;
        max-height: 20em;
        overflow-y: scroll;
        overflow-x: hidden;
    }
*/
    thead tr,
    tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    thead {
        /*
        @media screen and (min-width: 430px) {
            width: calc(100% - 1em - 1px);
        }
        */
        position: sticky ;
        top: 0 ;
        left: 0 ;

        th {
            text-align: center !important;
            color: white;
        }
    }

    :is(th, td) {
        border-right: 1px dotted black;
        padding: 10px 10px;
        align-content: center;
        @media screen and (max-width: 430px) {
            width: 100px ;
        }
    }

    :is(th, td):first-child {
        width: 150px;
        @media screen and (max-width: 430px) {
            width: 100px ;
        }
    }

    :is(th, td):nth-child(4) {
        width: 50px;
    }

    :is(th, td):last-child {
        border-right: none;
    }

    tr {
        padding: 10px 10px;
        height: 3em;
    }

    tr:nth-child(even) {
        background-color: var(--row-color);
    }

    tbody td span {
        display: block;
        width: 40px;
        height: 18px;
        border: 1px solid var(--header-color) ;
        margin: 0 auto ;
    }
    .color0 {
        color: white ;
        background-color: white ;
        font-weight: bold ;
        padding: 2px ;
    }
    .color1 {
        color: white ;
        background-color: var(--safety-color);
        font-weight: bold;
        padding: 2px;
    }
    .color2 {
        color: white ;
        background-color: var(--safety-color);
        font-weight: bold;
        padding: 2px;
    }
    .color3 {
        color: white ;
        background-color: var(--warning-color);
        font-weight: bold;
        padding: 2px;
    }
    .color4 {
        color: white ;
        background-color: var(--danger-color);
        font-weight: bold;
        padding: 2px;
    }
    .color5 {
        color: white ;
        background-color: var(--danger-color);
        font-weight: bold;
        padding: 2px;
    }
}

/*** 現地画面用ヘルスモニタ(iframe) ***/
#pool_health_main {
    display: flex ;
    justify-content: center ;
    /*width: 100vw;
    height: 100vh;*/
    align-items: flex-start ;
}
#pool_health_container {
    transform-origin: top left;
}