.message {
  position: absolute;
  top: -64px;
  left: 0;
  width: 100%;
  height: 64px;
  z-index: 3002;
}

.message .alert {
  border-radius: 0;
  text-align: center;
  font-weight: bold;
}


.login .alert {
  position: fixed;
  left: 50%;
  margin-left: -160px;
  width: 320px;
  top: 70px;
  text-align: center;
  z-index: 3000;
}

@media (min-width: 768px){
  .login .alert {
    position: fixed;
    left: 50%;
    margin-left: -360px;
    width: 720px;
  }
}

@media (min-width: 992px){
  .login .alert {
    margin-left: -470px;
    width: 940px;
  }
}

@media (min-width: 1200px){
  .login .alert {
    margin-left: -570px;
    width: 1140px;
  }
}




/* =========== auto-capture =========== */

.auto-capture {
  padding: 16px 16px 0 16px;
}

.auto-capture .form-horizontal .form-group {
  margin: 0 0 8px 0;
}

.auto-capture .form-horizontal .form-group:last-child {
  margin-bottom: 0;
}

.auto-capture .form-group label {
  float: left;
  width: 90px;
  font-size: 13px;
  line-height: 34px;
  margin: 0;
  text-align: center;
}

.auto-capture .form-group input {
  float: left;
  width: 260px;
  height: 34px;
  font-size: 13px;
  padding: 6px 8px;
  margin-right: 16px;
}

.auto-capture .form-group .time {
  float: left;
  width: 146px;
  height: 34px;
  text-align: left;
  font-size: 13px;
  font-weight: bold;
  padding: 0;
}

.auto-capture .form-group select {
  width: 60px;
  height: 34px;
  text-align: left;
  font-size: 13px;
  font-weight: bold;
  margin:0 4px;
  padding: 6px 8px;
}

.auto-capture .form-group .time+span {
  float: left;
  width: 20px;
  height: 34px;
  text-align: left;
  font-size: 13px;
  font-weight: bold;
  margin: 0;
  padding: 6px 0;
}

.auto-capture .form-group .time select:first-child {
  margin-left: 0;
}

.auto-capture .form-group .shot-mode select:first-child {
  margin-left: 0;
  width: 80px;
}


.auto-capture .form-group select.shot-mode {
  width: 100px;
}

.auto-capture .form-group img {
  width: 20px;
  height: auto;
  float: left;
  margin: 7px 0;
}

.btns {
  margin: 0;
  padding: 16px 8px;
}

.cage-action.btns {
  margin: 0;
  padding: 16px 16px 0 16px;
}

.monitor+.btns {
  border-top: solid 1px #eee;
}

.cage-information+.btns {
  padding: 12px 8px 0 8px;
}

.trap-status .btns {
  padding: 12px 0 0 0;
}

.auto-capture+.btns {
  padding: 8px 8px 0 8px;
}

.cage-timer+.btns {
  padding: 16px 8px 0 8px;
}

.forms+.btns {
  padding: 8px 8px 0 8px;
}

.dialog .forms+.btns {
  padding: 8px 8px 16px 8px;
}

.btns .row {
  margin-right: 0;
  margin-left: 0;
}

.btns .row div {
  padding-right: 8px;
  padding-left: 8px;
}

.btns .row div:nth-child(even) {
  padding-right:8px;
  padding-left: 8px;
}

.trap-status .btns .row div {
  padding-left: 16px;
  padding-right: 0px;
}

.trap-status .btns .row div:first-child {
  padding-left: 0px;
  padding-right: 0px;
}

.btns .row .btn {
  position: relative;
  margin: 0;
  padding: 12px 0;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
}

.forms+.btns .row .btn,
.cage-action.btns .row .btn,
.cage-timer+.btns .row .btn,
.auto-capture+.btns .row .btn,
.trap-status .btns .row .btn,
.cage-information+.btns .row .btn {
  padding: 10px 0;
  font-size: 14px;
}

.trap-status .btns .row .col-sm-6 {
  padding-left: 0;
  padding-right: 8px;
}

.trap-status .btns .row .col-sm-6:last-child {
  padding-left: 8px;
  padding-right: 0;
}


/* ========================================================================
 * hokacloud: button.css v1.0.0 2019/04/30
 * ボタン
 * ======================================================================== */

.btn-primary,
.btn-secondary,
.btn-submit,
.btn-edit,
.btn-delete,
.btn-danger,
.btn-cancel,
.btn-all,
.btn-alert,
.btn-research,
.btn-hokaku,
.btn-share,
.btn-bait,
.btn-info,
.btn-auto,
.btn-config,
.btn-result,
.btn-today,
.btn-hokacloud-projector,
.btn-hokacloud-sensor, 
.btn-hokacloud-camera {
  color: #fff;
  border: none;
  text-decoration: none;
  border-radius: 4px;
}

.btn.active.focus, .btn.active:active,
.btn.active:focus, .btn.active:hover,
.btn-primary.focus, .btn-primary:active,
.btn-primary:focus, .btn-primary:hover,
.open>.dropdown-toggle.btn-primary,
.btn-secondary.focus, .btn-secondary:active,
.btn-secondary:focus, .btn-secondary:hover,
.open>.dropdown-toggle.btn-secondary,
.btn-submit.focus, .btn-submit:active,
.btn-submit:focus, .btn-submit:hover,
.open>.dropdown-toggle.btn-submit,
.btn-edit.focus, .btn-edit:active,
.btn-edit:focus, .btn-edit:hover,
.open>.dropdown-toggle.btn-edit,
.btn-delete.focus, .btn-delete:active,
.btn-delete:focus, .btn-delete:hover,
.open>.dropdown-toggle.btn-delete,
.btn-danger.focus, .btn-danger:active,
.btn-danger:focus, .btn-danger:hover,
.open>.dropdown-toggle.btn-danger,
.btn-cancel.focus, .btn-cancel:active,
.btn-cancel:focus, .btn-cancel:hover,
.open>.dropdown-toggle.btn-cancel,
.btn-all.focus, .btn-all:active,
.btn-all:focus, .btn-all:hover,
.open>.dropdown-toggle.btn-all,
.btn-alert.focus, .btn-alert:active,
.btn-alert:focus, .btn-alert:hover,
.open>.dropdown-toggle.btn-alert,
.btn-research.focus, .btn-research:active,
.btn-research:focus, .btn-research:hover,
.open>.dropdown-toggle.btn-research,
.btn-hokaku.focus, .btn-hokaku:active,
.btn-hokaku:focus, .btn-hokaku:hover,
.open>.dropdown-toggle.btn-hokaku,
.btn-share.focus, .btn-share:active,
.btn-share:focus, .btn-share:hover,
.open>.dropdown-toggle.btn-share,
.btn-bait.focus, .btn-bait:active,
.btn-bait:focus, .btn-bait:hover,
.open>.dropdown-toggle.btn-bait,
.btn-info.focus, .btn-info:active,
.btn-info:focus, .btn-info:hover,
.open>.dropdown-toggle.btn-info,
.btn-auto.focus, .btn-auto:active,
.btn-auto:focus, .btn-auto:hover,
.open>.dropdown-toggle.btn-auto,
.btn-config.focus, .btn-config:active,
.btn-config:focus, .btn-config:hover,
.open>.dropdown-toggle.btn-config,
.btn-today.focus, .btn-today:active,
.btn-today:focus, .btn-today:hover,
.open>.dropdown-toggle.btn-today,
.btn-result.focus, .btn-result:active,
.btn-result:focus, .btn-result:hover,
.open>.dropdown-toggle.btn-result,
.btn-hokacloud-projector.focus, .btn-hokacloud-projector:active,
.btn-hokacloud-projector:focus, .btn-hokacloud-projector:hover,
.open>.dropdown-toggle.btn-hokacloud-projector,
.btn-hokacloud-sensor.focus, .btn-hokacloud-sensor:active,
.btn-hokacloud-sensor:focus, .btn-hokacloud-sensor:hover,
.open>.dropdown-toggle.btn-hokacloud-sensor,
.btn-hokacloud-camera.focus, .btn-hokacloud-camera:active,
.btn-hokacloud-camera:focus, .btn-hokacloud-camera:hover,
.open>.dropdown-toggle.btn-hokacloud-camera {
  color: #fff;
  border: none;
  outline: 0;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
  outline: 0;
}

.btn.active {
  box-shadow: inset 1px 1px 4px rgba(0,0,0,0.6);
  color: rgba(255, 255, 255, 0.9);
}

/* primary */

.btn-primary {
  background-color: #EF6C00;
}

.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open>.dropdown-toggle.btn-primary {
  background-color: #E65100;
}

/* secondary */

.btn-secondary {
  background-color: #43A047;
}

.btn-secondary.active,
.btn-secondary.focus,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover,
.open>.dropdown-toggle.btn-secondary {
  background-color: #388E3C;
}

/* submit */

.btn-submit {
  background-color: #388E3C;
}

.btn-submit.active,
.btn-submit.focus,
.btn-submit:active,
.btn-submit:focus,
.btn-submit:hover,
.open>.dropdown-toggle.btn-submit {
  background-color: #2E7D32;
}

/* edit */

.btn-edit {
  background-color: #0288D1;
}

.btn-edit.active,
.btn-edit.focus,
.btn-edit:active,
.btn-edit:focus,
.btn-edit:hover,
.open>.dropdown-toggle.btn-edit {
  background-color: #0277BD;
}

/* delete */

.btn-delete {
  background-color: #C62828;
}

.btn-delete.active,
.btn-delete.focus,
.btn-delete:active,
.btn-delete:focus,
.btn-delete:hover,
.open>.dropdown-toggle.btn-delete {
  background-color: #B71C1C;
}

/* cancel */

.btn-cancel {
  background-color: #C62828;
}

.btn-cancel.active,
.btn-cancel.focus,
.btn-cancel:active,
.btn-cancel:focus,
.btn-cancel:hover,
.open>.dropdown-toggle.btn-cancel {
  background-color: #B71C1C;
}

/* all */

.btn-all {
  background-color: #8D6E63;  
}

.btn-all.focus,
.btn-all:active,
.btn-all:focus,
.btn-all:hover,
.open>.dropdown-toggle.btn-all {
  background-color: #795548;
}

.btn-all.active {
  background-color: #795548;
}

/* alert */

.btn-alert {
  background-color: #E53935;  
}

.btn-alert.focus,
.btn-alert:active,
.btn-alert:focus,
.btn-alert:hover,
.open>.dropdown-toggle.btn-alert {
  background-color: #D32F2F;
}

.btn-alert.active {
  background-color: #D32F2F;
}

/* research */

.btn-research {
  background-color: #1E88E5;  
}

.btn-research.focus,
.btn-research:active,
.btn-research:focus,
.btn-research:hover,
.open>.dropdown-toggle.btn-research {
  background-color: #1976D2;
}

.btn-research.active {
  background-color: #1976D2;
}

/* hokaku */

.btn-hokaku {
  background-color: #F9A825;  
}

.btn-hokaku.focus,
.btn-hokaku:active,
.btn-hokaku:focus,
.btn-hokaku:hover,
.open>.dropdown-toggle.btn-hokaku {
  background-color: #F57F17;
}

.btn-hokaku.active {
  background-color: #F57F17;
}

/* share */

.btn-share {
  background-color: #388E3C;  
}

.btn-share.focus,
.btn-share:active,
.btn-share:focus,
.btn-share:hover,
.open>.dropdown-toggle.btn-share {
  background-color: #2E7D32;
}

.btn-share.active {
  background-color: #2E7D32;
}

/* bait */

.btn-bait {
  background-color: #7E57C2;  
}

.btn-bait.focus,
.btn-bait:active,
.btn-bait:focus,
.btn-bait:hover,
.open>.dropdown-toggle.btn-bait {
  background-color: #673AB7;
}

.btn-bait.active {
  background-color: #673AB7;
}

/* info */

.btn-info {
  background-color: #009688;  
}

.btn-info.focus,
.btn-info:active,
.btn-info:focus,
.btn-info:hover,
.open>.dropdown-toggle.btn-info {
  background-color: #00897B;
}

.btn-info.active {
  background-color: #00897B;
}

/* auto */

.btn-auto {
  background-color: #0097A7;  
}

.btn-auto.focus,
.btn-auto:active,
.btn-auto:focus,
.btn-auto:hover,
.open>.dropdown-toggle.btn-auto {
  background-color: #00838F;
}

.btn-auto.active {
  background-color: #00838F;
}

/* config */

.btn-config {
  background-color: #9CCC65;  
}

.btn-config.focus,
.btn-config:active,
.btn-config:focus,
.btn-config:hover,
.open>.dropdown-toggle.btn-config {
  background-color: #8BC34A;
}

.btn-config.active {
  background-color: #8BC34A;
}

/* today */

.btn-today {
  background-color: #757575;
}

.btn-today.active,
.btn-today.focus,
.btn-today:active,
.btn-today:focus,
.btn-today:hover,
.open>.dropdown-toggle.btn-today {
  background-color: #989898;
}

/* result */

.btn-result {
  background-color: #F4511E;  
}

.btn-result.focus,
.btn-result:active,
.btn-result:focus,
.btn-result:hover,
.open>.dropdown-toggle.btn-config {
  background-color: #E64A19;
}

.btn-result.active {
  background-color: #E64A19;
}

/* btn-hokacloud-projector */

.btn-hokacloud-projector {
  background-color: #9CCC65;
}

.btn-hokacloud-projector.active,
.btn-hokacloud-projector.focus,
.btn-hokacloud-projector:active,
.btn-hokacloud-projector:focus,
.btn-hokacloud-projector:hover,
.open>.dropdown-toggle.btn-hokacloud-projector {
  background-color: #8BC34A;
}

/* btn-hokacloud-projector.on */

.btn-hokacloud-projector.on {
  background-color: #388E3C;
}

.btn-hokacloud-projector.on.active,
.btn-hokacloud-projector.on.focus,
.btn-hokacloud-projector.on:active,
.btn-hokacloud-projector.on:focus,
.btn-hokacloud-projector.on:hover,
.open>.dropdown-toggle.btn-hokacloud-projecto.onr {
  background-color: #2E7D32;
}

/* btn-hokacloud-sensor */

.btn-hokacloud-sensor {
  background-color: #9CCC65;
}

.btn-hokacloud-sensor.active,
.btn-hokacloud-sensor.focus,
.btn-hokacloud-sensor:active,
.btn-hokacloud-sensor:focus,
.btn-hokacloud-sensor:hover,
.open>.dropdown-toggle.btn-hokacloud-sensor {
  background-color: #8BC34A;
}

/* btn-hokacloud-sensor.on */

.btn-hokacloud-sensor.on {
  background-color: #388E3C;
}

.btn-hokacloud-sensor.on.active,
.btn-hokacloud-sensor.on.focus,
.btn-hokacloud-sensor.on:active,
.btn-hokacloud-sensor.on:focus,
.btn-hokacloud-sensor.on:hover,
.open>.dropdown-toggle.btn-hokacloud-sensor.on {
  background-color: #2E7D32;
}


/* btn-hokacloud-camera */

.btn-hokacloud-camera {
  background-color: #9CCC65;
}

.btn-hokacloud-camera.active,
.btn-hokacloud-camera.focus,
.btn-hokacloud-camera:active,
.btn-hokacloud-camera:focus,
.btn-hokacloud-camera:hover,
.open>.dropdown-toggle.btn-hokacloud-camera {
  background-color: #8BC34A;
}

.btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
    background-color: #BDBDBD;
    border-color: #E0E0E0;
}

/* ========== cage-action =========== */

.cage-action {
  
}
.cage-information {
  margin: 0;
  padding: 16px 16px 0 16px;
}

.cage-information .updated {
  padding: 0;
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
}

.cage-information textarea {
  margin: 8px 0 0 0;
  width: 100%;
  padding: 2px 0;
  font-size: 15px;
}
/* =========== cage-timer =========== */

.cage-timer {
  padding: 16px 16px 0 16px;
}

.cage-timer .form-horizontal .form-group {
  margin: 0 0 8px 0;
}

.cage-timer .form-horizontal .form-group:last-child {
  margin-bottom: 0;
}

.cage-timer .form-group label {
  float: left;
  width: 90px;
  font-size: 13px;
  line-height: 34px;
  margin: 0 16px 0 0;
  text-align: center;
}

.cage-timer .form-group input {
  float: left;
  width: 260px;
  height: 34px;
  font-size: 13px;
  padding: 6px 8px;
  margin-right: 16px;
}

.cage-timer .form-group select {
  float: left;
  width: 74px;
  height: 34px;
  text-align: left;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 8px;
  margin: 0 4px;
  background-color: #fff;
}

.cage-timer .form-group select.shot-mode {
  width: 100px;
}

.cage-timer .form-group span {
  float: left;
  width: 20px;
  height: 34px;
  font-size: 14px;
  font-weight: bold;
  line-height: 34px;
  text-align: center;
}

.cage-timer .form-group img {
  width: 20px;
  height: auto;
  float: left;
  margin: 7px 0;
}
.calendar {
  position:absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 3001;
}

.calendar.show {
  display: block;
}

#calendar-modal {
    margin: 0;
    margin-left:-210px;
    padding:0;
    position:absolute;
    z-index: 3002;
    width:420px;
    text-align:left;
    top:50px;
    left:50%;
}

#calendar-modal .modal-close-btn {
     color:#000;
     font-weight:bold;
     position:absolute;
     z-index:302;
     right:5px;
     top:5px;
     background:rgba(255,255,255,0.8);
     border:none;
     padding: 6px 14px;
}

.calendar-header.row {
    margin-top:45px;
    margin-left:0;
    margin-right:0;
    padding:5px 10px 0 9px;
}

#calendar-previous-month-btn {
    float:left;
    color:#000;
    font-weight:bold;
    background:rgba(255,255,255,0.9);
    border:none;
}

#calendar-next-month-btn {
    float:right;
    color:#000;
    font-weight:bold;
    background:rgba(255,255,255,0.9);
    border:none;
}

#hokacloud-calendar-current-month {
    margin:0 auto;
    padding:6px 12px;
    width:150px;
    color:#fff;
    font-weight:bold;
    text-align:center;
    font-size:16px;
}

#calendar-wrapper {
    padding: 5px 24px 0 24px;
}

#calendar-wrapper table{}

#calendar-wrapper table thead {}

#calendar-wrapper table thead tr {
    border-bottom:solid #fff 1px;
}

#calendar-wrapper table thead tr th {
    padding:5px 0;
    width:53px;
    text-align:center;
    color:#fff;
}

#calendar-wrapper table tbody tr {
    border-bottom:solid #fff 1px;
}

#calendar-wrapper table tbody tr td {
    width:46px;
    border-left:solid rgba( 240, 240, 240, 0.9 ) 1px;
    text-align:center;
}

#calendar-wrapper table tbody tr td:nth-child(7) {
    border-right:solid rgba( 240, 240, 240, 0.9 ) 1px;
}

#calendar-wrapper table tbody tr td {
    position:relative;
}

#calendar-wrapper table tbody tr td .calendar-day-btn {
    display:block;
    padding:13px 0;
    font-size:16px;
    font-weight:bold;
    line-height:14px;
    color:#000;
    background-color:#ddd;
    position:relative;
}

#calendar-wrapper table tbody tr td .calendar-day-btn.selected{
    background-color:#f4d7bf;
    color:#783e0f;
}

#calendar-wrapper table tbody tr td .calendar-future-day-btn {
    display:block;
    padding:13px 0;
    font-size:16px;
    font-weight:bold;
    line-height:14px;
    color:#333;
    background-color:#999;
    position:relative;
}

#calendar-wrapper table tbody tr td .bar-detect,
#calendar-wrapper table tbody tr td .bar-research,
#calendar-wrapper table tbody tr td .bar-chat{
    position:absolute;
    display:inline-block;
    width:6px;
    height:6px;
    bottom:0;
}

#calendar-wrapper table tbody tr td .bar-detect {
    background:#c50018;
    left:12px;
}

#calendar-wrapper table tbody tr td .bar-research {
    background:#1a4899;
    left:22px;
}

#calendar-wrapper table tbody tr td .bar-chat {
    background:#34a853;
    left:32px;
}

#calendar-wrapper table tbody tr td .bar-large {
    height:12px;
}

#calendar-wrapper table tbody tr td .calendar-day-btn.hover{
    background-color:#b3b3b3;
    cursor:pointer;
}

#calendar-wrapper table tbody tr td .calendar-day-btn.selected.hover{
    background-color:#f4d7bf;
    color:#783e0f;
}

/* =========== calendar-graph =========== */

.calendar-graph-name {
    margin:0 0 3px 0;
    padding:5px 0 5px 10px;
    font-size:14px;
    line-height:20px;
    font-weight:bold;
    color:#fff;
    background:#000;
    border-top:solid #ddd 1px;
    border-right:solid #ddd 1px;
    border-left:solid #ddd 1px;
}

.calendar-graph {
    margin:25px 0 0 24px;
    width:372px;
    height:210px;
    background:#ddd;
    position:relative;
}

.calendar-modal-scroll {
    overflow-y:scroll;
    -webkit-overflow-scrolling : auto;
}

.csv-download-btn {
    padding-top:10px;
    text-align:right;
}

.calendar-graph-body {
    width:320px;
    margin:0 auto;
    position:relative;
}

.calendar-modal-scroll .calendar-graph:last-child{
    margin-bottom:20px
}

.calendar-graph .calendar-graph-numbers {
    position:absolute;
    top:153px;
    left:6px;
    width:306px;
    font-size:12px;
    font-weight:bold;
    margin:0 5px;
}

.calendar-graph .calendar-graph-number-start {
   position:absolute;
   left:1px;
   top:0;
}

.calendar-graph .calendar-graph-number-middle {
    position:absolute;
   left:134px;
   top:0;
}

.calendar-graph .calendar-graph-number-last {
   position:absolute;
   top:0;
   right:0;
}

.calendar-graph .calendar-graph-title-in {
    position:absolute;
    top:0px;
    right:6px;
    font-size:12px;
    font-weight:bold;
    text-align:right;
}

.calendar-graph .calendar-graph-title-out {
    position:absolute;
    top:139px;
    right:6px;
    font-size:12px;
    font-weight:bold;
    text-align:right;
}

.calendar-graph .calendar-graph-day-lines {
    position:absolute;
    left:14px;
}

.calendar-graph .calendar-graph-day-lines.in-data{
    top:18px;    
}

.calendar-graph .calendar-graph-day-lines.out-data{
    top:78px;    
}

.calendar-graph .calendar-graph-day-lines span {
    position:absolute;
    display:inline-block;
    top:0px;
    width:3px;
    height:60px;
    background: #1a4899;
}

.calendar-graph .calendar-graph-base-lines {
    position:absolute;
    top:18px;
    left:8px;
}

.calendar-graph .calendar-graph-base-lines .calendar-graph-start-line {
    position: absolute;
    display: inline-block;
    width: 2px;
    height: 120px;
    background: #535353;
    top: 0px;
    left: 0px;
}

.calendar-graph .calendar-graph-base-lines .calendar-graph-middle-line {
    position: absolute;
    display: inline-block;
    width: 304px;
    height: 2px;
    background: #535353;
    top: 59px;
    left: 0px;
}

.calendar-graph-plus-line-5 {
    position: absolute;
    display: inline-block;
    width: 302px;
    height: 1px;
    background: #aaa;
    top: 30px;
    left: 2px;
}
.calendar-graph-plus-line-10 {
    position: absolute;
    display: inline-block;
    width: 302px;
    height: 1px;
    background: #777;
    top: 0px;
    left: 2px;
}
.calendar-graph-minus-line-5 {
    position: absolute;
    display: inline-block;
    width: 302px;
    height: 1px;
    background: #aaa;
    top: 90px;
    left: 2px;
}
.calendar-graph-minus-line-10 {
    position: absolute;
    display: inline-block;
    width: 302px;
    height: 1px;
    background: #777;
    top: 119px;
    left: 2px;
}


.calendar-label-0 {
  position: absolute;
  display: inline-block;
  width: 20px;
  top: 70px;
  left: -6px;
  font-size: 12px;
  font-weight: bold; 
}
.calendar-label-plus-5 {
  position: absolute;
  display: inline-block;
  width: 20px;
  top: 40px;
  left: -6px;
  font-size: 12px;
  font-weight: bold;
}
.calendar-label-plus-10 {
  position: absolute;
  display: inline-block;
  width: 20px;
  top: 10px;
  left: -13px;
  font-size: 12px;
  font-weight: bold;
}
.calendar-label-minus-5 {
  position: absolute;
  display: inline-block;
  width: 20px;
  top: 100px;
  left: -6px;
  font-size: 12px;
  font-weight: bold;
}
.calendar-label-minus-10 {
  position: absolute;
  display: inline-block;
  width: 20px;
  top: 130px;
  left: -13px;
  font-size: 12px;
  font-weight: bold;
}





/* ========================================================================
 * hokacloud: chat.css v1.0.0 2019/04/30
 * チャット系
 * ======================================================================== */


/* ----- custom glyphicon ----- */

.glyphicon-action:before {
    content: "\e019";
}

.glyphicon-capture:before {
    content: "\e114";
}

.glyphicon-result:before {
    content: "\e067";
}

.glyphicon-mail:before {
    content: "\2709";
}

.glyphicon-message:before {
    content: "\e111";
}

.glyphicon-share:before {
   /* content: "\e041"; */
    content: "\e111";
}

.glyphicon-research:before {
    content: "\e178";
}

.glyphicon-bait:before {
    content: "\f8ff";
}

.glyphicon-info:before {
    content: "\e122";
}

.glyphicon-autocapture:before {
    content: "\e023";
}

/* ----- chat-item ----- */

.chat-item:before,
.chat-item:after {
  display: table;
  content: " ";
  box-sizing: border-box;
}

.chat-item:after {
  clear: both;
}

.chat-item {
  padding: 8px 16px 8px 8px;
  list-style: none;
}

/*
.chat-item:first-child {
  padding: 16px 16px 8px 8px;
  list-style: none;
}
*/

.chat-item.focused {
  padding-bottom: 8px;
}

.chat-item.focused+.chat-item {
  padding-top: 6px;
}

.chat-item span.glyphicon {
  display: block;
  width: 32px;
  height: 32px;
  margin-top: 20px;
  float:left;
  font-size:13px;
  line-height:13px;
  border-radius: 16px;
  color:#fff;
  background: #eee;
}

.chat-item span.glyphicon-message {
  background:#9b9b9b;
  padding:9px 9px  9px 10px;
}

.chat-item span.glyphicon-research {
  background:#1e88e5;
  padding:10px 9px 8px 9px;
}

.chat-item span.glyphicon-share {
  background:#388e3c;
  padding:10px 8px 8px 10px;
}

.chat-item span.glyphicon-mail {
  background: #E53935;
  padding:9px 9px 9px 10px;
}

.chat-item span.glyphicon-result {
  background:#ea7a35;
  padding:10px 8px 8px 10px;
}
 
.chat-item span.glyphicon-capture {
  background:#f9a825;
  padding:10px 8px 8px 10px;
}

.chat-item span.glyphicon-result {
  background:#f4511e;
  padding:9px 8px 8px 10px;
}

.chat-item span.glyphicon-action {
  background:#92ce5b;
  padding:9px 9px 9px 10px;
} 

.chat-item span.glyphicon-bait {
  background:#7e57c2;
  font-size: 15px;
  padding:9px 10px 10px 8px;
} 

.chat-item span.glyphicon-info {
  background:#009688;
  padding:9px 9px 9px 9px;
} 

.chat-item span.glyphicon-autocapture {
  background:#0097a7;
  font-size: 17px;
  padding:10px 8px 9px 8px;
}

.chat-item .chat-body {
  margin-left: 32px;
}

.chat-item .chat-message {
  position: relative;
  border-top-left-radius: 4px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: #FFF;
  margin-left: 10px;
  padding: 7px 10px 8px 10px;
  border: 1px solid #d9d0bf;
  line-height: 15px;
  box-sizing: border-box;
}

.chat-item .chat-message:before {
  background: #FFF;
  position: absolute;
  top: 4px;
  content: "";
  width: 10px;
  height: 10px;
  left: -6px;
  border-left: 1px solid #d9d0bf;
  border-bottom: 1px solid #d9d0bf;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.chat-item .chat-body .trap-name {
  margin: 0 8px 0 0px;
  padding: 6px 8px 6px 8px;
  display: inline-block;
  font-size: 11px;
  line-height: 10px;
  font-weight: bold;
  color: #fff;
  background: #A1887F;
  border-radius: 12px;
}

.chat-item.focused {
  
}

.chat-item.focused .chat-body .user-name {
  margin: 0;
  padding: 0 0 2px 8px;
}

.chat-item.focused .chat-message {
  padding: 9px 11px;
  border-width: 2px;
  
}

.chat-item.focused .chat-message:before {
  border-width: 2px;
}

.chat-item.mail.focused .chat-message,
.chat-item.mail.focused .chat-message:before {
  border-color: #E53935;
}

.chat-item.research.focused .chat-message,
.chat-item.research.focused .chat-message:before {
  border-color: #1e88e5;
}

.chat-item.share.focused .chat-message,
.chat-item.share.focused .chat-message:before {
  border-color: #388e3c;
}

.chat-item.result.focused .chat-message,
.chat-item.result.focused .chat-message:before {
  border-color: #ea7a35;
}

.chat-item.capture.focused .chat-message,
.chat-item.capture.focused .chat-message:before {
  border-color: #f9a825;
}

.chat-item.capture.focused .chat-message,
.chat-item.capture.focused .chat-message:before {
  border-color: #f9a825;
}

.chat-item.autocapture.focused .chat-message,
.chat-item.autocapture.focused .chat-message:before {
  border-color: #0097a7;
}

.chat-item.mail:hover .chat-message,
.chat-item.mail:hover .chat-message:before {
  background: #FFEBEE;
  cursor: pointer;
}

.chat-item.research:hover .chat-message,
.chat-item.research:hover .chat-message:before {
  background: #E3F2FD;
  cursor: pointer;
}

.chat-item.capture:hover .chat-message,
.chat-item.capture:hover .chat-message:before {
  background: #FFFDE7;
  cursor: pointer;
}

.chat-item.result:hover .chat-message,
.chat-item.result:hover .chat-message:before {
  background: #FBE9E7;
  cursor: pointer;
}

.chat-item.autocapture:hover .chat-message,
.chat-item.autocapture:hover .chat-message:before {
  background: #E0F7FA;
  cursor: pointer;
}

.chat-item.share:hover .chat-message,
.chat-item.share:hover .chat-message:before {
  background: #E8F5E9;
  cursor: pointer;
}

.chat-item .chat-body .user-name {
  margin: 0;
  padding: 0 0 4px 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: bold;
  color: #424242;
}

.chat-item .chat-message p {
  font-size: 14px;
  line-height: 1.5;
  text-align: justify;
  word-break: break-all;
  word-wrap: break-word;
  margin: 0;
}

.chat-item .chat-message .recorded {
  margin: 6px -11px 0 -11px;
  padding: 6px 8px 0 0;
  border-top: 1px dotted #d9d0bf;
  font-size: 11px;
  line-height: 11px;
  font-weight: bold;
  text-align: right;
  color: #616161;
}

.chat-line {
  margin: 8px 0 8px 0;
  padding: 6px 0 7px 0;
  background: #E0E0E0;
  color: #212121;
  font-size: 12px;
  line-height: 12px;
  font-weight: bold;
  list-style: none;
  text-align: center;
}



@media (min-width: 768px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}


body {
  margin: 0;
  padding: 0;
  position: relative;
  background: #E0E0E0;
  color: #000;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 14px;
  font-feature-settings: "palt";
}

body.showDialogMask,
body.showMask {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

/* =========== Header =========== */

.navbar {
  height: 48px;
  border: 0;
  padding-left: 0px;
  padding-right: 0px;
  background-color: #5D4037;  /* 5d4629 */
  box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
}

.navbar-fixed-top {
  top: 0;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

.navbar-header {
  width: 136px;
  height: 32px;
  padding: 0;
  margin: 8px 16px 8px 0;
  color: #373737;
}

.navbar-header a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.navbar-header a img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}


header .navbar-nav li a {
  padding-top: 15px;
  padding-bottom: 15px;
  color: #fff;
}


header .navbar-nav li a:focus,
header .navbar-nav li a:hover {
  color: #f5a244;
  border: none;
  padding-bottom: 12px;
  background: none;
}

.navbar-nav .active a,
.navbar-nav .active a:focus,
.navbar-nav .active a:hover {
  color: #f5a244;
  padding-bottom: 12px;
  background: none;
  border-bottom: 3px solid #ee8321;
}

.navbar-nav .open a,
.navbar-nav .open a:focus,
.navbar-nav .open a:hover {
  color: #f5a244;
  padding-bottom: 14px;
  background: #4b371f;
}

.navbar-nav li .dropdown-menu {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-nav .open .dropdown-menu li a {
  padding: 7px 20px;
}

.navbar-nav .open .dropdown-menu li a:link,
.navbar-nav .open .dropdown-menu li a:visited {
  background: #ffffff;
  color: #4b371f;
}

.navbar-nav .open .dropdown-menu li a:focus,
.navbar-nav .open .dropdown-menu li a:hover,
.navbar-nav .open .dropdown-menu li a:active {
  background: #ffe3c3;
  color: #95560f;
}

.navbar-nav .dropdown-menu .divider {
  margin: 0;
}


/* =========== Main =========== */

main {
  padding: 80px 0;
}


/* =========== wana-list =========== */
.wana-list {
  /*
  position: relative;
  */
  position: fixed;
  width: 132px;
}

.wana-list .glyphicon-search {
  position: absolute;
  top: 12px;
  left: 9px;
  font-size: 16px;
  color: #454545;
}

.wana-list input {
  margin: 0;
  padding: 8px;
  width: 132px;
  border: solid 1px #BDBDBD;
  border-radius: 4px;
}

@media (min-width: 768px){
  .wana-list input {
  }
}

@media (min-width: 992px){
  .wana-list input {
  }
}

@media (min-width: 1200px){
  .wana-list input {
    width: 165px;
  }
  .wana-list {
    width: 165px;
  }
}

.wana-list input:focus {
  outline: 0;
}

.wana-list ul {
  margin: 16px 0 0 0;
  padding-left: 0;
  padding-bottom: 32px;
  overflow-y: scroll;
}

.wana-list .list-group-item {
  width: 100%;
}

.wana-list .list-group-item {
  position: relative;
  display: block;
  padding: 0;
  margin-bottom: -1px;
  background-color: #fff;
  border: solid 1px #BDBDBD;
}

.wana-list .list-group-item:focus,
.wana-list .list-group-item:hover {
  background: #FFF3E0;
}

.wana-list .list-group-item a {
  display: block;
  padding: 8px;
  color: #3E2723;
}

.wana-list .list-group-item:focus a,
.wana-list .list-group-item:hover a {
  text-decoration: none;
  color: #ef6c00;
}

.wana-list .list-group-item a span {
  display: inline-block;
  margin-right: 2px;
}

.wana-list .list-group-item.active,
.wana-list .list-group-item.active:focus,
.wana-list .list-group-item.active:hover {
  background: #5d4037;
  border: solid 1px #BDBDBD;
}

.wana-list .list-group-item.active:first-child {
  border-top:none;
}

.wana-list .list-group-item.active a,
.wana-list .list-group-item.active:focus a,
.wana-list .list-group-item.active:hover a {
  color: #fff;
  text-decoration: none;
}

/* =========== container =========== */
#container {
  opacity: 0;
}

#container.show {
  opacity: 1.0;
}


/* =========== Footer =========== */


footer {
  position: fixed;
  width: 100%;
  background: #fff;
  bottom: 0;
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 0;
  z-index: 1030;
}

@media (max-width: 640px) {

  body.login footer {
    display: none;
  }

}

footer p.hokacloud-notice {
  margin: 0;
  padding: 8px 0px 8px 0px;
  font-size: 13px;
  line-height: 1.75;
}


/* =========== fix =========== */

.fix {
  overflow: hidden;
}


/* =========== mask =========== */
/*
.mask {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 2000;
}
*/
body.multi-action .trap .monitor img.mask {
  display: none;
}

.config {
  margin: 0;
  padding: 0;
  position: absolute;
  display: none;
  z-index: 3001;
  top: 0;
  left: 0;
  text-align: center;
}

.config.show {
  display: block;
}

.config .config-modal {
  margin: 0;
  margin-left: -210px;
  padding: 0;
  position: absolute;
  z-index: 3002;
  width: 420px;
  height: 300px;
  text-align: left;
  top: 100px;
  left: 50%;
}

.config-modal .modal-close-btn {
  color: #000;
  font-weight: bold;
  position: absolute;
  z-index: 3003;
  right: 10px;
  top: 10px;
  background: rgba(255,255,255,0.8);
  border: none;
  padding: 6px 14px;
}

.speed-setting {
  padding: 30px 10px 0 10px;
}

.speed-setting .speed-setting-title {
    margin-top:20px;
    color:#fff;
    font-weight:bold;
}

.config-modal-btns {
    padding:10px 0;
}

.config-modal-btns .config-modal-btn {
    background:rgba(255,255,255,0.8);
    color:#000;
    font-weight:bold;
    padding:7px 0;
    margin:5px 0 0 10px;
    width:52px;
    text-align:center;
    border:none;
} 

.android .config-modal-btns .config-modal-btn {
    padding:8px 0 6px 0;
}

.config-modal-btns .config-modal-btn:first-child {
    margin-left:0;
}

.config-modal-btns .config-modal-btn.active {
    padding:8px 0 6px 0;
    color:#fff;
    font-weight:bold;
    background:rgba(153,153,153,0.6);
    box-shadow: inset 0 2px 2px rgba(0,0,0,.8);
}

.android .config-modal-btns .config-modal-btn.active {
    padding:9px 0 5px 0;
}

.config-modal .modal-close-btn:focus,
.config-modal-btns .config-modal-btn:focus {
    outline:0;
}
/* ========================================================================
 * hokacloud: controller.css v1.0.0 2019/05/01
 * コントローラー
 * ======================================================================== */

#hokacloud-controller {
  border-top: solid 1px #ddd;
}

.hokacloud-hokaku-player .row {
    margin-left:0;
    margin-right:0;
    padding: 10px 10px 10px 10px;
}

#hokacloud-controller .ctl-btn {
    border-radius: 4px;
    width: 45px;
    float: left;
    color: #424242;
    margin-left: 10px;
    text-align: center;
    padding: 11px 0 7px 0;
  /*
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #f1f2f6100%);
    background-image:-o-linear-gradient(top, #ffffff 0%, #f1f2f6 100%);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f1f2f6));
    background-image:linear-gradient(to bottom, #ffffff 0%, #f1f2f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f2f6', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
  */
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3),inset 0 1px 0 rgba(255, 255, 255, .15);
}

#hokacloud-hokaku-player-play-btn-area.ctl-btn,
#hokacloud-hokaku-player-pause-btn-area.ctl-btn{
    width:45px;
  height: 45px;
    margin:0;
}

#hokacloud-hokaku-player-play-btn-area.ctl-btn .glyphicon,
#hokacloud-hokaku-player-pause-btn-area.ctl-btn .glyphicon {
  top: 3px;
}

#hokacloud-hokaku-player-rewind-btn-area.ctl-btn {
    width:45px;
  height: 45px;
    padding:5px 3px 0 0;
    margin-left:20px;
}

#hokacloud-hokaku-player-forward-btn-area.ctl-btn {
    width:45px;
  height: 45px;
    padding:5px 0 0 6px;
}

#hokacloud-hokaku-player-step-backward-btn-area.ctl-btn,
#hokacloud-hokaku-player-step-forward-btn-area.ctl-btn{
    width:41px;
    margin-top:5px;
    padding:8px 0 5px 0;
    float:right;
}

#hokacloud-hokaku-player-config-btn-area.ctl-btn{
    width:41px;
    margin-top:5px;
    padding:9px 0 4px 1px;
    float:right;
}

#hokacloud-controller .ctl-btn:hover {
    background:#fff;
    color:#d66f11;
    cursor:pointer;
 }
 
 #hokacloud-controller .ctl-btn:active {
    background:#aaa;
    color:#fff;
    cursor:pointer;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
 }

.page-body .glyphicon-backward,
.page-body .glyphicon-forward{
    display:block;
    line-height:14px;
}

.android  .glyphicon-backward,
.android .glyphicon-forward{
    line-height:15px;
}

.ctl-btn span {
    font-size:18px;
}

.ctl-btn .controller-speed {
    font-size: 10px;
    line-height: 10px;
    display: block;
    margin-top: 3px;
    margin-left: 5px;
    margin-bottom: 0px;
    text-align: center;
    font-weight: bold;
}

#hokacloud-hokaku-player-forward-btn-area .controller-speed {
    margin-left:-5px;
}

#hokacloud-controller .ctl-btn:first-child {
    margin-left:0;
}
/* =========== dialog =========== */

.dialog {
  position: absolute;
  display: none;
  top: 0;
  left: 50%;
  width: 458px;
  height: 500px;
  margin: 0 0 0 -228px;
  padding: 40px 0 0 0;
  overflow-y: scroll;
   -ms-overflow-style:none;
}

.dialog.show {
  display: block;
}

.dialog.auto-logout {
  width: 480px;
  margin: 0 0 0 -240px;
  padding-top: 200px;
}

body.pc.live .dialog .trap .monitor.img-4_3,
body.pc.farms .dialog .trap .monitor.img-4_3{
  width: 456px;
  height: 342px;
}

body.pc.live .dialog .trap .monitor.img-4_6,
body.pc.farms .dialog .trap .monitor.img-4_6 {
  width: 456px;
  height: 684px;
}
    
body.pc.live .dialog .trap .monitor.img-16_9,
body.pc.farms .dialog .trap .monitor.img-16_9 {
  width: 456px;
  height: 257px;
}

body.pc.live .dialog .trap .monitor.img-16_18,
body.pc.farms .dialog .trap .monitor.img-16_18 {
  width: 456px;
  height: 513px;
}

body.pc.live .dialog .trap .monitor.img-16_21,
body.pc.farms .dialog .trap .monitor.img-16_21 {
  width: 456px;
  height: 599px;
}

.dialog h2 {
  padding-bottom: 24px;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  text-align: center;
}

.dialog.auto-logout h2 {
  padding-bottom: 24px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 34px;
  text-align: center;
}

.dialog.auto-logout .trap {
  background: none;
  border: none;
}

#capture-confirm-dialog {
  z-index: 4000;
}

#capture-result-dialog {
  z-index: 4010;
}

#capture-complete-dialog {
  z-index: 4020;
}

#auto-confirm-dialog {
  z-index: 4030;
}

#auto-logout-dialog {
  z-index: 6020;
}

.forms.download {
  padding: 16px 0 0 0;
}

.forms.download.csv {
  padding: 24px 0 0 0;
}

.forms.download .row:first-child {
  padding-bottom: 8px;
}

.forms.download .download-input-label{
  padding: 10px 0 0 0;
}

.forms.download.csv .download-input-label{
  padding: 8px 0 0 0;
}

.forms.download .hokacloud-download-datetime {
    padding: 0 12px;
    border:1px solid #ddd;
    border-radius:4px;
  line-height: 34px;
    height:34px;
}

.forms.download .radio-inline{
  margin-right:10px;
}

.forms.download .radio-inline input {
  margin-top: 0px;
}

.forms.download　select {
  width: 120px;
  height: 34px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 8px;
}
.forms {
  border-top: solid 1px #eee;
  margin: 0;
  padding: 16px 8px 0 8px;
}

/* タブ内専用 */
.tab-pane .forms {
  border-top: none;
}

.forms .row {
  margin-right: 0;
  margin-left: 0;
}

.forms .row .col-sm-2,
.forms .row .col-sm-3,
.forms .row .col-sm-4 {
  padding-right: 8px;
  padding-left: 8px;
}

.forms label {
    font-size: 13px;
    color: #424242;
}

.forms select {
    margin-bottom: 8px;
}

.forms .form-control {
  padding: 6px;
}
.hokaku-result {
  border-top: solid 1px #eee;
  padding: 16px 16px 0 16px;
}

.tab-pane .hokaku-result {
  border-top: none;
}

.hokaku-result h4 {
  padding: 0;
  font-size: 13px;
  font-weight: bold;
}

.hokaku-result table {
  margin: 8px 0 0 0;
  width: 100%;
}

.hokaku-result table tr {
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
}

.hokaku-result table th {
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  text-align: center;
  width: auto;
  font-size: 13px;
  background: rgba(238,238,238,1.0);
}

.hokaku-result table td {
  padding: 3px 0;
  background: #fff;
  font-size: 15px;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  text-align: center;
}


/* ========================================================================
 * hokacloud: label.css v1.0.0 2019/05/01
 * ラベル
 * ======================================================================== */


/* primary */

.label-primary {
  background-color: #a1887f;
  border-radius: 12px;
}
/* =========== leds =========== */

.leds {
  background: none;
  margin: 0;
  padding: 0px 16px 16px 16px;
}

.farms .monitor+h3+.leds {
  padding: 16px;
}

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

.leds .led span {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #212121;
}

.leds .led img {
  display: block;
  margin: 4px auto 0 auto;
  padding: 0;
  width: 20px;
  height: auto;
}

/* ========================================================================
 * hokacloud: live.css v1.0.0 2019/05/01
 * ライブ画面系
 * ======================================================================== */

/* =========== movie =========== */

body.live .movie {
}

body.live .movie .header {
  margin: 0;
  padding: 8px;
}

body.live .movie .header span {
  margin: 0;
}

body.live .movie .header span.label {
  margin: 0;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 13px;
}

body.live .movie .header p {
  margin: 0;
  padding: 5px 0 0 0;
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
  color: #424242;
}


/* =========== operating-time =========== */

.operating-time {
  margin: 0 16px 16px 16px;
  background: #FFF;
  border: solid 1px #d9d0bf;
  border-radius: 8px;
  padding: 8px 16px 8px 16px;
}

.operating-time p {
  margin: 0;
  padding: 4px 0px 0px 0px;
  color: #212121;
}

.operating-time p:first-child {
  padding-top: 0px;
}

/* =========== tab-content =========== */

.tab-content {
  overflow-y: scroll;
}



/* ========== result-information =========== */

.result-information .information-title {
  font-size: 13px;
}

.result-information table {
    margin-top:8px;
    width:100%;
}

.result-information table tr{
    border-left:solid 1px #ccc;
    border-top:solid 1px #ccc;
}

.result-information table th{
    border-bottom:solid 1px #ccc;
    border-right:solid 1px #ccc;
    text-align:center;
    width:auto;
    font-size:13px;
    background:rgba(238,238,238,1.0);
}

.result-information table td{
    padding:3px 0;
    font-size:15px;
    border-bottom:solid 1px #ccc;
    border-right:solid 1px #ccc;
    text-align:center;
}




/* =========== sort =========== */

body.live .sort {
  position: fixed;
  top: 80px;
  width: 457px;
  margin: 0;
  padding: 0 0 8px 8px;
  background: #EEEEEE;
  border: solid 1px #BDBDBD;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

body.live .sort button {
  margin: 8px 8px 0 0;
  padding: 8px 9px 8px 9px;
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
}

body.live .sort button.active {
  padding: 8px 9px 8px 9px;
}

body.live .sort button span {
  display: inline-block;
  margin-top: -2px;
  font-size: 12px;
  font-weight: normal;
}

/* =========== timeline =========== */

body.live .timeline {
  position: fixed;
  top: 164px;
  width: 457px;
  margin: 0;
  padding: 0 0 24px 0;
  background: #FAFAFA;
  border-right: solid 1px #BDBDBD;
  border-bottom: solid 1px #BDBDBD;
  border-left: solid 1px #BDBDBD;
  overflow-y: scroll;
}

/* =========== regiter =========== */

body.live .register {
  position: fixed;
  width: 457px;
  margin: 0;
  padding: 16px;
  background: #EEEEEE;
  border-right: solid 1px #BDBDBD;
  border-bottom: solid 1px #BDBDBD;
  border-left: solid 1px #BDBDBD;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

body.live .register .form-control {
  width: 343px;
  float: left;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body.live .register .btn-primary {
  float:right;
  width: 80px;
  height: 54px;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

body.live .register .btn-primary span {
  display: inline-block;
  margin-right: 8px;
}


/* =========== loading =========== */

.loading {
  margin: 0 0 0 -70px;
  padding: 0;
  position:absolute;
  display: none;
  z-index:6010;
  top: 360px;
  left: 50%;
  text-align:center;
 }
 
.loader {
  margin: 0;
  padding: 16px 0 0 0;
  position:absolute;
  z-index:3002;
  width:160px;
  height:140px;
  text-align:center;
  background-color:#fff;
  border-radius:8px;
 }
 
.text {
  padding-top: 16px;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
 }

.circles{
	position:relative;
	width:74px;
	height:74px;
	margin:auto;
	transform:scale(0.6);
		-o-transform:scale(0.6);
		-ms-transform:scale(0.6);
		-webkit-transform:scale(0.6);
		-moz-transform:scale(0.6);
}

.f-circle{
	position:absolute;
	background-color:rgb(255,255,255);
	height:13px;
	width:13px;
	border-radius:7px;
		-o-border-radius:7px;
		-ms-border-radius:7px;
		-webkit-border-radius:7px;
		-moz-border-radius:7px;
	animation-name:f_fade;
		-o-animation-name:f_fade;
		-ms-animation-name:f_fade;
		-webkit-animation-name:f_fade;
		-moz-animation-name:f_fade;
	animation-duration:1.2s;
		-o-animation-duration:1.2s;
		-ms-animation-duration:1.2s;
		-webkit-animation-duration:1.2s;
		-moz-animation-duration:1.2s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#frotate-01{
	left:0;
	top:30px;
	animation-delay:0.45s;
		-o-animation-delay:0.45s;
		-ms-animation-delay:0.45s;
		-webkit-animation-delay:0.45s;
		-moz-animation-delay:0.45s;
}

#frotate-02{
	left:9px;
	top:9px;
	animation-delay:0.6s;
		-o-animation-delay:0.6s;
		-ms-animation-delay:0.6s;
		-webkit-animation-delay:0.6s;
		-moz-animation-delay:0.6s;
}

#frotate-03{
	left:30px;
	top:0;
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
}

#frotate-04{
	right:9px;
	top:9px;
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
}

#frotate-05{
	right:0;
	top:30px;
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}

#frotate-06{
	right:9px;
	bottom:9px;
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
}

#frotate-07{
	left:30px;
	bottom:0;
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}

#frotate-08{
	left:9px;
	bottom:9px;
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
}



@keyframes f_fade{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes f_fade{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes f_fade{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes f_fade{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes f_fade{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}
/* CSS Document */

.mask {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(24, 24, 24, 0.85);
  z-index: 1020;
}

#dialog-mask.mask {
  z-index: 3000;
}

#app-mask.mask {
  z-index: 5000;
}

/* only monitor mask */

.monitor .mask.show {
  background: rgba(24, 24, 24, 0.5);
  z-index: auto;
}
/* ========================================================================
 * hokacloud: monitor.css v1.0.0 2019/04/30
 * モニター
 * ======================================================================== */

.monitor {
  position: relative;
  margin: 0;
  padding: 0;
}

body.pc.farms .monitor.img-4_3 {
  width: 292px;
  height: 219px;
}

body.pc.farms .monitor.img-4_6 {
  width: 292px;
  height: 438px;
}
    
body.pc.farms .monitor.img-16_9 {
  width: 292px;
  height: 165px;
}

body.pc.farms .monitor.img-16_18 {
  width: 292px;
  height: 340px;
}

body.pc.farms .monitor.img-16_21 {
  width: 293px;
  height: 393px;
}

body.pc.multi .monitor.img-4_3 {
  width: 292px;
  height: 219px;
}

body.pc.multi .monitor.img-4_6 {
  width: 292px;
  height: 438px;
}
    
body.pc.multi .monitor.img-16_9 {
  width: 292px;
  height: 165px;
}

body.pc.multi .monitor.img-16_18 {
  width: 292px;
  height: 340px;
}

body.pc.multi .monitor.img-16_21 {
  width: 293px;
  height: 393px;
}

body.pc.live .movie .monitor.img-4_3 {
  width: 372px;
  height: 279px;
}

body.pc.live .movie .monitor.img-4_6 {
  width: 372px;
  height: 558px;
}
    
body.pc.live .movie .monitor.img-16_9 {
  width: 372px;
  height: 213px;
}

body.pc.live .movie .monitor.img-16_18 {
  width: 372px;
  height: 434px;
}

body.pc.live .movie .monitor.img-16_21 {
  width: 372px;
  height: 499px;
}

body.pc.record .movie .monitor.img-4_3 {
  width: 372px;
  height: 279px;
}

body.pc.record .movie .monitor.img-4_6 {
  width: 372px;
  height: 558px;
}
    
body.pc.record .movie .monitor.img-16_9 {
  width: 372px;
  height: 213px;
}

body.pc.record .movie .monitor.img-16_18 {
  width: 372px;
  height: 434px;
}

body.pc.record .movie .monitor.img-16_21 {
  width: 372px;
  height: 499px;
}


@media (min-width: 1200px) {
  body.pc.farms .monitor.img-4_3 {
    width: 358px;
    height: 269px;
  }

  body.pc.farms .monitor.img-4_6 {
    width: 358px;
    height: 537px;
  }

  body.pc.farms .monitor.img-16_9 {
    width: 358px;
    height: 203px;
  }

  body.pc.farms .monitor.img-16_18 {
    width: 358px;
    height: 418px;
  }

  body.pc.farms .monitor.img-16_21 {
    width: 358px;
    height: 480px;
  }
  
  body.pc.multi .monitor.img-4_3 {
    width: 358px;
    height: 269px;
  }

  body.pc.multi .monitor.img-4_6 {
    width: 358px;
    height: 537px;
  }

  body.pc.multi .monitor.img-16_9 {
    width: 358px;
    height: 203px;
  }

  body.pc.multi .monitor.img-16_18 {
    width: 358px;
    height: 418px;
  }

  body.pc.multi .monitor.img-16_21 {
    width: 358px;
    height: 480px;
  }
  
  body.pc.live .movie .monitor.img-4_3 {
    width: 456px;
    height: 342px;
  }

  body.pc.live .movie .monitor.img-4_6 {
    width: 456px;
    height: 684px;
  }

  body.pc.live .movie .monitor.img-16_9 {
    width: 456px;
    height: 259px;
  }

  body.pc.live .movie .monitor.img-16_18 {
    width: 456px;
    height: 532px;
  }

  body.pc.live .movie .monitor.img-16_21 {
    width: 456px;
    height: 611px;
  }
  
  body.pc.record .movie .monitor.img-4_3 {
    width: 456px;
    height: 342px;
  }

  body.pc.record .movie .monitor.img-4_6 {
    width: 456px;
    height: 684px;
  }

  body.pc.record .movie .monitor.img-16_9 {
    width: 456px;
    height: 259px;
  }

  body.pc.record .movie .monitor.img-16_18 {
    width: 456px;
    height: 532px;
  }

  body.pc.record .movie .monitor.img-16_21 {
    width: 456px;
    height: 611px;
  }
}

.monitor img {
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
}



.monitor .auto {
  position: absolute;
  display: none;
  top: 8px;
  left: 50%;
  width: 100px;
  height: 32px;
  margin: 0 0 0 -50px;
  padding: 1px 0 0 0;
  color: #fff;
  font-size: 15px;
  text-align: center;
  line-height: 32px;
  font-weight: bold;
  background-color: rgba(198, 40, 40, 1.0);
  border-radius: 16px;
}

.monitor .auto.show {
  display: block;
}

.monitor .sensitivity {
  position: absolute;
  display: none;
  top: 3px;
  left: 6px;
  width: 32px;
  height: 25.6px;
}

.monitor .battery {
  position: absolute;
  display: none;
  top: 3px;
  left: 40px;
  width: 32px;
  height: 25.6px;
}

.monitor .stop {
  position: absolute;
  display: none;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 15px;
  text-align: center;
  line-height: 32px;
  font-weight: bold;
  background-color: rgba(198, 40, 40, 0.8);
}

.monitor .btns {
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-top: none;
}

.monitor .btns:hover {
  cursor: pointer;
}

.monitor .btns a {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 64px;
  margin: -32px 0 0 -80px;
  padding: 0;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 64px;
}

.monitor .btns:hover a {
  display: block;
}

.movie {
  background: #fafafa;
  border: solid 1px #bdbdbd;
  border-radius: 8px;
}

.record .movie {
  background: #eee;
}

.no-image {
  display: none;
  background: #ddd;
  height: 100%;
  line-height: 100%;
  position: relative;
  margin: 0;
}

.no-image.show {
  display: block;
}

.no-image span {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 372px;
  height: 40px;
  line-height: 40px;
  font-size: 28px;
  font-weight: bold;
  color: #888;
  text-align: center;
}

@media (min-width: 1200px) {
  .no-image span {
    width: 456px;
  }
}

/* ========================================================================
 * hokacloud: multi-action.css v1.0.0 2019/05/30
 * マルチ捕獲画面
 * ======================================================================== */

.trap.live .live-label {
  position: absolute;
  display: block;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 15px;
  text-align: center;
  line-height: 32px;
  font-weight: bold;
  background-color: rgba(198, 40, 40, 0.8);
}

body.farms .pagination {
    display: inline-block;
    padding-left: 0;
    margin: 0 0 24px 0;
    border-radius: 4px;
}

/* ========================================================================
 * hokacloud: multi.css v1.0.0 2019/04/30
 * マルチ画面
 * ======================================================================== */

/* =========== reload =========== */

.reload {
  margin: 0;
  padding: 0;
  position: fixed;
}

.reload button {
  width: 120px;
  padding: 8px 0;
  float: left;
  margin-right: 16px;
}

.reload p {
  line-height: 1.5;
  font-size: 12px;
  font-weight: bold;
  color: #444;
  text-align: justify;
}

/* =========== sort =========== */

body.multi .sort {
  position: fixed;
  top: 124px;
  width: 360px;
  margin: 8px 0 0 0;
  padding: 0 0 8px 8px;
  background: #EEEEEE;
  border: solid 1px #BDBDBD;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

body.multi .sort button {
  margin: 8px 8px 0 0;
  padding: 8px 9px 8px 9px;
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
}

body.multi .sort button.active {
  padding: 8px 9px 8px 9px;
}

body.multi .sort button span {
  display: inline-block;
  margin-top: -2px;
  font-size: 12px;
  font-weight: normal;
}

/* =========== timeline =========== */

body.multi .timeline {
  position: fixed;
  top: 253px;
  width: 360px;
  margin: 0;
  padding: 0 0 24px 0;
  background: #FAFAFA;
  border-right: solid 1px #BDBDBD;
  border-bottom: solid 1px #BDBDBD;
  border-left: solid 1px #BDBDBD;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow-y: scroll;
}


body.multi .pagination {
    display: inline-block;
    padding-left: 0;
    margin: 0 0 24px 0;
    border-radius: 4px;
}


/* ========================================================================
 * hokacloud: record.css v1.0.0 2019/05/01
 * ライブ画面系
 * ======================================================================== */

/* =========== movie =========== */

body.record .movie {
}

body.record .movie .header {
  margin: 0;
  padding: 6px 8px 5px 8px;
  background: #eee;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

body.record .movie .header span {
  margin: 0;
  display: inline-block;
  padding-top: 3px;
}

body.record .movie .header span.label {
  margin: 0;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 13px;
}

body.record .movie .header .col-sm-9 {
  position: relative;
}

body.record .movie .header p {
  margin: 0;
  padding: 4px 95px 0 0;
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
  color: #424242;
}

body.record .movie .header .btn {
  position: absolute;
  top: 0;
  left: auto;
  right: 16px;
  display: inline-block;
  margin: 0 0;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 13px;
  width: 80px;
}

/* ========== cage-action =========== */

.cage-action {
  padding-top: 32px;
}

.cage-action .row {
  margin-right: 0;
  margin-left: 0;
}

.cage-action .row div {
  padding-right: 8px;
  padding-left: 8px;
}

.cage-action .row div:first-child {
  padding-left: 0;
}

.cage-action .row div:last-child {
  padding-right: 0;
}

.cage-action .btn {
  padding: 12px 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: bold;
  width: 100%;
  min-height: 64px;
  text-align: center;
}

/* =========== tab-content =========== */

.tab-content {
  overflow-y: scroll;
}

/* =========== trap-status =========== */

.trap-status {
  
}

.trap-status .position {
  position: relative;
}

.trap-status .position img {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 100;
}

.trap-status .position .position-a,
.trap-status .position .position-b,
.trap-status .position .position-c,
.trap-status .position .position-d {
  position: absolute;
  z-index: 101;
}

.trap-status .position .position-a {
  top: 8px;
  left: 32px;
}

.trap-status .position .position-b {
  top: 46px;
  left: 32px;
}

.trap-status .position .position-c {
  top: 69px;
  left: 32px;
}

.trap-status .position .position-d {
  top: 110px;
  left: 32px;
}

.trap-status .trap-status-date {
  font-size: 13px;
}

.trap-status p {
  padding: 16px 0 0 0;
  font-size: 13px;
  line-height: 13px;
}

.trap-status input {
  width: 100%;
  padding: 8px;
}

.trap-status .actions {
  margin: 8px 0 0 0;
}

.trap-status .actions .btn {
  padding: 12px 0;
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.trap-status .actions .row {
  margin-right: 0;
  margin-left: 0;
}

.trap-status .actions .row div {
  padding-right: 8px;
  padding-left: 8px;
}

.trap-status .actions .row div:first-child {
  padding-left: 0;
}

.trap-status .actions .row div:last-child {
  padding-right: 0;
}




/* =========== cage-information  =========== */

.cage-information .information-date {
  font-size: 13px;
}

.cage-information .information-date {
  font-size: 13px;
}

.cage-information textarea {
  margin: 8px 0 0 0;
  padding: 8px;
  width: 100%;
  font-size: 14px;
  border-color: #BDBDBD;
}

.cage-information .actions {
  margin: 8px 0 0 0;
}

.cage-information .actions .btn {
  padding: 12px 0;
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.cage-information .actions .row {
  margin-right: 0;
  margin-left: 0;
}

.cage-information .actions .row div {
  padding-right: 8px;
  padding-left: 8px;
}
.cage-information .actions .row div:first-child {
  padding-left: 0;
}
.cage-information .actions .row div:last-child {
  padding-right: 0;
}

/* ========== result-information =========== */

.result-information .information-title {
  font-size: 13px;
}

.result-information table {
    margin-top:8px;
    width:100%;
}

.result-information table tr{
    border-left:solid 1px #ccc;
    border-top:solid 1px #ccc;
}

.result-information table th{
    border-bottom:solid 1px #ccc;
    border-right:solid 1px #ccc;
    text-align:center;
    width:auto;
    font-size:13px;
    background:rgba(238,238,238,1.0);
}

.result-information table td{
    padding:3px 0;
    font-size:15px;
    border-bottom:solid 1px #ccc;
    border-right:solid 1px #ccc;
    text-align:center;
}


/* =========== cage-timer =========== */
/*
.cage-timer {}

.cage-timer .form-horizontal .form-group {
  margin: 0 0 8px 0;
}

.cage-timer .form-horizontal .form-group:last-child {
  margin-bottom: 0;
}

.cage-timer .form-group label {
  float: left;
  width: 90px;
  font-size: 13px;
  line-height: 34px;
  margin: 0 16px 0 0;
  text-align: center;
}

.cage-timer .form-group input {
  float: left;
  width: 260px;
  height: 34px;
  font-size: 13px;
  padding: 6px 8px;
  margin-right: 16px;
}

.cage-timer .form-group select {
  float: left;
  width: 64px;
  height: 34px;
  text-align: left;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 8px;
}

.cage-timer .form-group select.shot-mode {
  width: 100px;
}

.cage-timer .form-group span {
  float: left;
  width: 20px;
  height: 34px;
  font-size: 14px;
  font-weight: bold;
  line-height: 34px;
  text-align: center;
}

.cage-timer .form-group img {
  width: 20px;
  height: auto;
  float: left;
  margin: 7px 0;
}

.cage-timer .actions {
  margin: 16px 0 0 0;
}

.cage-timer .actions .row {
  margin-right: 0;
  margin-left: 0;
}

.cage-timer .actions .row div {
  padding-right: 8px;
  padding-left: 8px;
}

.cage-timer .actions .row div:first-child {
  padding-left: 0;
}

.cage-timer .actions .row div:last-child {
  padding-right: 0;
}

.cage-timer .actions .btn {
  padding: 12px 0;
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
*/

/* =========== sort =========== */

body.record .sort {
  position: fixed;
  top: 80px;
  width: 457px;
  margin: 0;
  padding: 0 0 8px 8px;
  background: #EEEEEE;
  border: solid 1px #BDBDBD;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

body.record .sort button {
  margin: 8px 8px 0 0;
  padding: 8px 9px 8px 9px;
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
}

body.record .sort button.active {
  padding: 8px 9px 8px 9px;
}

body.record .sort button span {
  display: inline-block;
  margin-top: -2px;
  font-size: 12px;
  font-weight: normal;
}

/* =========== timeline =========== */

body.record .timeline {
  position: fixed;
  top: 164px;
  width: 457px;
  margin: 0;
  padding: 0 0 24px 0;
  background: #FAFAFA;
  border-right: solid 1px #BDBDBD;
  border-bottom: solid 1px #BDBDBD;
  border-left: solid 1px #BDBDBD;
  overflow-y: scroll;
}

/* =========== regiter =========== */

body.record .register {
  position: fixed;
  width: 457px;
  margin: 0;
  padding: 16px;
  background: #EEEEEE;
  border-right: solid 1px #BDBDBD;
  border-bottom: solid 1px #BDBDBD;
  border-left: solid 1px #BDBDBD;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

body.record .register .form-control {
  width: 343px;
  float: left;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body.record .register .btn-primary {
  float:right;
  width: 80px;
  height: 54px;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

body.record .register .btn-primary span {
  display: inline-block;
  margin-right: 8px;
}

/* =========== tab-pane =========== */
/*
body.record .tab-pane .forms label {
  font-size: 13px;
  color: #424242;
}

body.record .tab-pane .forms .row {
  margin-bottom: 8px;
}

body.record .tab-pane .forms .col-sm-4,
body.record .tab-pane .forms .col-sm-2 {
  padding-right: 8px;
  padding-left: 8px;
}

body.record .tab-pane .btns {
  border: none;
  padding: 8px 0 0 0;
  background: transparent;
}

body.record .tab-pane .btns .btn {
    padding: 12px 0;
    font-size: 13px;
    line-height: 13px;
    font-weight: 700;
    width: 100%;
    text-align: center;
}

body.record .tab-pane .forms.download {
  padding:8px 0 0 0;
}

body.record .tab-pane .forms.download .row:first-child {
  padding-bottom: 8px;
}

body.record .tab-pane .forms.download .download-input-label{
  padding: 10px 0 0 0;
}

body.record .tab-pane .forms.download .hokacloud-download-datetime {
    padding: 0 12px;
    border:1px solid #ddd;
    border-radius:4px;
  line-height: 34px;
    height:34px;
}

body.record .tab-pane .forms.download .radio-inline{
  margin-right:10px;
}

body.record .tab-pane .forms.download .radio-inline input {
  margin-top: 0px;
}

body.record .tab-pane .forms.download　select {
width: 120px;
    height: 34px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 8px;
}

*/




/* ========================================================================
 * hokacloud: slider.css v1.0.0 2019/05/01
 * スライダー
 * ======================================================================== */
.recorded-section {
  top: 1px;
  height: 9px;
  position: absolute;
  background-color: #ffd0d1;
}

.tooltip {
  top: -30px;
  opacity: 1.0;
  margin-left: -31px;
}
 

/* ----- Hokacloud Slider ----- */

.hokacloud-hokaku-slider {
  width: 100%;
  padding: 8px 0 8px 0;
  background: #fff;
}

/* Hokakucloud-slider */

.hokacloud-slider{
  padding:0;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 20px;
  width: 360px;
  margin: 0 6px;
}

@media (min-width: 1200px) {
  .hokacloud-slider{
    width: 432px;
    margin: 0 12px;
  }
}

.hokacloud-slider-track{
  position: absolute;
  /* cursor: pointer; */
  background-color: #f0f0f0;
  background-image: -moz-linear-gradient(top, #f0f0f0, #f5f5f5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f0f0), to(#f5f5f5));
  background-image: -webkit-linear-gradient(top, #f0f0f0, #f5f5f5);
  background-image: -o-linear-gradient(top, #f0f0f0, #f5f5f5);
  background-image: linear-gradient(to bottom, #f0f0f0, #f5f5f5);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0f0f0', endColorstr='#fff5f5f5', GradientType=0);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  height: 10px;
  width: 360px;
  margin-top: -5px;
  top: 50%;
  left: 0;
}

@media (min-width: 1200px) {
  .hokacloud-slider-track{
    width: 432px;
  }
}

.hokacloud-slider-track .tooltip .tooltip-inner,
.tooltip.hokacloud-input-tooltip .tooltip-inner{
  background:#a03f12;
}


.hokacloud-slider-track .tooltip.top .tooltip-arrow{
  border-top-color:#a03f12;
  color:#a03f12;
}

.tooltip.hokacloud-input-tooltip .tooltip-arrow{
  border-bottom-color:#a03f12;
  color:#a03f12;
}

#hokacloud-input-tooltip-out {
  margin:40px 0 0 40px;
  width:115px;
 }
 
#hokacloud-input-tooltip-in {
margin:40px 0 0 10px;
width:115px;
 }
 
#hokacloud-share-body {
    margin-top:-5px;
    margin-bottom:10px;
}

.hokacloud-slider-handle{
  position: absolute;
  width: 20px;
  height: 40px;
  background-image:url(../img/arrow.png);
  background-repeat:no-repeat;
  background-position:top left;
  background-size:20px 40px;
  z-index:800;
  margin-left: -10px;
}

@media (min-width: 1200px) {
  .hokacloud-slider-handle{
     /* margin-left: -9px; */
   }
}

.hokacloud-slider-handle:hover {
  cursor:pointer;
  background-image:url(../img/arrow_hover.png);
}

.hokacloud-slider-selection {
  position: absolute;
  background-color: #d1c3b2;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 100%;
  opacity:0.8;
  top: 0;
  bottom: 0;
  z-index:180;
}


/* hokacloud-slider-line */

.hokacloud-slider-lines { }

.hokacloud-slider-lines .line {
  position:absolute;
  width:2px;
  height:28px;
  top:-10px;
  margin-left:0px;
}

.hokacloud-slider-lines .line.mail {
  background-color:#ea4335;
  height:14px;
  top:-8px;
  z-index:303;
}

.hokacloud-slider-lines .line.research {
  background-color:#4285f4;
  top: 5px;
  height: 14px;
   z-index: 303;
}

.hokacloud-slider-lines .line.capture {
  background-color:#fbbc05;
  top: -8px;
  height:14px;
   z-index:302;
}

.hokacloud-slider-lines .line.result {
  background-color:#ea7a35;
  top: 5px;
  height: 14px;
  z-index:302;
}

.hokacloud-slider-lines .line.share {
  background-color:#34a853;
  top:-18px;
  height:18px;
  z-index:301;
}

.hokacloud-slider-lines .line.autocapture {
  background-color:#0097a7;
  height:14px;
  top:-8px;
  z-index:304;
}

/* hokacloud-hokaku-slider-number */

.hokacloud-hokaku-slider .hokacloud-hokaku-slider-number {
  width: 456px;
  margin: 0 auto;
}

.hokacloud-hokaku-slider .hokacloud-hokaku-slider-number img {
  width: 376px;
  height: auto;
  opacity: 0.7;
  margin: 0 0 0 -3px;
}


@media (min-width: 1200px) {
  .hokacloud-hokaku-slider .hokacloud-hokaku-slider-number img {
    width: 100%;
    height: auto;
    opacity: 0.7;
    margin: 0;
  }
}


/* ========================================================================
 * hokacloud: tab.css v1.0.0 2019/05/01
 * タブ系
 * ======================================================================== */


.tab-container {
  margin: 30px 0 0 0;
}

.nav>li>a {
  
}

.nav-tabs>li>a {
  padding: 12px 6px 8px 6px;
  font-size: 12px;
  font-weight: bold;
  color: #616161;
}

@media (min-width: 1200px) {
  .nav-tabs>li>a {
    padding: 12px 11px 8px 11px;
    font-size: 13px;
  }
}

.nav>li>a:focus,
.nav>li>a:hover {
  border: 1px solid #BDBDBD;
  background: #eee;
  color: #3E2723;
}

.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:focus, 
.nav-tabs>li.active>a:hover {
  padding: 9px 6px 8px 6px;
  border: 1px solid #BDBDBD;
  border-top-color: #a1887f;
  border-top-width: 4px;
  border-bottom-color: #FFF;
  border-bottom-width: 1px;
  color: #3E2723;
}

@media (min-width: 1200px) {
  .nav-tabs>li.active>a, 
  .nav-tabs>li.active>a:focus, 
  .nav-tabs>li.active>a:hover {
    padding: 9px 11px 8px 11px;
  }
}

.tab-content {
  margin: -1px 0 0 0;
  padding: 0 0 16px 0;
  background: #FFF;
  border: 1px solid #BDBDBD;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
/* CSS Document */


/* =========== trap-status =========== */

.trap-status {
  padding: 16px 16px 0 16px;
}

.trap-status .position {
  position: relative;
}

.trap-status .position img {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 100;
}

.trap-status .position .position-a,
.trap-status .position .position-b,
.trap-status .position .position-c,
.trap-status .position .position-d {
  position: absolute;
  z-index: 101;
}

.trap-status .position .position-a {
  top: 4px;
  left: 18px;
}

.trap-status .position .position-b {
  top: 32px;
  left: 18px;
}

.trap-status .position .position-c {
  top: 51px;
  left: 18px;
}

.trap-status .position .position-d {
  top: 84px;
  left: 18px;
}

@media (min-width: 1200px) {
  .trap-status .position .position-a {
    top: 8px;
    left: 32px;
  }

  .trap-status .position .position-b {
    top: 46px;
    left: 32px;
  }

  .trap-status .position .position-c {
    top: 69px;
    left: 32px;
  }

  .trap-status .position .position-d {
    top: 110px;
    left: 32px;
  }
}

.trap-status .updated {
  padding: 0;
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
}

.trap-status p {
  padding: 16px 0 0 0;
  font-size: 13px;
  line-height: 13px;
}

.trap-status input {
  width: 100%;
  padding: 4px;
  border: solid 1px #bdbdbd;
  outline: none;
}

/* ========================================================================
 * hokacloud: trap.css v1.0.0 2019/04/30
 * ======================================================================== */


.trap {
  margin: 0 0 32px 0;
  padding: 0;
  background: #fafafa;
  border: solid 1px #BDBDBD;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.trap h3 {
  margin: 0;
  padding: 8px 16px 8px 16px;
  background: #fff;
  color: #4E342E;
  font-size: 18px;
  line-height: 24px;
  font-weight: bold;
}

.trap ul {
  margin: 0;
  padding: 8px 16px 8px 16px;
  background: #FFF;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top: solid 1px #eee;
  list-style: none;
}

.trap ul li {
  margin: 0;
  padding: 0;
  color: #424242;
  line-height: 1.8;
  font-size: 12px;
  font-weight: bold;
}