/* A Modern CSS Reset */
*,*::before,*::after{box-sizing:border-box}ul[class],ul,ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ul,ol[class],figure,blockquote,dl,dd{margin:0;font-size: 100%;font: inherit;}
body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ul,ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}
img{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}a{text-decoration: none;}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
input[type=checkbox],input[type=radio]{margin:5px;vertical-align:middle;}table{word-break: break-all;word-wrap: break-word;}
.ui-dialog .ui-dialog-content{padding:0 !important;margin:.5em 1em;}

/* ------------------------------------------------------------ */

body{
color:#72777c;
font-size:14px;
}

input,textarea{
width:100%;
height:35px;
padding:8px;
font-size:14px;
line-height:16px;
border:1px solid #bbb;
}

input[type=file]{
border:0;
}

select{
height:35px;
padding:8px;
font-size:14px;
line-height:16px;
border:1px solid #bbb;
}

label input{
width:auto;
height:auto;
}

button{
padding:8px 20px;
font-size:14px;
line-height:16px;
cursor: pointer;
border-radius: 3px;
border:none;
}

a:link,
a:visited{
color:#00a0d2;
}

input::placeholder,
textarea::placeholder{
color:#999;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder{
color: #999;
}

/* ------------------------------------------------------------ */

.page_login{
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
background:#f1f1f1;
}
.login_box{
background:#fff;
border:1px solid #e2e4e8;
box-shadow: 0 1px 3px #ccc;
}
.login_box span{
display:table-cell;
width:40px;
height:35px;
border-top:1px solid #bbb;
border-bottom:1px solid #bbb;
border-left:1px solid #bbb;
text-align:center;
vertical-align:middle;
}

.page_main{
display: flex;
min-height: 100vh;
background:#f1f1f1;
}

.header{
width:100%;
background:#23282d;
color:#eee;
height:35px;
line-height: 35px;
display:flex;
}
.header a{
color:#eee;
padding:5px 10px;
}
.header_logout{
position:absolute;
right:10px;
font-size: 20px;
}

.menu{
width:200px;
background:#23282d;
color:#eee;
flex-shrink:0;
}
.menu li{
line-height:40px;
}
.menu li a{
display:block;
color:#eee;
padding:0px 10px;
}
.menu li ul{
background:#32373c;
display:none;
}
.menu li a:hover{
background:#12171c;
}
.menu .menu_head{
padding-left:10px;
cursor: pointer;
}
.menu .menu_head:hover{
background:#43484d;
}
.menu .now{
background:#0073aa;
}
.menu .now .menu_head:hover{
background:#0073aa;
}
.menu .now ul{
display:block;
}

.menu_smp{
background:#23282d;
color:#eee;
padding:20px 10px;
}
.menu_smp li{
line-height:40px;
}
.menu_smp li a{
display:block;
color:#eee;
padding:0px 10px;
}

.main{
width:100%;
padding:10px;
}
.main_title{
font-size:20px;
margin-bottom:20px;
}

.submenu{
margin-bottom:10px;
}
.submenu a{
padding:3px 10px;
display:inline-block;
margin-bottom:10px;
margin-right:5px;
white-space:nowrap;
color:#20a8d8;
border:1px solid #20a8d8;
}

.box{
background:#fefefe;
border:1px solid #dbdddf;
}
.box_error{
background:#f1d1d8;
color:#d06575;
margin-bottom:10px;
padding:10px;
}

.bt_search{
font-size:16px;
cursor: pointer;
border:1px solid #dbdddf;
padding:5px 10px;
background:#fcfcfc;
}
.search_box{
margin-bottom:10px;
padding:10px;
border:1px solid #dbdddf;
border-top:0px;
}

.pager{
font-size:12px;
}

.msg_box{
padding:10px 15px;
border:1px solid #ddd;
margin-bottom:20px;
}

/* ------------------------------------------------------------ */
/* smp */

@media only screen and (max-width:480px){

.login_box{
width:90%;
height:300px;
padding:30px;
}

.menu{
display:none;
}

.header{
position: fixed;
z-index: 10;
}
.header_title{
margin-left:40px;
}

.page_main{
padding-top:35px;
}

.box{
padding:10px;
}

.scroll{
overflow-x:auto;
white-space:nowrap;
}

.table_form{
width:100%;
border-bottom: 1px solid #ddd;
}
.table_form th,
.table_form td{
width:100%;
display:block;
}
.table_form th{
border: 1px solid #ddd;
border-bottom:0px;
}
.table_form td{
border:1px solid #ddd;
border-bottom:0px;
}

.group_row{
flex-direction: column;
}
.group{
margin-bottom:10px;
}

.pager{
text-align:right;
}
.pager_text{
display:block;
width:100%;
margin-bottom:5px;
}

}

/* ------------------------------------------------------------ */
/* pc */

@media only screen and (min-width:481px){

.login_box{
width:300px;
height:300px;
padding:30px;
margin-bottom:100px;
}

.box{
padding:20px;
}

.display_smp{
display:none;
}

.table_form th{
border: 1px solid #ddd;
}
.table_form td{
border:1px solid #ddd;
}

.group{
margin-right:10px;
}

}

/* ------------------------------------------------------------ */

.table_form,
.table_list{
border-collapse: collapse;
}
.table_form th{
white-space:nowrap;
font-size:12px;
padding:10px 10px;
text-align:left;
}
.table_form td{
font-size:12px;
padding:10px 10px;
}
.table_form p{
margin:10px 5px 5px 5px;
}
.table_form_confirm{
display:none;
}

.table_list th{
border:1px solid #ddd;
white-space:nowrap;
font-size:12px;
padding:5px 10px;
}
.table_list td{
border:1px solid #ddd;
font-size:12px;
padding:5px 10px;
}
.table_list tr:nth-child(even){
background:#f6f6f6;
}

.group_row{
display:flex;
align-content:flex-start;
}

.bt_blue,
.bt_edit{
background:#54a6de;
color:#fff;
}
.bt_blue:link, .bt_blue:visited,
.bt_edit:link, .bt_edit:visited{
color:#fff;
}
.bt_red,
.bt_delete{
background:#f55b63;
color:#fff;
}
.bt_red:link, .bt_red:visited,
.bt_delete:link, .bt_delete:visited{
color:#fff;
}
.bt_green,
.bt_list{
background:#57c059;
color:#fff;
}
.bt_green:link, .bt_green:visited,
.bt_list:link, .bt_list:visited{
color:#fff;
}
.bt_yellow{
background:#f7b908;
color:#fff;
}
.bt_yellow:link, .bt_yellow:visited,{
color:#fff;
}
.bt_edit,
.bt_delete,
.bt_list,
.bt_none{
padding:8px 12px;
border-radius: 3px;
font-size:14px;
line-height:16px;
display:inline-block;
cursor: pointer;
}
.bt_pager{
padding:6px 10px;
font-size:12px;
margin-left:5px;
background:#eee;
}
.bt_pager.now{
background:#aaa;
color:#fff;
}
.bt_none{
background:#ddd;
color:#fff;
}
.bt_sort{
padding:0px 3px;
font-size:inherit;
background:inherit;
color:inherit;
}

.status_green{
background-color: #5cb85c;
color:#fff;
padding:3px 5px;
}
.status_yellow{
background-color: #F0AD4E;
color:#fff;
padding:3px 5px;
}
.status_red{
background-color: #D9534F;
color:#fff;
padding:3px 5px;
}
.status_purple{
background-color: #711a53;
color:#fff;
padding:3px 5px;
}
/* ------------------------------------------------------------ */

.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}

.vat{vertical-align:top;}
.vam{vertical-align:middle;}

.hidden{display:none;}

.b{font-weight:bold;}
.nr{white-space:nowrap;}

.mg0{margin:0;}
.mgt10{margin-top:10px;}
.mgt20{margin-top:20px;}
.mgb10{margin-bottom:10px;}
.mgb20{margin-bottom:20px;}
.mgl5{margin-left:5px;}
.mgl10{margin-left:10px;}
.mgl20{margin-left:20px;}
.mgr10{margin-right:10px;}

.wauto{width:auto;}
.w100{width:100%;}
.w150px{width:150px;}
.w200px{width:200px;}
.hauto{height:auto;}

.flx{display:flex;}
.flx_sh0{flex-shrink:0;}
.flx_gr1{flex-grow:1;}
.flx_side{justify-content:space-between;}
.flx_right{justify-content:flex-end;}
.flx_bottom{align-items: flex-end;}

.fc_white{color:#eee;}
.fc_red{color:#f00;}