#personal table {
    border:1px;
    width:100%;
}
#personal td{
    height:20px;
}
#personal th{
    background-color:#DDD;
}
#personal th:nth-child(1){
    background-color:#F88;
}
#personal td:nth-child(1) {
    background-color: #FCC;
}
#personal th:nth-child(7){
    background-color:#88F;
}
#personal td:nth-child(7) {
    background-color: #CCF;
}
#personal td .coming{
    background-color: #e9e38d;
    font-weight:normal;
    width: 84%;
    height: 82%;
    margin: 0 auto;
    border: 1px solid #dbd576;
    border-radius: 4px; 
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
#personal td div{
    padding:0;
}
#date_change_value::placeholder,
#date_change_week::placeholder{
    color:black;
}
/* カレンダー全体の設定 */
.calendar {
    border-collapse: collapse;
    table-layout: fixed;
    width:100%;
}

.calendar th,
.calendar td {
    border: 1px solid #BBB;
    text-align: center;
    width:calc(100%/7);
    padding: 0;
    color: #666;
}
.calendar td div{
    padding: 0;
    text-align: center;
}
.calendar th{
    background-color: lightgray;
}
.calendar td{
    height: 45px;
}
#nowYear{
    display:none;
}
.monthSelect{
    color: #666666;
    text-shadow: 0 1px 0 #ffffff;
    float: right;
    font-size: 14px;
    font-weight: bold;
    padding: 12px;
    line-height: 12px;
    margin: 0;
}
.allow{
    padding: 3px 5px;
    /* width: 12px; */
    border-radius: 50%; 
}
.clickable:hover{
    background-color:#b9b9b9;
}
#leftAllow:before{
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px ;
    border-right: solid 2px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(225deg);
    position: absolute;
    right: 52px;
    top: 18px;
}
#rightAllow::before{
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px ;
    border-right: solid 2px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right:26px;
    top: 18px;
}
td .coming{
    font-size: 16px;
    font-weight: bold;
}
td .people{
    height: 45px;
    line-height: 45px;
}
td .date {
    height: 20px;
    border-bottom:dotted 1px #CCC;
}
td .noDate{
    background-color: #efefef;
}
/* 日曜日 */
.calendar th:nth-child(1),
.calendar td:nth-child(1) {
    background-color: #f8dcdc;
}
.calendar td:nth-child(1) .onDate{
    background-color: #f8dcdc;
}

/* 土曜日 */
.calendar th:nth-child(7),
.calendar td:nth-child(7) {
    background-color: #d9d9f8;
}
.calendar td:nth-child(7)  .onDate{
    background-color: #d9d9f8;
}

/*ツールチップ*/
.calendar .tooltip-inner{
    background-color:#88F;
    font-size:17px;
    max-width:250px;
    width:250px;
}
.calendar .tooltip-inner p{
    margin: auto;
    background-color:#88F;
    border-radius:6px;
    padding:5px;
}
.calendar .tooltip.top .tooltip-arrow{
    bottom: -9px;
    left: 50%;
    margin-left: -7px;
    border-top-color: #88F;
    border-width: 10px 8px 0;
}
.monthSpan{
    position:absolute;
    top: 12px;
    left: 20px
}
#env-name{
    color: #666666;
    text-shadow: 0 1px 0 #ffffff;
    font-size: 12px;
    font-weight: bold;
    line-height: 12px;
    margin: 10px 20px 0 0;
}

.sort-arrow {
    display: inline-block;
    background-size: contain;   
    width: 16px;
    height: 16px;
    margin-left: 8px;
}
.sort:hover .sort-arrow{
    opacity: 0.6;
}
.sort:hover {
    color:#CDCDCD;
    cursor: pointer;
}