div.wrap {
    width:100%;
}
#calendar_block {
    display:flex;
    flex-wrap:wrap;
    width:100%;
}

table.hcal_table {
    border-collapse:collapse;
    border:1px solid #aaa;
    float:left;
    background:#fff;
    margin:10px;
}
#hcal_part table.hcal_table {
    width:12em;
}
table.hcal_table caption {
    text-align:center;
}
table.hcal_table tr th,
table.hcal_table tr td {
    text-align:center;
    border:1px solid #aaa;
    width:2em;
    height:2em;
    padding:0;
    vertical-align:middle;
    position:relative;
}
table.hcal_table tr td.daystate_selectable:not(.before_today) {
    cursor:pointer;
}
table.hcal_table tr td.selected_date:after {
    content:" ";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    border:2px solid red;
}
table.hcal_table th span,
table.hcal_table td span {
    position:relative;
}
.hcal_admin table.hcal_table th span,
.hcal_admin table.hcal_table td span {
    cursor:pointer;
}
.hcal_admin table.hcal_table th.before_today span,
.hcal_admin table.hcal_table td.before_today span {
    cursor:default;
}

table.hcal_table .not_in_month span {
    visibility:hidden;
}
table.hcal_table .before_today {
    opacity:0.5;
}
table.hcal_table .before_today span {
    color:#aaa;
    cursor:default;
}
.day_state {
    display:block;
}
.day_state:before {
    content:'a';
    position:absolute;
    width:100%;
    left:0;
}

.hcal_legend div {
    display:flex;
    flex-wrap:wrap;
    margin:0 2em;
    flex-direction: column;
}
.hcal_legend div p {
    margin-right:1em;
    font-size:0.9em;
    display: flex;
    align-items: center;
}
.hcal_legend div.hcal_legend_type span {
    display:inline-block;
    width:1em;
}