.disabled a,
a.disabled {
    pointer-events: none;
}

a:hover {
    color: #333;
    transition: .3s;
}

a {
    color: #5498D9;
    transition: .3s;
    font-weight: 200;
}

.side-nav li a:not(.button) {
    color: #222;
}

.side-nav li a:not(.button):hover {
    color: #555;
}

/* ------------------------------------------------------------
 * header
 * ------------------------------------------------------------*/
header {
    background-color: #D33C44;
    color: #ffffff;
    font-size: 30px;
    height: 84px;
    line-height: 64px;
    padding: 16px 0px;
    box-shadow: 0px 1px rgba(0, 0, 0, 0.24);
}

header .header-title {
    padding-left:80px
}

legend {
    color:#5498D9;
    font-size: 20px;
}

.row {
    max-width: 80rem;
}

.actions.columns {
    margin-top:1rem;
    border-left: 5px solid #15848F;
    padding-left: 15px;
    padding: 32px 20px;
}

.actions.columns h3 {
    color:#15848F;
}

.related table {
    border: 0;
    width: 100%;
    table-layout: fixed;
}

.index table thead {
    height: 3.5rem;
}

.header-help {
    float: right;
    margin-right:2rem;
    margin-top: -80px;
    font-size:16px;
}

.header-help span {
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
    padding: 0.25rem 0.5rem 0.375rem;
    font-size: 0.8rem;
    background-color: #0097a7;
    color: #FFF;
    border-radius: 1000px;
}

.header-help a {
    color: #fff;
}

/* ------------------------------------------------------------
 * text
 * ------------------------------------------------------------*/
.text-bold {
    font-weight: bold;
}
.text-size-small {
    font-size: 0.8rem;
}
.text-primary {
    color: #007bff !important;
}

.text-secondary {
    color: #6c757d !important;
}

.text-success {
    color: #28a745 !important;
}

.text-danger {
    color: #dc3545 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.text-info {
    color: #17a2b8 !important;
}

/* ------------------------------------------------------------
 * pagination
 * ------------------------------------------------------------*/
ul.pagination li a {
    color: rgba(0, 0 ,0 , 0.54);
}

ul.pagination li.active a {
    background-color: #DCE47E;
    color: #FFF;
    font-weight: bold;
    cursor: default;
}
ul.pagination .disabled:hover a {
    background: none;
}

.paginator {
    text-align: center;
}

.paginator ul.pagination li {
    float: none;
    display: inline-block;
}

.paginator p {
    text-align: right;
    color: rgba(0, 0 ,0 , 0.54);
}

.asc:after {
    content: " \2193";
    color:#555;
}
.desc:after {
    content: " \2191";
    color:#555;
}

/* ------------------------------------------------------------
 * form
 * ------------------------------------------------------------*/
.form .error-message {
    display: block;
    padding: 0.375rem 0.5625rem 0.5625rem;
    margin-top: -1px;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: normal;
    font-style: italic;
    color: rgba(0, 0, 0, 0.54);
}

.required > label {
    font-weight: 500 !important;
}
.required > label:after {
    content: ' *';
    color: rgb(255, 0, 0);
}
.input label {
    font-size: 16px;
    font-weight: 200;
    white-space: nowrap;
    display: inline-block;
    font-weight: 500 
}
.input > label {
    margin:0 7px 7px 0;
}
.input {
/*    display: flex;*/
    align-items: center;
    margin-bottom: 20px;
}
.input.select {
/*    align-items: flex-start;*/
}
.input input[type="text"], .input input[type="email"], .input input[type="password"] {
    -webkit-appearance: none;
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid #d2d2d2;
    font-weight: 200;
    box-shadow: none;
    margin-bottom: 30px;

}
.input input[type="text"]:focus, .input input[type="email"]:focus, .input input[type="password"]:focus {
    outline: 0;
    border-bottom: 2px solid #5498D9;
}
select[multiple] {
    min-height:150px;
    background: none;
}
input[type=checkbox],
input[type=radio] {
    margin-right: 0.5em;
}

.date select,
.time select,
.datetime select {
    display: inline;
    width: auto;
    margin-right: 10px;
}

.error label,
.error label.error {
    color: #C3232D;
}

.view h2 {
    color: #6F6F6F;
}

.view .columns.strings {
    border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.24);
    margin-right:0.7rem;
}

.view .numbers {
    background-color: #B7E3EC;
    color: #FFF;
    border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.24);
    margin-right: 0.7rem;
}

.view .columns.dates {
    border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.24);
    margin-right:0.7rem;
    background-color:#DCE47E;
    color: #fff;
}

.view .columns.booleans {
    border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.24);
    margin-right:0.7rem;
    background-color: #8D6E65;
    color: #fff;
}

.view .strings p {
    border-bottom: 1px solid #eee;
}
.view .numbers .subheader, .view .dates .subheader {
    color:#747474;
}
.view .booleans .subheader {
    color: #E9E9E9
}

.view .texts .columns {
    margin-top:1.2rem;
    border-bottom: 1px solid #eee;
}

/** Notices and Errors **/
.cake-error,
.cake-debug,
.notice,
p.error,
p.notice {
    display: block;
    clear: both;
    background-repeat: repeat-x;
    margin-bottom: 18px;
    padding: 7px 14px;
    border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.24);
}

.cake-debug,
.notice,
p.notice {
    color: #000000;
    background: #ffcc00;
}

.cake-error,
p.error {
    color: #fff;
    background: #C3232D;
}

pre {
    background: none repeat scroll 0% 0% #FFF;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.24);
    margin: 15px 0px;
    color: rgba(0, 0 ,0 , 0.74);
    padding:5px;
}

.cake-error .cake-stack-trace {
    margin-top:10px;
}

.cake-stack-trace code {
    background: inherit;
    border:0;
}

.cake-code-dump .code-highlight {
    display: block;
    background-color: #FFC600;
}

.cake-error a,
.cake-error a:hover {
    color:#fff;
    text-decoration: underline;
}

.checks {
    padding:30px;
    color: #626262;
    background-color: #B7E3EC;
    border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.24);
    margin-bottom: 2em;
}

.checks h4 {
    margin-bottom: 1.5rem;
}

.checks hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.checks .success,
.checks .problem {
    margin-left: 10px;
}
.checks .success:before,
.checks .problem:before {
    line-height: 0px;
    font-size: 28px;
    height: 12px;
    width: 12px;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    left: -11px;
}

.checks .success:before {
    content: "✓";
    color: green;
    margin-right: 9px;
}

.checks .problem:before {
    content: "✘";
    color: red;
    margin-right: 9px;
}

.top-bar.expanded {
     background: url("../img/header_bg.png") 73% 13%;
}
.top-bar.expanded .title-area {
    background:none;
}
.top-bar-section ul li {
    margin:0 5px 0;
    background:rgba(0,0,0,0.1);
    border-radius:5px;
}
.top-bar-section ul li,.top-bar-section li:not(.has-form) a:not(.button) {

}
.top-bar-section li a { background: none !important; }
.top-bar-section li a.icon:hover img {
    background: none !important;
    animation: fullAnime 300ms;
}
@keyframes fullAnime {
  0% {
    transform: scale(1.0);
    background: none !important;
  }
  50% {
    transform: scale(0.8);
    background: none !important;
  }
  100% {
    transform: scale(1.0, 1.0) translate(0%, 0%);
    background: none !important;
  }
}

.message {
    position: relative;
}

.message span.remark {
    display: none;
}
.message a {
    background: none !important;
}
.message a:hover span.remark {
    background: #555;
    color: #fff;
    display: block;
    line-height: 1.2em;
    position: absolute;
    top: -11px;
    left:0;
    right: 0;
    margin:auto;
    width: auto;
    font-size: 11px;
    padding:2px 0;
    border-radius: 2px;
    white-space: nowrap;
    text-align: center;
    z-index: 1;
}
/*.message a:hover span.remark.cal {
    left:-53px;
}*/

@media(max-width: 1024px) {
    .message a:hover span.remark {
        display: none;
    }
    input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
    }
}

@media(max-width: 640px) {
/*    .top-bar .time { display: none; }*/
    .top-bar-section { display: none; }
}

.side-nav li.heading {
    color: #1798A5;
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.4375rem 0.875rem;
}

#actions-sidebar {
    background: #fff;
}

/* ------------------------------------------------------------
 * ログイン
 * ------------------------------------------------------------*/
.login {
    margin: 30px auto 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 1px 1px 2px #ccc;
}
.login div.message{
    top:0px;
}

/* ------------------------------------------------------------
 * table
 * ------------------------------------------------------------*/
table {
    background: #fff;
    margin-bottom: 1.25rem;
    table-layout: fixed;
    width: 100%;
    border:none;
}
 .index table {
    margin-top: 0rem;
    width: 100%;
    table-layout: fixed;
    box-sizing: initial;
}

table thead {
    background: none;
}
table tr {
    border-bottom: 1px solid #e4e4e4;
}
table tbody tr:hover {
    background:rgba(172,172,172,0.25);
}
table tr.lost {
    background: #eee !important;
}
table tr.lost td {
    color:#9e9e9e !important;
}
table thead tr {
    border-bottom: 1px solid #5498D9;
}

table tr th {
    padding: 0.5625rem 0.625rem;
    font-size: 0.875rem;
    color: #5498D9;
    text-align: left;
    border-bottom: 2px solid#aaa;
}


table td {
    vertical-align: middle;
    word-break: break-all;
    padding-top:4px !important;
    padding-bottom:8px !important;
}

table td .button {
    margin:0 2px 2px 0;
    border-radius: 3px;
}

/* 24時間表示 */
.view24tableWrapper {
    overflow: auto;
}
table.view24table {
    position: relative;
}
table.view24table thead th {
    border-bottom:2px solid #e4e4e4;
    padding:2px 0px;
    font-weight: 100;
    white-space: nowrap;
    display:table-cell;
}
table.view24table thead th span {
	font-weight: 100;
	color: #aaa;
	font-size: 12px;
}
table.view24table thead th:nth-child(n + 6) {
    text-indent: -0.2em;
}
table.view24table thead th:nth-child(6n + 6) span {
    color: #333;
    font-weight:400;
    text-align: center;
}
table.view24table td {
    border-left:1px solid #eee;
    padding: 0px 0px 2px !important;
    position: relative;
    display:table-cell;
}
table.view24table tbody td:nth-child(n + 6) {
    width:10px;
}
table.view24table td .on-icon {
    width: 16px;
    height: 6px;
    margin: 0 0 0 -2px;
    border-radius:4px;
    /* position: relative; */
}
table.view24table td .on-icon-was-here {
    width: 12px;
    height: 8px;
    background:#fff;
    box-shadow:0 0 0 1px #fff;
}

table.view24table td .info-window, table.view24table td:nth-child(n + 6) .pin-icon {
    display: none;
}
table.view24table td:nth-child(n+6):hover .info-window {
	display: block;
	position: absolute;
	min-width: 220px;
	min-height: 60px;
	padding: 3px 9px 6px;
	border-radius: 4px;
	z-index: 9999;
	margin: 4px 0 0 -110px;
	line-height: 1.8em;
    text-align: center;
    background:#fff;
    color: #343a40;
    opacity: 0.9;
    box-shadow: 2px 2px 0px #eee;
}
table.view24table td:nth-child(n+6):hover .info-window-state-flg {
    box-shadow: 2px 2px 0px #28a745;
}
table.view24table td:nth-child(n+6):hover .info-window-was-here {
    box-shadow: 2px 2px 0px #ffc107;
}
table.view24table td:nth-child(n+6):hover .info-window-no-data {
   background: #fff;
   color: #343a40;
   box-shadow: 2px 2px 0px #ccc;
}
table.view24table td:nth-child(n+6):hover .info-window-stop-system {
   box-shadow: 2px 2px 0px #b32b38;
   color:#fff;
   background:#dc3545;
}
table.view24table td:nth-child(n+6):hover .info-window-future {
   background: #eee;
   color: #343a40;
   box-shadow: 2px 2px 0px #ccc;
}
table.view24table td:nth-child(6n) {
    border-left: 1px dashed #ccc;
}
table.view24table td:nth-child(36n + 6) {
    border-left:1px solid #999;
}
table.view24table td:nth-child(n + 6):hover .pin-icon {
    display: block;
    position: absolute;
    top: 2px;
}
.info-title {
	display: block;
	border-bottom: 1px dotted #b7b7b7;
	margin: 0px 0 3px;
}
.info-title-state-flg {
	border-bottom: 1px dotted #fff;
}
.info-title-was-here {
	border-bottom: 1px dotted #343a40;
}

.in-out-arrow {
	font-size: 18px;
    color: #ccc;
}
.kintai-list-icon {
	font-size: 16px;
    color: #5498d9;
}
.stop-system-bg {
    background-image: 
    linear-gradient(-45deg, 
        transparent calc(50% - 1px), #ddd calc(50% - 1px), 
        #ddd calc(50% + 1px), transparent calc(50% + 1px)
    ), 
    linear-gradient(45deg, 
        transparent calc(50% - 1px), #ddd calc(50% - 1px), 
        #ddd calc(50% + 1px), transparent calc(50% + 1px)
    );
}
div.scroll_div {
    overflow: auto;
}
.view24pager {
    text-align: center;
    font-size: 1.4em;
    color:#333;
    margin:10px auto;
}
.view24pager i {
    margin:0 10px;
}

.view24help {
    font-size:0.8em;
    margin:0 auto 4px;
    line-height:1.9em;
}
.view24help-icon {
	padding: 0px 5px;
    border-radius: 4px;
}
.view24help-mouseover-state-flg {
    color:#fff;
    background: #28a745;
}
.view24help-mouseover-no-data {
	color: #eee;
}
.view24help-mouseover-was-here {
    color:#ffc107;
    border:1px dashed;
}
.view24help-mouseover-stop-system {
    border:1px solid;
    color:#dc3545;
    background-image: 
    linear-gradient(-45deg, 
        transparent calc(50% - 1px), #ddd calc(50% - 1px), 
        #ddd calc(50% + 1px), transparent calc(50% + 1px)
    ), 
    linear-gradient(45deg, 
        transparent calc(50% - 1px), #ddd calc(50% - 1px), 
        #ddd calc(50% + 1px), transparent calc(50% + 1px)
    );
}
.view24help-mouseover-future {
    color: #777;
}

/* ------------------------------------------------------------
 * 検索項目
 * ------------------------------------------------------------*/
#search_box {
    border: 1px solid #ccc;
    padding: 10px 20px 0px;
    margin:0 auto 20px;
    box-shadow: 2px 2px 0px #eee;
}

/* ------------------------------------------------------------
 * form
 * ------------------------------------------------------------*/
fieldset {
    border: none;
    padding: 0;
    margin: 1.125rem 0;
}

fieldset legend {
    border-bottom: 1px solid #5498D9;
    width: 100%;
    line-height: 2rem;
    padding-bottom: 13px;
    margin-bottom: 40px;
}

.form button[type="submit"] {
    float: right;
    text-transform: uppercase;
    box-shadow: none;
}

.form button:hover, .form button:focus {
    background: #000;
    box-shadow: none;
}

button {
    border-radius: 3px;
    margin-left: 20px;
    padding:13px 37px 15px !important;
}
.button,input[type="submit"] {
    border-radius: 3px;
    padding:8px 20px 9px !important;
    font-size: 14px;
    margin-bottom: 15px;
}
.button.delete {
    background: #ea587f;
}
.button.delete:hover {
    background: #000;
}
.button img {
    margin-right: 8px;
    margin-top: -1px;
}
.button.list img {
    margin-top: -2.5px;
}
.side-nav li {
    margin:0;
}

div.message {
    text-align: center;
    cursor: pointer;
    display: block;
    font-weight: normal;
    padding: 0 1.5rem 0 1.5rem;
    transition: height 300ms ease-out 0s;
    background-color: #a0d3e8;
    color: #626262;
    top: 74px;
    right: 0px;
    z-index: 999;
    overflow: hidden;
    height: 50px;
    line-height: 2.8em;
    border-radius:3px;
}

div.message:before {
    line-height: 0px;
    font-size: 20px;
    height: 12px;
    width: 12px;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top:-2px;
    left: -11px;
    background-color: #FFF;
    padding: 12px 14px 12px 10px;
    content: "i";
    color: #a0d3e8;
}

div.message.error {
    background-color: #C3232D;
    color: #FFF;
}
div.message.error a {
    color: #FFF;
    border-bottom: 2px solid #fff;
}

div.message.error:before {
    padding: 10px 17px 14px 7px;
    color: #C3232D;
    content: "x";
}
div.message.hidden {
    height: 0;
}


.vertical-table th {
    padding: 0.5625rem 0.625rem;
    font-size: 0.875rem;
    color: #5498d9;
    border: none;
    text-align: left;
}

.vertical-table {
    vertical-align: middle;
}

.vertical-table td {
    text-align: right;
}

.content {
    padding: 1rem;
}

/* Use 'one true layout' methods to get equal height columns */
.main {
    /* overflow: hidden; */
    min-height: 92%; /* full height almost always */
    padding-top: 74px;
}

/* Force equal height by overflowing */
.content,
#actions-sidebar {
    margin-bottom: -99999px;
    /* padding-bottom: 99999px; */
}
@media(max-width: 640px) {
    #actions-sidebar {
        padding-bottom: 2rem;
        margin-bottom: 0;
    }
}

.content h3 {
    color: #333;
    font-weight: 200;
    padding-bottom: 0.5rem;
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 200;
    background: url(../img/h3.svg)no-repeat left top 3px;
    padding-left:20px;
    line-height: 1em;
}
.content h3 img {
    width:30px;
    margin-bottom:6px;
}

.content h4 {
    color: #5498d9;
    padding-bottom: 0.5rem;
    margin-bottom: 20px;
    border-bottom: 2px solid #5498d9;
}

.content .related h4 {
    color: #4d8f97;
    padding-bottom: 0.5rem;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 0px;
}

/* ------------------------------------------------------------
 * ヘルプボックス
 * ------------------------------------------------------------*/
.helpbox {
    border:2px dotted #ccc;
    border-radius: 4px;
    padding:4px 10px;
    font-size:0.84em;
}

/* ------------------------------------------------------------
 * Label
 * ------------------------------------------------------------*/
.label {
    background: #fff;
    border-bottom:1px solid #23afa9;
    padding:3px 6px 4px;
    margin: 5px 6px 0 0px;
    letter-spacing: 0.1em;
    color:#23afa9 !important;
    font-weight: 200;
    min-width: 58px;
    white-space: nowrap;
    box-shadow:1px 1px 1px #eee;
    border-radius: 1px;
}

.belongs .label:nth-child(2) { margin-top: 5px; }
.label-gray {
    border-bottom:1px dotted#9e9e9e;
    color:#9e9e9e !important;
}
.label-not-primary {
    border-style:none none dotted;
}
.day_label {
    color:#9e9e9e;
    letter-spacing: 0.02em;
    font-size: 0.84em;
    white-space: nowrap;
    display: block;
    margin:0 0 -3px 0;
}
.time_label {
    color:#444;
    letter-spacing: 0.1em;
    font-size: 1.1em;
    white-space: nowrap;
    display: block;
}
.all_total_time_label {
	color: #9e9e9e;
	letter-spacing: 0.02em;
	font-size: 0.84em;
	white-space: nowrap;
	display: block;
    margin: 0 0 -3px 0;
}
.today_total_time_label {
    color:#444;
    letter-spacing: 0.1em;
    font-size: 1.1em;
    white-space: nowrap;
    display: block;
}
.total_time_label {
    color:#444;
    letter-spacing: 0.1em;
    font-size: 0.9em;
    white-space: nowrap;
    display: block;
}

.top-bar {
    padding:14px 0 15px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
.top-bar .name h1 a {
    min-width: 110px;
    width: auto !important;
}

table thead tr th {
    color:#555;
    font-weight: 300;
}
table thead tr th a{
    color:#555;
}
table thead tr th span{
    display: inline-block;
}

table tr td img {
    margin-top: -2.5px;
    margin-right: 3px;
}

.top-bar .time {
    color:#fff;
    font-weight: 200;
    padding: 0 16px 11px 4px;
    font-size: 12px;
}
.top-bar .time span {
    display: inline-block;
}
#date_day {
    letter-spacing: 0.06em;
}
#time {
	font-size: 20px;
	display: block;
	margin: 0 auto;
	line-height: 0.6;
	letter-spacing: 0.45em;
	font-weight: bold;
}

ul.flex {
    display: flex;
    width: 630px;
    align-items: flex-end;
}

.top-bar-section ul {
    margin-right: 85px;
}

.title-area .label {
    border:none;
    background: #fff;
    color:#5498D9 !important;
}
@media(max-width: 1024px) {
/*    .title-area .label {
        display: none;
    }*/
    ul.flex {
    width: 450px;
    }
}
@media(max-width: 640px) {
    ul.flex {
    width: 340px;
    }
    .pc { display: none; }
    .belongs .label { margin-bottom: 10px; }
    .belongs .label:last-child { margin-bottom: 0; }
}
.title-area .label span.bar {
    margin:0 5px;
    font-weight: 200;
    color:#d5ebff;
}
.title-area .label span.red {
    color:#f1295e !important;
}
.title-area .label span.gray {
    color:#9e9e9e !important;
}

.title-area .number {
    padding-bottom: 5px;
}
.title-area .number .label {
    min-width:122px;
    letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
 * RSSI icon
 * ------------------------------------------------------------*/
.rssi-icon {
    list-style-type: none;
    margin: 0px;
    width: 20px;
    height: 12px;
    line-height: 0;
    display: inline-block;
}
.rssi-icon li{
    background: #ccc;
    width:2px;
    height:10px;
    display: inline-block;
    margin:0 1px 0 0;
}
/* rssi icon の高さ */
.rssi-icon li:nth-child(1) {
    height: 30%;
}
.rssi-icon li:nth-child(2) {
    height: 50%;
}
.rssi-icon li:nth-child(3) {
    height: 65%;
}
.rssi-icon li:nth-child(4) {
    height: 80%;
}
.rssi-icon li:nth-child(5) {
    height: 100%;
}
/* rssi icon の色 */
.rssi-level-0 li:nth-last-child(-n+5) {
    background: #ccc !important;
}
.rssi-level-1 li:nth-last-child(-n+4) {
    background: #ccc !important;
}
.rssi-level-2 li:nth-last-child(-n+3) {
    background: #ccc !important;
}
.rssi-level-3 li:nth-last-child(-n+2) {
    background: #ccc !important;
}
.rssi-level-4 li:nth-last-child(-n+1) {
    background: #ccc !important;
}

.homes { background: #fff; }

.homes .area {
    padding-bottom: 10px;
}
.homes .belongs .label {
    border-color: #9e9e9e;
    color:#9e9e9e !important;
}

.searchinner {
    padding:10px 0;
    border-bottom: 1px solid #aaa;
    position: fixed;
    top:-407px;
    width: 100%;
    z-index:1;
    background: #fff;
    transition: .3s;
}
.searchinner.open {
    top:74px;
    transition: .3s;
    background: #eee;
}

.searchinner h3 {
    margin:0 30px 0 0;
    font-size: 16px;
    color:#5498D9;
    font-weight: 500;
}

.searchinner h4 {
    margin:0 30px 0 0;
    font-size: 16px;
    color:#5498D9;
    font-weight: 500;
    width: 130px;
    height: 50px;
    border-right:2px solid #c3e1ff;
    float:left;
}
.searchinner h4 img {
    margin:-2px 8px 0 0;
}

.searchinner input {
    margin:0;
}

.searchinner form > div {
    margin:10px 20px 10px 20px;
}

.searchinner form > div.searchbox {
    background: #fff;
    padding: 17px 30px 17px 30px;
    border-radius: 3px;
}

.searchinner div.searchbox div{
    display: inline-block;
    font-size: 12px;
}

.searchinner form > div.searchbox > div.checkbox {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #c3e1ff;
}

.searchinner div div.checkbox {
    margin-right: 15px;
    margin-top:2px;
}

.searchinner div.submit {
    padding:0;
}
.searchinner .button {
    white-space: nowrap;
    margin-bottom: 0;
}
.searchinner select {
    margin:0 10px 0;
    width: 100px;
    font-size: 12px;
    background-color: #fff;
}


input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    border:none;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: url(../img/checkbox_off.svg)no-repeat left;
    cursor: pointer;
    margin-top: -3px !important;
    margin-right: 7px;
    margin-bottom: 0 !important;
    outline: 0;
}

fieldset .checkbox label {
    margin-right: 20px;
    font-weight: 300;
}
fieldset .checkbox {
    margin-left: 10px;
}
fieldset .checkbox label input[type="checkbox"] {
    margin-top: -2px !important;
}

input[type="checkbox"]:checked {
    background: url(../img/checkbox_on.svg)no-repeat left;
}

.searchinner div select:nth-child(2) {
    margin-left: 0;
}

.normalsize {
    display: none;
}

/* ------------------------------------------------------------
 * cpu温度
 * ------------------------------------------------------------*/
 .temp-none {
     color: #ccc;
 }
.temp-high {
    color: #f00;
}

.temp-middle {
    color: #ff9f00;
}

.temp-low {
    color: #00a3ff;
}

/* ------------------------------------------------------------
 * 曜日
 * ------------------------------------------------------------*/
.week_saturday {
    color: #00a3ff;
}
.week_saturday_back {
    background: #e4f3ff !important;
}
.week_sunday {
    color: #f00;
}
.week_sunday_back {
    background: #fff4f4 !important;
}

/* ------------------------------------------------------------
 * 現在の時間：縦線
 * ------------------------------------------------------------*/
#vertical_line_now {
	border-left: 1px solid #f00;
	position: absolute;
	height: 98%;
}
#vertical_line_now i:first-child {
	position: absolute;
	color: #f00;
	margin: 0px 0px 0px 0px;
}
#vertical_line_now i:last-child {
	position: absolute;
	color: #f00;
	margin: 0px 0px -8px 1px;
	bottom: 0px;
}

/* ------------------------------------------------------------
 * 今日：横線
 * ------------------------------------------------------------*/
.line_today {
    background:#e7f2006b !important;
}

/* ------------------------------------------------------------
 * 不在
 * ------------------------------------------------------------*/
.in-color {
    color: #2cd291;
}
.not-in-color {
    color: #8e8e8e;
}
/* ------------------------------------------------------------
 * 名前
 * ------------------------------------------------------------*/
.name-text {
    font-weight: bold;
}
.kintai-home {
    color:#9e9e9e;
    font-size:12px;
}
a.kintai-home {
    color: #2c81d2;
}
.verified-on-color {
    color: #2cd291;
}
.verified-off-color {
    color:#9e9e9e;
}

/* ------------------------------------------------------------
 * color picker
 * ------------------------------------------------------------*/
.pcr-app button, .pcr-app button { 
    margin:3px 0 !important;
    padding:0px !important;
}

/* ------------------------------------------------------------
 * mobilearea
 * ------------------------------------------------------------*/
.mobilelabel td{
    background: none;
    height: 70px;
    letter-spacing: 1.5px;
    color: #333 !important;
    font-weight: 700;
    font-size: 43px;
    white-space: nowrap;
}
.mobilelabel td:last-child {
    text-align: right;
}
.top-bar ul.mobilehead {
    text-align: center;
    margin:0 auto;
    float: none;
}
.top-bar ul.mobilehead img {
    width: 200px;
}
.mobiletime {
    color:#fff;
    padding:5px 0 4px;
}
.mobilenumber span {
    font-size: 15px;
}
.mobilemain {
    overflow: hidden;
    min-height: 92%;
    padding-top: 145px;
    text-align: center;
}

/* ------------------------------------------------------------
 * ソートicon
 * ------------------------------------------------------------*/
.sort-icon {
    color:#555;
    text-align:center;
}
.sort-icon:hover {
    color: #333;
    cursor: pointer;
}

/* ------------------------------------------------------------
 * 遠隔設定
 * ------------------------------------------------------------*/
.remote-setting-table label {
    display: inline-block;
    margin-left:10px;
}
.remote-setting-table .input {
    margin-bottom:5px;
}
.helpboxInTable {
    margin:5px 0 10px;
    background:#fff;
    border:2px dotted #ccc;
    border-radius: 4px;
    padding:4px 10px;
    font-size:0.84em;
}
#advanced-settings-wrapper{
    display: none;
}
#setting-rssi-limit {
    width:100%;
}
.installationLocations legend {
    margin-bottom: 20px;
}

/* ------------------------------------------------------------
 * old css
 * ------------------------------------------------------------*/
 .table_scroll {
	max-height: 200px;
	overflow-y: scroll;
	margin-top: 10px;
	margin-bottom: 10px;
}

.button_right {
	float: right;
}