@charset "UTF-8";
/* 20250124 */

html,body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 10px;
    color: var(--color-font-primary);
    background-color: var(--color-background-primary);
    touch-action: manipulation;
}
/*
:not(input):not(pre):not(textarea) {
    -ms-overflow-style: none;
    scrollbar-width: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    -webkit-text-overflow: ellipsis; 
}
*/
li {
    list-style: none;
}
.hidden,
.hide {
    display: none !important;
}
.protect {
    pointer-events: none;
}
#template {
    display: none;
}
sup, sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    position: relative;
}
sup { bottom: 1ex; }
sub { top: .5ex; }

header {
    display: flex;
    align-items: flex-end;
    width: 100%;
    padding: 2rem 6rem;
    background-color: var(--color-background-secondary);
    position: relative;
}
header h1 {
    font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    color: var(--color-h1);
    font-size: var(--size-h22);
    line-height: 1;
    margin: 0;
}
header #username {
    display: block;
    position: absolute;
    right: 10px;
    font-size: var(--size-p12);
    color: var(--color-font-white);
    padding: 0.25em 1em;
    border-radius: 4px;
    background-color: var(--color-h1);
    opacity: 0.8;
}
/* プログレスバー */
header progress#reload_progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
}

.sidemenu {
    height: 100vh;
    height: 100dvh;
    padding-top: 100px;
    position: fixed;
    width: auto;
    left: -100vw;
    transition: all 0.6s;
    top: 0;
    z-index: 200;
    background-color: var(--color-main);
}
nav ul li i {
    padding-right: var(--spacing-10);
    vertical-align: bottom;
}
nav ul li a {
    position: relative;
    display: block;
    font-size: var(--size-p16);
    color: var(--color-font-white);
    line-height: 1;
    width: 100%;
    padding: var(--spacing-16) var(--spacing-32);
    text-decoration: none;
}
nav ul li a:hover,
nav ul li.here,
nav ul li.here:hover,
nav ul li.here a,
nav ul li.here a:hover {
    background-color: var(--color-main-mouseover);
    cursor: pointer;
}
nav ul li.here,
nav ul li.here:hover,
nav ul li.here a,
nav ul li.here a:hover {
    cursor: default;
}
.hamburger {
    cursor: pointer;
    height: 60px;
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    z-index: 300;
}
.hamburger span {
    background-color: var(--color-attention);
    height: 4px;
    left: 15px;
    position: absolute;
    transition: all 0.6s;
    width: 30px;
}
.hamburger_linetop {
    top: 20px;
}
.hamburger_linecenter {
    top: 29px;
}
.hamburger_linebottom {
    top: 38px;
}
.nav_open .hamburger span {
    background-color: var(--color-font-white);
}
.nav_open .sidemenu {
    left: 0;
}
.nav_open .hamburger_linetop {
    top: 26px;
    transform: rotate(45deg);
}
.nav_open .hamburger_linecenter {
    left: 50%;
    width: 0;
}
.nav_open .hamburger_linebottom {
    top: 26px;
    transform: rotate(-45deg);
}
.nav_open .overlay {
    visibility: visible;
}
.overlay {
    background: linear-gradient(-105deg, rgba(0, 154, 204, 0.5), rgba(54, 55, 149, 0.5));
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    transition: all 0.6s;
    visibility: hidden;
    cursor: pointer;
    z-index: 100;
}

#view-frame {
    position: relative;
    width: 100%;
    padding: var(--spacing-20) var(--spacing-40);
}
#contents {
    position: relative;
    background-color: transparent;
    width: 100%;
}
#tenant:disabled,
#base:disabled {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.tab ul,
ul.tab {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-10);
    padding: 0;
}
.tab li {
    width: 13rem;
    position: relative;
    font-size: var(--size-p14);
    color: var(--color-font-white);
    background-color: var(--color-main);
    border-radius: var(--radius-04);
    padding: var(--spacing-07);
    border: none;
}
.tab li a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-font-white);
    text-decoration: none;
    width: 100%;
    cursor: pointer;
}
.tab li:hover,
.tab li.active {
    background-color: var(--color-main-mouseover);
    border: none;
}
.tab li.active a:hover {
    cursor: default;
}
.tab .badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.8em;
    height: 1.8em;
    background-color: var(--color-alert);
    border: 1px solid #fff;
    border-radius: 100%;
    color: var(--color-font-white);
    font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    font-size: var(--size-p12);
    position: absolute;
    right: -3%;
    margin-top: -29%;
}
.tab .badge.none {
    display: none;
}

button,
#detail_ok,
#conf_dialog_ok,
#alert_stop_ok,
#edit_ok {
    display: inline-flex;
    justify-content: center !important;
    align-items: center !important;
    font-size: var(--size-p14) !important;
    height: 1.4rem !important;
    background-color: var(--color-main) !important;
    color: var(--color-font-white) !important;
    border-radius: var(--radius-04) !important;
    padding: var(--spacing-14) !important;
    cursor: pointer;
    border: 1px solid var(--color-main) !important;
}
.tabulator-cell button,
.tabulator-headers button {
    font-size: var(--size-p12) !important;
    height: 1.2rem !important;
    padding: var(--spacing-12) !important;

}
button:hover,
#detail_ok:hover,
#conf_dialog_ok:hover,
#alert_stop_ok:hover,
#edit_ok:hover {
    color: var(--color-font-white) !important;
    background-color: var(--color-main-mouseover) !important;
    border: 1px solid var(--color-main-mouseover) !important;
}
.ui-button.ui-corner-all.ui-widget,
.edit-cancel,
.cancelBtn {
    display: inline-flex !important;
    color: var(--color-main) !important;
    background-color: var(--color-background-secondary) !important;
    border: 1px solid var(--color-main) !important;
}
.ui-button.ui-corner-all.ui-widget:hover,
.edit-cancel:hover,
.cancelBtn:hover {
    color: var(--color-main-mouseover) !important;
    background-color: var(--color-background-primary) !important;
    border: 1px solid var(--color-main-mouseover) !important;
}
.delete-button,
#delete-button {
    color: var(--color-font-white) !important;
    background-color: var(--color-alert) !important;
    border: 1px solid var(--color-alert) !important;
}
.delete-button:hover,
#delete-button:hover {
    color: var(--color-font-white) !important;
    background-color: var(--color-alert-mouseover) !important;
    border: 1px solid var(--color-alert-mouseover) !important;
}
.no-map-button,
.no-map-button:hover {
    color: var( --color-font-white) !important; 
    background-color: var(--color-border-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    cursor: not-allowed;
}

.ui-dialog-buttonpane {
    display: flex;
    left: 0;
    bottom: 0;
}
.ui-dialog .ui-dialog-buttonpane {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 var(--spacing-14) var(--spacing-14) var(--spacing-14) !important;
}


.tabContents {
    display: none;
}
.tabContents.active {
    display: block;
}
.notabContents, 
.tabContents {
    background-color: var(--color-background-secondary);
    padding: var(--spacing-16) var(--spacing-20);
    border-radius: var(--radius-04);
    box-shadow: var(--shadow);
    overflow: auto;
}
.tabulator {
    font-size: var(--size-p12) !important;
    color: var(--color-font-primary) !important;
    border: none !important;
    background-color: transparent !important;
    border: none !important;
    height: auto !important;
}
.notabContents > p,
.notabContents > table th,
.notabContents > table td,
.tabContents > p,
#ble_beacon > p,
#osm-map > p {
    font-size: var(--size-p14);
    color: var(--color-font-secondary);
    text-align: left;
}
.notabContents > table th,
.notabContents > table td {
    vertical-align: top;
    padding: var(--spacing-07) var(--spacing-28) var(--spacing-07) 0;
}
.align-right,
.notabContents > table th.align-right {
    text-align: right !important;
}
.notabContents > p,
.notabContents > table th,
.tabContents > p,
#ble_beacon > p,
#osm-map > p {
    font-weight: bold;
    white-space: nowrap;
    padding-right: var(--spacing-28);
}

.notabContents > p span {
    font-weight: normal;
    padding: 0 var(--spacing-07);
}
.tabulator .tabulator-row .tabulator-cell {
    font-size: var(--size-p12) !important;
    color: var(--color-font-primary) !important;
    margin: auto 0 !important;
}
.tabulator .tabulator-header {
    border: none !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
    background-color: var(--color-row-even) !important;
}
.tabulator .tabulator-row {
    border: none !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
}
.tabulator .tabulator-header .tabulator-col {
    border: none !important;
    background: none !important;
    overflow: hidden;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content,
.tabulator .tabulator-row .tabulator-cell {
    padding: var(--spacing-06) !important;
    margin: 0 !important;
}
.tabulator .tabulator-row .tabulator-cell {
    border: none !important;
}
.tabulator .tabulator-header .tabulator-header-contents {
    overflow: visible;
}
.tabulator .tabulator-row.tabulator-row-even {
    background-color: var(--color-row-even) !important;
}
.tabulator .tabulator-row.tabulator-selectable:hover {
    background-color: var(--color-background-primary) !important;
}
.tabulator .tabulator-row.tabulator-selected {
    background-color: var(--color-background-mouseover) !important;
}
.tabulator .tabulator-footer .tabulator-footer-contents {
    justify-content: flex-end;    
}
.tabulator-placeholder,
.tabulator-placeholder-contents {
    background-color: var(--color-background-secondary) !important;
}
.tabulator-placeholder-contents {
    color: var(--color-font-placeholder) !important;
    font-size: var(--size-p14) !important;
    padding: var(--spacing-20) !important;
}
.tabulator .tabulator-footer {
    background-color: transparent !important;
    border: none !important;
}
.tabulator .tabulator-tableholder {
    border-bottom: none !important;
}
.tabulator .tabulator-footer .tabulator-footer-contents {
    padding: var(--spacing-16) 0 !important;
}
.tabulator-cell.tabulator-row-handle:hover,
.tabulator-row-handle-box:hover {
    cursor: move;
}

.tabulator-cell.base-select i,
.tabulator-cell.notice-group-set i,
.tabulator-cell.opt-enable i,
.tabulator-cell.opt-able i,
.tabulator-cell.opt-disable i {
    line-height: 1;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
}
.tabulator-cell.base-select i,
.tabulator-cell.opt-disable i {
    color: var(--color-alert);
}
.tabulator-cell.notice-group-set i {
    color: var(--color-main);
}
.tabulator-cell.opt-enable i {
    color: var(--color-use);
}
.tabulator-cell.opt-able i {
    color: var(--color-font-placeholder);
}

.ui-widget-overlay {
    background: linear-gradient(-105deg, rgba(0, 154, 204, 0.5), rgba(54, 55, 149, 0.5));
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    opacity: 1;
}
.ui-dialog {
    width: 50vw !important;
    height: auto !important;
    top: 5vh  !important;
    top: 5dvh  !important;
    left: 25vw  !important;
    overflow: auto !important;
}

.ui-dialog.notice_group_edit_cont,
.ui-dialog.worker_detail_cont {
    width: 90vw !important;
    max-height: 90vh;
    max-height: 90dvh;
    left: 5vw !important;
}
.ui-widget-content {
    color: var(--color-font-primary);
}
.ui-widget {
    font-size: var(--size-p14) !important;
}
.ui-dialog .ui-dialog-titlebar {
    font-size: var(--size-p14) !important;
    color: var(--color-main) !important;
    background: var(--color-background-primary) !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: var(--radius-04) !important;
    padding: var(--spacing-07) var(--spacing-14) !important;
    cursor: default !important;
}
.ui-dialog .ui-dialog-title {
    float: none !important;
    margin: 0 !important;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
    display: block !important;
    font-size: 0 !important;
    position: absolute !important;
    top: 7px;
    right: 7px;
    width: 20px !important;
    height: 20px !important;
    border: 1px solid var(--color-main)!important;
    background: var(--color-background-secondary) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::before,
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 1px !important;
    height: 18px !important;
    background: var(--color-main) !important;
} 
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::before {
    transform: translate(-50%,-50%) rotate(45deg) !important;
} 
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
    transform: translate(-50%,-50%) rotate(-45deg) !important;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
    background: var(--color-background-primary) !important;
}
.ui-dialog .ui-dialog-content {
    padding: var(--spacing-28) var(--spacing-14) !important;
}
#edit-error {
    color: var(--color-alert);
    font-weight: bold;
    padding: var(--spacing-14);
}
/* モーダル >> 管理 */
.detail-dialog td,
.alert-detail-dialog td {
    padding: 0 var(--spacing-14) var(--spacing-07) 0;
    vertical-align: top;
}
.detail-dialog td label,
.alert-detail-dialog td label {
    font-weight: bold;
    white-space: nowrap;
    color: var(--color-font-secondary);
}
.alert-detail-dialog #alert_category,
.alert-detail-dialog #heart_rate {
    color: var(--color-alert);
}

/* モーダル >> 設定 */
.edit-dialog table label,
.notabContents table label {
    white-space: nowrap
}
.edit-dialog th,
.edit-dialog td {
    vertical-align: top;
    padding: 0 var(--spacing-28) var(--spacing-07) 0 !important;
}
.edit-dialog th {
    text-align: left;
    white-space: nowrap;
    color: var(--color-font-secondary);
    font-weight: bold;
}
.edit-dialog th.sub {
    text-indent: var(--spacing-28);
}
.edit-dialog th.after-space {
    padding-bottom: var(--spacing-56) !important;
}
.edit-dialog td label.sub {
    display: inline-block;
    width: 16rem;
    margin-bottom: var(--spacing-07);
}
.edit-dialog td span.sub {
    display: inline-block;
    min-width: 14rem;
    margin-right: var(--spacing-07);
}

select#tenant,
input[type="text"]#tenant_src_1,
input[type="text"]#tenant_src_2,
input[type="text"]#tenant_src_3,
input[type="text"]#tenant_src_4,
input[type="text"]#tenant_src_5,
input[type="text"]#tenant_ai_thre_mail_address,
select#base,
input[type="text"]#organization,
input[type="text"]#base_name,
input[type="text"]#base_src_1,
input[type="text"]#base_src_2,
input[type="text"]#base_src_3,
input[type="text"]#base_src_4,
input[type="text"]#base_src_5,
input[type="text"]#base_ai_thre_mail_address,
select#keepalive_notice,
input[type="text"]#notice_group_name,
select#kinds,
/*
input[type="text"]#dest_1,
input[type="text"]#dest_2,
input[type="text"]#dest_3,
input[type="text"]#dest_4,
input[type="text"]#dest_5,
input[type="text"]#dest_6,
input[type="text"]#dest_7,
input[type="text"]#dest_8,
input[type="text"]#dest_9,
input[type="text"]#dest_10,
*/
input[type="text"][name="destinations"],
select#retry,
input[type="number"]#schedule_from,
input[type="number"]#schedule_to,
textarea#text,
input[type="number"]#tolerance,
input[type="text"]#dev_eui,
input[type="text"]#dev_name,
input[type="text"]#worker_name,
input[type="text"]#tel_number,
select#device,
input[type="number"]#temp_thre_down,
input[type="number"]#temp_thre_up,
input[type="number"]#heart_thre_down,
input[type="number"]#heart_thre_up,
select#mail_notice,
select#sms_notice,
select#voice_notice,
select#hidden_notice,
input[type="text"]#gw_eui,
input[type="text"]#gw_name,
input[type="text"]#location,
input[type="text"]#beacon_name,
input[type="text"]#beacon_id,
input[type="text"]#username,
input[type="password"]#password,
input[type="password"]#confirm,
input[type="text"]#mail_address,
select#level,
input[type="text"]#range_date,
select#type,
input[type="text"]#group-location,
input[type="text"]#group-zoom,
input[type="text"]#beacon-location,
input[type="text"]#gw-location,
textarea#description {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background-secondary);
    border: 1px solid var(--color-border-primary);
    padding: var(--spacing-07);
}
select#tenant,
input[type="text"]#tenant_src_1,
input[type="text"]#tenant_src_2,
input[type="text"]#tenant_src_3,
input[type="text"]#tenant_src_4,
input[type="text"]#tenant_src_5,
input[type="text"]#tenant_ai_thre_mail_address,
select#base,
input[type="text"]#organization,
input[type="text"]#base_src_1,
input[type="text"]#base_src_2,
input[type="text"]#base_src_3,
input[type="text"]#base_src_4,
input[type="text"]#base_src_5,
input[type="text"]#base_ai_thre_mail_address,
input[type="text"]#base_name,
input[type="text"]#notice_group_name,
/*
input[type="text"]#dest_1,
input[type="text"]#dest_2,
input[type="text"]#dest_3,
input[type="text"]#dest_4,
input[type="text"]#dest_5,
input[type="text"]#dest_6,
input[type="text"]#dest_7,
input[type="text"]#dest_8,
input[type="text"]#dest_9,
input[type="text"]#dest_10,
*/
input[type="text"][name="destinations"],
input[type="text"]#dev_eui,
input[type="text"]#dev_name,
input[type="text"]#worker_name,
input[type="text"]#tel_number,
input[type="text"]#gw_eui,
input[type="text"]#gw_name,
input[type="text"]#location,
input[type="text"]#beacon_name,
input[type="text"]#beacon_id,
input[type="text"]#username,
input[type="password"]#password,
input[type="password"]#confirm,
input[type="text"]#mail_address,
input[type="text"]#range_date,
select#type,
input[type="text"]#group-location,
input[type="text"]#gw-location {
    width: 33rem;
    max-width: 100%;
}
input[type="text"]#group-location,
input[type="text"]#beacon-location {
    width: 22rem;
    margin-right: var(--spacing-07);
}
input[type="text"]#beacon-location {
    margin-bottom: var(--spacing-07);
}

textarea#text,
textarea#description {
    width: 100% !important;
    min-width: 43rem !important;
}
input[type="text"]#tenant_src_1,
input[type="text"]#tenant_src_2,
input[type="text"]#tenant_src_3,
input[type="text"]#tenant_src_4,
input[type="text"]#base_src_1,
input[type="text"]#base_src_2,
input[type="text"]#base_src_3,
input[type="text"]#base_src_4 {
/*
input[type="text"]#dest_1,
input[type="text"]#dest_2,
input[type="text"]#dest_3,
input[type="text"]#dest_4,
input[type="text"]#dest_5,
input[type="text"]#dest_6,
input[type="text"]#dest_7,
input[type="text"]#dest_8,
input[type="text"]#dest_9 {
*/
    margin-bottom: var(--spacing-07);
}
table td.ip_outbox {
    height: 158px;
    width: auto;
}
table td.dest_outbox {
    height: 208px;
    width: auto;
}
div.ip_inbox,
div.dest_inbox {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
table th.ip_index,
table th.dest_index {
    width: 2em;
    text-align: right;
    vertical-align: middle;
    padding: 0 var(--spacing-07) var(--spacing-07) 0 !important;
}
#temp_thre_down,
#temp_thre_up,
#heart_thre_down,
#heart_thre_up {
    width: 5em;
    text-align: right;
}
#conf_dialog,
#common-dialog {
    padding: var(--spacing-40);
}
#common-dialog {
    color: var(--color-alert-mouseover);
}
.ui-widget-content {
    border: none;
}
.comment {
    font-size: var(--size-p12);
}
/* 通知先追加・設定 */
#notice-group-edit-dialog .columns-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between
}
#notice-group-edit-dialog .columns-wrap .table.left,
#notice-group-edit-dialog .columns-wrap .table.right {
    width: 50%;
    display: inline-block;
    height: auto;
    padding: var(--spacing-14) 0;
}
#notice-group-edit-dialog .columns-wrap .table.left {
    min-width: 540px;
}
.wday-num {
    display: flex;
    flex-wrap: nowrap;
}
.wday-num label {
    display: inline-block;
    width: var(--spacing-14);
    height: auto;
    margin-right: var(--spacing-14);
    white-space: normal !important;
}
.wday-sun {
    color: var(--color-alert);
}
.wday-sat {
    color: var(--color-main);
}