article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden] {
  display: none;
}
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
mark {
  background: #ff0;
  color: #000;
}
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
pre {
  white-space: pre-wrap;
}
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
button,
input {
  line-height: normal;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
  font-size: 62.75%;
  font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
body {
  position: relative;
  min-height: 100%;
  min-width: 1500px;
  font-size: 1.6rem;
  color: rgba(0,0,0,0.75);
  background-color: #FAFAFA;
}
html > body {
  height: auto;
}
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
input[type="range"],
input[type=""],
textarea,
select {
  padding: .5em;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
}
input[type="text"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="datetime"]::placeholder,
input[type="date"]::placeholder,
input[type="month"]::placeholder,
input[type="week"]::placeholder,
input[type="time"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="number"]::placeholder,
input[type="range"]::placeholder,
input[type=""]::placeholder,
textarea::placeholder,
select::placeholder {
  color: rgba(0,0,0,0.5);
}
select:disabled {
  background-color: #e6e6e6;
}
label {
  display: block;
  color: #8898AA;
}
input[type="radio"]+label,
input[type="checkbox"]+label {
  display: inline-block;
  color: inherit;
}
input[type="radio"]:disabled+label,
input[type="checkbox"]:disabled+label {
  color: rgba(0,0,0,0.5);
}
.scroller::-webkit-scrollbar {
  width: 6px;
}
.scroller::-webkit-scrollbar-track {
  background: transparent;
}
.scroller::-webkit-scrollbar-thumb {
  background: #8898AA;
  border-radius: 4px;
}
.button {
  display: inline-block;
  min-width: 10em;
  padding: .5em 2em;
  border: none;
  border-radius: 999em;
  text-align: center;
  text-decoration: none;
  background-color: #4AB1C8;
  color: white;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.button.negative {
  color: #4AB1C8;
  background-color: white;
  border: 1px solid #4AB1C8;
}
.button.disabled {
  pointer-events: none;
  cursor: default;
  background-color: #CCCCCC;
  color: rgba(255,255,255,0.75);
}
.button+.button {
  margin-left: 24px;
}
.button:active {
  box-shadow: none;
  background-color: #287384;
}
.button2 {
  margin: 1em 0;
  padding: 4px 24px 4px 1em;
  color: white;
  background-color: #4AB1C8;
  border-radius: 999em;
  text-decoration: none;
  background: no-repeat right 4px center url("../images/icon-circle-arrow-r.png") #4AB1C8;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.button2.disabled {
  cursor: not-allowed;
  background: no-repeat right 4px center url("../images/icon-circle-arrow-r-disabled.png") #CCCCCC;
}
.button3 {
  display: inline-block;
  margin: 1em 0;
  min-width: 12em;
  padding: 10px 1.5em 10px 36px;
  color: white;
  background-color: #4AB1C8;
  border-radius: 999em;
  text-align: center;
  text-decoration: none;
  background: no-repeat left 4px center url("../images/icon-circle-plus.png") #4AB1C8;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.link {
  color: #4AB1C8;
}
.link-edit {
  color: #076BAF;
  text-decoration: none;
}
.link-delete {
  color: #D32929;
  text-decoration: none;
}
.text-info {
  color: #4AB1C8;
}
.text-danger {
  color: #D32929;
}
.supplement {
  font-size: small;
  color: #8898AA;
}
input[type="submit"],
input[type="button"],
button {
  display: inline-block;
  min-width: 10em;
  padding: .5em 2em;
  border: none;
  border-radius: 999em;
  text-align: center;
  text-decoration: none;
  background-color: #4AB1C8;
  color: white;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
input[type="submit"].negative,
input[type="button"].negative,
button.negative {
  color: #4AB1C8;
  background-color: white;
  border: 1px solid #4AB1C8;
}
input[type="submit"].disabled,
input[type="button"].disabled,
button.disabled {
  pointer-events: none;
  cursor: default;
  background-color: #CCCCCC;
  color: rgba(255,255,255,0.75);
}
input[type="submit"]+input[type="submit"],
input[type="button"]+input[type="button"],
button+button {
  margin-left: 24px;
}
input[type="submit"]:active,
input[type="button"]:active,
button:active {
  box-shadow: none;
  background-color: #287384;
}
main {
  position: relative;
  margin: 80px auto;
  padding: 48px 96px;
  min-width: 1300px;
}
section {
  margin-bottom: 48px;
  padding: 48px 48px;
  border-radius: 8px;
  background-color: white;
  -webkit-box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
}
.split {
  display: table;
  width: 100%;
}
.split.border {
  margin-bottom: 24px;
  border-bottom: 1px solid #CCCCCC;
}
.split .left {
  display: table-cell;
  text-align: left;
  vertical-align: bottom;
}
.split .right {
  display: table-cell;
  text-align: right;
  vertical-align: bottom;
}
.split h1 {
  display: inline-block;
  padding-right: 1em;
  font-size: large;
}
.split .sub {
  display: inline-block;
  padding-left: .5em;
}
.split .small {
  display: block;
  padding-bottom: .5em;
  font-size: small;
}
.table thead th {
  background-color: rgba(74,187,212,0.08);
}
.table tbody th,
.table td {
  padding: 1em 2em;
}
.table tbody th {
  text-align: left;
  font-weight: normal;
  color: #8898AA;
}
.table tbody tr:nth-child(even) th,
.table tbody tr:nth-child(even) td {
  background-color: rgba(136,152,170,0.04);
}
.search-form input[type="text"] {
  min-width: 25em;
  padding-left: 1.5em;
  border-radius: 999em 0 0 999em !important;
}
.search-form input[type="text"] img {
  vertical-align: middle;
}
.search-form button {
  min-width: auto !important;
  padding: .5em 1em .5em .75em;
  border-radius: 0 999em 999em 0 !important;
  border: 1px solid #4AB1C8;
}
.search-form button img {
  vertical-align: middle;
}
.alert-form select {
  min-width: 15em;
}
.alert-form table td {
  padding-right: 12px;
  padding-bottom: 12px;
}
.alert-form table td:last-child {
  padding-right: 0;
}
.tabs {
  display: table;
  padding: 0;
}
.tabs a {
  display: table-cell;
  width: 10em;
  color: inherit;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  padding: .75em 0;
  font-size: 90%;
}
.tabs .active {
  position: relative;
  color: #4AB1C8;
}
.tabs .active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 6px solid #4AB1C8;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.col1 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col1 {
    float: left;
    width: 8.3333333333333%;
  }
}
.col2 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col2 {
    float: left;
    width: 16.666666666667%;
  }
}
.col3 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col3 {
    float: left;
    width: 25%;
  }
}
.col4 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col4 {
    float: left;
    width: 33.333333333333%;
  }
}
.col5 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col5 {
    float: left;
    width: 41.666666666667%;
  }
}
.col6 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col6 {
    float: left;
    width: 50%;
  }
}
.col7 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col7 {
    float: left;
    width: 58.333333333333%;
  }
}
.col8 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col8 {
    float: left;
    width: 66.666666666667%;
  }
}
.col9 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col9 {
    float: left;
    width: 75%;
  }
}
.col10 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col10 {
    float: left;
    width: 83.333333333333%;
  }
}
.col11 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col11 {
    float: left;
    width: 91.666666666667%;
  }
}
.col12 {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 0) {
  .col12 {
    float: left;
    width: 100%;
  }
}
.box-shadow {
  -webkit-box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
}
.btn-shadow {
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.text-xxlarge {
  font-size: xx-large;
}
.text-xlarge {
  font-size: x-large;
}
.text-large {
  font-size: large;
}
.text-medium {
  font-size: medium;
}
.text-small {
  font-size: small;
}
.text-xsmall {
  font-size: x-small;
}
.text-xxsmall {
  font-size: xx-small;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  min-width: 1500px;
  height: 80px;
  background-color: white;
  -webkit-box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
}
.header .header_in {
  display: table;
  width: 100%;
  height: 80px;
}
.header .header_l {
  display: table-cell;
  width: 15%;
  vertical-align: middle;
}
.header .header_l h1 {
  display: block;
  margin: 0;
  padding: 24px;
}
.header .header_l a {
  color: inherit;
  text-decoration: none;
}
.header .header_l img {
  margin: 0 auto;
  display: block;
  width: auto;
  height: auto;
  max-height: 32px;
}
.header .header_m {
  display: table-cell;
  vertical-align: middle;
}
.header .header_m nav {
  display: table;
  padding: 0;
  height: 80px;
}
.header .header_m a {
  display: table-cell;
  width: 10em;
  color: inherit;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
}
.header .header_m .active {
  position: relative;
  color: #4AB1C8;
}
.header .header_m .active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 6px solid #4AB1C8;
}
.header .header_r {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
  width: 30%;
}
.header .header_r label {
  display: inline-block;
  color: inherit;
  cursor: pointer;
}
.header .header_r label .username {
  display: inline-block;
  padding-left: 1em;
  min-width: 6em;
}
.header .header_r label .username img {
  margin-left: 1em;
}
.header .header_r label .user-icon-wrap {
  display: inline-block;
  width: 80px;
  height: 80px;
  padding: 12px;
  vertical-align: middle;
}
.header .header_r label .user-icon {
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  border: thin solid #CCCCCC;
}
.header .header_r label .user-icon:before {
  vertical-align: top;
  content: "";
  display: block;
  padding-top: 100%;
}
.header .header_r label .user-icon img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}
.header .header_r #submenu-toggle {
  display: none;
}
.header .header_r #submenu {
  display: none;
  position: absolute;
  top: 80px;
  right: 24px;
  margin: 0;
  padding: 0;
  text-align: left;
  min-width: 10em;
  list-style: none;
  background-color: white;
  -webkit-box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
}
.header .header_r #submenu a {
  display: block;
  padding: 1em;
  color: inherit;
  text-decoration: none;
}
.header .header_r #submenu a:hover {
  background-color: rgba(74,187,212,0.08) !important;
}
.header .header_r #submenu-toggle:checked+label {
  background-color: #e6e6e6 !important;
}
.header .header_r #submenu-toggle:checked+label+#submenu {
  display: block;
}
.login_page {
  position: relative;
  background: #E8F5F8;
}
.login_page .login_form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 30vw;
  min-width: 400px;
  padding: 10vh 4vw;
  border-radius: 8px;
  background-color: white;
  -webkit-box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
}
.login_page .login_err {
  margin-bottom: 1.5em;
  text-align: center;
  color: #D32929;
  font-size: .75vw;
  font-weight: bold;
}
.login_page .field {
  margin-bottom: 1.5em;
}
.login_page .password-wrap {
  border-radius: 4px;
  border: 1px solid #CCCCCC;
}
.login_page .password-eye {
  cursor: pointer;
}
.login_page .password-eye-hidden,
.login_page .password-eye-slash {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.login_page .password-eye-hidden::after {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  content: "";
  vertical-align: middle;
  background: no-repeat center/contain url("../images/icon-eye.png");
}
.login_page .password-eye-slash::after {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  content: "";
  vertical-align: middle;
  background: no-repeat center/contain url("../images/icon-eye-slash.png");
}
.login_page #password {
  border: 0;
  width: 90%;
}
.login_page h1 {
  width: 60%;
  padding: 0;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  font-size: 100%;
}
.login_page h1 img {
  display: block;
  width: 100%;
  height: auto;
}
.login_page input[type="text"],
.login_page input[type="password"],
.login_page input[type="submit"] {
  width: 100%;
}
.mypage .profile {
  margin: 24px 0;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
  *zoom: 1;
}
.mypage .profile:before,
.mypage .profile:after {
  content: " ";
  display: table;
  line-height: 0;
}
.mypage .profile:after {
  clear: both;
}
.mypage .profile:before,
.mypage .profile:after {
  content: " ";
  display: table;
  line-height: 0;
}
.mypage .profile:after {
  clear: both;
}
.mypage .profile .thumb-title {
  white-space: nowrap;
  color: #8898AA;
  padding-bottom: .5em;
}
.mypage .profile .thumb-icon {
  position: relative;
}
.mypage .profile .thumb-cam {
  position: absolute;
  bottom: -10px;
  right: -10px;
  cursor: pointer;
}
.mypage .profile .thumb-cam img {
  vertical-align: top;
}
.mypage .profile .thumb {
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  border: thin solid #CCCCCC;
  cursor: pointer;
}
.mypage .profile .thumb:before {
  vertical-align: top;
  content: "";
  display: block;
  padding-top: 100%;
}
.mypage .profile .thumb img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}
.mypage .own-device-list {
  *zoom: 1;
  height: 20em;
  overflow-y: scroll;
}
.mypage .own-device-list:before,
.mypage .own-device-list:after {
  content: " ";
  display: table;
  line-height: 0;
}
.mypage .own-device-list:after {
  clear: both;
}
.mypage .own-device-list:before,
.mypage .own-device-list:after {
  content: " ";
  display: table;
  line-height: 0;
}
.mypage .own-device-list:after {
  clear: both;
}
.mypage .own-device-list::-webkit-scrollbar {
  width: 8px;
}
.mypage .own-device-list::-webkit-scrollbar-track {
  background: transparent;
}
.mypage .own-device-list::-webkit-scrollbar-thumb {
  background: #8B8B8B;
  border-radius: 4px;
}
.mypage .own-device-list .item {
  min-height: 1px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  padding-right: 24px !important;
  padding-bottom: 24px;
}
@media (min-width: 0) {
  .mypage .own-device-list .item {
    float: left;
    width: 33.333333333333%;
  }
}
.mypage .own-device-list .item:nth-of-type(3n) {
  padding-right: 0 !important;
}
.mypage .own-device-list .inner {
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #CCCCCC;
}
.mypage .own-device-list .product_number {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: large;
  font-weight: bold;
}
.mypage .own-device-list .last_seen_datetime {
  padding-top: 1em;
  font-size: small;
}
.mypage .own-device-list .last_seen_datetime img {
  margin-right: .5em;
  vertical-align: top;
}
.mypage .own-device-list .status {
  padding-top: 1em;
  font-size: small;
}
.device-detail .split:first-child .left,
.device-detail .split:first-child .right {
  padding-bottom: .75em;
  vertical-align: top;
}
.device-detail .split:first-child .device_type {
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
  padding: .25em 1em;
  background-color: #00BDE8;
  border-radius: 4px;
  color: white;
  font-size: small;
}
.device-detail .split:first-child .product_number {
  display: inline-block;
  padding: .25em 0;
  font-size: large;
  font-weight: bold;
}
.device-detail .split:first-child .data_last_update {
  margin: 1em 0;
  font-size: small;
}
.device-detail .split:first-child .data_last_update img {
  vertical-align: middle;
}
.device-detail .split:first-child .btn_individual {
  margin: 1em 0;
  padding: .5em 1em;
  font-size: x-small;
  color: white;
  background-color: #4AB1C8;
  border-radius: 999em;
  text-decoration: none;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.devchart-container {
  position: relative;
  height: 50vh;
  margin-bottom: 24px;
}
.devchart-title {
  color: #4AB1C8;
  font-weight: bold;
  font-size: large;
  padding-bottom: 1em;
}
.blocker {
  z-index: 100;
  white-space: nowrap;
}
.modal {
  z-index: 101;
  max-width: 1040px !important;
  min-width: 1040px !important;
}
.modal2 {
  z-index: 101;
  padding: 1em 2em;
  background-color: white;
  border-radius: 4px;
  display: none;
}
.modal-form [class^="col"] {
  padding: 12px;
}
.modal-form [class^="col"]:first-child {
  padding-left: 0;
}
.modal-form [class^="col"]:last-child {
  padding-right: 0;
}
.modal-form .heading {
  margin-bottom: 12px;
}
.modal-form .row {
  *zoom: 1;
}
.modal-form .row:before,
.modal-form .row:after {
  content: " ";
  display: table;
  line-height: 0;
}
.modal-form .row:after {
  clear: both;
}
.modal-form .row:before,
.modal-form .row:after {
  content: " ";
  display: table;
  line-height: 0;
}
.modal-form .row:after {
  clear: both;
}
.modal-form .buttons {
  *zoom: 1;
  margin: 24px 0 24px 0;
  text-align: right;
}
.modal-form .buttons:before,
.modal-form .buttons:after {
  content: " ";
  display: table;
  line-height: 0;
}
.modal-form .buttons:after {
  clear: both;
}
.modal-form .buttons:before,
.modal-form .buttons:after {
  content: " ";
  display: table;
  line-height: 0;
}
.modal-form .buttons:after {
  clear: both;
}
.modal-form input[type="text"],
.modal-form input[type="search"],
.modal-form input[type="tel"],
.modal-form input[type="url"],
.modal-form input[type="email"],
.modal-form input[type="password"],
.modal-form input[type="datetime"],
.modal-form input[type="date"],
.modal-form input[type="month"],
.modal-form input[type="week"],
.modal-form input[type="time"],
.modal-form input[type="datetime-local"],
.modal-form input[type="number"],
.modal-form input[type="range"],
.modal-form input[type=""],
.modal-form textarea,
.modal-form select {
  width: 100%;
}
.modal-form .ios-switch {
  display: inline-block;
  transform: scale(.75,.75);
}
.modal-form .ios-switch .on-background {
  background: #4AB1C8;
}
.modal-form .selected-devices {
  font-weight: bold;
}
.bind-device-list {
  *zoom: 1;
  padding: 1em;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
  white-space: wrap;
  height: 5em;
  overflow-y: scroll;
}
.bind-device-list:before,
.bind-device-list:after {
  content: " ";
  display: table;
  line-height: 0;
}
.bind-device-list:after {
  clear: both;
}
.bind-device-list:before,
.bind-device-list:after {
  content: " ";
  display: table;
  line-height: 0;
}
.bind-device-list:after {
  clear: both;
}
.bind-device-list::-webkit-scrollbar {
  width: 8px;
}
.bind-device-list::-webkit-scrollbar-track {
  background: transparent;
}
.bind-device-list::-webkit-scrollbar-thumb {
  background: #8B8B8B;
  border-radius: 4px;
}
.bind-device-list .item {
  float: left;
  padding: .25em .5em;
  margin-right: .5em;
  margin-bottom: .5em;
  font-weight: bold;
  background-color: rgba(74,187,212,0.08) !important;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
}
.bind-user-list {
  *zoom: 1;
  padding: 1em;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
  white-space: wrap;
  height: 5em;
  overflow-y: scroll;
}
.bind-user-list:before,
.bind-user-list:after {
  content: " ";
  display: table;
  line-height: 0;
}
.bind-user-list:after {
  clear: both;
}
.bind-user-list:before,
.bind-user-list:after {
  content: " ";
  display: table;
  line-height: 0;
}
.bind-user-list:after {
  clear: both;
}
.bind-user-list::-webkit-scrollbar {
  width: 8px;
}
.bind-user-list::-webkit-scrollbar-track {
  background: transparent;
}
.bind-user-list::-webkit-scrollbar-thumb {
  background: #8B8B8B;
  border-radius: 4px;
}
.bind-user-list .item {
  float: left;
  padding: .25em .5em;
  margin-right: .5em;
  margin-bottom: .5em;
  font-weight: bold;
  background-color: rgba(74,187,212,0.08) !important;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
}
.bind-user-list .bind-user-del {
  display: inline-block;
  padding: 0 .5em;
  cursor: pointer;
  font-weight: bold;
  color: #8b8b8b;
}
.device_list_scroll {
  padding-right: 24px;
  max-height: 100vh;
  overflow-y: scroll;
}
.device_list_scroll::-webkit-scrollbar {
  width: 8px;
}
.device_list_scroll::-webkit-scrollbar-track {
  background: transparent;
}
.device_list_scroll::-webkit-scrollbar-thumb {
  background: #8B8B8B;
  border-radius: 4px;
}
.device_list {
  display: table;
  width: 100%;
  height: 100%;
}
.device_list a {
  color: inherit;
  text-decoration: none;
}
.device_list .item {
  height: 100%;
  display: table-row;
  background-color: white;
  overflow: hidden;
  border-radius: 8px;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}
.device_list .spacer {
  height: 24px;
}
.device_list [class^="info"] {
  display: table-cell;
  padding: 1vw 1vw 1vw 0;
  font-size: small;
  height: 100%;
  vertical-align: top;
}
.device_list [class^="info"]:first-child {
  padding-left: 1vw;
}
.device_list .arrow {
  display: table-cell;
  vertical-align: middle;
  padding: .25vw;
  width: 1%;
  color: white;
  background-color: #4AB1C8;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.device_list .item > * {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.device_list .chk {
  display: table-cell;
  vertical-align: middle;
  padding: .5vw;
  width: 1%;
}
.device_list .info1 {
  max-width: 18em;
}
.device_list .info1 .row {
  padding: .25em;
  white-space: nowrap;
}
.device_list .info1 .device_type {
  display: inline-block;
  padding: .25em 1em;
  background-color: #00BDE8;
  border-radius: 4px;
  color: white;
}
.device_list .info1 .icon {
  margin-right: .5em;
  line-height: 1;
  vertical-align: middle;
}
.device_list .info1 .label {
  color: #8898AA;
  padding-right: .5em;
}
.device_list .info1 .value {
  vertical-align: middle;
  font-size: normal;
  font-weight: bold;
}
.device_list .info2 table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
.device_list .info2 th,
.device_list .info2 td {
  padding: 1%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device_list .info2 th {
  width: 35%;
}
.device_list .info2 td {
  width: 65%;
}
.device_list .info3 {
  white-space: nowrap;
}
.device_list .info4 {
  white-space: nowrap;
}
.device_list .info5 {
  white-space: nowrap;
}
.device_list .info6 {
  white-space: nowrap;
}
.device_list2 .row {
  display: flex;
  flex-direction: row;
  margin: 24px 0;
  background-color: white;
  border-radius: 8px;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}
.device_list2 .c0 {
  display: flex;
  align-items: start;
  padding-top: 2em;
}
.device_list2 .c-wrap {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 100%;
}
.device_list2 .c1 {
  min-width: 15%;
  display: flex;
  flex-direction: column;
  font-size: small;
  overflow: hidden;
  white-space: nowrap;
}
.device_list2 .c1 > * {
  margin-bottom: 8px;
}
.device_list2 .c1 .device_type {
  padding-top: 4px;
}
.device_list2 .c1 .device_type span {
  padding: .25em 1em;
  background-color: #00BDE8;
  border-radius: 4px;
  color: white;
}
.device_list2 .c1 .device_info {
  display: flex;
}
.device_list2 .c1 .device_info .label {
  color: #8898AA;
  padding-right: .5em;
}
.device_list2 .c1 .device_info .value {
  min-width: 0;
  vertical-align: middle;
  font-size: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
}
.device_list2 .c1 .device_note {
  flex: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  padding: 4px;
}
.device_list2 .c1 .device_note .device_note_icon {
  width: 32px;
  cursor: pointer;
}
.device_list2 .c1 .device_note .device_note_icon img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.device_list2 .c1 .device_note .device_note_text {
  flex-grow: 1;
  font-size: small;
  text-align: center;
  border: 0;
  resize: none;
  user-select: text;
  text-align: left;
  padding-left: 1em;
  overflow: hidden;
}
.device_list2 .c1 .device_note .device_note_text:focus {
  outline: none;
}
.device_list2 .c2 {
  width: 15%;
  display: flex;
  flex-direction: column;
}
.device_list2 .c2 > * {
  margin-bottom: 8px;
}
.device_list2 .c2 .device_status {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
}
.device_list2 .c2 .device_status .label {
  font-size: small;
  color: #8898AA;
  padding-right: .5em;
}
.device_list2 .c2 .device_status .value {
  font-weight: bold;
}
.device_list2 .c2 .device_status .additional {
  display: block;
  font-size: small;
  font-weight: normal;
}
.device_list2 .c2 .device_updated {
  flex: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  padding: 4px;
}
.device_list2 .c2 .device_updated .icon {
  width: 32px;
}
.device_list2 .c2 .device_updated .icon img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.device_list2 .c2 .device_updated .value {
  flex-grow: 1;
  font-size: small;
  text-align: center;
}
.device_list2 .c3 {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1;
}
.device_list2 .c3 .device_details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.device_list2 .c3 .device_details .item {
  display: flex;
  align-items: center;
  font-size: small;
  border-bottom: 1px dotted #CCCCCC;
  width: 48%;
  margin-right: 8px;
  margin-bottom: 3px;
  padding-bottom: 1px;
}
.device_list2 .c3 .device_details .item .label {
  width: 10em;
  white-space: nowrap;
  color: #8898AA;
  padding-right: .5em;
}
.device_list2 .c3 .device_details .item .value {
  flex: 1;
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: .5em;
}
.device_list2 .c3 .device_data {
  flex: 1;
  display: flex;
  margin-top: 4px;
}
.device_list2 .c3 .device_data .item {
  width: 33%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-bottom: 8px;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  padding: 4px;
  margin-right: 8px;
}
.device_list2 .c3 .device_data .item > * {
  margin-right: 4px;
}
.device_list2 .c3 .device_data .item.ng {
  background-color: #FDECEE;
}
.device_list2 .c3 .device_data .item .icon {
  width: 32px;
}
.device_list2 .c3 .device_data .item .icon img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.device_list2 .c3 .device_data .item .label {
  white-space: nowrap;
  color: #8898AA;
  padding-right: .5em;
  font-size: small;
}
.device_list2 .c3 .device_data .item .value {
  font-size: large;
  font-size: 200%;
  font-weight: bold;
  text-align: center;
}
.device_list2 .c3 .device_data .item .unit {
  font-size: 100%;
}
.device_list2 .c4 {
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: white;
  text-decoration: none;
  background-color: #4AB1C8;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.device-dashboard {
  font-size: small;
  padding-top: 24px;
  margin-bottom: 24px;
}
.device-dashboard table {
  width: 100%;
  border-collapse: separate;
}
.device-dashboard td {
  padding-left: 24px;
  padding-bottom: 24px;
}
.device-dashboard td:first-child {
  padding-left: 0;
}
.device-dashboard .device-battery-view2 {
  display: table;
  width: 100%;
  height: 100%;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
}
.device-dashboard .device-battery-view2 .inner {
  display: table-cell;
  height: 100%;
  padding: 2% 1vw;
  text-align: center;
  vertical-align: middle;
}
.device-dashboard .device-battery-view2 .inner:first-child {
  padding-right: 0;
}
.device-dashboard .device-battery-view2 .inner:last-child {
  padding-left: 0;
}
.device-dashboard .device-battery-view2.ng {
  background-color: #FDECEE;
}
.device-dashboard .device-battery-view2 .separator {
  height: 100%;
  border-left: 1px solid #CCCCCC;
}
.device-dashboard .device-battery-view2 .label {
  line-height: 3;
  color: #8898AA;
}
.device-dashboard .device-battery-view2 .value {
  display: inline-block;
  font-size: 200%;
  font-weight: bold;
}
.device-dashboard .device-battery-view2 .unit {
  display: inline-block;
  padding-left: .5em;
  font-size: 100%;
  font-weight: bold;
}
.device-dashboard .device-battery-view2 .icon {
  display: inline-block;
  text-align: center;
  font-size: 250%;
}
.device-dashboard .device-battery-view2 .icon img {
  width: 2em;
  height: auto;
  vertical-align: middle;
}
.device-dashboard .device-pgstat-view2 {
  display: table;
  width: 100%;
  height: 100%;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
}
.device-dashboard .device-pgstat-view2 .inner {
  display: table-cell;
  height: 100%;
  padding: 4.584% 1vw;
  text-align: center;
  vertical-align: middle;
}
.device-dashboard .device-pgstat-view2 .inner:first-child {
  padding-right: 0;
}
.device-dashboard .device-pgstat-view2 .inner:last-child {
  padding-left: 0;
}
.device-dashboard .device-pgstat-view2.ng {
  background-color: #FDECEE;
}
.device-dashboard .device-pgstat-view2 .separator {
  height: 100%;
  border-left: 1px solid #CCCCCC;
}
.device-dashboard .device-pgstat-view2 .label {
  line-height: 3;
  color: #8898AA;
}
.device-dashboard .device-pgstat-view2 .value {
  display: inline-block;
  font-size: 200%;
  font-weight: bold;
}
.device-dashboard .device-pgstat-view2 .unit {
  display: inline-block;
  padding-left: .5em;
  font-size: 100%;
  font-weight: bold;
}
.device-dashboard .device-pgstat-view2 .message {
  color: #8898AA;
}
.device-dashboard .device-pgstat-view2 .icon {
  display: inline-block;
  text-align: center;
  font-size: 250%;
}
.device-dashboard .device-pgstat-view2 .icon img {
  width: 2em;
  height: auto;
  vertical-align: middle;
}
.device-dashboard .device-pgstat-view3 {
  display: table;
  width: 100%;
  height: 100%;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
}
.device-dashboard .device-pgstat-view3 .inner {
  display: table-cell;
  height: 100%;
  padding: 4.584% 1vw;
  text-align: center;
  vertical-align: middle;
}
.device-dashboard .device-pgstat-view3 .inner:first-child {
  padding-right: 0;
}
.device-dashboard .device-pgstat-view3 .inner:last-child {
  padding-left: 0;
}
.device-dashboard .device-pgstat-view3.ng {
  background-color: #FDECEE;
}
.device-dashboard .device-pgstat-view3 .separator {
  height: 100%;
  border-left: 1px solid #CCCCCC;
}
.device-dashboard .device-pgstat-view3 .label {
  display: block;
  line-height: 3;
  color: #8898AA;
}
.device-dashboard .device-pgstat-view3 .value {
  display: inline-block;
  font-size: 180%;
  font-weight: bold;
}
.device-dashboard .device-pgstat-view3 .unit {
  display: inline-block;
  padding-left: .5em;
  font-size: 100%;
  font-weight: bold;
}
.device-dashboard .device-pgstat-view3 .message {
  color: #8898AA;
}
.device-dashboard .device-pgstat-view3 .icon {
  display: inline-block;
  text-align: center;
  font-size: 230%;
}
.device-dashboard .device-pgstat-view3 .icon img {
  width: 1.8em;
  height: auto;
  vertical-align: middle;
}
.device-dashboard .device-status-view2 {
  display: table;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid #CCCCCC;
}
.device-dashboard .device-status-view2 .inner {
  display: table-cell;
  height: 100%;
  min-width: 10vw;
  padding: 1.34% 0;
  text-align: center;
  vertical-align: middle;
}
.device-dashboard .device-status-view2 .label {
  line-height: 3;
  color: #8898AA;
}
.device-dashboard .device-status-view2 .value {
  display: inline-block;
  font-size: 250%;
  font-weight: bold;
  transform-origin: top;
  transform: scale(0.5);
  white-space: nowrap;
}
.device-dashboard .device-status-view2 .additional {
  display: block;
  margin-top: -1.5em;
  font-size: small;
}
.device-dashboard .device-data-view2 {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #CCCCCC;
  overflow: hidden;
}
.device-dashboard .device-data-view2 .inner {
  display: table-cell;
  height: 100%;
  padding: 1em 2em;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.device-dashboard .device-data-view2 .inner:first-child {
  width: 10em;
}
.device-dashboard .device-data-view2 .separator {
  height: 100%;
  border-left: 1px solid #CCCCCC;
}
.device-dashboard .device-data-view2 .label {
  line-height: 3;
  color: #8898AA;
}
.device-dashboard .device-data-view2 .value {
  font-size: 150%;
  font-weight: bold;
}
.device-remote-view {
  display: table;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid #CCCCCC;
  font-size: normal;
}
.device-remote-view .inner {
  display: table-cell;
  height: 100%;
  padding: .5em 2em;
  vertical-align: middle;
  white-space: nowrap;
}
.device-remote-view .separator {
  height: 100%;
  border-left: 1px solid #CCCCCC;
}
.device-remote-view .label {
  color: #8898AA;
  line-height: 3;
}
.device-remote-view .ios-switch {
  display: inline-block;
  transform-origin: center;
  transform: scale(.5,.5);
  line-height: 1;
}
.device-remote-view .ios-switch .on-background {
  background: #4AB1C8;
}
.device-remote-view [type="checkbox"]+label {
  padding-left: 1em;
  font-size: normal;
}
.device-remote-view .supplement {
  padding-left: 1em;
}
.device-status-view {
  display: table;
  width: 100%;
  height: 45%;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
  margin-bottom: .5em;
}
.device-status-view .inner {
  display: table-cell;
  height: 100%;
  padding: 0 1vw;
  text-align: center;
  vertical-align: middle;
}
.device-status-view .inner:first-child {
  padding-right: 0;
}
.device-status-view .inner:last-child {
  padding-left: 0;
}
.device-status-view .label {
  line-height: 1.5;
  color: #8898AA;
}
.device-status-view .value {
  display: inline-block;
  font-size: 120%;
  font-weight: bold;
  transform-origin: top;
  padding: 0 1em;
}
.device-status-view .additional {
  display: block;
  font-size: small;
}
.device-comstat-view {
  display: table;
  width: 100%;
  height: 45%;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
}
.device-comstat-view .inner {
  display: table-cell;
  height: 100%;
  padding: .5em;
  text-align: center;
  vertical-align: middle;
  font-size: 90%;
}
.device-comstat-view .icon {
  width: 2vw;
  height: auto;
  vertical-align: middle;
}
.device-pgstat-view {
  display: table;
  width: 100%;
  height: 100%;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
}
.device-pgstat-view .inner {
  display: table-cell;
  height: 100%;
  padding: 0 1vw;
  text-align: center;
  vertical-align: middle;
}
.device-pgstat-view .inner:first-child {
  padding-right: 0;
}
.device-pgstat-view .inner:last-child {
  padding-left: 0;
}
.device-pgstat-view.ng {
  background-color: #FDECEE;
}
.device-pgstat-view .separator {
  height: 100%;
  border-left: 1px solid #CCCCCC;
}
.device-pgstat-view .label {
  line-height: 3;
  color: #8898AA;
}
.device-pgstat-view .value {
  display: inline-block;
  font-size: 200%;
  font-weight: bold;
}
.device-pgstat-view .unit {
  display: inline-block;
  padding-left: .5em;
  font-size: 100%;
  font-weight: bold;
}
.device-pgstat-view .message {
  color: #8898AA;
  font-size: x-small;
}
.device-pgstat-view .icon {
  display: inline-block;
  text-align: center;
  font-size: 250%;
}
.device-pgstat-view .icon img {
  width: 2em;
  height: auto;
  vertical-align: middle;
}
.device-battery-view {
  display: table;
  width: 100%;
  height: 100%;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
}
.device-battery-view .inner {
  display: table-cell;
  height: 100%;
  padding: 0 1vw;
  text-align: center;
  vertical-align: middle;
}
.device-battery-view .inner:first-child {
  padding-right: 0;
}
.device-battery-view .inner:last-child {
  padding-left: 0;
}
.device-battery-view.ng {
  background-color: #FDECEE;
}
.device-battery-view .separator {
  height: 100%;
  border-left: 1px solid #CCCCCC;
}
.device-battery-view .label {
  line-height: 3;
  color: #8898AA;
}
.device-battery-view .value {
  display: inline-block;
  font-size: 200%;
  font-weight: bold;
}
.device-battery-view .unit {
  display: inline-block;
  padding-left: .5em;
  font-size: 100%;
  font-weight: bold;
}
.device-battery-view .message {
  color: #8898AA;
  font-size: x-small;
}
.device-battery-view .icon {
  display: inline-block;
  text-align: center;
  font-size: 250%;
}
.device-battery-view .icon img {
  width: 2em;
  height: auto;
  vertical-align: middle;
}
.device-data-view {
  display: table;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid #CCCCCC;
  overflow: hidden;
}
.device-data-view .inner {
  display: table-cell;
  height: 100%;
  padding: 1em 2em;
  text-align: left;
  vertical-align: middle;
}
.device-data-view.disabled {
  background-color: #eee;
  color: rgba(0,0,0,0.2);
}
.device-data-view .label {
  line-height: 2;
  color: #8898AA;
}
.device-data-view .value {
  line-height: 2;
  font-size: 120%;
  font-weight: bold;
}
#gps_feature_view .ios-switch {
  display: inline-block;
  float: right;
  transform: scale(.5,.5);
}
#gps_feature_view .ios-switch .on-background {
  background: #4AB1C8;
}
.device-map-view {
  height: 320px;
  background-color: #eee;
  overflow: hidden;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
}
.device-map-view iframe {
  width: 100%;
  height: 645px;
  margin-top: -170px;
}
.device-map-view.sign {
  height: 14vw;
}
.device-map-view.sign iframe {
  height: 38vw;
  margin-top: -30vw;
}
.device-email-view {
  padding: 1em;
  border-radius: 8px;
  border: 1px solid #CCCCCC;
}
.device-email-view .inner {
  height: 8em;
  overflow-y: scroll;
}
.device-email-view .inner::-webkit-scrollbar {
  width: 8px;
}
.device-email-view .inner::-webkit-scrollbar-track {
  background: transparent;
}
.device-email-view .inner::-webkit-scrollbar-thumb {
  background: #8B8B8B;
  border-radius: 4px;
}
.device-email-view .label {
  padding-left: 1em;
  color: #8898AA;
}
.device-email-view ul {
  padding: 0;
  list-style: none;
  *zoom: 1;
}
.device-email-view ul:before,
.device-email-view ul:after {
  content: " ";
  display: table;
  line-height: 0;
}
.device-email-view ul:after {
  clear: both;
}
.device-email-view ul:before,
.device-email-view ul:after {
  content: " ";
  display: table;
  line-height: 0;
}
.device-email-view ul:after {
  clear: both;
}
.device-email-view li {
  float: left;
  padding: .5em 1em;
  width: 50%;
  font-size: 120%;
  font-weight: bold;
}
.device-email-view li:nth-child(even) {
  border-left: 1px solid #CCCCCC;
}
.record_category {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  margin-right: 1em;
  padding: .25em 1em;
  min-width: 10em;
  background-color: #00BDE8;
  border-radius: 999em;
  color: white;
  font-size: small;
}
.dataTable .odd {
  background-color: rgba(136,152,170,0.04) !important;
}
.dataTable th {
  background-color: rgba(74,187,212,0.08) !important;
  border-color: #CCCCCC !important;
}
.dataTable td {
  text-align: center;
  border-bottom: 1px solid #CCCCCC !important;
}
.dataTables_wrapper.no-footer,
.dataTables_scrollBody {
  border-color: #CCCCCC !important;
}
.dataTables_scrollBody::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.dataTables_scrollBody::-webkit-scrollbar-track {
  background: transparent;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: #8B8B8B;
  border-radius: 4px;
}
.dataTables_filter {
  margin-bottom: 1em;
}
.dataTables_filter input[type="search"] {
  width: auto !important;
}
.dataTables_paginate {
  float: none !important;
  text-align: center !important;
}
.sign {
  min-height: auto !important;
  min-width: auto !important;
  position: relative;
  width: 100%;
}
.sign:before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.sign .sign-outer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/sign-bg.jpg") bottom center / cover;
}
.sign .sign-inner {
  display: table;
  width: 100%;
  height: 100%;
}
.sign .sign-header {
  display: table-row;
}
.sign .sign-header .sign-header-inner {
  display: table-cell;
  height: 1%;
}
.sign .sign-header .sign-header-content {
  display: table;
  background-color: #076BAF;
}
.sign .sign-header .sign-header-title {
  display: table-cell;
  padding: 1.5vw 2vw;
  color: white;
  font-size: 2.2vw;
  font-weight: bold;
  white-space: nowrap;
  vertical-align: middle;
}
.sign .sign-header .sign-header-timestamp {
  display: table-cell;
  width: 1%;
  vertical-align: middle;
  white-space: nowrap;
}
.sign .sign-header .sign-header-timestamp-inner {
  display: inline-block;
  padding: 1.5vw 2vw;
}
.sign .sign-header .sign-header-timestamp-display {
  display: inline-block;
  padding: 1vw 2.5vw;
  border-radius: 1vw;
  font-size: 1.5vw;
  background-color: white;
}
.sign .sign-header .sign-header-timestamp-display img {
  width: 4.5vw;
  height: auto;
  margin-right: 1em;
  vertical-align: middle;
}
.sign .sign-header .sign-header-timestamp-display .sign-header-timestamp-display-text {
  display: inline-block;
  vertical-align: middle;
}
.sign .sign-header .sign-header-timestamp-display .sign-header-timestamp-display-text time {
  font-size: 2vw;
  font-weight: bold;
}
.sign .sign-main {
  display: table-row;
}
.sign .sign-main .sign-main-inner {
  display: table-cell;
  position: relative;
}
.sign .sign-main .sign-battery-view {
  position: absolute;
  top: 4%;
  left: 1.6%;
  width: 20%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1%;
  *zoom: 1;
}
.sign .sign-main .sign-battery-view:before,
.sign .sign-main .sign-battery-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-main .sign-battery-view:after {
  clear: both;
}
.sign .sign-main .sign-battery-view:before,
.sign .sign-main .sign-battery-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-main .sign-battery-view:after {
  clear: both;
}
.sign .sign-main .sign-battery-view .left {
  float: left;
  text-align: center;
  padding-right: 4%;
  border-right: 1px solid #CCCCCC;
  width: 72%;
}
.sign .sign-main .sign-battery-view .data {
  white-space: nowrap;
}
.sign .sign-main .sign-battery-view .label {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign .sign-main .sign-battery-view .value {
  font-size: 3vw;
  font-weight: bold;
}
.sign .sign-main .sign-battery-view .unit {
  padding-left: .5em;
  font-size: 1.5vw;
}
.sign .sign-main .sign-battery-view .right {
  float: left;
  width: 28%;
  padding: 7% 0 0 5%;
  text-align: center;
}
.sign .sign-main .sign-battery-view .right img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.sign .sign-main .sign-pg-view {
  position: absolute;
  top: 4%;
  left: 23.2%;
  width: 20%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1%;
  *zoom: 1;
}
.sign .sign-main .sign-pg-view:before,
.sign .sign-main .sign-pg-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-main .sign-pg-view:after {
  clear: both;
}
.sign .sign-main .sign-pg-view:before,
.sign .sign-main .sign-pg-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-main .sign-pg-view:after {
  clear: both;
}
.sign .sign-main .sign-pg-view .left {
  float: left;
  text-align: center;
  padding-right: 4%;
  border-right: 1px solid #CCCCCC;
  width: 72%;
}
.sign .sign-main .sign-pg-view .data {
  white-space: nowrap;
}
.sign .sign-main .sign-pg-view .label {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign .sign-main .sign-pg-view .value {
  font-size: 3vw;
  font-weight: bold;
}
.sign .sign-main .sign-pg-view .unit {
  padding-left: .5em;
  font-size: 1.5vw;
}
.sign .sign-main .sign-pg-view .right {
  float: left;
  width: 28%;
  padding: 7% 0 0 5%;
  text-align: center;
}
.sign .sign-main .sign-pg-view .right img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.sign .sign-main .sign-apg-view {
  position: absolute;
  top: 4%;
  left: 44.8%;
  width: 22%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1%;
  *zoom: 1;
}
.sign .sign-main .sign-apg-view:before,
.sign .sign-main .sign-apg-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-main .sign-apg-view:after {
  clear: both;
}
.sign .sign-main .sign-apg-view:before,
.sign .sign-main .sign-apg-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-main .sign-apg-view:after {
  clear: both;
}
.sign .sign-main .sign-apg-view .left {
  float: left;
  text-align: center;
  padding-right: 4%;
  border-right: 1px solid #CCCCCC;
  width: 73.5%;
}
.sign .sign-main .sign-apg-view .data {
  white-space: nowrap;
}
.sign .sign-main .sign-apg-view .label {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign .sign-main .sign-apg-view .value {
  font-size: 3vw;
  font-weight: bold;
}
.sign .sign-main .sign-apg-view .unit {
  padding-left: .5em;
  font-size: 1vw;
}
.sign .sign-main .sign-apg-view .right {
  float: left;
  width: 26.5%;
  padding: 6% 1% 1% 5%;
  text-align: center;
}
.sign .sign-main .sign-apg-view .right img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.sign .sign-charge-view {
  position: absolute;
  top: 4%;
  left: 68.3%;
  width: 30%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1% 2% 1% 2%;
  *zoom: 1;
}
.sign .sign-charge-view:before,
.sign .sign-charge-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-charge-view:after {
  clear: both;
}
.sign .sign-charge-view:before,
.sign .sign-charge-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-charge-view:after {
  clear: both;
}
.sign .sign-charge-view .label {
  float: left;
  text-align: left;
  width: 25%;
  font-size: 1.2vw;
  font-weight: bold;
}
.sign .sign-charge-view .text1 {
  float: left;
  text-align: center;
  padding: 1%;
  width: 30%;
  font-size: .8vw;
  color: white;
  background-color: #CCCCCC;
  border-radius: 1vw;
}
.sign .sign-charge-view .text2 {
  float: right;
  text-align: center;
  padding: 1%;
  width: 30%;
  font-size: .8vw;
  color: white;
  background-color: #CCCCCC;
  border-radius: 1vw;
}
.sign .sign-charge-view .figure {
  clear: both;
  text-align: center;
  vertical-align: middle;
  display: table;
}
.sign .sign-charge-view .figure .inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 100%;
  padding-top: .6%;
}
.sign .sign-charge-view .figure .icon {
  display: inline-block;
  vertical-align: middle;
  width: 25%;
  text-align: center;
}
.sign .sign-charge-view .figure .icon img {
  width: 60%;
  height: auto;
}
.sign .sign-charge-view .figure .arrows-wrap {
  display: inline-block;
  vertical-align: middle;
  width: 25%;
  text-align: center;
}
.sign .sign-charge-view .figure .arrows {
  width: 16%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sign .sign-charge-view .figure .arrows .arrow {
  width: 1vw;
  height: 1vw;
  border: .25vw solid;
  border-color: orange transparent transparent orange;
  transform: rotate(135deg);
}
.sign .sign-charge-view .figure .arrows .arrowSliding {
  position: absolute;
  opacity: 0;
  -webkit-animation: slide 4s linear infinite;
  animation: slide 4s linear infinite;
}
.sign .sign-charge-view .figure .arrows .delay1 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.sign .sign-charge-view .figure .arrows .delay2 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.sign .sign-charge-view .figure .arrows .delay3 {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.sign .sign-chart-view {
  position: absolute;
  bottom: 4%;
  left: 1.6%;
  width: 56%;
  height: 69%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1% 2% 1% 2%;
  *zoom: 1;
}
.sign .sign-chart-view:before,
.sign .sign-chart-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-chart-view:after {
  clear: both;
}
.sign .sign-chart-view:before,
.sign .sign-chart-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-chart-view:after {
  clear: both;
}
.sign .sign-chart-view table {
  width: 100%;
  height: 100%;
}
.sign .sign-chart-view .title {
  height: 1%;
}
.sign .sign-chart-view .title .en {
  font-size: 3vw;
  font-weight: bold;
}
.sign .sign-chart-view .title .ja {
  padding-left: 1em;
  font-size: 1.5vw;
}
.sign .sign-chart-view .chart-container {
  position: relative;
}
.sign .sign-location-view {
  position: absolute;
  top: 27%;
  left: 60%;
  right: 1.6%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1% 2%;
  *zoom: 1;
}
.sign .sign-location-view:before,
.sign .sign-location-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-location-view:after {
  clear: both;
}
.sign .sign-location-view:before,
.sign .sign-location-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-location-view:after {
  clear: both;
}
.sign .sign-location-view .legend {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign .sign-detail-view {
  position: absolute;
  top: 27%;
  left: 60%;
  right: 1.6%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 2%;
  *zoom: 1;
}
.sign .sign-detail-view:before,
.sign .sign-detail-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-detail-view:after {
  clear: both;
}
.sign .sign-detail-view:before,
.sign .sign-detail-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign .sign-detail-view:after {
  clear: both;
}
.sign .sign-detail-view .legend {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign .sign-detail-view .detail-table {
  display: table;
  width: 100%;
}
.sign .sign-detail-view .detail-table .icon {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 14.2%;
}
.sign .sign-detail-view .detail-table .icon img {
  width: 100%;
  height: auto;
}
.sign .sign-detail-view .detail-table .data {
  padding: 4%;
}
.sign .sign-detail-view .detail-table .data table {
  width: 100%;
  font-size: 1.2vw;
}
.sign .sign-detail-view .detail-table .data th {
  padding: 6% 6% 1% 6%;
  text-align: left;
  font-weight: normal;
  border-bottom: 1px solid #CCCCCC;
}
.sign .sign-detail-view .detail-table .data td {
  padding: 6% 6% 1% 6%;
  text-align: right;
  font-weight: bold;
  border-bottom: 1px solid #CCCCCC;
}
.sign .sign-detail-view .detail-table .data tr:first-child th,
.sign .sign-detail-view .detail-table .data tr:first-child td {
  padding-top: 0;
}
.sign .sign-co2-view {
  position: absolute;
  bottom: 0;
  left: 65%;
  right: 0;
  height: 30%;
}
.sign .sign-co2-view .rect {
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;
  height: 100%;
  background: no-repeat right center url('../images/sign-co2-bg1.png') #64A806;
  background-size: contain;
}
.sign .sign-co2-view .circle {
  position: absolute;
  left: 0%;
  top: 0;
  width: 40%;
  height: 100%;
  background: no-repeat top center url('../images/sign-co2-bg2.png') white;
  background-size: contain;
  background-origin: content-box;
  border-radius: 50%;
  border: 1vw solid #64A806;
  -webkit-box-shadow: 1px 1px 1vw rgba(0,0,0,0.2);
  box-shadow: 1px 1px 1vw rgba(0,0,0,0.2);
}
.sign .sign-co2-view .tree-value-view {
  position: absolute;
  width: 100%;
  bottom: 5%;
  font-size: .75vw;
  text-align: center;
}
.sign .sign-co2-view .tree-value-view .value {
  color: #397200;
  padding: 0 .25em;
  font-size: 1.5vw;
  font-weight: bold;
}
.sign .sign-co2-view .co2-value-view {
  position: absolute;
  left: 35%;
  width: 65%;
  height: 100%;
  display: table;
  color: white;
}
.sign .sign-co2-view .co2-value-view .inner {
  display: table-cell;
  vertical-align: middle;
}
.sign .sign-co2-view .co2-value-view .legend {
  font-size: 1vw;
  font-weight: bold;
}
.sign .sign-co2-view .co2-value-view .value {
  font-size: 3.5vw;
  font-weight: bold;
}
.sign .sign-co2-view .co2-value-view .unit {
  padding-left: 1em;
  font-size: 1vw;
}
.sign .sign-co2-view .co2-value-view img {
  display: block;
  width: 80%;
  height: auto;
}
.sign-impf {
  min-height: auto !important;
  min-width: auto !important;
  position: relative;
  width: 100%;
}
.sign-impf:before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.sign-impf .sign-outer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/sign-bg.jpg") bottom center / cover;
}
.sign-impf .sign-inner {
  display: table;
  width: 100%;
  height: 100%;
}
.sign-impf .sign-header {
  display: table-row;
}
.sign-impf .sign-header .sign-header-inner {
  display: table-cell;
  height: 1%;
}
.sign-impf .sign-header .sign-header-content {
  display: table;
  background-color: #076BAF;
}
.sign-impf .sign-header .sign-header-title {
  display: table-cell;
  padding: 1.5vw 2vw;
  color: white;
  font-size: 2.2vw;
  font-weight: bold;
  white-space: nowrap;
  vertical-align: middle;
}
.sign-impf .sign-header .sign-header-timestamp {
  display: table-cell;
  width: 1%;
  vertical-align: middle;
  white-space: nowrap;
}
.sign-impf .sign-header .sign-header-timestamp-inner {
  display: inline-block;
  padding: 1.5vw 2vw;
}
.sign-impf .sign-header .sign-header-timestamp-display {
  display: inline-block;
  padding: 1vw 2.5vw;
  border-radius: 1vw;
  font-size: 1.5vw;
  background-color: white;
}
.sign-impf .sign-header .sign-header-timestamp-display img {
  width: 4.5vw;
  height: auto;
  margin-right: 1em;
  vertical-align: middle;
}
.sign-impf .sign-header .sign-header-timestamp-display .sign-header-timestamp-display-text {
  display: inline-block;
  vertical-align: middle;
}
.sign-impf .sign-header .sign-header-timestamp-display .sign-header-timestamp-display-text time {
  font-size: 2vw;
  font-weight: bold;
}
.sign-impf .sign-main {
  display: table-row;
}
.sign-impf .sign-main .sign-main-inner {
  display: table-cell;
  position: relative;
}
.sign-impf .sign-main .sign-pg-view {
  position: absolute;
  top: 4%;
  left: 1.6%;
  width: 22%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1%;
  *zoom: 1;
}
.sign-impf .sign-main .sign-pg-view:before,
.sign-impf .sign-main .sign-pg-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-main .sign-pg-view:after {
  clear: both;
}
.sign-impf .sign-main .sign-pg-view:before,
.sign-impf .sign-main .sign-pg-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-main .sign-pg-view:after {
  clear: both;
}
.sign-impf .sign-main .sign-pg-view .left {
  float: left;
  text-align: center;
  padding-right: 4%;
  border-right: 1px solid #CCCCCC;
  width: 72%;
}
.sign-impf .sign-main .sign-pg-view .data {
  white-space: nowrap;
}
.sign-impf .sign-main .sign-pg-view .label {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-impf .sign-main .sign-pg-view .value {
  font-size: 3vw;
  font-weight: bold;
}
.sign-impf .sign-main .sign-pg-view .unit {
  padding-left: .5em;
  font-size: 1.5vw;
}
.sign-impf .sign-main .sign-pg-view .right {
  float: left;
  width: 28%;
  padding: 7% 0 0 5%;
  text-align: center;
}
.sign-impf .sign-main .sign-pg-view .right img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.sign-impf .sign-main .sign-lbreaker-view {
  position: absolute;
  top: 4%;
  left: 25.2%;
  width: 22%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1%;
  *zoom: 1;
}
.sign-impf .sign-main .sign-lbreaker-view:before,
.sign-impf .sign-main .sign-lbreaker-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-main .sign-lbreaker-view:after {
  clear: both;
}
.sign-impf .sign-main .sign-lbreaker-view:before,
.sign-impf .sign-main .sign-lbreaker-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-main .sign-lbreaker-view:after {
  clear: both;
}
.sign-impf .sign-main .sign-lbreaker-view .left {
  float: left;
  text-align: center;
  padding-right: 4%;
  border-right: 1px solid #CCCCCC;
  width: 72%;
}
.sign-impf .sign-main .sign-lbreaker-view .data {
  white-space: nowrap;
}
.sign-impf .sign-main .sign-lbreaker-view .label {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-impf .sign-main .sign-lbreaker-view .value {
  font-size: 3vw;
  font-weight: bold;
}
.sign-impf .sign-main .sign-lbreaker-view .unit {
  padding-left: .5em;
  font-size: 1.5vw;
}
.sign-impf .sign-main .sign-lbreaker-view .right {
  float: left;
  width: 28%;
  padding: 7% 0 0 5%;
  text-align: center;
}
.sign-impf .sign-main .sign-lbreaker-view .right img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.sign-impf .sign-main .sign-pbreaker-view {
  position: absolute;
  top: 4%;
  left: 48.8%;
  width: 22%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1%;
  *zoom: 1;
}
.sign-impf .sign-main .sign-pbreaker-view:before,
.sign-impf .sign-main .sign-pbreaker-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-main .sign-pbreaker-view:after {
  clear: both;
}
.sign-impf .sign-main .sign-pbreaker-view:before,
.sign-impf .sign-main .sign-pbreaker-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-main .sign-pbreaker-view:after {
  clear: both;
}
.sign-impf .sign-main .sign-pbreaker-view .left {
  float: left;
  text-align: center;
  padding-right: 4%;
  border-right: 1px solid #CCCCCC;
  width: 72%;
}
.sign-impf .sign-main .sign-pbreaker-view .data {
  white-space: nowrap;
}
.sign-impf .sign-main .sign-pbreaker-view .label {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-impf .sign-main .sign-pbreaker-view .value {
  font-size: 3vw;
  font-weight: bold;
}
.sign-impf .sign-main .sign-pbreaker-view .unit {
  padding-left: .5em;
  font-size: 1.5vw;
}
.sign-impf .sign-main .sign-pbreaker-view .na {
  font-size: 3vw;
  font-weight: bold;
  color: rgba(0,0,0,0.2);
}
.sign-impf .sign-main .sign-pbreaker-view .right {
  float: left;
  width: 28%;
  padding: 7% 0 0 5%;
  text-align: center;
}
.sign-impf .sign-main .sign-pbreaker-view .right img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.sign-impf .sign-main .sign-total-pv-view {
  position: absolute;
  top: 4%;
  left: 72.4%;
  width: 26%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1%;
  *zoom: 1;
}
.sign-impf .sign-main .sign-total-pv-view:before,
.sign-impf .sign-main .sign-total-pv-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-main .sign-total-pv-view:after {
  clear: both;
}
.sign-impf .sign-main .sign-total-pv-view:before,
.sign-impf .sign-main .sign-total-pv-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-main .sign-total-pv-view:after {
  clear: both;
}
.sign-impf .sign-main .sign-total-pv-view .left {
  float: left;
  text-align: center;
  padding-right: 4%;
  width: 76%;
}
.sign-impf .sign-main .sign-total-pv-view .data {
  white-space: nowrap;
}
.sign-impf .sign-main .sign-total-pv-view .label {
  font-size: 1.2vw;
  font-weight: bold;
  text-align: left;
}
.sign-impf .sign-main .sign-total-pv-view .value {
  font-size: 3vw;
  font-weight: bold;
}
.sign-impf .sign-main .sign-total-pv-view .unit {
  padding-left: .5em;
  font-size: 1.5vw;
}
.sign-impf .sign-main .sign-total-pv-view .right {
  float: left;
  width: 24%;
  padding: 7% 0 0 5%;
  text-align: center;
}
.sign-impf .sign-main .sign-total-pv-view .right img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.sign-impf .sign-main .sign-total-pv-view .duration {
  position: absolute;
  top: 14%;
  right: 4%;
  font-size: .8vw;
  text-align: right;
}
.sign-impf .sign-location-view {
  position: absolute;
  top: 27%;
  left: 60%;
  right: 1.6%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1% 2%;
  *zoom: 1;
}
.sign-impf .sign-location-view:before,
.sign-impf .sign-location-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-location-view:after {
  clear: both;
}
.sign-impf .sign-location-view:before,
.sign-impf .sign-location-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-location-view:after {
  clear: both;
}
.sign-impf .sign-location-view .legend {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-impf .sign-detail-view {
  position: absolute;
  top: 27%;
  left: 60%;
  right: 1.6%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 2%;
  *zoom: 1;
}
.sign-impf .sign-detail-view:before,
.sign-impf .sign-detail-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-detail-view:after {
  clear: both;
}
.sign-impf .sign-detail-view:before,
.sign-impf .sign-detail-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-detail-view:after {
  clear: both;
}
.sign-impf .sign-detail-view .legend {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-impf .sign-detail-view .detail-table {
  display: table;
  width: 100%;
}
.sign-impf .sign-detail-view .detail-table .icon {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 14.2%;
}
.sign-impf .sign-detail-view .detail-table .icon img {
  width: 100%;
  height: auto;
}
.sign-impf .sign-detail-view .detail-table .data {
  padding: 4%;
}
.sign-impf .sign-detail-view .detail-table .data table {
  width: 100%;
  font-size: 1.2vw;
}
.sign-impf .sign-detail-view .detail-table .data th {
  padding: 6% 6% 1% 6%;
  text-align: left;
  font-weight: normal;
  border-bottom: 1px solid #CCCCCC;
}
.sign-impf .sign-detail-view .detail-table .data td {
  padding: 6% 6% 1% 6%;
  text-align: right;
  font-weight: bold;
  border-bottom: 1px solid #CCCCCC;
}
.sign-impf .sign-detail-view .detail-table .data tr:first-child th,
.sign-impf .sign-detail-view .detail-table .data tr:first-child td {
  padding-top: 0;
}
.sign-impf .sign-co2-view {
  position: absolute;
  bottom: 1.6%;
  width: 20%;
  height: 60%;
  right: 1.6%;
  border-radius: 1vw;
  padding: 1%;
  background-color: #64A806;
}
.sign-impf .sign-co2-view .co2-value-view {
  display: table;
  width: 100%;
  height: 50%;
  color: white;
  text-align: center;
  background: no-repeat center center url('../images/sign-co2-bg1.png') #64A806;
  background-size: contain;
}
.sign-impf .sign-co2-view .co2-value-view .inner {
  display: table-cell;
  vertical-align: middle;
}
.sign-impf .sign-co2-view .co2-value-view .legend {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-impf .sign-co2-view .co2-value-view .value {
  font-size: 3.5vw;
  font-weight: bold;
}
.sign-impf .sign-co2-view .co2-value-view .unit {
  padding-left: 1em;
  font-size: 1vw;
}
.sign-impf .sign-co2-view .co2-value-view img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.sign-impf .sign-co2-view .tree-value-view {
  position: relative;
  height: 50%;
  border-radius: 1vw;
  padding: 1%;
  background: white;
  text-align: center;
  font-size: 1.3vw;
}
.sign-impf .sign-co2-view .tree-value-view img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.sign-impf .sign-co2-view .tree-value-view .value {
  color: #397200;
  padding: 0 .25em;
  font-size: 2vw;
  font-weight: bold;
}
.sign-impf .sign-chart-view {
  position: absolute;
  bottom: 1.6%;
  left: 1.6%;
  height: 60%;
  width: 75%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1% 2% 1% 2%;
  *zoom: 1;
}
.sign-impf .sign-chart-view:before,
.sign-impf .sign-chart-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-chart-view:after {
  clear: both;
}
.sign-impf .sign-chart-view:before,
.sign-impf .sign-chart-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-impf .sign-chart-view:after {
  clear: both;
}
.sign-impf .sign-chart-view table {
  width: 100%;
  height: 100%;
}
.sign-impf .sign-chart-view .title {
  height: 1%;
}
.sign-impf .sign-chart-view .title .en {
  display: inline-block;
  font-size: 3vw;
  font-weight: bold;
}
.sign-impf .sign-chart-view .title .ja {
  display: inline-block;
  padding-left: 1em;
  font-size: 1.5vw;
}
.sign-impf .sign-chart-view .title .unit {
  display: inline-block;
  font-size: 1.5vw;
  float: right;
  padding-top: 1em;
}
.sign-impf .sign-chart-view .chart-container {
  position: relative;
}
.sign-atto {
  min-height: auto !important;
  min-width: auto !important;
  position: relative;
  width: 100%;
}
.sign-atto:before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.sign-atto .sign-outer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/sign-bg.jpg") bottom center / cover;
}
.sign-atto .sign-inner {
  display: table;
  width: 100%;
  height: 100%;
}
.sign-atto .sign-header {
  display: table-row;
}
.sign-atto .sign-header .sign-header-inner {
  display: table-cell;
  height: 1%;
}
.sign-atto .sign-header .sign-header-content {
  display: table;
  background-color: #076BAF;
}
.sign-atto .sign-header .sign-header-title {
  display: table-cell;
  padding: 1.5vw 2vw;
  color: white;
  font-size: 2.2vw;
  font-weight: bold;
  white-space: nowrap;
  vertical-align: middle;
}
.sign-atto .sign-header .sign-header-timestamp {
  display: table-cell;
  width: 1%;
  vertical-align: middle;
  white-space: nowrap;
}
.sign-atto .sign-header .sign-header-timestamp-inner {
  display: inline-block;
  padding: 1.5vw 2vw;
}
.sign-atto .sign-header .sign-header-timestamp-display {
  display: inline-block;
  padding: 1vw 2.5vw;
  border-radius: 1vw;
  font-size: 1.5vw;
  background-color: white;
}
.sign-atto .sign-header .sign-header-timestamp-display img {
  width: 4.5vw;
  height: auto;
  margin-right: 1em;
  vertical-align: middle;
}
.sign-atto .sign-header .sign-header-timestamp-display .sign-header-timestamp-display-text {
  display: inline-block;
  vertical-align: middle;
}
.sign-atto .sign-header .sign-header-timestamp-display .sign-header-timestamp-display-text time {
  font-size: 2vw;
  font-weight: bold;
}
.sign-atto .sign-main {
  display: table-row;
}
.sign-atto .sign-main .sign-main-inner {
  display: table-cell;
  position: relative;
}
.sign-atto .sign-main .sign-pg-view {
  position: absolute;
  top: 4%;
  left: 1.6%;
  width: 22%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1%;
  *zoom: 1;
}
.sign-atto .sign-main .sign-pg-view:before,
.sign-atto .sign-main .sign-pg-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-main .sign-pg-view:after {
  clear: both;
}
.sign-atto .sign-main .sign-pg-view:before,
.sign-atto .sign-main .sign-pg-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-main .sign-pg-view:after {
  clear: both;
}
.sign-atto .sign-main .sign-pg-view .left {
  float: left;
  text-align: center;
  padding-right: 4%;
  border-right: 1px solid #CCCCCC;
  width: 72%;
}
.sign-atto .sign-main .sign-pg-view .data {
  white-space: nowrap;
}
.sign-atto .sign-main .sign-pg-view .label {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-atto .sign-main .sign-pg-view .value {
  font-size: 3vw;
  font-weight: bold;
}
.sign-atto .sign-main .sign-pg-view .unit {
  padding-left: .5em;
  font-size: 1.5vw;
}
.sign-atto .sign-main .sign-pg-view .right {
  float: left;
  width: 28%;
  padding: 7% 0 0 5%;
  text-align: center;
}
.sign-atto .sign-main .sign-pg-view .right img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.sign-atto .sign-main .sign-lbreaker-view {
  position: absolute;
  top: 4%;
  left: 25.2%;
  width: 22%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1%;
  *zoom: 1;
}
.sign-atto .sign-main .sign-lbreaker-view:before,
.sign-atto .sign-main .sign-lbreaker-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-main .sign-lbreaker-view:after {
  clear: both;
}
.sign-atto .sign-main .sign-lbreaker-view:before,
.sign-atto .sign-main .sign-lbreaker-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-main .sign-lbreaker-view:after {
  clear: both;
}
.sign-atto .sign-main .sign-lbreaker-view .left {
  float: left;
  text-align: center;
  padding-right: 4%;
  border-right: 1px solid #CCCCCC;
  width: 72%;
}
.sign-atto .sign-main .sign-lbreaker-view .data {
  white-space: nowrap;
}
.sign-atto .sign-main .sign-lbreaker-view .label {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-atto .sign-main .sign-lbreaker-view .value {
  font-size: 3vw;
  font-weight: bold;
}
.sign-atto .sign-main .sign-lbreaker-view .unit {
  padding-left: .5em;
  font-size: 1.5vw;
}
.sign-atto .sign-main .sign-lbreaker-view .right {
  float: left;
  width: 28%;
  padding: 7% 0 0 5%;
  text-align: center;
}
.sign-atto .sign-main .sign-lbreaker-view .right img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.sign-atto .sign-main .sign-battery-view {
  position: absolute;
  top: 4%;
  left: 48.8%;
  width: 22%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1%;
  *zoom: 1;
}
.sign-atto .sign-main .sign-battery-view:before,
.sign-atto .sign-main .sign-battery-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-main .sign-battery-view:after {
  clear: both;
}
.sign-atto .sign-main .sign-battery-view:before,
.sign-atto .sign-main .sign-battery-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-main .sign-battery-view:after {
  clear: both;
}
.sign-atto .sign-main .sign-battery-view .left {
  float: left;
  text-align: center;
  padding-right: 4%;
  border-right: 1px solid #CCCCCC;
  width: 72%;
}
.sign-atto .sign-main .sign-battery-view .data {
  white-space: nowrap;
}
.sign-atto .sign-main .sign-battery-view .label {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-atto .sign-main .sign-battery-view .value {
  font-size: 3vw;
  font-weight: bold;
}
.sign-atto .sign-main .sign-battery-view .unit {
  padding-left: .5em;
  font-size: 1.5vw;
}
.sign-atto .sign-main .sign-battery-view .right {
  float: left;
  width: 28%;
  padding: 7% 0 0 5%;
  text-align: center;
}
.sign-atto .sign-main .sign-battery-view .right img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.sign-atto .sign-main .sign-total-pv-view {
  position: absolute;
  top: 4%;
  left: 72.4%;
  width: 26%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1%;
  *zoom: 1;
}
.sign-atto .sign-main .sign-total-pv-view:before,
.sign-atto .sign-main .sign-total-pv-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-main .sign-total-pv-view:after {
  clear: both;
}
.sign-atto .sign-main .sign-total-pv-view:before,
.sign-atto .sign-main .sign-total-pv-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-main .sign-total-pv-view:after {
  clear: both;
}
.sign-atto .sign-main .sign-total-pv-view .left {
  float: left;
  text-align: center;
  padding-right: 4%;
  width: 76%;
}
.sign-atto .sign-main .sign-total-pv-view .data {
  white-space: nowrap;
}
.sign-atto .sign-main .sign-total-pv-view .label {
  font-size: 1.2vw;
  font-weight: bold;
  text-align: left;
}
.sign-atto .sign-main .sign-total-pv-view .value {
  font-size: 3vw;
  font-weight: bold;
}
.sign-atto .sign-main .sign-total-pv-view .unit {
  padding-left: .5em;
  font-size: 1.5vw;
}
.sign-atto .sign-main .sign-total-pv-view .right {
  float: left;
  width: 24%;
  padding: 7% 0 0 5%;
  text-align: center;
}
.sign-atto .sign-main .sign-total-pv-view .right img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.sign-atto .sign-main .sign-total-pv-view .duration {
  position: absolute;
  top: 14%;
  right: 4%;
  font-size: .8vw;
  text-align: right;
}
.sign-atto .sign-location-view {
  position: absolute;
  top: 27%;
  left: 60%;
  right: 1.6%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1% 2%;
  *zoom: 1;
}
.sign-atto .sign-location-view:before,
.sign-atto .sign-location-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-location-view:after {
  clear: both;
}
.sign-atto .sign-location-view:before,
.sign-atto .sign-location-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-location-view:after {
  clear: both;
}
.sign-atto .sign-location-view .legend {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-atto .sign-detail-view {
  position: absolute;
  top: 27%;
  left: 60%;
  right: 1.6%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 2%;
  *zoom: 1;
}
.sign-atto .sign-detail-view:before,
.sign-atto .sign-detail-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-detail-view:after {
  clear: both;
}
.sign-atto .sign-detail-view:before,
.sign-atto .sign-detail-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-detail-view:after {
  clear: both;
}
.sign-atto .sign-detail-view .legend {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-atto .sign-detail-view .detail-table {
  display: table;
  width: 100%;
}
.sign-atto .sign-detail-view .detail-table .icon {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 14.2%;
}
.sign-atto .sign-detail-view .detail-table .icon img {
  width: 100%;
  height: auto;
}
.sign-atto .sign-detail-view .detail-table .data {
  padding: 4%;
}
.sign-atto .sign-detail-view .detail-table .data table {
  width: 100%;
  font-size: 1.2vw;
}
.sign-atto .sign-detail-view .detail-table .data th {
  padding: 6% 6% 1% 6%;
  text-align: left;
  font-weight: normal;
  border-bottom: 1px solid #CCCCCC;
}
.sign-atto .sign-detail-view .detail-table .data td {
  padding: 6% 6% 1% 6%;
  text-align: right;
  font-weight: bold;
  border-bottom: 1px solid #CCCCCC;
}
.sign-atto .sign-detail-view .detail-table .data tr:first-child th,
.sign-atto .sign-detail-view .detail-table .data tr:first-child td {
  padding-top: 0;
}
.sign-atto .sign-co2-view {
  position: absolute;
  bottom: 1.6%;
  width: 20%;
  height: 60%;
  right: 1.6%;
  border-radius: 1vw;
  padding: 1%;
  background-color: #64A806;
}
.sign-atto .sign-co2-view .co2-value-view {
  display: table;
  width: 100%;
  height: 50%;
  color: white;
  text-align: center;
  background: no-repeat center center url('../images/sign-co2-bg1.png') #64A806;
  background-size: contain;
}
.sign-atto .sign-co2-view .co2-value-view .inner {
  display: table-cell;
  vertical-align: middle;
}
.sign-atto .sign-co2-view .co2-value-view .legend {
  font-size: 1.2vw;
  font-weight: bold;
}
.sign-atto .sign-co2-view .co2-value-view .value {
  font-size: 3.5vw;
  font-weight: bold;
}
.sign-atto .sign-co2-view .co2-value-view .unit {
  padding-left: 1em;
  font-size: 1vw;
}
.sign-atto .sign-co2-view .co2-value-view img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.sign-atto .sign-co2-view .tree-value-view {
  position: relative;
  height: 50%;
  border-radius: 1vw;
  padding: 1%;
  background: white;
  text-align: center;
  font-size: 1.3vw;
}
.sign-atto .sign-co2-view .tree-value-view img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.sign-atto .sign-co2-view .tree-value-view .value {
  color: #397200;
  padding: 0 .25em;
  font-size: 2vw;
  font-weight: bold;
}
.sign-atto .sign-chart-view {
  position: absolute;
  bottom: 1.6%;
  left: 1.6%;
  height: 60%;
  width: 75%;
  border-radius: 1vw;
  background-color: rgba(255,255,255,0.9);
  padding: 1% 2% 1% 2%;
  *zoom: 1;
}
.sign-atto .sign-chart-view:before,
.sign-atto .sign-chart-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-chart-view:after {
  clear: both;
}
.sign-atto .sign-chart-view:before,
.sign-atto .sign-chart-view:after {
  content: " ";
  display: table;
  line-height: 0;
}
.sign-atto .sign-chart-view:after {
  clear: both;
}
.sign-atto .sign-chart-view table {
  width: 100%;
  height: 100%;
}
.sign-atto .sign-chart-view .title {
  height: 1%;
}
.sign-atto .sign-chart-view .title .en {
  display: inline-block;
  font-size: 3vw;
  font-weight: bold;
}
.sign-atto .sign-chart-view .title .ja {
  display: inline-block;
  padding-left: 1em;
  font-size: 1.5vw;
}
.sign-atto .sign-chart-view .title .unit {
  display: inline-block;
  font-size: 1.5vw;
  float: right;
  padding-top: 1em;
}
.sign-atto .sign-chart-view .chart-container {
  position: relative;
}
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    transform: translateX(-1vw);
  }
  20% {
    opacity: 1;
    transform: translateX(0vw);
  }
  80% {
    opacity: 1;
    transform: translateX(3vw);
  }
  100% {
    opacity: 0;
    transform: translateX(4vw);
  }
}
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateX(-1vw);
  }
  20% {
    opacity: 1;
    transform: translateX(0vw);
  }
  80% {
    opacity: 1;
    transform: translateX(3vw);
  }
  100% {
    opacity: 0;
    transform: translateX(4vw);
  }
}
.autocomplete-suggestions {
  border: 1px solid #999;
  background: #FFF;
  overflow: auto;
}
.autocomplete-suggestion {
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
}
.autocomplete-selected {
  background: #F0F0F0;
}
.autocomplete-suggestions strong {
  font-weight: normal;
  color: #3399FF;
}
.autocomplete-group {
  padding: 2px 5px;
}
.autocomplete-group strong {
  display: block;
  border-bottom: 1px solid #000;
}
.picker__button--clear {
  width: 30% !important;
  color: #4AB1C8 !important;
  font-size: small !important;
  border: 1px solid #4AB1C8 !important;
}
.picker__button--clear::before {
  border: none !important;
}
.picker__button--close {
  width: 30% !important;
  color: #4AB1C8 !important;
  font-size: small !important;
  border: 1px solid #4AB1C8 !important;
}
.picker__button--close::before {
  content: "" !important;
}
.picker__button--today {
  width: 30% !important;
  color: #4AB1C8 !important;
  font-size: small !important;
  border: 1px solid #4AB1C8 !important;
}
.picker__button--today::before {
  border: none !important;
}
.picker__footer {
  padding: 24px 0;
}
#loading-overlay {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0,0,0,0.6);
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spinner {
  width: 10vw;
  height: 10vw;
  border: 1vw #ddd solid;
  border-top: 1vw #4AB1C8 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% {
    transform: rotate(360deg);
  }
}
.is-hide {
  display: none;
}
.device_list3 .row {
  display: flex;
  flex-direction: row;
  margin: 24px 0;
  background-color: white;
  border-radius: 8px;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}
.device_list3 .left {
  display: flex;
  align-items: start;
  padding: 2.6em 4px 4px 4px;
}
.device_list3 .middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.device_list3 .middle-top {
  display: flex;
}
.device_list3 .middle-bottom {
  display: flex;
}
.device_list3 .c1 {
  width: 16%;
  display: flex;
  flex-direction: column;
  font-size: small;
}
.device_list3 .c1 .device_type {
  margin: 4px 0;
}
.device_list3 .c1 .device_type span {
  padding: .25em 1em;
  background-color: #00BDE8;
  border-radius: 4px;
  color: white;
}
.device_list3 .c1 .device_info {
  display: flex;
  margin-top: 4px;
}
.device_list3 .c1 .device_info .label {
  color: #8898AA;
  padding-right: .5em;
}
.device_list3 .c1 .device_info .value {
  min-width: 0;
  vertical-align: middle;
  font-size: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
}
.device_list3 .c1 .device_note {
  flex: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  padding-left: 8px;
}
.device_list3 .c1 .device_note .device_note_icon {
  width: 32px;
  cursor: pointer;
}
.device_list3 .c1 .device_note .device_note_icon img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.device_list3 .c1 .device_note .device_note_text {
  flex-grow: 1;
  font-size: small;
  text-align: center;
  border: 0;
  resize: none;
  user-select: text;
  text-align: left;
  padding-left: 1em;
  overflow: hidden;
}
.device_list3 .c1 .device_note .device_note_text:focus {
  outline: none;
}
.device_list3 .c2 {
  width: 15%;
  display: flex;
  flex-direction: column;
}
.device_list3 .c2 .device_status {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
}
.device_list3 .c2 .device_status .label {
  font-size: small;
  color: #8898AA;
  padding-right: .5em;
}
.device_list3 .c2 .device_status .value {
  font-weight: bold;
}
.device_list3 .c2 .device_status .additional {
  display: block;
  font-size: small;
  font-weight: normal;
}
.device_list3 .c2 .device_updated {
  flex: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  padding: 4px;
}
.device_list3 .c2 .device_updated .icon {
  width: 32px;
}
.device_list3 .c2 .device_updated .icon img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.device_list3 .c2 .device_updated .value {
  flex-grow: 1;
  font-size: small;
  text-align: center;
}
.device_list3 .c3 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1;
}
.device_list3 .c3 .device_details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-right: 4px;
}
.device_list3 .c3 .device_details .item {
  display: flex;
  align-items: center;
  font-size: small;
  border-bottom: 1px dotted #CCCCCC;
  padding-top: 8px;
  padding-bottom: 1px;
  width: 48%;
}
.device_list3 .c3 .device_details .item .label {
  width: 10em;
  white-space: nowrap;
  color: #8898AA;
  padding-right: .5em;
}
.device_list3 .c3 .device_details .item .value {
  flex: 1;
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: .5em;
}
.device_list3 .c3 .device_data {
  flex: 1;
  display: flex;
}
.device_list3 .c3 .device_data .item {
  width: 33%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  padding: 4px;
  margin-right: 8px;
}
.device_list3 .c3 .device_data .item > * {
  margin-right: 4px;
}
.device_list3 .c3 .device_data .item.ng {
  background-color: #FDECEE;
}
.device_list3 .c3 .device_data .item .icon {
  max-width: 32px;
  min-width: 32px;
}
.device_list3 .c3 .device_data .item .icon img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.device_list3 .c3 .device_data .item .label {
  white-space: nowrap;
  color: #8898AA;
  padding-right: .5em;
  font-size: small;
}
.device_list3 .c3 .device_data .item .value {
  flex: 1;
  font-size: large;
  font-size: 180%;
  font-weight: bold;
  text-align: center;
}
.device_list3 .c3 .device_data .item .unit {
  font-size: 100%;
}
.device_list3 .right {
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: white;
  text-decoration: none;
  background-color: #4AB1C8;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.device_list3 .c1,
.device_list3 .c2,
.device_list3 .c3 {
  margin: 4px;
}
.device_list4 .device_list_item {
  display: flex;
  margin: 24px 0;
  background-color: white;
  border-radius: 8px;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}
.device_list4 .device_list_item-l1-c1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1%;
}
.device_list4 .device_list_item-l1-c2 {
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: white;
  text-decoration: none;
  background-color: #4AB1C8;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.device_list4 .device_list_item-l2-c1 {
  display: flex;
  align-items: center;
}
.device_list4 .device_list_item-l2-c2 {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.device_list4 .device_list_item-l3-c1 {
  width: 50%;
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.device_list4 .device_list_item-l3-c2 {
  width: 50%;
  flex-grow: 1;
  display: flex;
}
.device_list4 .device_list_item-l3-c3 {
  width: 35%;
  overflow: hidden;
}
.device_list4 .device_list_item-l3-c4 {
  width: 65%;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}
.device_list4 .device_type span {
  padding: .25em 1em;
  background-color: #00BDE8;
  border-radius: .25em;
  color: white;
  font-size: small;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.device_list4 .device_chk [type="checkbox"] {
  vertical-align: middle;
}
.device_list4 .device_info {
  display: flex;
  flex: 1;
  width: 15em;
}
.device_list4 .device_info .label {
  color: #8898AA;
  padding-right: .5em;
  overflow: hidden;
  white-space: nowrap;
}
.device_list4 .device_info .value {
  min-width: 0;
  vertical-align: middle;
  font-size: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
}
.device_list4 .device_note {
  flex-grow: 1;
  position: relative;
}
.device_list4 .device_note .device_note_icon {
  position: absolute;
  top: .2em;
  left: .7em;
  cursor: pointer;
}
.device_list4 .device_note .device_note_icon img {
  width: 1.2em;
  height: auto;
  vertical-align: middle;
}
.device_list4 .device_note .device_note_text {
  width: 100%;
  padding: .2em .2em .2em 2.5em;
}
.device_list4 .device_note .device_note_text:focus-visible {
  outline: none;
}
.device_list4 .device_details {
  width: 100%;
}
.device_list4 .device_details .row {
  display: flex;
  font-size: small;
  padding: .5em;
}
.device_list4 .device_details .row:nth-child(odd) {
  background-color: #f0f0f0;
}
.device_list4 .device_details .label {
  width: 10em;
  white-space: nowrap;
  color: #8898AA;
  padding-right: .5em;
}
.device_list4 .device_details .value {
  flex: 1;
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: .5em;
}
.device_list4 .device_details .code {
  width: 5em;
  white-space: nowrap;
}
.device_list4 .device_uptime_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
}
.device_list4 .device_uptime_wrapper .device_uptime {
  text-align: center;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  padding: 7px 16px;
}
.device_list4 .device_uptime_wrapper .label {
  font-size: small;
  color: #8898AA;
}
.device_list4 .device_uptime_wrapper .value {
  font-weight: bold;
  letter-spacing: .5em;
  margin-right: -0.5em;
}
.device_list4 .device_status_wrapper {
  flex-shrink: 0;
  width: 15%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.device_list4 .device_status {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  padding: 4px;
}
.device_list4 .device_status .label {
  font-size: small;
  color: #8898AA;
}
.device_list4 .device_status .value {
  font-size: 85%;
  font-weight: bold;
}
.device_list4 .device_status .additional {
  display: block;
  font-size: small;
  font-weight: normal;
}
.device_list4 .device_updated {
  flex: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  padding: 4px;
}
.device_list4 .device_updated .icon {
  width: 32px;
}
.device_list4 .device_updated .icon img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.device_list4 .device_updated .value {
  flex-grow: 1;
  font-size: small;
  text-align: center;
  padding-left: .5em;
}
.device_list4 .device_data {
  flex-shrink: 0;
  width: 27%;
  display: flex;
  border-radius: .5em;
  border: 1px solid #CCCCCC;
}
.device_list4 .device_data.ng {
  background-color: #FDECEE;
}
.device_list4 .device_data .icon {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-left: 1px solid #CCCCCC;
}
.device_list4 .device_data .icon img {
  display: block;
  width: 60px;
  height: auto;
}
.device_list4 .device_data .data {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.device_list4 .device_data .data .data-label {
  white-space: nowrap;
  color: #8898AA;
  font-size: small;
}
.device_list4 .device_data .data .data-value {
  display: flex;
  align-items: baseline;
}
.device_list4 .device_data .data .data-value .value {
  flex: 1;
  font-size: 150%;
  font-weight: bold;
  text-align: center;
  vertical-align: bottom;
}
.device_list4 .device_data .data .data-value .unit {
  padding-left: .5em;
  font-size: 100%;
  vertical-align: bottom;
}
.device-remote-view2 {
  border-radius: 8px;
  border: 1px solid #CCCCCC;
  font-size: normal;
}
.device-remote-view2 table {
  margin: 24px 24px;
}
.device-remote-view2 td {
  vertical-align: middle;
  white-space: nowrap;
}
.device-remote-view2 label {
  display: inline-block;
  color: #8898AA;
}
.device-remote-view2 label [type=checkbox] {
  margin-right: .5em;
}
.device-remote-view2 label+label {
  margin-left: 2em;
}
.device-remote-view2 fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
.device-remote-view2 fieldset:disabled {
  opacity: .4;
}