body{
		margin:0px;
		padding:0px;
		font-family: 'BrutalType';
		font-weight: normal;
		font-style: normal;
		color:#000000;
		overflow-x: hidden;
}
.header{
		font-size:18px;
		width:100%;
		height:30px;
		padding:10px 0px 10px 0px;
		border-bottom:2px solid #000000;
}
.header .backBtn{
	    display: block;
	    width: 40px;
	    height: 40px;
	    position: absolute;
	    top: 10px;
	    left: 10px;
}
.header .title{
		margin-top:5px;
		text-align: center;
}
.header .menuBtn{
	    display: block;
	    width: 40px;
	    height: 40px;
	    position: absolute;
	    top: 10px;
	    right: 10px;	
}
.header img{
		width:25px;
}
.main{
	 	position: relative;
		width:90%;
		margin:20px auto 20px auto;
}
label {
	    font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #333333;
}
input:-webkit-autofill, textarea:-webkit-autofill {
		background-color: rgb(255, 255, 255);
		background-image: none;
		color: rgb(0, 0, 0);
}
input[type="text"],input[type="email"],input[type="password"],select {
		clear:both;
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		appearance: none;
		height: 45px;
		border: 2px solid #e5e5e5;
		border-radius: 0;
	    background: transparent;
	    margin:10px 0px 10px 0px;
}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,select:focus {
		outline: none;
		border-color: #333333;
}
input[type="text"],input[type="email"],input[type="password"],select {
		font-family: 'BrutalType';
	    display: block;
	    width:100%;
	    background:#FFFFFF;
		font-size:16px;
		padding: 0 16px;
		box-sizing: border-box;
}
input[type="radio"] + label {
	  color: #0f222b;
}
input[type="checkbox"],label {
  cursor: pointer;
}
input[type="checkbox"] + label {
  color: #0f222b;
}
input[type="submit"] {
	   /* button style */
	   display: block;
	   font-family: 'BrutalType';
	   font-size:16px;
	   border: none;
		  width:100%;
		  margin:20px auto 20px auto;
		  background: #000000;
		  padding:15px;
		  color: #ffffff;
		  font-weight: bold;
		  cursor: pointer;
		  box-sizing: border-box;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		  -webkit-appearance: none;
		  -moz-appearance: none;
		  -ms-appearance: none;
		  -o-appearance: none;
		  appearance: none;
}
input[type="submit"]:hover {
	     background: #333333;
}
input[type="submit"]:focus {
		outline: none;
		background: #333333;
}
input[type="button"] {
	   /* button style */
	   display: block;
	   font-family: 'BrutalType';
	   font-size:16px;
	   border: none;
		  width:100%;
		  margin:20px auto 20px auto;
		  background: #000000;
		  padding:15px;
		  color: #ffffff;
		  font-weight: bold;
		  cursor: pointer;
		  box-sizing: border-box;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		  -webkit-appearance: none;
		  -moz-appearance: none;
		  -ms-appearance: none;
		  -o-appearance: none;
		  appearance: none;
}
input[type="button"]:hover {
	     background: #333333;
}
input[type="button"]:focus {
		outline: none;
		background: #333333;
}
select.selectTime{
		width:60px;
		display:inline-flex;
		/*float:left;*/
}
.sub_menu{
		text-align:center;
		padding:10px;
		background:#000000;
		color:#FFFFFF;
}
.sub_menu a{
		color:#666666;
		text-decoration: none;
}
.sub_menu a:hover{
		color:#FFFFFF;
		border-bottom:2px solid #FFFFFF;
}
.sub_menu ul{
		width:50%;
		margin:0px auto 0px auto;
}
.sub_menu li{
		color:#666666;
		display: inline-block;
		width: 20%;
}
.sub_menu li.now a{
		color:#FFFFFF;
		text-decoration: none;
		border-bottom:2px solid #FFFFFF;
}

.main .title{
		font-size:18px;
		color:#000000;
		padding-bottom:10px;
		margin:10px 0px 20px 0px;
		border-bottom:1px solid #DDDDDD;
}
.error{
		margin:40px auto 0px auto;
}
.error .error_icon{
		text-align:center;
}
.error .error_icon img{
		width:100px;
}
.error .error_msg{
		width:350px;
		margin:10px auto 10px auto;
		text-align:center;
		line-height:2em;
		color:#000000;
}
.table{
		width:100%;
}
.table tbody{
		display: table-row-group;
		vertical-align: middle;
		border-color: inherit;
}
.table table{
		width:100%;
		table-layout: fixed;
		word-wrap: break-word;
		background:#FFFFFF;
		margin:0px;
		padding:0px;
}
.table thead{
		background:#FFFFFF;
		margin-bottom:10px;
}
.table th{
		text-align:left;
		font-size:1rem;
		font-weight:bold;
		color:#000000;
		height:30px;
		padding:10px 20px 10px 20px;
		border-bottom:1px solid #000000;
}
.table tr:hover{
		background:#FEFEFE;
}
.table td{
		font-size:1rem;
		height:30px;
		padding:5px 5px 5px 5px;
		border-bottom:1px solid #DDDDDD;
}
.table td img{
		width:20px;
		margin:0px 10px 0px 0px;
}
.table td.error{
		background:#FF0000;
		color:#FFFFFF;
}
.table .operation a{
		color:#81a9db;
		text-decoration: none;
}
.table .operation a:hover{
		color:#81a9db;
		padding-bottom:5px;
		border-bottom:1px solid #DDDDDD;
}

	#shifttable td:hover{
		background:#000000;
		color:#FFFFFF;
	}
	#shifttable td.staffName{
		padding:0px;
	}
	#shifttable .startTime,.endTime,.holiday,th.detail{
		text-align:center;
	}
	#shifttable th.detail{
			width:10%;
			padding:0px;
	}


.ui-widget-content {
		border: 1px solid black;
		background: white;
		color: black;
		margin-top:10px;
		padding:10px;
		display:none;
}
.ui-widget-content a {
	 color: black;
}
.ui-widget-header {
	  border: 1px solid white;
	  background: #211b0d;
	  color: white;
	  text-align:center;
	  font-weight: bold;
}
.ui-widget-header a {
  	  color: white;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
      border: 1px solid #211b0d;
      background: #000000;
      padding:1px;
      font-weight: normal;
      color: #FFFFFF;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
      color: black;
      text-decoration: none;
} 


	.table th.staffID{
			width:10%;
	}
	.table th.staffName{
			width:15%;
	}
	.table th.staffInTime{
			width:15%;
	}
	.table th.staffOutTime{
			width:15%;
	}
	.table th.totalTime{
			width:10%;
	}
	.table th.staffAlarm{
			width:5%;
	}
	

.table_graph{
		width:100%;
}
.table_graph tbody{
		display: table-row-group;
		vertical-align: middle;
		border-color: inherit;
}
.table_graph table{
		width:100%;
		table-layout: fixed;
		border-spacing: 0;
		word-wrap: break-word;
		background:#FFFFFF;
		margin:0px;
		padding:0px;
}


.table_graph thead{
		background:#FFFFFF;
		margin-bottom:10px;
}
.table_graph th{
		text-align:left;
		font-size:1rem;
		font-weight:bold;
		color:#000000;
		height:30px;
		padding:10px 20px 10px 20px;
		border-bottom:1px solid #000000;
}
.table_graph tr:hover{
		background:#FEFEFE;
}
.table_graph td{
		font-size:1rem;
		height:30px;
		padding:5px 20px 5px 20px;
		border-bottom:1px solid #DDDDDD;
}
.table_graph td img{
		width:20px;
		margin:0px 10px 0px 0px;
}
.table_graph td.error{
		background:#FF0000;
		color:#FFFFFF;
}
.table_graph .operation a{
		color:#81a9db;
		text-decoration: none;
}
.table_graph .operation a:hover{
		color:#81a9db;
		padding-bottom:5px;
		border-bottom:1px solid #DDDDDD;
}
	
	.table_graph th.staffID{
			width:10%;
	}
	.table_graph th.staffName{
			width:15%;
	}
	.table_graph th.staffInTime{
			width:15%;
	}
	.table_graph th.min{
			width:2px;
	}
	.table_graph th.detail{
			width:10%;
	}
	#nowTime{
	        font-size:10rem;
	        text-align:center;
	        margin-top:20px;
	}
	.timetable th  { width: 13%; height:100px;}
	.timetable input{
		width:100px;
		height:20px;
	}
    .timetable { 
        display: block; 
        width: 100%; 
        margin: 0 -10px;
    }
    .timetable thead{ 
        display: block; 
        float: left;
        overflow-x:scroll;
    }
    .timetable tbody{ 
        display: block; 
        width: auto; 
        overflow-x: auto; 
        white-space: nowrap;
    }
    .timetable th{ 
        display: block;
        width:auto;
    }
    .timetable tbody tr{ 
        display: inline-block; 
        margin: 0 -3px;
    }
    .timetable td{ 
        display: block;
    }
	
@media screen and (max-width:900px) {
	.sub_menu li{
		width:50%;
	}
	.main{
		width:90%;
		margin:20px auto 20px auto;
	}
	.table th{
		font-size:0.8rem;
	}
}
@media screen and (max-width:700px) {
	.sub_menu li{
		width:50%;
	}
	.main{
		width:90%;
		margin:20px auto 20px auto;
	}
	.table th{
		font-size:0.8rem;
	}
	#shifttable td{
		font-size:0.8rem;
		padding:1px;
	}
	#shifttable th.staffID{
		width:8%;
	}
	#shifttable th{
		padding:0px;
	}

}
@media screen and (max-width:400px) {
	
	.sub_menu li{
		width:50%;
	}
	.main{
		width:90%;
		margin:20px auto 20px auto;
	}
	.table th{
		font-size:0.8rem;
	}
	.table th.staffID{
			width:25%;
	}
	.table td.staffID{
			font-size:0.7rem;
	}
	.table th.staffName{
			width:30%;
	}
	.table td.staffName{
			font-size:0.8rem;
	}
	.table th.staffInTime{
			width:20%;
	}
	.table td.staffInTime{
			font-size:0.8rem;
	}
	.table th.staffOutTime{
			width:20%;
	}
	.table td.staffOutTime{
			font-size:0.8rem;
	}
	#shifttable td{
		font-size:0.5rem;
		padding:1px;
	}
	#shifttable th.staffID{
		width:20%;
	}
	#shifttable th{
		padding:0px;
	}


}
@media print {
 	.main{
	 	width:100%;
 	}
    .table td,th{
	    margin:5px;
	    padding:5px;
    }
}