/* フィルター */
.filterContainer {
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding: 16px 8px;
    align-items: center;
}

.filterContainer > div {
    display: inline-block;
    margin: 0px 4px;
}

.filterContainer > div > button {
    margin: 0px 4px;
}

/* カレンダー */
table.week {
    width: 100%;
    border-collapse:  collapse;
}

.weekContainer {
    overflow: scroll;
    width: calc(100vw - 1rem);
    height: 80vh;
}


table.week thead td {
    /* 縦スクロール時に固定する */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* tbody内のセルより手前に表示する */
    z-index: 1;
}

table.week th, table.week td {
    border: solid 1px;
    border-color: silver;
    vertical-align: top;
}

table.week thead tr td.sat {
    background-color: rgb(216, 233, 251);
}

table.week thead tr td.sun {
    background-color: rgb(251, 226, 235);
}

table.week tbody tr td.sat {
    background-color: rgb(248, 251, 255);
}

table.week tbody tr td.sun {
    background-color: rgb(255, 246, 249);
}

table.week thead tr td {
    text-align: center;
    background-color: #eee;
    vertical-align: top;
}

table.week tr td {
    width: 13%;
}

table.week tr td:nth-child(1) {
    width: 100px;
    text-align: center;
}

.eventContainer {
    padding:4px;
    margin: 4px;
    background-color: #f8f8f8;
}

.eventTimeRange {
    padding:0px;
    margin: 0px;
    font-size: 80%;
}
.eventSubJect {
    padding:0px;
    margin: 0px;
    font-size: 90%;
}

/* 終日 */
.allDay {
    background-color: rgb(255, 238, 243) ;
}

.allDay > .eventSubJect::before {
    background-color: rgb(255, 57, 116);
    content:"終日";
    border-radius: 5px;
    padding:2px 3px;
    color: #fff;
    margin-right: 4px;
}

/* 会議 */
.meeting {
    background-color: rgb(230, 246, 236) ;
}

.meeting > .eventSubJect::before {
    background-color: rgb(43, 118, 72) ;
    content:"会議";
    border-radius: 5px;
    padding:2px 3px;
    color: #fff;
    margin-right: 4px;
}

/* テレワーク */
.telwork {
    background-color: rgb(254, 241, 221) ;
}

.telwork > .eventSubJect::before {
    background-color: rgb(233, 127, 8) ;
    content:"お家";
    border-radius: 5px;
    padding:2px 3px;
    color: #fff;
    margin-right: 4px;
}

/* 休み（早退・遅刻など） */
.holiday {
    background-color: rgb(255, 230, 230) ;
}

.holiday > .eventSubJect::before {
    background-color: rgb(238, 48, 56) ;
    content:"不在";
    border-radius: 5px;
    padding:2px 3px;
    color: #fff;
    margin-right: 4px;
}

/* 社外 */
.outing {
    background-color: rgb(255, 238, 242) ;
}

.outing > .eventSubJect::before {
    background-color: rgb(238, 145, 165) ;
    content:"社外";
    border-radius: 5px;
    padding:2px 3px;
    color: #fff;
    margin-right: 4px;
}

/* 作業 */
.working {
    background-color: rgb(248, 244, 238) ;
}

.working > .eventSubJect::before {
    background-color: rgb(182, 152, 121) ;
    content:"作業";
    border-radius: 5px;
    padding:2px 3px;
    color: #fff;
    margin-right: 4px;
}

/* 来訪 */
.visit {
    background-color: rgb(237, 251, 253) ;
}

.visit > .eventSubJect::before {
    background-color: rgb(93, 172, 230) ;
    content:"来訪";
    border-radius: 5px;
    padding:2px 3px;
    color: #fff;
    margin-right: 4px;
}

/* 往訪 */
.going {
    background-color: rgb(255, 238, 243) ;
}

.going > .eventSubJect::before {
    background-color: rgb(238, 145, 165) ;
    content:"往訪";
    border-radius: 5px;
    padding:2px 3px;
    color: #fff;
    margin-right: 4px;
}