@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

ol, ul {
  list-style: none;
}

img {
  border-style: none;
}

/* binding後までvueタグを非表示にする */
[v-cloak] {
  display: none;
}

/* -----------------------------------------------------------------
    ステータス・ユーザ権限など色が決められたものに利用
    背景色・文字色をステータスによって変更する
    <div class="bg_status status_down">DOWN</div>
-------------------------------------------------------------------- */
.ui-state-default .bg_status.status_down {
  color: #EA3C47;
}

.status_down {
  color: #EA3C47;
}
.status_down.bg_status {
  color: #EA3C47;
  background: #FCE2E3;
}
.status_down.border {
  border-color: #EA3C47;
}

.ui-state-default .bg_status.status_critical {
  color: #EA3C47;
}

.status_critical {
  color: #EA3C47;
}
.status_critical.bg_status {
  color: #EA3C47;
  background: #FCE2E3;
}
.status_critical.border {
  border-color: #EA3C47;
}

.ui-state-default .bg_status.status_unreachable {
  color: #F1950B;
}

.status_unreachable {
  color: #F1950B;
}
.status_unreachable.bg_status {
  color: #F1950B;
  background: #FDEFD9;
}
.status_unreachable.border {
  border-color: #F1950B;
}

.ui-state-default .bg_status.status_unknown {
  color: #F1950B;
}

.status_unknown {
  color: #F1950B;
}
.status_unknown.bg_status {
  color: #F1950B;
  background: #FDEFD9;
}
.status_unknown.border {
  border-color: #F1950B;
}

.ui-state-default .bg_status.status_warning {
  color: #D3AE00;
}

.status_warning {
  color: #D3AE00;
}
.status_warning.bg_status {
  color: #D3AE00;
  background: #FFF9DD;
}
.status_warning.border {
  border-color: #D3AE00;
}

.ui-state-default .bg_status.status_up {
  color: #51B224;
}

.status_up {
  color: #51B224;
}
.status_up.bg_status {
  color: #51B224;
  background: inherit;
}
.status_up.border {
  border-color: #51B224;
}

.ui-state-default .bg_status.status_ok {
  color: #51B224;
}

.status_ok {
  color: #51B224;
}
.status_ok.bg_status {
  color: #51B224;
  background: inherit;
}
.status_ok.border {
  border-color: #51B224;
}

.ui-state-default .bg_status.status_flapping {
  color: #9673A6;
}

.status_flapping {
  color: #9673A6;
}
.status_flapping.bg_status {
  color: #9673A6;
  background: #E1D5E7;
}
.status_flapping.border {
  border-color: #9673A6;
}

.ui-state-default .bg_status.status_downtime {
  color: #0E8088;
}

.status_downtime {
  color: #0E8088;
}
.status_downtime.bg_status {
  color: #0E8088;
  background: #B0E3E6;
}
.status_downtime.border {
  border-color: #0E8088;
}

.ui-state-default .bg_status.status_acknowledged {
  color: #6C8EBF;
}

.status_acknowledged {
  color: #6C8EBF;
}
.status_acknowledged.bg_status {
  color: #6C8EBF;
  background: #DAE8FC;
}
.status_acknowledged.border {
  border-color: #6C8EBF;
}

.ui-state-default .bg_status.status_pending {
  color: #333;
}

.status_pending {
  color: #333;
}
.status_pending.bg_status {
  color: #333;
  background: inherit;
}
.status_pending.border {
  border-color: #333;
}

/* -----------------------------------------------------------------
    バッジ
    ユーザ権限　ユーザグループを表すバッジ
-------------------------------------------------------------------- */
.badge-auth {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: bold;
  margin-bottom: 3px;
  color: #FFFFFF;
  display: inline-block;
}

.badge-usergroup {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 3px;
  display: inline-block;
  word-break: break-all;
}

.badge-auth.auth-admin {
  background: #E1243A;
}

.badge-usergroup.bg-admin {
  color: #A31627;
  background: #F8CED3;
}

.badge-auth.auth-senior {
  background: #1C579A;
}

.badge-usergroup.bg-senior {
  color: #103259;
  background: #D7E6F8;
}

.badge-auth.auth-operator {
  background: #F89900;
}

.badge-usergroup.bg-operator {
  color: #AC6A00;
  background: #FFDFAC;
}

.badge-auth.auth-visitor {
  background: #55AB30;
}

.badge-usergroup.bg-visitor {
  color: #376F1F;
  background: #D9F2CF;
}

.badge-auth.auth-notify {
  background: #26C2E1;
}

.badge-usergroup.bg-notify {
  color: #14798D;
  background: #D9F4FA;
}

.badge-box {
  position: relative;
  padding-left: 24px;
  min-height: 25px;
}

.icon-person {
  width: 20px;
  height: 20px;
  content: "";
  display: inline-block;
  background: transparent url("/img/files/person.png") no-repeat scroll center center/14px auto;
  left: 0;
  top: 3px;
  position: absolute;
}

.icon-team {
  width: 20px;
  height: 20px;
  content: "";
  display: inline-block;
  background: transparent url("/img/files/team.png") no-repeat scroll center center/17px auto;
  left: 0;
  top: 3px;
  position: absolute;
}

/* -----------------------------------------------------------------
     ホスト・サービスバッジ
-------------------------------------------------------------------- */
.badge-node {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: bold;
  margin-bottom: 3px;
  display: inline-block;
  word-break: break-all;
}
.badge-node:not(:last-of-type) {
  margin-right: 5px;
}
.badge-node .del-selected {
  color: #EA3C47;
  padding-left: 5px;
  text-decoration: none;
  float: right;
}

.badge-node.node-host {
  color: #103259;
  background: #D7E6F8;
}

.badge-node.node-hosts {
  color: #103259;
  background: #D7E6F8;
}

.badge-node.node-hostgroup {
  color: #FFFFFF;
  background: #1C579A;
}

.badge-node.node-service {
  color: #78552B;
  background: #F8E9D7;
}

.badge-node.node-servicegroup {
  color: #FFFFFF;
  background: #9A5F1C;
}

/****************************************************
    リンク
****************************************************/
a {
  color: #003399;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* FireFox リンク選択時の点線を消す */
a,
a:link,
a:visited,
a:active,
a:hover {
  overflow: hidden !important;
  outline: none !important;
}

/****************************************************
    テーブルCSS
****************************************************/
table {
  border-collapse: collapse;
}
table td.center {
  text-align: center;
}
table td.right, table td.left {
  text-align: right;
}

/****************************************************
    白と薄灰色のテーブル
    <table class="table-borderd">
****************************************************/
table.table-borderd {
  border: none;
}
table.table-borderd th {
  border: none;
}
table.table-borderd td {
  border: none;
  padding: 3px 8px;
}
table.table-borderd tbody tr:nth-child(odd) {
  background-color: #fff;
}
table.table-borderd tbody tr:nth-child(even) {
  background-color: #F6F6F6;
}
table.table-borderd tbody tr:hover {
  background: rgba(115, 149, 187, 0.15);
}

/****************************************************
    セルにカーソルを合わせた際に表示するメッセージ
    <td>
        テキスト
        <span class="td-message">カーソルを合わせたら表示</span>
    </td>
****************************************************/
td > span.td-message {
  display: none;
  position: absolute;
  background-color: #ddd;
  color: #000;
  border: solid 2px #fff;
  font-size: 11px;
  border-radius: 5px;
  z-index: 1;
  padding: 2px 5px;
}
td:hover > span.td-message {
  display: inline;
}

/****************************************************
    フォント関連
****************************************************/
* {
  font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka";
}

input, select, textarea, button {
  font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka";
  font-size: 1em;
}

/****************************************************
    dl
****************************************************/
.dl-borderd {
  border: 1px solid #ccc;
}
.dl-borderd dt {
  font-weight: bold;
  background: #F6F6F6;
  padding: 4px 10px;
}
.dl-borderd dd {
  margin: 0;
  background: #fff;
  padding: 10px;
}
.dl-borderd dt.toggleview {
  position: relative;
  cursor: pointer;
}
.dl-borderd dt.toggleview:after {
  border-color: #333 transparent transparent;
  border-style: solid;
  border-width: 4px 4.5px 0;
  content: "";
  display: inline-block;
  height: 0;
  position: absolute;
  right: 10px;
  top: 13px;
  width: 0;
}
.dl-borderd dt.toggleview:hover {
  background: rgba(115, 149, 187, 0.15);
}
.dl-borderd dt.toggleview + dd {
  display: none;
}

/****************************************************
    box ヘッダーが青いbox
****************************************************/
.base-box {
  margin-bottom: 20px;
  color: #333;
  /* box右上の操作アイコン */
}
.base-box .box-ttl {
  border-radius: 3px 3px 0 0;
  background: #7395BB;
  color: #fff;
  padding: 8px 70px 8px 15px;
  position: relative;
  word-break: break-all;
}
.base-box .ttl-button {
  position: absolute;
  right: 15px;
  top: 10px;
}
.base-box .box-filter {
  background: #F6F6F6;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 7px 15px;
}
.base-box .box-body {
  background: #fff;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 10px 15px;
}
.base-box .box-body ul, .base-box .box-body dd {
  margin: 0;
}

.box-filter dt {
  font-weight: bold;
}

.box-ttl input[type="checkbox"] {
  margin-right: 8px;
}

/* box右上の操作アイコン */
.ttl-button .icon-change, .ttl-button .icon-delete {
  width: 22px;
  height: 22px;
  cursor: pointer;
  content: "";
  display: inline-block;
}
.ttl-button > a:not(:last-child) {
  margin-right: 7px;
}

.icon-change {
  background: transparent url("/img/files/dashboard/management_wt.png") no-repeat scroll center center/17px auto;
}

/* 要素の削除ボタン */
.icon-delete {
  background: transparent url("/img/files/dashboard/close_wt.png") no-repeat scroll center center/14px auto;
}

/****************************************************
    レイアウト関連
****************************************************/
.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.mb5 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb25 {
  margin-bottom: 25px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb35 {
  margin-bottom: 35px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb45 {
  margin-bottom: 45px;
}

.mb50 {
  margin-bottom: 50px;
}

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt15 {
  margin-top: 15px;
}

.mt20 {
  margin-top: 20px;
}

.mt25 {
  margin-top: 25px;
}

.mt30 {
  margin-top: 30px;
}

.mt35 {
  margin-top: 35px;
}

.mt40 {
  margin-top: 40px;
}

.mt45 {
  margin-top: 45px;
}

.mt50 {
  margin-top: 50px;
}

#cp.cp-nomenu, #cp2.cp-nomenu, #cp3.cp-nomenu, #cp4.cp-nomenu {
  padding-left: 30px;
}

/****************************************************
    toggle checkbox
****************************************************/
.global_setting input[type=checkbox] {
  display: none;
}
.global_setting input + label,
.global_setting input + label::before,
.global_setting input + label::after {
  /* 切り替えの速度 */
  -webkit-transition: all .2s !important;
  transition: all .2s !important;
  cursor: pointer !important;
}
.global_setting input.toggle + label.toggle {
  /* 楕円 */
  display: inline-block;
  position: relative;
  width: 52px;
  height: 23px;
  border-radius: 25px;
  margin-bottom: 0px;
}
.global_setting input.toggle + label.toggle::before {
  /* offの〇 */
  display: block;
  content: attr(data-off-label);
  position: absolute;
  top: 3px;
  right: 9px;
  font-size: 11px;
}
.global_setting input.toggle + label.toggle::after {
  /* onの〇 */
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  background-color: #ccc;
  border-radius: 50%;
  border: solid 1px #999;
}
.global_setting input.toggle:checked + label.toggle::before {
  /* offの〇の配置 */
  content: attr(data-on-label);
  left: 7px;
  right: auto;
}
.global_setting input.toggle:checked + label.toggle::after {
  /* onの〇の配置 */
  left: 31px;
  background-color: #fff;
  text-shadow: 1px 1px 0px rgba(10, 10, 10, 0.5);
}
.global_setting input:disabled + label {
  opacity: .4;
}