.content {
    padding:10px 4% 240px 4%;
}
.calendar, .calendarhead {
    overflow:auto;
    display:grid;
    grid-template-columns: repeat(7, minmax(100px, 150px));
    max-width:1000px;
    padding-top:20px;
    margin:0 auto;
}
.calendar .title {
    font-weight:bold;
    text-align:center;
    font-size:18px;
    font-family:MicrobrewOne
}
.calendar.flex .title {
    display:none;
}
.calendar .item {
    padding:10px;
    background-color:#FFF;
    border:10px solid transparent;
    border-image:url(/static/border-hi.png) 200 round;
    min-width:40px;
    min-height:40px;
    aspect-ratio:1;
    position:relative;
    background-position:center;
    background-repeat:no-repeat;
    cursor:pointer;
    scroll-margin-top:95px;
}
.calendar .item .daynum {
    text-shadow: 2px 2px #3d3d3d;
}
.calendar .border:hover .item .daynum {
    text-shadow: 2px 2px #000;
}
.calendar .border {
    margin:8px;
    border-radius:5px;
    border:1.5px solid #3d3d3d;
    box-shadow:#ddd 2px 2px 6px;
    max-width:120px;
    max-height:120px;
}
.calendar.flex .border {
    max-width:750px;
    margin:2px;
}
.calendar .item.empty {
    cursor:auto;
}
.calendar .item.img {
    background-size:contain;
}
.calendar .border:hover {
    border-color:#000;
}
.calendar .border:hover .item .info {
    opacity:1;
}
.calendar .border .item .info a.daynum {
    color:#f5f5f5;
    opacity: 0.96;
}
.calendar .border:hover .item .info a.daynum {
    opacity:1;
    color:#fff !important;
}
.calendar.flex .item.img:hover .info {
    display:inline-block;
}
.calendar .item.empty {
    background:none;
    border:none;
    max-width:120px;
    max-height:120px;
}
.calendar .item .text {
    text-align:center;
    padding:5px;
}
.calendar .item .dayname {
    display:none;
}
.calendar .item .daynum {
    font-family:MicrobrewOne,sans-serif;
    font-size:64px;
}
.calendar .border:hover .item .daynum {
    opacity:1;
}
.calendar .info {
    transform:translate(-50%, -50%);
    position:absolute;
    top:50%;
    left:50%;
}
.calendar .item.today {
    background-color:rgb(246, 249, 202) !important;
}
.calendar .daytitle {
    display:none;
}
.calendar.flex .daytitle {
    display:inline-block;
    text-decoration:underline;
}
.calendar.flex {
    display:block;
    flex-wrap:wrap;
}
.calendar.flex .item {
    flex:1;
    min-width:250px;
    background:none;
    max-width:750px;
    border:none;
    border-bottom:1px solid #FFF;
    min-height:0px;
    aspect-ratio:auto;
    background-color:#FFF;
    background-size:contain;
    background-position-x:right 5px;
    background-repeat:no-repeat;
}
.calendar.flex .sunday {
    margin-bottom:50px;
}
.calendar .item a {
    text-decoration: none;
}
.calendar .item a:hover {
    color: #000 !important;
}
.calendar.flex .item .info {
    display:inline-block;
    min-width:100px;
    position:relative;
    transform:none;
    left:0;
}
.calendar.flex .item .daynum {
    font-size:36px;
}
.calendar.flex .item .text {
    display:inline-block;
}
.calendar.flex .item.empty {
    display:none;
}
.calendar.flex .item .dayname {
    display:inline-block;
    font-size:12px;
    margin-left:5px;
}
.cal-msg {
    padding:0 25px;
    padding-bottom:15px;
    border-top:1px solid #EEE;
    border-bottom:1px solid #EEE;
}
#nav {
    scroll-margin-top:95px;
    padding-left:5px;
    padding-bottom:15px;
}
#nav .breadcrumb {
    padding-left:0px;
}
#nav button {
    margin-left:5px;
}

.box {
    z-index:1000;
    margin:0 auto;
    padding:0;
    position:fixed;
    width:min(90vw, 850px);
    right:calc(50% - min(90vw, 850px) / 2);
    top:calc(15vh - 50px);
    display:none;
    min-height:260px;
    max-height:75vh;
    overflow:auto;
    box-shadow:0 0 4px #888;
    box-shadow:0 0 0 100vmax rgba(0, 0, 0, 0.5);
}
.box #title {
    font-family:MicrobrewOne,sans-serif;
    font-size:64px;
    padding:20px;
    float:left;
    padding-bottom:5px;
}
.box #img {
    width:200px;
    height:200px;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    position:absolute;
    right:0;
    top:15px;
    z-index:-1;
}
.box #content {
    padding:20px;
    font-size:16px;
}
.box #content p {
    /*margin-top:0;*/
    width:calc(100% - 175px);
}
.box #close {
    padding:14px;
    cursor:pointer;
    position:fixed;
    right:calc(50% - min(90vw, 850px) / 2);
    z-index:1;
    opacity:0.7;
    text-shadow:#FFF 0 1px 1px;
    background:#FFF;
    border:2px solid #EEE;
    border-top:none;
}
.box #close:hover {
    background:#FFF;
    opacity:1.0;
}

@media screen and (max-width:720px) {
    .box #content p {
    margin-top:0;
    width:100%;
    }
    .box #img {
    margin:10px;
    position:static;
    margin-left:calc(50% - 100px);
    }
    .box #content {
    padding-bottom:0;
    }
}