/* ===============================================
WATERit AXIS Custom Styles
================================================== */
/* Basic Style */
html {
    height: 100%;
}

/* Font styles
-------------------------------------------------- */
body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
}

.font-size-2 {
    font-size: 8px !important;
}

.font-size-3 {
    font-size: 10px !important;
}

.font-size-4 {
    font-size: 12px !important;
}

.font-size-5 {
    font-size: 14px !important;
}

.font-size-6 {
    font-size: 16px !important;
}

@media (min-width: 375px) {
    .font-size-ss-6 {
        font-size: 16px !important;
    }
}

.font-size-rem-5 {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .font-size-md-4 {
        font-size: 12px !important;
    }

    .font-size-md-5 {
        font-size: 14px !important;
    }

    .font-size-md-6 {
        font-size: 16px !important;
    }
}

.text-verylightgray {
    color: #b3b3b3 !important;
}

.text-black {
    color: #000000 !important;
}

.h4 {
    font-size: 20px;
}

/* Button styles
-------------------------------------------------- */
.btn:disabled {
    opacity: 1;
    background-color: #d1d1d1 !important;
    border-color: #d1d1d1 !important;
}

.btn-readonly {
    color: #fff !important;
    background-color: #30749f !important;
    border-color: #007bff !important;
}

.btn-top .icon-top {
    background-color: #f7f7f7;
    border-radius: 50% !important;
    width: 38px;
    height: 38px;
    padding: 3px 2px 1px;
    box-sizing: border-box;
}

/* 標準のボタンの色 */
.btn-primary {
    color: #fff !important;
    background-color: #30749f;
    border-color: #007bff;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #0069e6;
        border-color: #0069e6;
    }

.btn.btn-primary:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(48,116,159,.25);
}

/* キャンセル系のボタンの色 */
.btn-secondary {
    color: white !important;
    background-color: #5d5d5d;
}

    .btn-secondary:hover {
        color: #fff;
        background-color: #6c7479;
        border-color: #6c7479;
    }

.btn.btn-secondary:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(93,93,93,.25);
}

/* 削除系のボタンの色 */
.btn-purple {
    color: #fff !important;
    background-color: #c13a7d;
    border-color: #c13a7d;
}

    .btn-purple:hover {
        color: #fff !important;
        background-color: #de3d8d;
        border-color: #de3d8d;
    }

.btn.btn-purple:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(193,58,125,.25);
}
.btn-danger:hover {
    color: #fff !important;
    background-color: #f33b4d;
    border-color: #f33b4d;
}

/* 危険な処理をするボタンの色 */
.btn.btn-danger:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(243,59,79,.25);
}

/* 汎用 */
.btn-general {
    color: #fff !important;
    background-color: #57b1a8;
    border-color: #57b1a8;
}
    .btn-general:hover {
        color: #fff !important;
        background-color: #5fbfb6;
        border-color: #5fbfb6;
    }


/*サイドナビのアイコン付き角丸ボタンの色*/
.btn-sidenavi-primary {
    color: white !important;
    background-color: #5d5d5d;
}

/*サイドナビのアイコン付き角丸ボタンの大きさ*/
.btn-sidenavi-lg {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
    padding: 7px 11px;
}

/* ヘッダーのお知らせボタン*/
.btn-notice {
    display: block;
    position: relative;
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    color: #000;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    padding: 0 11px 0 0;
}

/* お知らせ管理画面の本文にタグを入力するためのボタン*/
.btn-notice-input-item {
    line-height: 0.8;
    margin-left: 0.5rem;
    margin-bottom: 0.2rem;
}

/* 更新系のボタン押下後、ユーザーの確認が必要な時に表示するボタン */
.btn-alert-continue {
    position: absolute;
    bottom: 0;
    right: 0;
    color: inherit;
    padding-left: 1rem;
    padding-right: 2rem;
    margin: 0.25rem;
}

/* ヘッダーのお知らせボタンの左側のアイコン */
.icon-notice {
    position: relative;
}

    .icon-notice img {
        position: relative;
        top: 0;
        left: 0;
        z-index: 2;
    }

    .icon-notice .badge-notice {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        z-index: 3;
        top: -0.3rem;
        left: -0.3rem;
        color: #ffffff;
        background-color: #ff8900;
        border-radius: 10rem;
        font-size: 0.7em;
        width: 22px;
        height: 22px;
    }

.btn-portrait {
    width: 10rem;
}

/*標準のボタンのサイズ*/
.btn-middle {
    width: 144px;
    height: 32px;
    padding: 0;
    border-radius: 10px;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-size-outinfo {
    text-align: left;
    font-weight: bold;
    display: block;
    width: 100%;
}

    .btn-size-outinfo.acvive {
        background-color: #d9e8eb;
        color: #000;
        font-weight: bold;
    }

.btn-autolow {
    height: 24px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
    padding: 0 0.8rem 0 2rem;
    background-position: 6px center;
    white-space: nowrap;
}

/*PCでは横長でスマホではアイコンだけになるボタンの設定。主にfooterで使う*/
.btn-low-responsive {
    height: 24px;
    width: 24px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
    padding: 0;
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .btn-low-responsive {
        width: 154px;
        padding: 0 0 0 8px;
    }
}

.btn-low-responsive-lg {
    height: 24px;
    width: 24px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
    padding: 0;
    display: flex;
    align-items: center;
}

@media (min-width: 992px) {
    .btn-low-responsive-lg {
        width: 154px;
        padding: 0 0 0 8px;
    }
}

.btn-low-responsive-xl {
    height: 24px;
    width: 24px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
    padding: 0;
    display: flex;
    align-items: center;
}

@media (min-width: 1200px) {
    .btn-low-responsive-xl {
        width: 154px;
        padding: 0 0 0 8px;
    }
}

.btn-low-responsive-xxl {
    height: 24px;
    width: 24px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
    padding: 0;
    display: flex;
    align-items: center;
}
@media (min-width: 1300px) {
    .btn-low-responsive-xxl {
        width: 154px;
        padding: 0 0 0 8px;
    }
}

/* QRコードのアイコンが付いたボタン */
.btn-icon-qr {
    background-image: url(../img/ic_qr.svg);
    background-repeat: no-repeat;
}

/* 編集のアイコンが付いたボタン */
.btn-icon-edit {
    background-image: url(../img/ic_edit.svg);
    background-repeat: no-repeat;
}

/* 解除のアイコンが付いたボタン */
.btn-icon-release {
    background-image: url(../img/ic_release.svg);
    background-repeat: no-repeat;
}

/* ゴミ箱のアイコンが付いたボタン */
.btn-icon-delete {
    background-image: url(../img/ic_delete.svg);
    background-repeat: no-repeat;
}

/* ダウンロードのアイコンが付いたボタン */
.btn-icon-download {
    background-image: url(../img/ic_download.svg);
    background-repeat: no-repeat;
    background-position: left 6px top -1px;
}

/*サイドバーとは別のページ内コンテンツ切り替え用ボタン
主にグループで使う*/
.btn-sab {
    background-color: #fff;
    color: #000;
    text-align: left;
    font-weight: bold;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
}

    .btn-sab:hover {
        background-color: #fff;
        color: #000;
    }

    .btn-sab.active {
        background-color: #d9e8eb;
        font-weight: bold;
        border-color: #17a2b8;
    }

    .btn-sab.add {
        border-color: #17a2b8;
        color: #30749f;
    }

/*ヘルプページ内ヒントアイコン付きボタン */
.btn-help {
    background-image: url(../img/ic_help.svg);
    background-position: left center;
    background-repeat: no-repeat;
    width: 120px;
    height: 24px;
    border-radius: 10px;
    background-color: #30749f;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    padding: 0 0 0 10px;
}

.btn-auto-width {
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-admin {
    width: auto!important;
    padding: 0!important;
}

.btn-icon-only {
    height: 24px;
    width: 24px;
    border-radius: 100px;
    background-position: center;
}

/* Badge styles
-------------------------------------------------- */
/* 削除予定 */
a .badge.badge-secondary {
    background-color: #d1d1d1;
}

    a.badge.badge-secondary:hover {
        color: #fff !important;
        background-color: #9f9f9f;
    }

    a.badge.badge-secondary.show {
        background-color: #5d5d5d;
    }

        a.badge.badge-secondary.show:hover {
            background-color: #9f9f9f;
        }
/* 削除予定 */

.badge-chartdisp-btn {
    background-color: #d1d1d1;
}

    .badge-chartdisp-btn.show {
        background-color: #5d5d5d;
    }

    .badge-chartdisp-btn:hover {
        color: #fff !important;
        background-color: #9f9f9f !important;
    }

.badge-chartdisp-btn-small {
    margin-left: 1.4rem;
}

.badge-sm {
    min-width: 120px;
    height: 24px;
    padding: 0 0.5rem 0 0;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: left;
    padding-left: 6px;
}

.badge-very-sm {
    min-width: 60px;
    height: 24px;
    padding: 0 0 0 5px;
    border-radius: 10px;
}

.badge-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Form styles
-------------------------------------------------- */
::placeholder {
    color: #b3b3b3 !important;
}

.regions-selectbox:disabled {
    color: #d5d5d5;
}

.select::-ms-expand {
    display: none;
}

.select {
    padding-right: 1.4rem;
    font-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../img/ic_pulldown.svg);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: right center;
    cursor: pointer;
}

    .select:disabled {
        background-image: url(../img/ic_pulldown_disabled.svg);
        cursor: default;
    }

        .select:disabled::-ms-value,
        .select:disabled::-ms-expand {
            color: #B3B3B3;
        }

.form-control {
    font-size: 14px;
    border-radius: 4px;
    color: #000;
}

    .form-control:focus {
        color: #000;
    }

    .form-control:disabled, .form-control[readonly] {
        background-color: transparent;
    }

.custom-control-label-lightdark {
    color: #b3b3b3 !important;
}

.custom-control-input:checked ~ .custom-control-label-lightdark {
    color: #fff !important;
}

.custom-control-label-normal {
    color: #666666 !important;
}

.custom-control-input:checked ~ .custom-control-label-normal {
    color: #000000 !important;
}

.custom-control-input ~ .custom-control-label.custom-control-label-black {
    color: #b3b3b3 !important;
}

.custom-control-input:checked ~ .custom-control-label.custom-control-label-black {
    color: #000000 !important;
}

.custom-control-label {
    padding-left: 0.25rem;
    cursor: pointer;
}

.custom-control-input:disabled ~ .custom-control-label {
    cursor: default;
}

    .custom-control-input:disabled ~ .custom-control-label::before {
        background-color: #dddddd;
    }

.custom-control-label::before {
    width: 25px;
    height: 25px;
    background: none;
    border: solid 2px #818181;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: -25px;
    box-sizing: border-box;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #30749f;
    border: none;
}

.custom-control-label::after {
    width: 29px;
    height: 29px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: -27px;
}

.custom-checkbox .custom-small::before,
.custom-checkbox .custom-small::after {
    height: 16px;
    width: 16px;
    left: 0px;
}

.custom-file-label.after-none::after {
    display: none;
}

/* input=number"の右側のコントロールを消す */
.appearance-none::-webkit-outer-spin-button,
.appearance-none::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* input=number"の右側のコントロールを消す */
.appearance-none {
    -moz-appearance: textfield;
}

/* MAPキーワード検索用入力ボックス */
.pac-target-input {
    max-width: 180px;
    margin-right: 0.3rem;
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 30px .375rem .75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    .pac-target-input::-webkit-input-placeholder {
        color: transparent;
    }

    .pac-target-input::-moz-placeholder {
        color: transparent;
    }

    .pac-target-input::-ms-input-placeholder {
        color: transparent;
    }

    .pac-target-input::placeholder {
        color: transparent;
    }

    .pac-target-input::before {
        content: ".";
    }

    .pac-target-input::after {
        content: "a";
    }

.form-check {
    display: flex;
    align-items: center;
}

.form-check-container {
    display: flex;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
}

    .form-check-container * {
        cursor: pointer;
    }

.form-check-container-rounded {
    min-height: 94px;
    border-radius: 4px;
    border: solid 1px #d1d1d1;
    background-color: #ffffff;
}

.form-check-container-checked {
    border: solid 1px #30749f;
    background-color: #d9e8eb;
}

/*input="text"の入力文字削除JS用CSS*/
[data-empty-parent] {
    display: block;
    width: 100%;
    position: relative;
}

    [data-empty-parent] input,
    [data-empty-parent] select {
        width: 100% !important;
    }

[data-empty-btn] {
    display: flex;
    align-items: center;
    color: #000 !important;
    opacity: 0.5;
    text-decoration: none;
    overflow: hidden;
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 2px;
    line-height: 0;
    cursor: pointer;
}

    [data-empty-btn]:hover {
        text-decoration: none;
    }

input::-ms-clear {
    visibility: hidden
}

/* Modal dialog styles
-------------------------------------------------- */
.modal-title {
    font-weight: bold;
}

.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* 画面の高さいっぱいに表示されるmodalのbody用クラス */
.modal-fullheight-body {
    height: calc(100vh - 250px);
    overflow-y: auto;
}

/* bootstrapのmodal-headerクラスのオーバーライド */
.modal-header {
    border: none;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* bootstrapのmodal-footerクラスのオーバーライド */
.modal-footer {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    border: none;
}

@media (min-width: 768px) {

    .modal-md {
        max-width: 800px;
    }
}

.container-middle {
    max-width: 308px;
    width: calc(100% - 30px);
    margin: auto;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: content-box;
}

/*中サイズのmodal用クラス*/
.modal-content-middle-inner {
    max-width: 308px;
    margin: auto;
    width: 100%;
    padding: 0 0.3rem;
    box-sizing: border-box;
}

/*大サイズのmodal用クラス*/
.modal-content-large-inner {
    max-width: 410px;
    margin: auto;
    width: 100%;
    padding: 0 0.3rem;
    box-sizing: border-box;
}

/*特大サイズのmodal用クラス*/
.modal-content-verylarge-inner {
    max-width: 610px;
    margin: auto;
    width: 100%;
    padding: 0 0.3rem;
    box-sizing: border-box;
}

/*IEで中央表示にならないのでとりあえずのCSS*/
.modal-dialog-centered {
    margin: auto;
}

    .modal-dialog-centered::before {
        height: calc(100vh - 1rem) !important;
    }

/* Layout styles
-------------------------------------------------- */
/*
bodyに付けるクラスと画面定義のレイアウトパターンが下記のように対応している
.layout-1 _Layout_HeaderLess
.layout-2 _Layout_Popup
.layout-3 _Layout_Standard、_Layout_Group
.layout-5 _Layout_Detail
*/
/*.layout-1 _Layout_HeaderLess*/
.layout-1 {
    background-color: #2f2f2f !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .layout-1 .language-select {
        padding: 0 0 0 0.4rem;
        width: 110px;
        height: 26px;
        border-radius: 4px;
        border: solid 1px #d1d1d1;
    }

    .layout-1 .form-layout-only-1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        padding: 0 1.2rem;
        box-sizing: border-box;
        max-width: 360px;
        width: 100%;
        /*height: 60%;*/
    }
/*.layout-2 _Layout_Popup*/
.layout-2 {
    background-color: #f7f7f7;
    border-radius: 10px;
}

/*.layout-3 _Layout_Standard、_Layout_Group*/
.layout-3 {
    display: flex;
    flex-direction: column;
    background-color: #f7f7f7;
    padding-top: 64px;
}

.layout-4 {
    display: flex;
    flex-direction: column;
    background-color: #ebeaea;
    padding-top: 64px;
    padding-bottom: 150px;
}

/*.layout-5 _Layout_Detail*/
.layout-5 {
    display: flex;
    flex-direction: column;
    background-color: #f7f7f7;
}

    .layout-5 .form-layout-only-1 {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        margin: auto;
        padding: 0 0.25rem;
        box-sizing: border-box;
        max-width: 360px;
        width: 100%;
    }

    .layout-5 .form-layout-only-2 {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        margin: 1rem auto 2rem;
        padding: 0 1rem;
        box-sizing: border-box;
        width: 100%;
    }

/*ヘッダーのpositionがfixedのためbodyと被らないようにするためのクラス*/
.layout-header {
    padding-top: 64px;
}

/*フッターのpositionがfixedのためbodyと被らないようにするためのクラス*/
.layout-footer main {
    padding-bottom: 100px;
}

@media (max-width: 768px) {
    .w-max-md-100 {
        width: 100% !important;
    }
}

/* Common styles
-------------------------------------------------- */
a {
    box-shadow: none !important;
}

a,
.cursor-pointer {
    cursor: pointer;
}

/*h2タイトル上書き*/
.h2 {
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
}

/*h3タイトル上書き*/
.h3 {
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
}

/*h5タイトル上書き*/
.h5 {
    font-size: 14px;
}

.hover-opacity:not(:disabled):hover {
    opacity: 0.9;
}

/*paddiong用ユーティリティ*/
@media (min-width: 768px) {
    .pl-md-7, .px-md-7 {
        padding-left: 6rem !important;
    }
}

@media (min-width: 768px) {
    .pr-md-7, .px-md-7 {
        padding-right: 6rem !important;
    }
}

.pt-75rem {
    padding-top: 0.75rem;
}

.pl-5px {
    padding-left: 5px;
}

.pl-30px {
    padding-left: 30px;
}

.px-2px {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.px-75rem {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

@media (min-width: 375px) {
    .px-ss-4px {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

@media (min-width: 375px) {
    .px-ss-6px {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

.px-12px {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

@media (min-width: 375px) {
    .px-ss-12px {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (min-width: 768px) {
    .px-md-12px {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/*margin用ユーティリティ*/
.mt-75rem {
    margin-top: 0.75rem !important;
}

.mt--2 {
    margin-top: -0.5rem;
}

.mt--2px {
    margin-top: -2px;
}

.mt-100px {
    margin-top: 100px;
}

.mb-01rem {
    margin-bottom: 0.1rem;
}

.mb-03rem {
    margin-bottom: 0.3rem;
}

.mr-75rem {
    margin-right: 0.75rem !important;
}

.mx-2px {
    margin-left: 2px !important;
    margin-right: 2px !important;
}

.mx-6px {
    margin-left: 6px !important;
    margin-right: 6px !important;
}

.mx-8px {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

@media (min-width: 768px) {
    .mx-md-8px {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}

@media (min-width: 992px) {
    .mx-lg-8px {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}

.mx-12px {
    margin-left: 12px !important;
    margin-right: 12px !important;
}

@media (min-width: 375px) {
    .mx-ss-12px {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}

@media (min-width: 768px) {
    .mx-md-12px {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}

@media (min-width: 992px) {
    .mx-lg-12px {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}

/*height用ユーティリティ*/
.h-33 {
    height: 33%;
}

.mh-200px {
    min-height: 200px;
}

/*header共通*/
.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 300;
    background-color: #ffffff;
    box-sizing: border-box;
    flex-wrap: nowrap;
    height: 64px;
}

/*背景用ユーティリティ*/
.bg-none,
.bg-none:hover,
.bg-none td,
.bg-none td:hover {
    background: none !important;
    background-color: transparent !important;
}

.bd-gray {
    background-color: #ebeaea;
}

.bg-lightgray {
    background-color: #f7f7f7;
}

/*tableのレコードが編集不可能な時のクラス*/
.no-edit, .no-edit td {
    background: none !important;
    background-color: transparent !important;
}

    .no-edit [data-setting-btn] {
        display: none;
    }

    .no-edit .dt-custom-checkbox-clickarea {
        cursor: default;
    }

.title-3 {
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
}

/*メインボタンリスト用*/
.nav-icon-item {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
}

.nav-icon-item-size {
    width: auto;
    height: auto;
    border-radius: 1000px;
    padding: 0.3rem 0.6rem;
    font-weight: bold;
}

@media (min-width: 375px) {
    .nav-icon-item-size {
        width: auto;
        height: auto;
        border-radius: 1000px;
        padding: 0.3rem 0.9rem;
        font-weight: bold;
    }
}

@media (min-width: 768px) {
    .nav-icon-item-size {
        width: 130px;
        margin-right: .25rem;
        border-radius: 18px;
        padding: 0.2rem 0 0.2rem 0.5rem;
    }
}

@media(min-width: 992px) {
    .nav-icon-item-size {
        width: 160px;
        margin-right: 1rem;
    }
}

.nav-icon-item-gray {
    color: #000;
    background-color: #ebeaea;
    text-decoration: none;
}
    .nav-icon-item-gray.active {
        background-color: #c4dbe0;
    }

/*検索ボックス用*/
.search-label-size {
    width: 56px;
    height: 20px;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
}

.search-label-primary {
    color: #000000;
}

.searchbox {
    border-radius: 16px;
    margin-bottom: 0.75rem;
}

.searchbox-primary {
    border: solid 1px #d1d1d1;
    background-color: #ebeaea;
}

/*アラーム、メンテナンスなどのバッジ用*/
.badge-warning {
    background-color: #ff8900;
    color: #fff;
}

.badge-alarm {
    background-color: #ff4500;
    color: #fff;
}

.badge-alarm-mainbtn {
    position: absolute;
    right: -6px;
    top: -8px;
}

.badge-maintenance {
    background-color: #ff8900;
    color: #fff;
}

.badge-maintenance-mainbtn {
    position: absolute;
    right: -6px;
    top: -8px;
}

.badge-round {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 11px;
}

/*display:flexを使用した共通ユーティリティ*/
.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flex-start {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.flex-xy-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-xy-start {
    display: flex;
    justify-content: start;
    align-items: center;
}

.text-none {
    opacity: 0.5;
}

.text-clear {
    position: absolute;
    right: 5px;
    top: -8px;
    bottom: 0;
    width: 20px;
    height: 20px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

.input-img-btn {
    position: absolute;
    right: 1px;
    top: 0px;
    bottom: 0;
    cursor: pointer;
    color: #ccc;
}

.opacity-0 {
    opacity: 0;
}

.opacity-1 {
    opacity: 1;
}

.table-layout-fixed {
    table-layout: fixed;
}

.container-rounded {
    border-radius: 16px;
    border: solid 1px #d1d1d1;
    background-color: #ffffff;
}

.container-rounded-small {
    border-radius: 4px;
}

.container-gray {
    border: solid 1px #d1d1d1;
    background-color: #ebeaea;
}

.pr-2rem {
    padding-right: 2rem;
}

/*幅、高さ用ユーティリティ*/
.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.box-sizing-border-box {
    box-sizing: border-box !important;
}

.min-h-100vh {
    min-height: 100vh;
}

.min-h-200px {
    min-height: 200px;
}

.min-h-400px {
    min-height: 400px;
}

.focus-none {
    box-shadow: none !important;
}

.hover-none:hover {
    background: none !important;
    color: #000000 !important;
}

.hr-gray {
    width: calc(100% - 2px);
    border: solid 1px #707070;
}

.overflow-visible {
    overflow: visible !important;
}

.border-gray {
    border: solid 1px #d1d1d1;
}

.border-color-default {
    border-color: #707070 !important;
}

.rotate-90 {
    transform: rotate(90deg);
}

@media (min-width: 768px) {
    .rotate-md-0 {
        transform: rotate(0deg);
    }
}

@media (min-width: 992px) {
    .rotate-lg-0 {
        transform: rotate(0deg);
    }
}

/* Lock styles
-------------------------------------------------- */

.is-lock {
    cursor: default;
}
    .is-lock a {
        cursor: default;
    }

.show-is-lock {
    display: none;
}

.is-lock .show-is-lock {
    display: block;
}

.nav-item.is-lock a:not(.nav-sidebar-link) {
    opacity: 0.4;
}

.nav-icon-item-gray:not(.is-lock):hover {
    color: #000;
    background-color: #d1d1d1;
    text-decoration: none;
}

.nav-icon-item-gray.is-lock {
    color: #b3b3b3;
    text-decoration: none;
}

.badge-lock {
    position: absolute;
    right: -6px;
    top: -8px;
    padding: 0;
}

.badge-lock-inline {
    position: relative;
    right: 0;
    top: 0;
    margin-left: 0.25rem;
}

.is-lock .nav-sidebar-text {
    opacity: 0.4;
}

.is-lock.badge-alarm-mainbtn {
    display: none;
}

.is-lock.badge-maintenance-mainbtn {
    display: none;
}

/* Grid styles
-------------------------------------------------- */
@media (min-width: 768px) {
    .col-md-20percent {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }

    .col-filter-label {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .col-filter-label {
        -ms-flex: 0 0 37%;
        flex: 0 0 37%;
        max-width: 37%;
    }
}

@media (min-width: 992px) {
    .col-filter-label {
        -ms-flex: 0 0 27%;
        flex: 0 0 27%;
        max-width: 27%;
    }
}

.col-filter-input {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .col-filter-input {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .col-filter-input {
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%;
    }
}

.col-form-to {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .col-form-to {
        -ms-flex: 0 0 13%;
        flex: 0 0 13%;
        max-width: 13%;
    }
}

/* Sidebar styles
-------------------------------------------------- */
/* サイドバーの基本style */
.navbar-sidebar {
    position: fixed;
    display: block;
    top: 0;
    bottom: 0;
    left: -100%;
    width: 300px;
    padding: 0;
    overflow-y: auto;
    margin: 64px 0 0;
    visibility: hidden;
    background-color: #3f3c3a;
    color: #fff;
    transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    transition-duration: .3s;
    -moz-transition-duration: .3s;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    -ms-transition-duration: .3s;
    transition-property: left, visibility;
    -moz-transition-property: left, visibility;
    -webkit-transition-property: left, visibility;
    -o-transition-property: left, visibility;
    -ms-transition-property: left, visibility;
    z-index: 200;
}

    /* サイドバーが開いた時のstyle */
    .navbar-sidebar.open {
        left: 0;
        visibility: visible;
    }

/*サイドバー用CSS*/
.nav-item {
    position: relative;
}

.nav-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 0 15px 12px;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
}

    .nav-sidebar-link:hover {
        color: #fff;
        text-decoration: none;
    }

.navbar-top {
    padding: 0 0 0 14px;
    box-sizing: border-box;
    height: 100%;
}

/*headerのnavタグ用CSS*/
.navbar-top-btn {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-subnav {
    position: relative;
    height: 32px;
    margin-bottom: 6px;
    width: 100%;
    top: -16px;
    z-index: 210;
}

.sidebar-subnav-inner {
    position: absolute;
    width: 100%;
    /* height: 40px; */
    overflow: hidden;
    border-radius: 16px;
    background-color: #ebebeb;
}

.sidebar-subnav-item {
    display: block;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    padding: 0.60rem;
    color: #000000;
}

    .sidebar-subnav-item:hover {
        color: #000000;
        text-decoration: none;
    }

.btn-sidebar-subnav-collapse {
    height: 32px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
    padding: .7em .375rem .8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../img/ic_pulldown_off.svg);
    background-position: right center;
    background-repeat: no-repeat;
}

    .btn-sidebar-subnav-collapse[aria-expanded="true"] {
        background-image: url(../img/ic_pulldown.svg);
    }

.sidebar-subnav-hr {
    border-top: 1px solid #d1d1d1;
    margin: 0 0 0.4rem;
}

.sidebar-subnav-collapse-list {
    padding: 0 1.5rem 0.8rem;
}

.sidebar-brand {
    width: 100%;
    height: 98px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 3px;
}

.sidebar-container {
    width: 100%;
    min-height: calc(100vh - 162px);
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 3rem;
    background-color: #505050;
}

.list-style-type-none {
    list-style-type: none;
}
/* Tab styles
-------------------------------------------------- */

/* グループの右側等のタブのcontainerスタイル */
.nav-tab {
    border-bottom: none;
    border-bottom: 1px solid #000;
    padding: 10px 2px 0;
    display: flex;
    flex-wrap: nowrap;
}

.nav-tab-item:first-child {
    /*margin-left: 0px !important;*/
}

/* タブボタンのスタイル */
.nav-tab-item {
    text-align: center;
    margin: 0 2px;
    padding-bottom: 0;
    box-sizing: content-box;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
    padding: 4px 4px 0;
}

/* タブレット・スマホ時のタブボタンのスタイル */
@media (max-width: 768px) {

    .nav-tab-item {
        width: 100% !important;
    }
}

/* タブボタンのhover時のスタイル */
.nav-tab-item:hover {
    color: #000;
}

/* タブボタンの選択状態時のスタイル */
.nav-tab-item.active {
    color: #000;
    font-weight: bold;
    border-bottom: 4px #000 solid;
}

/* 大き目のタブボタンのスタイル */
.nav-tab-item-lg {
    min-width: 142px;
}

.nav-tab-item-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

/*  Datatable styles
-------------------------------------------------- */
[data-check-all],
[data-uncheck-all],
[data-check-all]:hover,
[data-uncheck-all]:hover {
    color: #000;
}

a:not(.check-all) [data-check-all],
.check-all [data-uncheck-all] {
    display: block;
}

a:not(.check-all) [data-uncheck-all],
.check-all [data-check-all] {
    display: none;
}

table.dataTable > thead > tr > td,
table.dataTable > tbody > tr:not(.child) > th,
table.dataTable > tbody > tr:not(.child) > td {
    padding: 8px 4px;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

table.dataTable > thead > tr > th {
    padding: 8px 4px;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-align: left;
}

/* datatables内のwidthを設定しないカラム用css */
table.dataTable thead tr th.dt-max-width-none,
table.dataTable tbody tr:not(.child) td.dt-max-width-none {
    max-width: none;
    width: auto;
}

/* datatables内の小さいカラム用css */
table.dataTable thead tr th.dt-text-60px,
table.dataTable tbody tr:not(.child) td.dt-text-60px {
    max-width: 60px;
    width: 60px;
}

/* datatables内の小さいカラム用css */
table.dataTable thead tr th.dt-veryshort-text,
table.dataTable tbody tr:not(.child) td.dt-veryshort-text {
    max-width: 90px;
    width: 90px;
}

/* datatables内の少し大き目のカラム用css */
table.dataTable thead tr th.dt-text-2,
table.dataTable tbody tr:not(.child) td.dt-text-2 {
    max-width: 100px;
    width: 100px;
}

/* datatables内の少し大き目のカラム用css */
table.dataTable thead tr th.dt-text-3,
table.dataTable tbody tr:not(.child) td.dt-text-3 {
    max-width: 110px;
    width: 110px;
}
/* datatables内の大き目のカラム用css */
table.dataTable thead tr th.dt-text-4,
table.dataTable tbody tr:not(.child) td.dt-text-4 {
    max-width: 120px;
    width: 120px;
}

/* datatables内の大き目のカラム用css */
table.dataTable thead tr th.dt-text-5,
table.dataTable tbody tr:not(.child) td.dt-text-5 {
    max-width: 130px;
    width: 130px;
}

/* datatables内の大き目のカラム用css */
table.dataTable thead tr th.dt-text-6,
table.dataTable tbody tr:not(.child) td.dt-text-6 {
    max-width: 140px;
    width: 140px;
}

/* datatables内の大き目のカラム用css */
table.dataTable thead tr th.dt-text-7,
table.dataTable tbody tr:not(.child) td.dt-text-7 {
    max-width: 150px;
    width: 150px;
}

/* datatables内の大き目のカラム用css */
table.dataTable thead tr th.dt-text-8,
table.dataTable tbody tr:not(.child) td.dt-text-8 {
    max-width: 160px;
    width: 160px;
}

/* datatables内の大き目のカラム用css */
table.dataTable thead tr th.dt-text-9,
table.dataTable tbody tr:not(.child) td.dt-text-9 {
    max-width: 170px;
    width: 170px;
}

/* datatables内の大き目のカラム用css */
table.dataTable thead tr th.dt-text-10,
table.dataTable tbody tr:not(.child) td.dt-text-10 {
    max-width: 180px;
    width: 180px;
}

/* datatables内の大き目のカラム用css */
table.dataTable thead tr th.dt-text-11,
table.dataTable tbody tr:not(.child) td.dt-text-11 {
    max-width: 190px;
    width: 190px;
}

/* datatables内の大き目のカラム用css */
table.dataTable thead tr th.dt-text-10percent,
table.dataTable tbody tr:not(.child) td.dt-text-10percent {
    max-width: 10%;
    width: 10%;
}

/* datatables内の大き目のカラム用css */
table.dataTable thead tr th.dt-text-20percent,
table.dataTable tbody tr:not(.child) td.dt-text-20percent {
    max-width: 20%;
    width: 20%;
}

/* datatables内の大き目のカラム用css */
table.dataTable thead tr th.dt-long-text,
table.dataTable tbody tr:not(.child) td.dt-long-text {
    max-width: 200px;
}

/* datatables内のemailカラム用style emailは広めの幅にする */
table.dataTable thead tr th.dt-email-text,
table.dataTable tbody tr:not(.child) td.dt-email-text {
    max-width: 240px;
}

/* datatables内のemailカラム用style emailは広めの幅にする */
table.dataTable thead tr th.dt-maintenancestatu-text,
table.dataTable tbody tr:not(.child) td.dt-maintenancestatu-text {
    max-width: 400px;
}


@media (min-width: 768px) {

    /* ▼主にお知らせで使う幅調整用クラス▼ */
    .dt-width-md-10percent {
        width: 10% !important;
    }

    .dt-width-md-15percent {
        width: 15% !important;
    }

    .dt-width-md-75percent {
        width: 75% !important;
    }
    /* ▲主にお知らせで使う幅調整用クラス▲ */


    /* datatables内の大き目のカラム用css */
    table.dataTable thead tr th.dt-md-text-7,
    table.dataTable tbody tr:not(.child) td.dt-md-text-7 {
        max-width: 150px;
        width: 150px;
    }

    /* datatables内の大き目のカラム用css */
    table.dataTable thead tr th.dt-md-long-text,
    table.dataTable tbody tr:not(.child) td.dt-md-long-text {
        max-width: 200px;
    }

    /* datatables内の大き目のカラム用css */
    table.dataTable thead tr th.dt-md-text-25,
    table.dataTable tbody tr:not(.child) td.dt-md-text-25 {
        max-width: 330px;
        width: 330px;
    }
}

/* datatables内のたたまれた右側の値 */
table.dataTable > tbody > tr.child span.dtr-data {
    width: 48%;
    white-space: nowrap;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* datatables内のtheadの最初のカラム */
table.dataTable thead th:first-child, table.dataTable thead th.check:first-child {
    padding-left: 4px;
}

/* datatables内のtbodyの各列の最初のカラム */
table.dataTable > tbody > th:first-child, table.dataTable > tbody > tr:not(.child) > td:first-child {
    padding-left: 18px;
}

/* datatables内のカラムのborderを削除 */
table.dataTable thead th, table.dataTable thead td {
    border: none;
}

/* dataTablesをインスタンス化したtable */
table.dataTable {
    border-collapse: separate;
    border-spacing: 0 5px;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 90;
}

    table.dataTable.loading {
        opacity: 0;
    }

    /* datatablesのたたまれていないかつ、最初でも最後でもないカラム */
    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td,
    table.dataTable.display > tbody > tr > td:not(.child) {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background-color: #fff;
        cursor: default;
        position: relative;
    }

    /* datatablesのたたまれている要素 */
    table.dataTable tr td.child {
        border: none;
    }

    /* datatablesの全てのカラム */
    table.dataTable tr td {
        outline: none;
    }

    /* datatablesのたたまれている要素内のul */
    table.dataTable > tbody > tr.child ul.dtr-details {
        position: relative;
        top: -5px;
        width: 100%;
        table-layout: fixed;
        display: table;
        padding: 0.65rem 1rem 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border: 1px solid #d1d1d1;
        background-color: #ffffff;
        border-top: none;
    }

        /* datatablesのたたまれている要素内のulのli */
        table.dataTable > tbody > tr.child ul.dtr-details > li {
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid #7f7f7f;
            padding-left: 2px;
            padding-right: 2px;
            position: relative;
        }

            table.dataTable > tbody > tr.child ul.dtr-details > li > .dtr-data > .dt-btn-container {
                position: absolute;
                right: 0;
            }

    /* datatablesのtbodyのtr */
    table.dataTable tbody tr,
    table.dataTable.stripe tbody tr.odd,
    table.dataTable.display tbody tr.odd {
        background-color: #ffffff;
    }

    /* datatablesのtbodyのたたまれているtr */
    table.dataTable > tbody > tr.child {
        position: relative;
        background: none;
    }

    /* datatablesのtbodyのたたまれてないtrのカラム */
    table.dataTable > tbody > tr:not(.child) > td:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-left: 1px solid #ccc;
    }

    /* datatablesのtbodyのたたまれてるtrの左側のタイトル */
    table.dataTable > tbody > tr.child span.dtr-title {
        width: 50%;
        height: 1em;
        height: 1.4em;
        text-align: left;
    }

    /* datatablesのOPTIONでフッターを非表示にした時のtable */
    table.dataTable.no-footer {
        border: none;
    }

    /* datatablesの全ての隠れていない列のtdでno-hoverクラスがついていないtr内のカラムのスタイル */
    table.dataTable tr:not(.no-hover):not(.dt-remove):not(.child):hover td,
    table.dataTable tr:not(.no-hover):not(.dt-remove):not(.child).hover td,
    table.dataTable tr:not(.no-hover):not(.dt-remove):not(.child)[data-active] td,
    table.dataTable tr.checked:not(.child) td {
        cursor: default;
        outline: none !important;
        background-color: #d9e8eb !important;
        border-color: #17a2b8 !important;
    }

    /* datatablesの全ての隠れていない列のtdでno-editクラスもno-hoverクラスもがついていない
    選択状態のカラムのスタイル */
    table.dataTable tbody > tr.child:not(.no-edit):not(.no-hover).checked > td ul.dtr-details,
    table.dataTable tbody > tr.child:not(.no-edit):not(.no-hover).hover > td ul.dtr-details,
    table.dataTable tbody > tr.child:not(.no-edit):not(.no-hover):hover > td ul.dtr-details {
        border-color: #17a2b8 !important;
    }

    /* datatablesのカラムがたたまれているときに左側に表示される矢印のスタイル */
    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
        content: '';
        background-image: url(../img/ic_pulldown_off.svg);
        border-radius: 0px;
        background-color: transparent;
        border: 2px solid transparent;
        box-shadow: 0 0 0px;
        top: 5px;
        height: 20px;
        width: 20px;
        left: 2px;
        margin-top: 0;
    }

    /* datatablesの落ちた要素が表示されたときに左側に表示される矢印のスタイル */
    table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
    table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
        content: '';
        background-image: url(../img/ic_pulldown.svg);
        border-radius: 0px;
        background-color: transparent;
        border: 2px solid transparent;
        box-shadow: 0 0 0px;
        top: 5px;
        height: 20px;
        width: 20px;
        left: 2px;
    }

    /* datatablesの落ちた要素が表示されたときの親の列のスタイル */
    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"].parent > td,
    table.dataTable.display tbody tr.parent td {
        background-color: #d1d1d1;
        border-bottom: none;
    }

    /* datatablesの隠れた要素が表示されたときの、親の列の最初のカラムのスタイル */
    table.dataTable.dtr-inline.collapsed > tbody > tr.parent[role="row"] > td:first-child {
        border-bottom-left-radius: 0px !important;
    }

    /* datatablesの列の一番右側のスタイル */
    table.dataTable tr:not(.child) td.dt-responsive-body-last {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-right: 1px solid #ccc;
        padding-right: 14px;
    }

    /* datatablesの隠れた要素が表示されたときの、親の列の一番右側のスタイル */
    table.dataTable.display tbody tr.parent td.dt-responsive-body-last {
        border-bottom-right-radius: 0px !important;
    }

    /* datatablesの隠れた要素のtd */
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.child {
        position: relative;
        padding: 0;
        width: 50px;
    }

    /* datatablesの全てのtrのhover時のスタイルを無効にする */
    table.dataTable tr.no-hover,
    table .dataTable tr.no-hover:hover {
        background: none !important;
    }

    table.dataTable tr.dt-remove td {
        background-color: #999 !important;
    }
/* WIA1501_03リストのdatatablesの測定項目のスタイル */
.dt-display-name {
    border-left-width: 4px;
    border-left-style: solid;
    padding-left: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

tr:not(.child) .dt-display-name-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

tr.child .dt-display-name-wrapper {
    display: flex;
    justify-content: flex-end;
}

/* datatablesのタイトルがすべて選択列のスタイル */
.dt-all-check {
    padding-right: 17px !important;
}

    /* datatablesのタイトルがすべて選択列のリンクのスタイル */
    .dt-all-check a {
        color: #000000;
        text-decoration: none;
    }

/* datatablesの小さめに表示したい列のカラムに設定するスタイル */
.dt-text-item-small {
    font-size: 10px;
    line-height: 0.5em;
}

/* 未使用？ */
.dt-input-item {
    width: 100%;
    border-radius: 4px;
    border: solid 1px #d1d1d1;
    background-color: #ffffff;
    padding: 0.1rem 0.3rem;
    box-sizing: border-box
}

.dt-input-item-small {
    font-size: 0.4em;
}

.dt-select-color {
    border: solid 1px #d1d1d1;
    background-color: #ffffff;
    border-radius: 4px;
    width: 3rem;
    padding: 0.1rem 0.2rem;
}

/* datatablesのソートボタン */
.dt-sort-icon {
    margin-left: 0.25rem;
}

.child .dt-child-inline {
    display: inline-block;
}

/* datatablesのsortボタンのスタイル */
.dt-order-btn {
    color: #000;
    background-size: 16px 16px;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 18px;
    background-image: none;
    background-repeat: no-repeat;
    display: inline-block;
    min-height: 16px;
}

/* datatablesの隠れた要素内についたdt-order-btnクラスのスタイルを打ち消す */
table.dataTable tr td.child a.dt-order-btn {
    border: none;
    cursor: default;
}

/* activeなsortボタンのスタイル */
.dt-order-btn.active {
    font-weight: 900;
}

/* datatablesのカラム内のbuttonのスタイル */
.dt-post-btn {
    padding-top: 0.4em !important;
    padding-bottom: 0.4em !important;
    text-align: right !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

    /* datatablesのカラム内のbuttonが落ちたときに非表示にならないようにするスタイル */
    .dt-post-btn .dtr-data {
        text-overflow: clip !important;
    }

/* datatablesのsortボタンが昇順の場合のスタイル */
.active[data-order-btn][data-order-asc="true"] {
    background-image: url(../img/ic_sortup.svg);
}

/* datatablesのsortボタンが降順の場合のスタイル */
.active[data-order-btn][data-order-asc="false"] {
    background-image: url(../img/ic_sortdown.svg);
}

/* datatablesのtable要素の親要素のdiv */
.dataTables_wrapper {
    min-height: 150px;
}

    /* datatablesの読み込み中に表示される要素 */
    .dataTables_wrapper .dataTables_processing {
        top: 70px;
        background: none;
        z-index: 99;
    }

/* datatablesのでhover時のポインタを矢印に変える */
.dt-cursor-pointer-tr td {
    cursor: pointer !important;
}

/* datatablesのdataが空だった場合のスタイル */
.dataTables_empty {
    text-align: center !important;
}

/* datatablesの左側のcheckboxのスタイル */
.dt-custom-checkbox {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    min-height: 0;
}

/* datatablesのたたまれた要素がある場合のtheadの初めのthのスタイル
左側に矢印が出るためその分paddingをとる */
table.dataTable.collapsed thead tr th:first-child {
    padding-left: 30px;
}

/* parentのtdのスタイル */
table.dataTable.collapsed tr:not(.child) td:hover {
    cursor: pointer !important;
}

.dt-custom-checkbox-clickarea {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    cursor: pointer;
}

table.dt-admin.dataTable > thead > tr > th,
table.dt-admin.dataTable > tbody > tr:not(.child) > th,
table.dt-admin.dataTable > tbody > tr:not(.child) > td {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/*  datatablesのpagerのスタイル
-------------------------------------------------- */
.page-link {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: center;
    background: none;
}

/* datatablesのpagerのitemの選択中の要素のスタイル */
.page-lightblue {
    color: #000;
    background-color: #c4dbe0;
    border-color: #c4dbe0;
}

/* datatablesのpagerのitemの色を付けない要素のスタイル */
.page-colornone {
    color: #000;
    background: none;
    border: none;
}

/* datatablesのpagerのitemを丸くするスタイル */
.page-circle {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    margin: 0 3px;
    border-radius: 1000px !important;
    border: none;
}

    /* datatablesのpagerのitemのactive時のスタイル */
    .page-circle.active {
        background-color: #c4dbe0;
        cursor: default;
        color: #000000;
    }

        .page-circle.active:focus {
            box-shadow: none;
        }


    /* datatablesのpagerのitemのactiveではない要素のhover時のスタイル */
    .page-circle:not(.active):hover {
        background-color: #c4c4c4;
        color: #000;
    }

/* Chart styles
-------------------------------------------------- */

/*正常、アラーム、メンテナンスのicon共通*/
.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: solid 1px #ff8900;
    color: #ff8900;
    padding: 0 0.5rem;
    background-repeat: no-repeat;
    background-position: 3px center;
    min-width: 90px;
    height: 24px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
}

/*正常用*/
.icon-normal {
    background-image: url(../img/ic_statusbadge_normal.svg);
    border: solid 1px #72ce99;
    color: #72ce99;
    padding-left: 24px;
}

/*アラーム用*/
.icon-alarm {
    background-image: url(../img/ic_statusbadge_alarm.svg);
    border: solid 1px #ff4500;
    color: #ff4500;
    padding-left: 24px;
}

/*メンテナンス用*/
.icon-maintenance {
    background-image: url(../img/ic_statusbadge_maintenance.svg);
    border: solid 1px #ff8900;
    color: #ff8900;
    padding-left: 24px;
}

/*チャート情報表示カード用*/
.measurement-card-item {
    width: 100%;
    border-radius: 4px;
    border: solid 1px #d1d1d1;
    background-color: #f7f7f7;
    height: 66px;
}

@media (min-width: 768px) {
    .measurement-card-item {
        width: 316px;
    }
}

/*1501_01チャート情報表示カードWrap用*/
.measurement-card-item-wrapper {
    display: block;
    width: 100%;
}

@media (min-width: 768px) {
    .measurement-card-item-wrapper {
        display: inline-block;
        width: auto;
    }
}

.measurement-card-item-wrapper .measurement-card-item:hover {
    border: solid 1px #30749f;
    background-color: #d9e8eb;
}

/*チャート情報表示カードbody用*/
.measurement-card-body {
    border-left-style: solid;
    border-left-width: 6px;
}

    .measurement-card-body div:nth-child(1) {
        width: 60%;
    }

    .measurement-card-body div:nth-child(2) {
        width: 40%;
    }

/* チャート情報表示用カードの名前*/
.measure-item-name {
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* チャート情報表示用カードのvalue */
.measure-item-value {
    font-size: 22px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: right;
    color: #000000;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* チャート情報表示用カードの時間 */
.measure-item-time {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* チャート情報表示用カードの単位 */
.measure-item-unit {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: right;
    color: #000000;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*間引きされているチャートのlegend用*/
.is-thinned {
    background-color: #000000;
}

/*1501_01 表示すべてONボタン用CSS*/
[data-alldisplay-btn][data-display-mode="show"] {
    background-color: #5d5d5d !important;
}

    [data-alldisplay-btn][data-display-mode="show"]:hover {
        background-color: #9f9f9f !important;
    }

[data-alldisplay-btn][data-display-mode="hide"] {
    background-color: #d1d1d1 !important;
}

    [data-alldisplay-btn][data-display-mode="hide"]:hover {
        background-color: #9f9f9f !important;
    }

[data-display-mode] img {
    margin-top: -3px;
}

[data-display-mode] [data-chartdisp-text] {
    display: inline-block;
    margin-top: 5px;
}

[data-chartitem-disp] {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    text-align: left;
}

[data-display-mode="show"] [data-chartdisp-text="hide"],
[data-display-mode="hide"] [data-chartdisp-text="show"],
[data-chartitem-disp="show"] [data-chartdisp-text="hide"],
[data-chartitem-disp="hide"] [data-chartdisp-text="show"] {
    display: none;
}

.chart-tr > td {
    padding-top: 0.5rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    border-radius: 10px;
}

/*チャート表示用tdのheader*/
.chart-item-header {
    display: flex;
}

/*チャート表示用tdの左上のアイコン用*/
.chart-item-header-left {
    display: flex;
    padding-top: 0.35rem;
}

/*チャート表示用tdの右上のアイコン用*/
.chart-item-header-right {
    display: flex;
    justify-content: flex-end;
    order: 2;
    margin-left: auto;
}

/*チャート表示用tdの右上のボタン用*/
.chart-item-header-right-button {
    display: flex;
    justify-content: flex-end;
    order: 2;
    margin-left: auto;
    padding-top: 0.35rem;
}

/*チャート表示用tdのエリアポイント用*/
.chart-item-info {
    display: table;
    margin-bottom: .25rem;
    border-spacing: 0 2px;
    padding-top: 0.25rem;
    padding-left: 1px;
    padding-bottom: .4rem;
}

    .chart-item-info dl {
        display: table-row;
    }

        .chart-item-info dl dt {
            display: table-cell;
            margin-right: 1rem;
            font-weight: normal;
            white-space: nowrap;
            width: 10px;
            padding-right: 0.75rem;
            padding-bottom: 0rem;
        }

        .chart-item-info dl dd {
            display: table-cell;
            font-weight: bold;
        }

/*チャート表示非表示切り替えボタン用*/
.legend {
    text-align: right;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.legend-item {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    color: white;
    margin-left: 1rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    background-image: url("../img/ic_graf_on_normal.svg");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
}

    .legend-item.is-thinned {
        background-image: url("../img/ic_graf_on_thinned.svg");
    }

    .legend-item[data-chart-disp="false"] {
        background-color: transparent !important;
        background: none;
    }

/*チャート表示部用*/
.chart-draw-item {
    width: 100%;
}

/*チャート表示切替ボタン用*/
.chart-disp {
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}

/*チャート表示部Wrap用*/
.chart-item {
    background: #fff;
    border-radius: 20px;
}

/*チャート間引きメッセージ表示用*/
.chart-thinned-text {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: right;
    color: #5d5d5d;
}

.c3-ygrid-line {
    opacity: 0;
}

.c3-tooltip th,
.c3-tooltip td {
    border-radius: 0px !important;
}

.c3-grid .c3-line-dot text {
}

/*.c3-grid .c3-line-dot line {
    fill: none;
    stroke: #09d;
    stroke-width: 1;
    stroke-dasharray: 3;
}
*/
.c3-grid .c3-ygrid-line line {
    fill: none;
    stroke: #d1d1d1;
    stroke-width: 1;
    stroke-dasharray: 3;
}

.c3-grid .c3-ygrid-line line {
    fill: #d1d1d1;
}
/*  Footer styles
-------------------------------------------------- */
.footer {
    background-color: #ebeaea;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    z-index: 100;
}

.footer-datatables {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
}

.footer-wrapper .footer {
    background: none;
}

.footer-wrapper .footer-datatables {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
}

.select-small {
    font-weight: bold;
    width: 70px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    border: solid 1px #d1d1d1;
    background-color: #ffffff;
    padding-left: 15px;
}

.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 16px 10px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000 \9;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 10px;
}
/*
.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 16px;
    background-color: #fff;
}*/

.carousel-control-prev.carousel-control-help,
.carousel-control-next.carousel-control-help {
    width: 10%;
}

.carousel-control-prev-icon {
    background-image: url(../img/ic_back.svg);
    width: 32px;
    height: 32px;
}

.carousel-control-next-icon {
    background-image: url(../img/ic_forward.svg);
    width: 32px;
    height: 32px;
}

/*Datepicker style
-------------------------------------------------- */
.ui-datepicker {
    z-index: 9000 !important;
}

    .ui-datepicker .ui-priority-secondary,
    .ui-datepicker .ui-widget-content .ui-priority-secondary {
        opacity: 1 !important;
        font-weight: bold;
    }

table.hover .ui-state-active {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}
/*Other style
-------------------------------------------------- */

/*WIA1501_04エリアポイントカード用*/
.measure-info {
    width: 100%;
}

@media (min-width: 768px) {
    .measure-info {
        width: calc(316px + 1rem);
    }
}

.measure-info .measurement-card-item {
}

.measure-list-container {
    width: 100%;
    display: flex;
}

@media (min-width: 768px) {
    .measure-list-container {
        width: calc(100% - calc(316px + 1rem));
    }
}

.measure-list {
    list-style-type: none;
    font-weight: 900;
    margin: 0;
    padding: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .measure-list {
        max-width: 500px;
    }
}

.measure-list li {
    padding: 0.5rem 0;
    /*margin-bottom: 0.5rem;*/
    border-bottom: solid 1px #d1d1d1;
    display: flex;
    justify-content: space-between;
}

    .measure-list li:last-child {
        border-bottom: none;
    }

.measure-item-title {
    padding-right: 0.5rem;
    white-space: nowrap;
}

.measure-item-content {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 70%;
}

.message {
    border-radius: 10px;
}


/*Terms style
-------------------------------------------------- */

/*利用規約でしか使わないmodal用クラス
スクロールが必ず発生するようにmax-heightを指定する。*/
.modal-body-terms {
    max-height: 300px;
    overflow-y: visible;
    padding: 10px 1rem;
}

.terms-textarea {
    max-height: 280px;
}

/*Group style
-------------------------------------------------- */
/*グループフッター用*/
.layout-footer main.group-main {
    padding-bottom: 0;
}

/*グループMAIN用*/
.group-main {
    min-height: 0;
}

/*グループコンテンツ用*/
.group-contents {
    width: 100%;
}

/*フッターのあるグループコンテンツ用*/
.layout-footer .group-contents {
    padding-bottom: 100px;
}

.container-group {
    padding: 0;
}

@media (min-width: 768px) {
    .group-main {
        min-height: calc(100vh - 64px);
        padding-bottom: 0 !important;
    }
}

/*フッターのあるグループコンテナ用*/
.layout-footer .group-container {
    min-height: 0;
}

@media (min-width: 768px) {
    .layout-footer .group-container {
        min-height: calc(100vh - 64px);
    }
}

/*グループツリー表示用*/
.group-sidebar {
    min-height: 0;
    width: 100%;
    background-color: #ebeaea;
}

@media (min-width: 768px) {
    .group-sidebar {
        min-height: calc(100vh - 64px);
        width: 348px;
    }
}

/*alert style
-------------------------------------------------- */
/*alert共通*/
.alert {
    z-index: 2000;
}
/*ヘッダーに出すalertのスタイル*/

.alert-center {
    z-index: 500;
    top: 0;
    padding: 0.2rem;
    left: 50%;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.header .alert-wrapper,
.alert-wrapper.alert-fixed {
    position: fixed;
    z-index: 500;
    top: 0;
    padding: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    width: 100%;
}

/*modalの中に出すalertのスタイル*/
.modal-header .alert-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    flex-basis: auto;
    width: 100%;
}

/*custom alertのスタイル*/
.alert-custom {
    width: 100%;
    display: flex;
    align-items: center;
}

/* 上から降ってくるalertのスタイル*/
div.alert-downslide {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 700px;
    z-index: 90000;
    animation: anime1 5s ease -2s 1 alternate;
}

@keyframes anime1 {
    0% {
        top: -200px;
    }

    100% {
        top: 100px;
    }
}

/*グループツリーのタイトル*/
.group-tree-title {
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
    text-align: left;
}

/*Help style
-------------------------------------------------- */
.container-help {
    border-radius: 16px;
    border: solid 1px #d1d1d1;
    background-color: #ebeaea;
}

.card-help {
    max-width: 300px;
    width: 100%;
    background: none;
    border: none;
    margin-bottom: 0.5rem;
}

/*@media (min-width: 768px) {
.card-help {
    max-width: 300px;
}
}*/

@media (min-width: 992px) {
    .card-help {
        max-width: 240px;
    }
}

@media (min-width: 1200px) {
    .card-help {
        max-width: 300px;
    }
}

.card-body-help {
    border: none;
    width: 100%;
    height: 170px;
    border-radius: 4px;
    background-color: #ffffff;
    flex: 0 1 auto;
    margin-bottom: 0.25rem;
    padding: 0.25rem;
}

.card-help-text {
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
    padding: 0.5rem;
}

.card-body-help p {
    text-align: center;
}

.card-footer-help {
    border: none;
    background: none;
}

@media (min-width: 992px) {
    .card-arrow {
        height: 170px;
    }
}

.icon-set {
    display: inline-block;
    border-radius: 8px;
    border: solid 1px #b3b3b3;
    background-color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: center;
    color: #b3b3b3;
    margin-top: 12px;
    padding: 0.1rem 0.5rem;
}

.is-set {
    border: solid 1px #ff8900;
    color: #ff8900;
}

/* お知らせ style
-------------------------------------------------- */
/*お知らせ詳細表示body用*/
.card-notice-item {
    border-radius: 10px;
    border: solid 1px #d1d1d1;
    background-color: #ffffff;
    margin-top: 0.75rem;
}

@media (max-width: 767px) {

    .notice-wavyline {
        padding-top: 10px;
        margin-bottom: -10px;
    }
}

.notice-img-item{
    display: flex;
}
    .notice-img-item input[type="file"] {
        width: 400px;
    }
.notice-view-img{
    max-height: 300px;
    max-width: 300px;
}
.notice-img-delete{
    padding-left: 10px;
}
[data-notice-imgfile] span {
    display: none;
}

/*Select2 style
-------------------------------------------------- */
.select2-container {
    width: 100% !important;
}

    .select2-container .select2-selection--single {
        height: auto !important;
    }

.color-select-item {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.dtr-data .color-select-item {
    float: right;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da !important;
}

.select2-selection__rendered {
    height: calc(1.5em + .75rem) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    padding-right: 1.4rem;
    font-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../img/ic_pulldown.svg);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: right center;
}

.select2-container--disabled .select2-selection__rendered {
    background-image: url(../img/ic_pulldown_disabled.svg);
}


.container-select-disabled-arrownone .select:disabled,
.container-select-disabled-arrownone .select2-container--disabled .select2-selection__rendered {
    background-image: none;
}

.select2-selection__arrow {
    display: none;
}

.select2-selection.select2-selection--single:focus {
    outline: 0 !important;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 100px !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #e9ecef !important;
}


/*契約プラン style
-------------------------------------------------- */
/*ライトスタンダートプラスはそれぞれのコンテナに専用クラスを一つつけ色を変える。それ以外は共通CSSを使う
スマホ表示時、アイテム数、現在表示箇所の点用CSS*/
.carousel-indicators-contract {
    position: relative;
}

    .carousel-indicators-contract li {
        background-color: #000000 !important;
        margin: 5px !important;
    }

/*全契約プランコンテナ*/
.contract-plan-container {
    width: 100%;
    margin-top: 2rem;
}

@media(min-width: 992px) {

    .contract-plan-container {
        margin: 0 auto;
        padding-right: 100px;
        width: 1010px;
    }
}

.contract-plan-container .carousel-inner {
    overflow: visible;
}

@media(min-width: 992px) {

    .contract-plan-container .carousel-item {
        display: block;
        margin-right: 10px;
    }
}

/*契約プランコンテンツのinnerクラス*/
.carousel-item:not(.is-selected) .contract-plan-contents .contract-plan-item-inner {
    border-color: #d1d1d1;
    border-top-width: 0px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-style: solid;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    background-color: #fff;
}

.carousel-item .contract-plan-contents .contract-plan-item-list {
    border-color: #fff;
    border-top-width: 0px;
    border-left-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-style: solid;
}

/*ライト、スタンダード等のアイテム用コンテナ*/
.contract-plan-item {
    width: 252px;
    margin: 0 auto;
}

    .contract-plan-item:not(:last-child) {
        margin-right: 16px;
    }

@media(min-width: 768px) {
    .contract-plan-item {
        max-width: 252px;
        width: 100%;
    }
}

/*契約プランアイテムコンテンツ用CSS*/
.contract-plan-contents {
    background-color: #fff;
    overflow: hidden;
    border-radius: 16px;
    flex-shrink: 0;
}

    /*契約プランアイテム プランタイトル*/
    .contract-plan-contents h4 {
        color: #fff;
        height: 41px;
        padding-bottom: 3px;
        box-sizing: border-box;
        text-align: center;
        background-color: #30749f;
        font-size: 18px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        border-top-width: 3px;
        border-left-width: 3px;
        border-right-width: 3px;
        border-style: solid;
        border-color: transparent;
    }

/*契約プランアイテム 月額費用、貯める等のulのスタイル*/
.contract-plan-item .contract-plan-item-list {
    background-color: #fff;
    list-style-type: none;
    padding-top: 12px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    margin: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/*契約プランアイテム 月額費用、貯める等のulのアイテムのスタイル*/
.contract-plan-item-category {
    background-color: #ffffff;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    padding: 0.5rem 0 0 1.6rem;
}

    /*契約プランアイテム 月額費用、貯める等のulのアイテムの最後のmarginの調整*/
    .contract-plan-item-category:not(:last-child) {
        margin-bottom: 9px;
    }

/*契約プラン 月額費用*/
.contract-plan-item-category-monthlycost {
    height: 118px;
}

/*契約プラン 貯める*/
.contract-plan-item-category-collecting {
    height: 67px;
}

/*契約プラン みる*/
.contract-plan-item-category-visualization {
    height: 160px;
}

/*契約プラン 知らせる*/
.contract-plan-item-category-notification {
    height: 81px;
}

/*契約プラン 共有する*/
.contract-plan-item-category-sharing {
    height: 61px;
}

/*契約プラン セキュリティ*/
.contract-plan-item-category-security {
    height: 41px;
}

/*契約プラン セルタイトル*/
.contract-plan-item ul li h5 {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    margin-bottom: 0;
    color: #000000;
}

.contract-plan-item ul li p {
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: normal;
    text-align: left;
    margin-bottom: 0;
    color: #000000;
}

    .contract-plan-item ul li p span {
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
    }

.contract-plan-item ul.contract-plan-item-checklist {
    padding: 0;
    list-style-type: none;
}

.contract-plan-item-strong {
    padding-top: 5px !important;
    margin-bottom: 5px !important;
}

.contract-plan-item-checklist li {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #b3b3b3;
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: left center;
}

    .contract-plan-item-checklist li.check {
        font-weight: bold;
        color: #000000;
    }

/*契約プラン変更用ボタン*/
.contract-btn-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 16px;
}

    .contract-btn-container .contract-btn {
        width: 192px;
        height: 40px;
        border-radius: 18px;
        background-color: #ebeaea;
        border-width: 0;
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
    }

.contract-plan-item-name .contract-plan-contents {
    background: none;
    border: none;
}

/*契約プランがライトのコンテンツ用*/
/*.contract-plan-item-light .contract-plan-contents {
    border-color: #30749f;
    background-color: #30749f;
}*/

/*契約プランがスタンダードのコンテンツ用*/
/*.contract-plan-item-standard .contract-plan-contents {
    border-color: #f8943e;
    background-color: #f8943e;
}*/

/*契約プランがプラスのコンテンツ用*/
/*.contract-plan-item-plus .contract-plan-contents {
    border-color: #861ad9;
    background-color: #861ad9;
}*/

.contract-plan-item-name h4 {
    background: none;
}

.contract-plan-item-light h4 {
    background-color: #30749f;
    border-color: #30749f;
}

.carousel-item.is-selected .contract-plan-item-light ul {
    border-color: #30749f;
    border-top-width: 0px;
    border-left-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
}

.contract-plan-item-standard h4 {
    background-color: #f8943e;
}

.carousel-item.is-selected .contract-plan-item-standard ul {
    border-color: #f8943e;
    border-top-width: 0px;
    border-left-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
}

.contract-plan-item-plus h4 {
    background-color: #861ad9;
}

.carousel-item.is-selected .contract-plan-item-plus ul {
    border-color: #861ad9;
    border-top-width: 0px;
    border-left-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
}

.contract-plan-item-name {
    margin-right: 5px !important;
    width: 100px;
}

    .contract-plan-item-name ul {
        background: none;
        padding-left: 0;
        text-align: right;
    }

    .contract-plan-item-name .contract-plan-item-category {
        background: none;
        border: none;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 0;
    }

/*契約プランがライトのカテゴリー用クラス*/
.contract-plan-item-light .contract-plan-item-category {
    border-color: #73bfef;
}

/*契約プランがスタンダードのカテゴリー用クラス*/
.contract-plan-item-standard .contract-plan-item-category {
    border-color: #f8943e;
}

/*契約プランがプラスのカテゴリー用クラス*/
.contract-plan-item-plus .contract-plan-item-category {
    border-color: #861ad9;
}

/*契約プランがライトのチェックリスト用クラス*/
.contract-plan-item-light .contract-plan-item-checklist li.check {
    background-image: url(/img/ic_plan_check1.svg);
}

/*契約プランがスタンダードのチェックリスト用クラス*/
.contract-plan-item-standard .contract-plan-item-checklist li.check {
    font-weight: bold;
    color: #000000;
    background-image: url(/img/ic_plan_check2.svg);
}

/*契約プランがプラスのチェックリスト用クラス*/
.contract-plan-item-plus .contract-plan-item-checklist li.check {
    font-weight: bold;
    color: #000000;
    background-image: url(/img/ic_plan_check3.svg);
}

/* 契約プラン用ボタン*/
.btn-contract {
    width: 192px;
    height: 40px;
    border-radius: 10px;
    background-color: #ebeaea;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
}

/*契約プランのボタンhover用クラス*/
.btn-contract:hover {
    background-color: #eaeae8;
    color: #000;
}

/*契約プランがライトのボタン用クラス*/
.btn-contract-light {
    background-color: #30749f;
    color: #fff;
}

/*契約プランがスタンダードのボタン用クラス*/
.btn-contract-standard {
    background-color: #f8943e;
    color: #fff;
}

/*契約プランがプラスのボタン用クラス*/
.btn-contract-plus {
    background-color: #861ad9;
    color: #fff;
}

/*選択中の契約プランのボタン用クラス*/
.carousel-item.is-selected .btn-contract {
    background-color: #eaeae8;
    color: #000000;
    cursor: default;
    pointer-events: none;
}

/*予約中の契約プランのボタン共通クラス*/
.carousel-item.reserved .btn-contract {
    cursor: default;
    pointer-events: none;
    background-color: #fff;
}

/*予約中の契約プランがライトのボタン用クラス*/
.carousel-item.reserved .btn-contract.btn-contract-light {
    color: #30749f;
    border: 2px solid #30749f;
}

/*予約中の契約プランがスタンダードのボタン用クラス*/
.carousel-item.reserved .btn-contract.btn-contract-standard {
    color: #f8943e;
    border: 2px solid #f8943e;
}

/*予約中の契約プランがプラスのボタン用クラス*/
.carousel-item.reserved .btn-contract.btn-contract-plus {
    color: #861ad9;
    border: 2px solid #861ad9;
}

/*契約プランがライトのボタンフォーカス時用*/
.btn-contract-light:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(234,234,232,.25);
}

/*契約プランがスタンダードのボタンフォーカス時用*/
.btn-contract-standard:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(248,148,62,.25);
}

/*契約プランがプラスのボタンフォーカス時用*/
.btn-contract-plus:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(134,26,217,.25);
}

/*お支払い状況が処理中の場合*/
.payment-status-notprocessing,
.payment-status-processing

{
    color: #000;
}

/*お支払い状況が未決済の場合*/
.payment-status-unpaid {
    color: #c00000;
}

.paymentmethod-radio{
    top: 0;
}

/* 支払方法選択アイテム タイトル */
.paymentmethod-title {
    font-size: 16px;
    margin-bottom: 0.75rem;
}
/* 支払方法選択アイテム 詳細 */
.paymentmethod-detail {
    font-size: 16px;
}

@media (min-width: 768px) {

    .paymentmethod-radio {
        top: auto;
        margin-bottom: 0.25rem;
    }

    /* 支払方法選択アイテム タイトル */
    .paymentmethod-title {
        width: 190px;
        margin-bottom: 0;
    }

    /* 支払方法選択アイテム 詳細 */
    .paymentmethod-detail {
        width: calc(100% - 190px);
    }
}

/*アラーム
-------------------------------------------------- */
    .alarm-condition-error {
    color: #c00000;
}
/*メール通知先datatableds用*/
.container-dt-mail .dataTables_wrapper {
    min-height: 0 !important;
}

/*アラーム条件解除条件アイテム用*/
.record-item {
    margin-bottom: 0.75rem;
}

/*アラーム条件解除条件アイテムbody用*/
.record-item-body {
    border: 1px solid #000;
    border-radius: 5px;
    padding: 0.5rem;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

/*アラーム条件解除条件アイテムbody レスポンシブ改行位置指定用*/
.record-item-row {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: .25rem;
}

@media (min-width: 768px) {
    .record-item-row {
        width: auto;
        margin-bottom: 0;
    }
}

/*アラーム条件解除条件 論理条件用*/
.record-logical-condition {
    margin: 0.5rem 0;
}

/*アラーム条件解除条件 削除用*/
.record-item-delete {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .record-item-delete {
        bottom: auto;
    }
}

/*アラーム条件解除条件 測定項目用*/
.form-group-measure-item {
    width: calc(70% - 50px);
}

@media (min-width: 768px) {
    .form-group-measure-item {
        width: 14em;
    }
}

/*アラーム条件解除条件 比較条件用*/
.form-group-comparison {
    width: 50px;
}

@media (min-width: 768px) {
    .form-group-comparison {
        width: 10em;
    }
}

/*アラーム条件解除条件 閾値用*/
.form-group-threshold {
    width: 30%;
}

@media (min-width: 768px) {
    .form-group-threshold {
        width: 8em;
    }
}

/*アラーム条件解除条件 継続時間用*/
.form-group-duration {
    width: 30%;
}

@media (min-width: 768px) {
    .form-group-duration {
        width: 6em;
    }
}

/*アラーム条件解除条件 基準値用*/
.form-group-base-value {
    width: 30%;
}

/*アラーム点検モード有効無効ボタン用*/
@media (max-width: 1299.98px) {
    #InspectionModeDisEnabled,
    #InspectionModeEnabled {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media (min-width: 768px) {
    .form-group-base-value {
        width: 8em;
    }
}

/*アラーム条件解除条件 測定項目用*/
[data-measure-item] {
    width: 100%;
}

/*アラーム条件解除条件 比較条件用*/
[data-comparison] {
    width: 100%;
}

/*アラーム条件解除条件 閾値用*/
[data-threshold] {
    width: 100%;
}

/*アラーム条件解除条件 継続時間用*/
[data-duration] {
    width: 100%;
}

/*アラーム条件解除条件 基準値用*/
[data-integrated-base-value] {
    width: 100%;
}

.btn-record-item {
    width: 132px;
    height: 24px;
    border-radius: 10px;
    background-color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 0;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
}

/*解除条件のレコードの削除ボタンを非表示にし、測定項目と比較条件をdisabledにする*/
#SolveConditionRecords [data-record-delete] {
    display: none;
}

#SolveConditionRecords [data-measure-item],
#SolveConditionRecords [data-comparison] {
    background-image: none;
}

[data-input-number]::-webkit-outer-spin-button,
[data-input-number]::-webkit-inner-spin-button,
[data-threshold]::-webkit-outer-spin-button,
[data-threshold]::-webkit-inner-spin-button,
[data-duration]::-webkit-outer-spin-button,
[data-duration]::-webkit-inner-spin-button,
[data-integrated-base-value]::-webkit-outer-spin-button,
[data-integrated-base-value]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}




/*メンテナンス
-------------------------------------------------- */
.maintenance-condition-error {
    color: #c00000;
}

/*メンテナンス繰り返し条件*/
.form-group-intervaldays {
    margin-bottom: 0.5rem;
}

    .form-group-intervaldays input {
        width: 6em;
        -webkit-appearance: none;
    }

.maintenance-status-icon-item {
    display: flex;
    align-items: center;
    height: 2.5rem;
    line-height: 1.1rem;
}

/* MAP */
.map {
}

.container-mapfilter {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
}

    .container-mapfilter .searchbox {
        margin-bottom: 0;
    }

.container-map {
    height: calc(100vh - 64px);
}

.map-expand {
    width: 100%;
    height: 100%;
}

.gm-style .gm-style-iw-c {
    width: 284px;
    max-width: none !important;
    padding: 15px 5px 5px !important;
    max-height: 350px !important;
    top: 110px !important;
}

.gm-style .gm-style-iw-t::after {
    top: 110px !important;
}

.gm-style .gm-style-iw-tc {
    width: 0px !important;
    height: 0px !important;
}

.gm-style .gm-style-iw-tc::after {
    display: none !important;
}

.gm-style .gm-style-iw-d {
    overflow: auto !important;
    max-height: 330px !important;
}

.gm-ui-hover-effect {
    top: -6px !important;
    right: 2px !important;
}

    .gm-ui-hover-effect img {
        width: 24px !important;
        height: 24px !important;
    }

.infowindow-item {
    width: calc(100% - 16px);
    margin: 0 auto;
}

    .infowindow-item .measurement-card-item-wrapper,
    .infowindow-item .measurement-card-item {
        width: 100%;
    }

/* WIA1102_02 利用料金
-------------------------------------------------- */
/*バリデーションメッセージ用*/
.notification-item {
    border-radius: 16px;
    border: solid 1px #c13a7d;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #c13a7d;
    padding: 1rem 1.2rem;
    margin: 1rem 0 0;
}

/*項目アイテム用*/
.payment-item {
    display: flex;
    justify-content: space-between;
    max-width: 608px;
    margin: 0 auto 0.7rem;
}

    .payment-item dt {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        margin: 0;
    }

    .payment-item dd {
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: right;
        color: #000000;
        margin: 0;
    }

/*太字の項目アイテム用*/
.payment-item-bold {
    border-bottom: 1px solid #000;
}

    .payment-item-bold dd {
        font-size: 20px;
    }

.payment-item-price dt,
.payment-item-price dd {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.6rem;
}

/* レポート
-------------------------------------------------- */
    /*レポート表示セル内header用*/
    .report-item-header {
    display: flex;
    flex-wrap: wrap;
}

/*レポート表示セル内header-left用*/
.report-item-header-left {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    order: 1;
    width: 50%;
    padding-left: 0.5rem;
}

/*レポート表示セル内header-right用*/
.report-item-header-right {
    display: flex;
    justify-content: flex-end;
    order: 2;
    width: 50%;
}

/*レポート表示セル内header-center用*/
.report-item-header-center {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    order: 3;
    width: 100%;
}

/*レポート表示セル内header-right-center用*/
.report-item-header-right-center {
    display: flex;
    justify-content: center;
    align-items: center;
    order: 4;
    padding-bottom: 0;
    width: 100%;
}

/*レポート表示セル内天気用*/
.report-temp {
    border: 2px solid #ccc;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    height: 32px;
    width: 130px;
    padding: 0.4rem 0.8rem 0.4rem 1rem;
}

.report-has-temp {
    color: #000;
    padding-right: 1.2rem;
}

/*レポート表示セル内最高気温用*/
.report-high-temp {
    color: #ff5f5f;
    padding-right: 0.5rem;
    text-align: right;
    width: 45px;
    box-sizing: content-box;
}

/*レポート表示セル内最低気温用*/
.report-low-temp {
    color: #2fafff;
    text-align: right;
    width: 45px;
    box-sizing: content-box;
}

/*レポート表示セル内気温単位用*/
.report-temp-unit {
    font-size: 12px;
}

@media (min-width: 992px) {
    .report-item-header-left {
        order: 1;
        width: 25%;
    }

    .report-item-header-right {
        order: 4;
        width: 5%;
    }

    .report-item-header-center {
        order: 2;
        width: 50%;
    }

    .report-item-header-right-center {
        order: 3;
        width: 20%;
        padding-bottom: 0.5rem;
    }
}
@media (min-width: 1300px) {
    .d-xxl-none {
        display: none !important;
    }
    .d-xxl-inline {
        display: inline !important;
    }
    .d-xxl-inline-block {
        display: inline-block !important;
    }
    .d-xxl-block {
        display: block !important;
    }
    .d-xxl-table {
        display: table !important;
    }
    .d-xxl-table-row {
        display: table-row !important;
    }
    .d-xxl-table-cell {
        display: table-cell !important;
    }
    .d-xxl-flex {
        display: -ms-flexbox !important;
        display: flex !important;
    }
    .d-xxl-inline-flex {
        display: -ms-inline-flexbox !important;
        display: inline-flex !important;
    }
}

@media (min-width: 1300px) {
    .float-xxl-left {
        float: left !important;
    }
    .float-xxl-right {
        float: right !important;
    }
    .float-xxl-none {
        float: none !important;
    }
}

/*レポート日付表示用*/
.report-date {
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
}

/*レポートタイプボタン用*/
.report-datetype-btn {
    min-width: 50px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background-color: #f4f4f4;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
    padding: 0 0.5rem;
}

    .report-datetype-btn:hover {
        text-decoration: none;
    }

    .report-datetype-btn.active {
        background-color: #c4dbe0;
    }

.report-list-day {
    display: inline-block;
    border-radius: 1000px;
    background-color: #ebeaea;
    font-size: 10px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
    width: 18px;
    height: 18px;
}

/*レポートデータ表示部コンテナ*/
.report-table-wrapper {
    overflow-x: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

.report-table {
    position: relative;
    left: 10px;
    box-sizing: border-box;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    padding-bottom: 1rem;
    border-spacing: 0 0;
}

[data-type="Daily"] .report-title-link:hover {
    background-color: #ebeaea !important;
    cursor: default !important;
}
/*.report-weekly .report-table > thead > tr > th > a.report-title-link:hover {
    background-color: #ebeaea;
}*/

/*レポートDataSheetテーブル用*/
.report-table th,
.report-table td {
    height: 24px !important;
    padding: 0 !important;
    border-top: none !important;
    box-sizing: border-box !important;
}

/*レポートDataSheetテーブル左上の「時間」リソース用*/
.report-table > thead > tr > th.report-thead-title {
    min-width: 90px;
    max-width: 200px;
    padding-left: 6px !important;
    padding-right: 4px !important;
}

.report-table tr {
    background: none !important;
}

.report-table > thead > tr > th {
    min-width: 38px;
    max-width: 80px;
}

.report-table > thead > tr:hover {
    background: none !important;
}

/*レポートDataSheetテーブル左側項目のタイトル用*/
.report-table > tbody > tr > th.report-table-item-title {
    overflow-x: auto;
    -ms-overflow-style: none; /* IE, Edge 対応 */
    scrollbar-width: none; /* Firefox 対応 */
    white-space: nowrap;
    padding-left: 8px !important;
    padding-right: 4px !important;
    position: relative;
    min-width: 90px;
    max-width: 200px;
}

    .report-table > tbody > tr > th.report-table-item-title::-webkit-scrollbar { /* Chrome, Safari 対応 */
        display: none;
    }

/*レポートDataSheetテーブルのデータ表示用*/
.report-table > tbody > tr > td {
    box-sizing: border-box;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

table.report-table td {
    height: 30px;
    border: none;
    box-sizing: border-box;
    border-top: none !important;
}

.report-table > tbody > tr > td {
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

.report-table > tbody > tr:nth-child(odd) td {
    background-color: #f7f7f7;
}

/*レポートのChartImgローディング用*/
.report-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-size: 18px;
}

/*レポートのDataSheet日付用*/
.report-title-link {
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #000000;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 100px;
    background-color: #ebeaea;
    margin: 0 auto 4px;
}

.report-title-link-day {
    background-color: #ccc;
}

table > thead > tr > th > a.report-title-link:hover {
    background-color: #c4dbe0;
    cursor: pointer;
}

.report-title-td {
    font-size: 9px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.44;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
}

/*レポートのコメント、レポート出力押下時メッセージ表示用*/
.report-info,.csv-info {
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: center;
    margin-bottom: 0.5rem;
    color: #30749f;
}

.report-comment-wrapper {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
}

    .report-comment-wrapper textarea {
        border: none;
        margin-bottom: 0.25rem;
    }

        .report-comment-wrapper textarea:focus {
            box-shadow: none;
        }

.report-comment-btn-group {
    display: flex;
    justify-content: center;
}

/*レポートの週報表示時時間タイトル用*/
.report-title-first,
.report-title-middle,
.report-title-last {
    position: relative;
}

    /*はじめの週報表示時時間タイトルは左側を丸くする*/
    .report-title-first span {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 25px;
        font-size: 14px;
        width: 100%;
        border-radius: 1000px 0 0 1000px;
        background-color: #ebeaea;
        position: relative;
        margin-left: 5px;
        margin-bottom: 2px;
    }

    /*間の週報表示時時間タイトルは丸くしない*/
    .report-title-middle span:not(.day-btn) {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 25px;
        font-size: 14px;
        width: 100%;
        border-radius: 0;
        background-color: #ebeaea;
        position: relative;
        margin-bottom: 2px;
    }

    /*最後の週報表示時時間タイトルは右側を丸くする*/
    .report-title-last span {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 25px;
        font-size: 14px;
        width: 100%;
        border-radius: 0 1000px 1000px 0;
        background-color: #ebeaea;
        position: relative;
        margin-right: 5px;
        margin-bottom: 2px;
    }

/*レポートのエラー表示DOM用*/
.report-error {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*レポートの測定項目の左側の中が白抜きのborder用*/
.border-around {
    display: block;
    position: absolute;
    left: 0;
    top: 4px;
    border-width: 1px;
    border-style: solid;
    width: 4px;
    height: 16px;
    box-sizing: border-box;
}

/*レポートの測定項目の左側の塗りつぶしのborder用*/
.border-fill {
    display: block;
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: 16px;
    box-sizing: border-box;
}

/*レポートの週報の日付用*/
.day-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;
    border-radius: 1000px;
    position: absolute;
    width: 24px;
    height: 24px;
    left: -12px;
    top: -12px;
    font-size: 14px;
    z-index: 10;
}

    .day-btn:hover {
        background-color: #c4dbe0;
        cursor: pointer;
    }

.datepicker {
    z-index: 200 !important;
}

.ui-state-custom-select {
    border: 1px solid #003eff !important;
    background: #007fff !important;
    font-weight: normal !important;
    color: #ffffff !important;
}

.custom-datepicker-monthly .ui-datepicker-calendar {
    display: none;
}

/* WIA_1501_03 リスト
-------------------------------------------------- */
/*非表示のデータ用*/
.hidden-data {
    color: #d1d1d1;
}
/*非表示のデータの親tr用*/
.parent.hidden-data td {
    background-color: #ebeaea !important;
}

/*右上ヘルプポップアップボタン用*/
.maintenance-help-btn {
    position: absolute;
    margin-top: 12px;
}

/*300M系GWアラーム要素判定用クラス*/
.alarm-content {
    display: block;
}

/*300M系GWパルスカウント要素判定用クラス*/
.pulse-content {
    display: none;
}