#header{font-size:16px}
#header h1.logo{margin:25px 15px 0 15px;font-weight:normal;color:#000}
#header h1.logo a{color:inherit;text-decoration:none}
#header h1.logo img{width:300px;max-width:100%}
#header h1.logo.index .slogan{display:none}

#body{font-size:16px;position:relative}
#body .card{padding:10px 15px;margin:15px;background:#34335f;color:#fff;line-height:1.7}
#body .card.black{background:#333}
#body .card.white{background:#eee;color:#333}
#body .card.red{background:#ea212d}
#body .card.green{background:#81c04a}
#body .card.purple{background:#cd1d8b}
#body .card p{margin:10px 0}
#body .card h3{font-size:20px;margin:10px 0;position:relative}
#body .card h3::before{background:#fff;content:" ";width:10px;height:3px;position:absolute;top:14px;left:-15px}
#body .card.white h3::before{background:#81c04a}
#body .card p{position:relative}
#body .card p:first-child::before{background:#fff;content:" ";width:10px;height:3px;position:absolute;top:12px;left:-15px}

#body .gap{background:url('/images/gap.png') #ddd no-repeat center center;background-size:cover;margin:0 15px}

#body .section_left{position:absolute;top:0;left:15px;width:213px;background:url('/images/og.jpg') #81c04a no-repeat top center;background-size:cover}
#body .section_left .slogan{position:absolute;bottom:30px;left:15px;font-size:30px;color:#fff;line-height:1.2}
#body .section_right{margin-left:228px}

#body .admin_form{max-width:400px;margin:0 auto 50px auto}

.btnArea{margin:15px 10px;text-align:right}
.btn{cursor:pointer;padding:10px 13px;font-size:18px;text-decoration:none;text-align:center;display:inline-block;color:#fff !important;background:#999;margin:10px;border:none;line-height:1.3;font-weight:bold}
.btn.black{background:#333}
.btn.white{background:#eee;color:#333 !important}
.btn.red{background:#ea212d}
.btn.green{background:#81c04a}
.btn.purple{background:#cd1d8b}
.btn.big{display:block;width:calc(100% - 10px);padding:15px 0}
.btnArea .btn{margin:0 5px}
.btnArea form{display:inline}

.form_description{color:#999;margin:15px;text-align:right;font-size:14px}
.form_description .required{display:inline-block;background:#34335f;border-radius:20px;width:10px;height:10px;margin:0 5px 0 10px}
label .required{display:inline-block;background:#34335f;border-radius:20px;width:10px;height:10px;margin-left:-1px}

.input_wrap{padding:10px 10px 10px 100px;background:#eee;border:1px solid #ddd;position:relative;margin:15px;z-index:1;line-height:1}
.input_wrap input,
.input_wrap textarea{padding:10px 10px 10px 100px;margin:-10px -10px -10px -100px;background:transparent;border:none;width:100%;font:inherit;font-size:16px;height:24px;line-height:24px}
.input_wrap textarea{line-height:1.5;min-height:300px;resize:vertical}
.input_wrap label{position:absolute;top:0;left:0;margin:14px 10px;font-size:16px;color:#777;border-right:1px solid #999;width:80px;white-space:nowrap}

.select_wrap{padding:10px 10px 10px 100px;background:#eee;border:1px solid #ddd;position:relative;margin:15px;z-index:1;line-height:1}
.select_wrap.clicked{z-index:2}
.select_wrap input{padding:13px 10px 13px 100px;margin:-10px -10px -10px -100px;background:transparent;border:none;width:100%;font:inherit;font-size:16px;height:18px;line-height:18px}
.select_wrap label{position:absolute;top:0;left:0;margin:14px 10px;font-size:16px;color:#777;border-right:1px solid #999;width:80px;white-space:nowrap;z-index:10}
.select_wrap .dropdown{position:absolute;top:44px;left:-1px;background:#ddd;width:100%;padding:10px 0;border:1px solid #ddd;display:none}
.select_wrap .dropdown a{display:block;padding:5px 10px 5px 100px;color:#777;text-decoration:none;font-size:16px}
.select_wrap .dropdown a.active{background:#ccc;color:#34335f;font-weight:bold}

.image_wrap{background:#eee;border:1px solid #ddd;position:relative;margin:15px;z-index:1;line-height:1}
.image_wrap .image{margin:10px}
.image_wrap img{width:100%}

.pagination{position:relative;z-index:2;float:right;margin:0 7px}
.pagination li{float:left;font-size:14px}
.pagination li a{display:block;padding:10px;color:#ddd;text-decoration:none}
.pagination li.active a{color:#81c04a;font-weight:bold;text-decoration:underline}

#body .card.table{padding:0}
.table_wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table_wrap table{border-collapse:collapse;width:100%}
.table_wrap table th{background:#ddd;padding:10px;white-space:nowrap}
.table_wrap table td{text-align:center;vertical-align:middle;white-space:nowrap}
.table_wrap table td a{padding:10px;display:block;text-decoration:none;color:#000}
.table_wrap table .unchecked{display:inline-block;background:#81c04a;border-radius:20px;width:10px;height:10px;margin:0 0 0 10px}
.table_wrap table .unchecked.none{background:transparent}
.table_wrap table td.no{width:30px;color:#999}
.table_wrap table td.datetime{width:200px}

#body .card.navigation{padding:0}
.navigation{text-align:right}
.navigation a{background:#bbb;color:#fff;text-decoration:none;display:inline-block;padding:7px 10px}
.navigation a.active{background:#999;font-weight:bold}

.dropzone_wrap{position:relative;margin:15px;font-size:14px;line-height:1.3;z-index:1}
.dropzone_wrap label{position:absolute;top:0;left:0;margin:14px 10px;font-size:16px;color:#777;border-right:1px solid #999;width:80px;white-space:nowrap;z-index:10}
.dropzone_wrap .dropzone{padding:7px 0 0 95px}
.dropzone_wrap .dropzone .dz-message{margin:37px 0}

.statistic{}
.statistic a{color:inherit;text-decoration:none}
.statistic .stat_wrap{margin-top:-10px;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:-15px;padding:10px}
.statistic .cell{background:#fff;display:inline-block;padding:10px;width:100px;height:100px;border-radius:100px;text-align:center;margin:10px 5px}
.statistic .cell h5{color:#999;margin:5px 0 -10px 0}
.statistic .cell .value{color:#81c04a;font-weight:bold;font-size:50px}
.statistic .cell.green{background:#81c04a}
.statistic .cell.green h5{color:#ddd}
.statistic .cell.green .value{color:#fff}

.graph_wrap{display:none;margin-bottom:5px}
.graph_wrap .no_data{color:#999;padding:80px 0;text-align:center}
.graph_wrap .graph{height:200px;position:relative}
.graph_wrap .graph .grap{position:absolute;bottom:0;background:#999;white-space:nowrap}
.graph_wrap .graph .grap .gra{position:absolute;top:-62px}
.graph_wrap .graph .grap .about{color:#999;margin:0 0 0 8px;font-size:14px}
.graph_wrap .graph .grap .count{font-size:20px;font-weight:bold;margin:0 0 0 8px;color:#81c04a}

#footer{padding:15px 0;border-top:1px solid #ddd;margin:15px;font-size:16px}
#footer address{color:#999;font-style:normal;font-size:14px}

@media only screen and (min-width:1200px){
	#body .section_left{width:413px}
	#body .section_right{margin-left:428px}
}

@media only screen and (min-width:1500px){
	#body .section_left{width:513px}
	#body .section_right{margin-left:528px}
	#body .section_right .card p{font-size:18px}
	#body .section_right .btn{font-size:22px;padding:20px 0}
	#body .section_left .slogan{font-size:40px}
}

@media only screen and (min-width:1800px){
	#body .section_left{width:613px}
	#body .section_right{margin-left:628px}
	#body .section_left .slogan{font-size:45px}
}

@media only screen and (min-width:2000px){
	#body .section_left{width:713px}
	#body .section_right{margin-left:728px}
	#body .section_left .slogan{font-size:50px}
}

@media only screen and (min-width:2300px){
	#body .section_left{width:813px}
	#body .section_right{margin-left:828px}
	#body .section_left .slogan{font-size:60px}
}
	
@media only screen and (max-width:600px){
	#header h1.logo.index{margin-top:15px;padding:20px 10px 130px 10px;color:#fff;background:url('/images/og.jpg') no-repeat top center;background-size:cover}
	#header h1.logo.index .slogan{color:#fff;font-size:16px;margin-top:10px;display:inline-block;background:rgba(0,0,0,0.4);padding:10px 3px;border-top:1px solid #ddd}
	#header h1.logo.index .slogan br{display:none}
	#body .section_left{display:none}
	#body .section_right{margin-left:0}
}