html{
    font-size: 16px;
}

body{
    
}

header , footer{
    background-color: #fecdc6;
    min-height: 2em;
}

#container , #container p , #container th , #container td , #container dt , #container dd , #container input , #container select　, #container textarea , #container label ,
.form-control , .btn{
    font-size: 0.875rem;    
}

/*html *{
    font-size: 0.875rem;
}*/

.nav-item{
    background-color: #ccff99;
}
.nav-item a{
    color: #333;
}
.nav-item.sat{
    background-color:#1cc7ff;
}
.nav-item.sun{
    background-color: #ff9999;
}

.nav-item.add{
    background-color:#dc6502;
}
.nav-item.add a{
    color: #fff;
}

.nav-item.current{
    background-color:#ff6666;
}
.nav-item.current a{
    color: #fff;
    font-weight: bold
}

.nav-item a{
    padding: 0.3em 1em;
}

.nav-item:hover{
    background-color: #ffffcc;
    border-color: #666;
}

.nav-item:hover a{
    color:#00599d;
}

.btn{
    padding: 0.2em;
}

.btn-primary {
    background-color: #88c671;
    border-color: #88c671;
}

.btn-primary:hover{
    background-color: #43AC6A;
    border-color: #88c671;
    
}

.page-title{
    border-left: solid 0.625rem #ff6666;
    padding: 0 0.625rem;
    line-height: 1.5em;
}

#container h2{
    font-size: 1.5rem;
    
}

#container h3{
    font-size: 1.125rem;  
    font-weight: bold;
}
#container h4{
    font-size: 1rem;    
}

nav#main-menu li.nav-item{
    background-color: #fecdc6;
}
nav#main-menu li.nav-item a{
    padding: 0.2em 0.5em;
    color:#333;
}

nav#main-menu li.nav-item.current{
    background-color: #ff6666;
}

nav#main-menu li.nav-item.current a{
    color: #fff;
    font-weight: normal;
}

nav#main-menu li.nav-item:hover{
    background-color: #ffffcc;
    color:#00599d;
}


nav#main-menu li.nav-item:hover a{
    color:#00599d;
}


table.schedule{
  position: relative;
  z-index: 30;
    
}

table.schedule thead th {
  /* 縦スクロール時に固定する */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* tbody内のセルより手前に表示する */
  z-index: 20;
  /*background-color: #fff;*/
  margin: 0;
  padding: 0;
  border-bottom:none;
}
table.schedule th:first-child {
  /* 横スクロール時に固定する */
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 30;
}
table.schedule thead tr:first-child th:first-child {
  /* ヘッダー行内の他のセルより手前に表示する */
  z-index: 50;
}  


#container input , #container textarea , #container select{
    padding: 0.2em 0.5em;
    
}

#container .submit input[type=submit] , #container .submit button[type=submit] , #container .submit button[type=button]{    
    padding: 0.5em;
    min-width: 10em;
}

#container .form-group.multicheckbox .form-check{
    display: inline-block;
    padding-left: 0;
}
#container .form-group.multicheckbox .form-check .form-check-input{
    position: relative;
    margin-left: 0;
    padding-right: 1em;
}

#container .form-group.multicheckbox .form-check label{
    padding-right: 0.81em;
    
}

#container #shift-table{
    border-collapse:separate;
    border-spacing: 0;
    border-bottom:solid 1px #666;
}
#container #schedule-table{
    border-collapse:separate;
    border-spacing: 0;
    border-bottom:solid 1px #666;
}

#container #shift-table td , 
#container #shift-table th ,
#container #schedule-table td,
#container #schedule-table th{
    border-right:solid 1px #666;
    border-top:solid 1px #666;
}

#container #schedule-table td{
    border-right:dashed 1px #ccc;
}

#container #schedule-table td:nth-of-type(2n){
    border-right:solid 1px #ccc;
}

#container #schedule-table th,
#container #schedule-table td:nth-of-type(4n){
    border-right:solid 1px #666;
}



#container #shift-table select{
    height: 2em;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#container #shift-table select:hover{
    border:solid 1px #ccc;
}

#container #shift-table tbody th:first-child,
#container #shift-table thead tr:first-child th:first-child{
    border-left:solid 1px #666;
}

#shift-table .default{
    color:#495057;
}
#shift-table .red{
    color:#ff0000;
}

#container #schedule-table tbody th:first-child,
#container #schedule-table thead tr:first-child th:first-child{
    border-left:solid 1px #ccc;
}



.container #schedule-table th:first-child::before{
    content : "" ;
    position : absolute ;
    top : -1px ;
    left : -1px ;
    right : -1px ;
    bottom:-1px;
    width : 100% ;
    height : 100% ;
    border-right : 1px solid #666 ;
    border-left : 1px solid #666 ;
    border-top : 1px solid #666 ;
}

#container #shift-table thead tr:first-child th{
    min-width: 3em;
}

#container #shift-table thead tr:first-child th:first-child{
    min-width: 6em;
}


#container #report-table{
    border-collapse:collapse;
    min-width:43.125rem;
}

#container #report-table th,
#container #report-table td{
    border:solid 1px #ccc;
    
}


#container #report-table td{
    vertical-align: top;
    line-height: 2em;
    padding-top:0.25rem;
}

#container #report-table th{
    font-weight: normal;
    background-color:#4d8f97;
    background-color: #009999;
    color: #fff;
}

#container #report-table td textarea{
    height: 100%;
}

#container #report-table input,
#container #report-table select{
    height: 2em;
}

#container #report-table th.num{
	width:1.5em;
}
#container #report-table td.num{
	text-align:center;
}
#container #report-table th.name{
	width:7em;
}
#container #report-table th.service{
	width:8em;
}
/*#container #report-table th.staff{
	width:8em;
}*/

#container #report-table tr.time-picks th{
	width:3em;
}

#container #report-table input.time-pick{
	padding:0.5em 0.1em;
	text-align:center;
}


#container #report-table th.etc,
#container #report-table td.etc{
	display:none;
}

#container  #report-table th.actions{
    width: 8em;

}

#container #report-table td.staff select{
	padding:0.2em 0.1em;
	
}

/*sm: Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
}
 
/*md: Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}
 
/*lg: Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	#container #report-table th.etc,
	#container #report-table td.etc{
		display:table-cell !important;
	}
	#container  #report-table th.actions{
	    width: 16em;
	}
}
 
/*xl: Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}




.table .inactive{
    background-color: #ccc;
}

#container .form-group.required label:after{
    content: " ※";
    color: #ff6666;
}

#container .submit{
}

#container .submit input[type=submit] , #container .submit button[type=submit] , #container .submit button[type=button]{
    border: 1px solid #dc6502;
    background-color: #fd7e14;
    box-shadow:0px 5px 0px #dc6502;
    font-weight:bold;
    
}



#container a.asc,  
#container a.desc{
    display: inline-block;
}

#container a.asc:after{
    content: "↓";
    font-weight: bold;
    margin-left: 0.5em;
    
}

#container a.desc:after{
    content: "↑";
    font-weight: bold;
    margin-left: 0.5em;
    
}

#container .container.manual h3{
    color: #0071BC;
    font-size: 1.375rem;
}
#container .container.manual h4{
    font-weight: bold;
    color: #666;
}

.container.manual section{
    border-bottom: 1px dashed #ccc;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    
}

.container.manual .caution{
    background-color: #fecdc6;
    padding: 1em;
    border-radius: 0.5rem;
    margin-bottom: 0.875rem;
}
.container.manual .intro{
    background-color: #fff9e1;
    padding: 1em;
    border-radius: 0.5rem;
    margin-bottom: 0.875rem;  
}

.container.manual .caution p:last-child , .container.manual .intro p:last-child{
    margin-bottom: 0;
}

.container.manual p , .container.manual ul , .container.manual ol , .container.manual .caution , .container.manual .caution{
    margin-top: 0;
    margin-bottom: 0.875rem;
    
}

.container.manual section *:last-child{
    margin-bottom: 0;
}



 
/*lg: Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {  }
 
/*xl: Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  }

@media print{
    html{
        font-size: 12px;
    }
    #container{
        max-width:100%;
        margin-left: auto;
        margin-right: auto;
    }

    #container table .actions{
        display: none;
    }

    header , footer , nav, button , .nav , .submit{
        display: none;
    }

    #report-table,
    #shift-table{
        width: 100%;
    }

    #container #report-table th.etc,
    #container #report-table td.etc{
            display:table-cell;
    }


    #shift-table th , #shift-table td{
        font-size: 0.8125rem;
    }
    
    #container #shift-table select{
        font-size: 1.1875rem;
    }
}