*{box-sizing:border-box;color:#666;font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif"}
html,body{margin:0;padding:0;font-size:18px}
.cf:after{content:"";display:block;clear:both}
.select,.btn_radio{border:solid 1px #017AFF;border-radius:5px}
.select{display:flex;margin-bottom:12px; min-width: 170px;}
.select label,.select select{font-size:11px}
.select label{padding:3px 8px;background-color:#017AFF;border-radius:4px 0 0 4px;color:#FFF}
.select select{width:130px;padding:0 8px;flex:1;color:#017AFF;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0 4px 4px 0;border:none;background-image:url("../img/common/select.svg");background-size:contain;background-position:right;background-repeat:no-repeat}
.btn_radio{display:inline-flex;margin:0 10px 12px 0}
.btn_radio label{text-align:center;color:#017AFF;font-size:11px;padding:3px 8px;border-right:solid 1px #017AFF}
.btn_radio label:nth-of-type(1){border-radius:4px 0 0 4px}
.btn_radio label:nth-last-of-type(1){border-radius:0 4px 4px 0;border-right:none}
.btn_radio input:checked+label{background-color:#017AFF;color:#FFF}
.btn_radio input{display:none}
.toggle{font-size:14px;vertical-align:middle;display:inline; margin:0 10px 0 0}
.toggle input{display:none}
.toggle input+label{display:inline-block;vertical-align:middle;width:60px;height:30px;background-color:#DDD;border-radius:15px;padding:2px;position:relative;transition:0.3s}
.toggle input+label:before{position:absolute;top:3px;left:3px;content:"";width:22px;height:22px;border-radius:50%;background-color:#FFF;border:solid 1px #DDD;transition:0.3s}
.toggle input:checked+label{background-color:#017AFF}
.toggle input:checked+label:before{left:32px}
header{position:fixed;top:0;left:0;height:52px;width:100%;background-color:#DDD;border-bottom:solid 2px #017AFF;display:flex;z-index:9999;}
header div{flex-basis:40px;padding:5px}
header svg{fill:#666;width:40px;height:40px}
header h1{height:100%;flex-basis:calc(100% - 120px);text-align:center;line-height:52px;margin:0;font-size:21px}
header div nav {display:none}
.logpage header h1{flex-basis:calc(100% - 100px);text-overflow:ellipsis}
.noscroll{position:fixed;width:100%;height:100%}
#mainmenu,#area_search,#area_options{
    display: none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:10px;
    overflow:hidden;
    background-color:rgba(0,0,0,0.8);
    z-index:10000

/* 
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
 */
}
#mainmenu ul,#mainmenu dl,#area_search ul,#area_search dl,#area_options ul,#area_options dl{
    margin:0 0 10px;
    padding:0
}
#mainmenu ul {text-align:center;}
#mainmenu ul dt,#mainmenu ul dd,#mainmenu ul li,#mainmenu dl dt,#mainmenu dl dd,#mainmenu dl li,#area_search ul dt,#area_search ul dd,#area_search ul li,#area_search dl dt,#area_search dl dd,#area_search dl li,#area_options ul dt,#area_options ul dd,#area_options ul li,#area_options dl dt,#area_options dl dd,#area_options dl li{background-color:#FFF;margin:0;font-size:18px}
#mainmenu ul dt input[type="text"],#mainmenu ul dd input[type="text"],#mainmenu ul li input[type="text"],#mainmenu dl dt input[type="text"],#mainmenu dl dd input[type="text"],#mainmenu dl li input[type="text"],#area_search ul dt input[type="text"],#area_search ul dd input[type="text"],#area_search ul li input[type="text"],#area_search dl dt input[type="text"],#area_search dl dd input[type="text"],#area_search dl dd input[type="tel"],#area_search dl li input[type="text"],#area_options ul dt input[type="text"],#area_options ul dd input[type="text"],#area_options ul li input[type="text"],#area_options dl dt input[type="text"],#area_options dl dd input[type="text"],#area_options dl li input[type="text"]{width:100%}
#mainmenu ul dt,#mainmenu dl dt,#area_search ul dt,#area_search dl dt,#area_options ul dt,#area_options dl dt{padding:10px 10px  0;text-align:left}
#mainmenu ul dt+dd,#mainmenu dl dt+dd,#area_search ul dt+dd,#area_search dl dt+dd,#area_options ul dt+dd,#area_options dl dt+dd{padding:0 10px 10px}
#mainmenu ul dd,#mainmenu ul li,#mainmenu dl dd,#mainmenu dl li,#area_search ul dd,#area_search ul li,#area_search dl dd,#area_search dl li,#area_options ul dd,#area_options ul li,#area_options dl dd,#area_options dl li{border-bottom:solid 1px #DDD}
#mainmenu ul>*:nth-child(1),#mainmenu dl>*:nth-child(1),#area_search ul>*:nth-child(1),#area_search dl>*:nth-child(1),#area_options ul>*:nth-child(1),#area_options dl>*:nth-child(1){border-radius:10px 10px 0 0}
#mainmenu ul>*:nth-last-child(1),#mainmenu dl>*:nth-last-child(1),#area_search ul>*:nth-last-child(1),#area_search dl>*:nth-last-child(1),#area_options ul>*:nth-last-child(1),#area_options dl>*:nth-last-child(1){border-radius:0 0 10px 10px;border-bottom:none}
#mainmenu ul>*:nth-child(1):nth-last-child(1),#mainmenu dl>*:nth-child(1):nth-last-child(1),#area_search ul>*:nth-child(1):nth-last-child(1),#area_search dl>*:nth-child(1):nth-last-child(1),#area_options ul>*:nth-child(1):nth-last-child(1),#area_options dl>*:nth-child(1):nth-last-child(1){border-radius:10px}
#mainmenu input[type="submit"],#area_search input[type="submit"],#area_options input[type="submit"]{-webkit-appearance:button;-moz-appearance:button;appearance:button;background-color:#017AFF;color:#FFF;display:block;border:none;width:100%;border-radius:10px;padding:10px;font-size:18px;margin:0 0 10px}
#mainmenu div[id^="close_"],#area_search div[id^="close_"],#area_options div[id^="close_"]{background-color:#DDD;text-align:center;border-radius:10px;padding:10px;font-size:18px}
#mainmenu a,#area_search a,#area_options a{padding:10px;display:block;text-decoration:none;color:#017AFF}
#mainmenu div[id^="close_"]:before,#area_search div[id^="close_"]:before,#area_options div[id^="close_"]:before{content:"閉じる"}
main{padding:52px 0 120px}
main nav{padding:10px;border-bottom:2px solid #017AFF;box-shadow:0px 3px 8px 3px rgba(0,0,0,0.3);position: fixed;background-color: #FFF;width: 100%;}
.list{list-style:none;margin:67px 0 20px;padding:0}
.list li{border-bottom:solid 1px #666;padding:5px 10px 0;font-size:14px}
.ok .detail .camera_status span {color: #FFF}
.error .detail .camera_status span {color: #D4145A}
.temp_error .detail .camera_status span {color: #d47114}
.carnum_error .detail .camera_status span {color: #017AFF}
.recog_rate_error .detail .camera_status span {color: #4ad414}

.list li h3{font-size:14px;margin:0}
.list li p{margin:0 0 5px}
.list li p.area_btn{display:flex;margin:0}
.list li p.area_btn a{height:24px;line-height:26px;border-radius:12px;background-color:#DDD;text-decoration:none;text-align:center;margin:8px;flex:1}
.list li.error{background-color:#D4145A}
.list li.error h2,.list li.error h3,.list li.error p,.list li.error span{color:#FFF}
.list li.error p.area_btn a{background-color:#FFF;color:#D4145A}
.list li.error p.incident_date a{color:#D4145A}
.list li.temp_error{background-color:#d47114}
.list li.temp_error h2,.list li.temp_error h3,.list li.temp_error p,.list li.temp_error span{color:#FFF}
.list li.temp_error p.area_btn a{background-color:#FFF;color:#d47114}
.list li.temp_error p.incident_date a{color:#d47114}
.list li.carnum_error{background-color:#017AFF}
.list li.carnum_error h2,.list li.carnum_error h3,.list li.carnum_error p,.list li.carnum_error span{color:#FFF}
.list li.carnum_error p.area_btn a{background-color:#FFF;color:#017AFF}
.list li.carnum_error p.incident_date a{color:#017AFF}
.list li.recog_rate_error{background-color:#4ad414}
.list li.recog_rate_error h2,.list li.recog_rate_error h3,.list li.recog_rate_error p,.list li.recog_rate_error span{color:#FFF}
.list li.recog_rate_error p.area_btn a{background-color:#FFF;color:#4ad414}
.list li.recog_rate_error p.incident_date a{color:#4ad414}
.list li p.incident_date a{display: inline-block;padding:0 12px;height:24px;line-height:26px;border-radius:12px;background-color:#FFF;text-decoration:none;text-align:center;margin-left:6px;}

.list li.error .incident_date .incident_open, .list li.temp_error .incident_date .incident_open, .list li.recog_rate_error .incident_date .incident_open, .list li.carnum_error .incident_date .incident_open
{
    border-bottom: solid 2px;
}

.list li.error .incident_date, .list li.temp_error .incident_date, .list li.recog_rate_error .incident_date, .list li.carnum_error .incident_date {
    position   : relative;                /* 指定した分だけ相対的に移動 */
}
.list li.error .incident_date .incident_open:hover + .incident_detail
, .list li.temp_error .incident_date .incident_open:hover + .incident_detail
, .list li.recog_rate_error .incident_date .incident_open:hover + .incident_detail
, .list li.carnum_error .incident_date .incident_open:hover + .incident_detail {display:inline}
.list li.error .incident_date .incident_detail, .list li.temp_error .incident_date .incident_detail, .list li.recog_rate_error .incident_date .incident_detail, .list li.carnum_error .incident_date .incident_detail {
    position   : absolute;                /* 親要素を基準 */
    display: none;                        /* 要素を非表示 */
    padding: 2px 10px;                         /* テキストの前後の余白 */
    background-color: rgba(102, 102, 255, 0.8);       /* 背景色（透明度） */
    top : 30px;                           /* 表示位置 */
    left:-1%;
}

  
#dashboard > div{margin:15px auto 15px;padding:10px;}

#summary{border-radius:10px;background-color:#DDD;margin:15px 10px 15px;padding:10px}
#summary h2{font-size:18px;margin:0 0 3px}
#summary p{font-size:14px;margin:0}
.logs{margin:10px 0;padding:10px;width:100%;overflow:hidden;list-style:none}
.logs li{background-color:#DDD;width:100%;border-radius:10px;position:relative;padding:10px;margin-bottom:10px;word-wrap: break-word;}
.logs li h3,.logs li p{font-size:14px}
.logs li h3{margin:0 0 3px 0}
.logs li p{margin:0}
.logs li.left{float:left;margin-left:10px}
.logs li.right{float:right;margin-right:10px}
.logs li.left:before,.logs li.right:before{position:absolute;top:12px;content:"";display:block;width:20.8px;border-color:transparent;border-style:solid}
.logs li.left:before{border-top-width:6px;border-bottom-width:6px;border-right-width:10.4px;border-right-color:#DDD;left:-34px}
.logs li.right:before{border-top-width:6px;border-bottom-width:6px;border-left-width:10.4px;border-left-color:#DDD;right:-34px}
.logs li.error{background-color:#D4145A}
.logs li.error h3,.logs li.error p{color:#FFF}
.logs li.left.error:before{border-right-color:#D4145A}
.logs li.right.error:before{border-right-color:#D4145A}
.logs li.temp_error{background-color:#d47114}
.logs li.temp_error h3,.logs li.temp_error p{color:#FFF}
.logs li.left.temp_error:before{border-right-color:#d47114}
.logs li.right.temp_error:before{border-right-color:#d47114}
.logs li.carnum_error{background-color:#017AFF}
.logs li.carnum_error h3,.logs li.carnum_error p{color:#FFF}
.logs li.left.carnum_error:before{border-right-color:#017AFF}
.logs li.right.carnum_error:before{border-right-color:#017AFF}
.logs li.recog_rate_error{background-color:#4ad414}
.logs li.recog_rate_error h3,.logs li.recog_rate_error p{color:#FFF}
.logs li.left.recog_rate_error:before{border-right-color:#4ad414}
.logs li.right.recog_rate_error:before{border-right-color:#4ad414}
#notification{position:fixed;left:0;bottom:0;width:100%;background-color:#D4145A}
#notification a{
    display:flex;
    height:100%;
    padding:10px;
    /* justify-content:space-between; */
    text-overflow:ellipsis;
    text-decoration:none;
    color:#FFF
}
#notification a span{font-size:14px;background-color:#FFF;color:#D4145A;text-align:center;height:24px;line-height:26px;min-width:24px;border-radius:12px;padding:0 5px;margin-left:30px;}
#pagetopbtn{width:70px;height:70px;background-color:rgba(0,0,0,0.6);border-radius:50%;color:#FFF;font-size:11px;text-align:center;text-decoration:none;padding-top:30px;position:fixed;bottom:60px;right:10px}
#pagetopbtn:before{content:"";display:block;position:absolute;top:15px;left:25px;width:20px;height:20px;transform:rotate(-45deg);border:solid #FFF;border-width:1px 1px 0 0}

.search_condition{font-size:14px;vertical-align:middle; margin-top: 10px;}
.search_word > span {margin-left:10px; height:24px; line-height: 26px;  border-radius: 12px; background:#d8e6f1;padding:2px 8px;}
.clear_btn a {margin-left:10px; height:24px; line-height: 26px; border-radius: 12px; border:1px solid #017AFF; text-decoration: none; padding:2px 8px;}
.data_name, .status_for_minimal, .status_for_detail {
    display: flex;
    justify-content: space-between;
    padding-bottom: 4px;
}
.list li h2,.list li h3 {
    line-height: 28px;
} 
.list li h2.min_title {
    font-size: 13px;
}

.cam_icon, .heat_icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 120%;
}
.c1 {
    background-image: url('../img/icon/ico_cam1.png');
}
.c2 {
    background-image: url('../img/icon/ico_cam2.png');
}
.c3 {
    background-image: url('../img/icon/ico_cam3.png');
}
.f1 {
    background-image: url('../img/icon/ico_fire1.png');
}
.f2 {
    background-image: url('../img/icon/ico_fire2.png');
}
.f3 {
    background-image: url('../img/icon/ico_fire3.png');
}
#edit_form {
    border-radius: 10px;
    background-color: #DDD;
    margin: 15px 10px 15px;
    padding: 10px;
}
#edit_confirm {
    text-align: right;
	margin-bottom: 0;
}
#message {
	text-align: center;
	margin: 0;
	font-weight: bold;
	font-size: 14px;
}
#message.errormess {
	color: #900;
}
#edit_confirm a {
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    padding: 8px;
}
nav > ul {
    list-style: none;
    padding:0;
    margin:0;
}
#pagetop > nav > ul > li {
    display:inline-block;
    padding-right:14px;
}
@media (max-width: 760px) {
    .min_font {
        font-size: 12px;
    }
	.list {margin-top: 125px;}
    .list li h2{
        font-size:18px;margin:0
    }
    .list li h2.min_title {
        font-size: 15px;
    }
    /* .list li img {
        width:25px;
    } */
}
@media (max-width: 375px) {.list {margin-top: 135px;}}
@media (max-width: 320px) {.list {margin-top: 193px;}}
@media (min-width: 760px) {
    .list li {
        width: 50%;
        display: inline-block;
        border-right: solid 1px #666;
    }
    .list li h2{
        font-size:18px;
        margin:0
    }
    /* .list li img {
        width:28px;
    } */
}
@media (min-width: 1120px) {
    .list li {
        width: 33%;
    }
    .list li h2{font-size:15px;margin:0}
    /* .list li img {
        width:25px;
    } */
}
@media (min-width: 1480px) {
    .list li {
        width: 25%;
    }
}
@media (min-width: 1860px) {
    .list li {
        width: 20%;
    }
}

#no_result {
    color: #f45483;
    border: none;
    font-size: 20px;
    width: 100%;
    text-align: center;
}

#dashboard table {
    border-collapse: collapse;
    border: 1px solid black;
}

#dashboard table th, 
#dashboard table td {
    border: 1px solid black;
    padding:8px;
}
.common_btn_area {
    margin:20px auto;
    width:500px;
    display: flex;
    justify-content: space-between;
}

#usertable{
    width:auto;
}
#grouptable {
    width: 980px;
}

button:not(#csv_upload_button):not(#csv_download_button) {
    appearance: button;
    border-radius: 10px;
    padding: 10px;
    font-size: 18px;
    margin:0 0 10px;
    border:none;
}
.blue_btn {
    width: auto;
    background-color:#017AFF;
    color:#FFF;
    display:block;
}
#edit_camera {
    width: auto;
    background-color:#017AFF;
    color:#FFF;
}
#edit_camera[disabled]{
	background-color: #666;
	color: #333;
}
.form_bg {
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 40%;
    transform: translate(-50%,-50%);
    width: 650px;
    background-color: white;
    text-align:center;
    border-radius:10px;
}

.log_bg {
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 750px;
    background-color: white;
    text-align:center;
    border-radius:10px;
    max-height: 800px;
    overflow: auto;
}

.edit_bg {
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: white;
    border-radius:10px;
    max-height: 800px;
    overflow: auto;
}

.edit_bg input {
    border: solid 1px;
}

#userAcl {
    float: left;
}
#pager_area {
    text-align: center;
    margin: 15px 0px;

}
.form_bg form {
    margin: 10px auto;
    width: 500px;
}
.text_R {
    margin:0 auto;
    text-align: right;
    width:500px;
}

.modal_bg,
.log_modal_bg,
.edit_modal_bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

#create_form,
#update_form,
#log_modal,
#edit_modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
}
#create_form input,
#update_form input,
#create_form select,
#update_form select
{width:300px;}


#create_form dt,
#update_form dt {
    float: left;
}


#create_form dd,
#update_form dd {
    margin-left: 200px;
}

.log_modal_close {
    display: flex;
    margin: 0 0 0 auto;
    cursor: pointer;
}

th:focus { outline: 0 none; }

th.tablesorter-headerUnSorted > .tablesorter-header-inner::after {
  content: "\02666";
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color:white;
}

th.tablesorter-headerAsc > .tablesorter-header-inner::after {
  content: "\025b2";
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

th.tablesorter-headerDesc > .tablesorter-header-inner::after {
  content: "\025bc";
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

#access_form {
    margin: 120px auto 0; 
    width:260px;
    text-align:center;
}

#pager_area {
    display: none;
}

#signin_btn {
    height: 46px;
    color: white;
    padding: 10px 0px 10px 40px;
    background-color: rgb(66,133,244);
    background-image: url('../img/google/btn_google_dark_normal_ios.svg');
    background-repeat: no-repeat;
}

#signin_btn:hover {
    cursor: pointer;
    color: white;
    padding: 10px 0px 10px 40px;
    /* background-color: white; */
    background-color: rgb(148,185,248);
    background-image: url('../img/google/btn_google_dark_normal_ios.svg');
    background-repeat: no-repeat;
}

#signin_btn:active {
    cursor: pointer;
    color: white;
    padding: 10px 0px 10px 40px;
    /* background-color: white; */
    background-color: rgb(50,104,214);
    background-image: url('../img/google/btn_google_dark_pressed_ios.svg');
    background-repeat: no-repeat;
}

#csv_upload_button,
#csv_download_button {
    flex-basis: initial;
    min-width: 135px;
    height: 40px;
    padding: 6px;
    text-align: center;
    border: solid 1px #666;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 15px;
}

#csv_upload label {
    cursor: pointer;
}

#csv_upload > #file_upload {
    display:none; /* アップロードボタンのスタイルを無効にする */
}