.mini-cal{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 10px;
overflow: hidden;
padding-bottom: 1.2em;
background: #fff;
color: #4c4c4c;
margin-bottom: 40px;
box-shadow: 0px 14px 80px rgb(34 35 58 / 20%);
}
#calTitle{
background-color: #E377A7;
display: flex;
color: #fff;
justify-content: space-between;
-ms-align-items: center;
align-items: center;
font-size: 2em;
text-align: center;
padding: 0.4em 1em;
}
#calTitle button{
outline: none;
display: block;
border: 0.1em solid #ddd;
border: none;
padding: 2px 12px;
border-radius: 50%;
background-color: transparent;
}
#calTitle button svg{
width: 30px;
height: 30px;
}
#calTitle button:hover{
background: rgba(255,255,255,0.1);
}
#calThead, #calTbody{
display: flex;
flex-wrap: wrap;
padding: 0.1em;
}
#calThead{
color: #cdcdcd;
margin: 1.4rem 0px;
align-items: center;
text-align: center;
font-size: 0.88em;
}
#calThead > div, #calTbody .a-date{
box-sizing: border-box;
flex: 1;
min-width: calc(100% / 7);
max-width: calc(100% / 7);
width: calc(100% / 7);
text-align: center;
padding: 0;
}
#calThead > div{
font-size: 1.1em;
padding: 0.2em 0.2em;
}
#calTbody{
color: #ddd;
}
#calTbody .a-date > span{
display: block;
font-size: 1em;
}
#calTbody .a-date{
cursor: default;
padding: 0;
position: relative;
background-color: transparent;
color: #4c4c4c;
padding: 1em;
border: 0.1em solid transparent;
outline: none;
font-size: 0.9em;
}
#calTbody .a-date.blurred{
opacity: 0.5;
pointer-events: none;
}
#calTbody .a-date.event:before{
content: '';
position: absolute;
top: 4px;
right: 0;
left: 0;
margin: auto;
background-color: #e377a7;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
}
#calTbody .a-date.current{
border-color: #fcc8df;
outline: none;
outline: 0;
border-radius: 10px;
}
#calTbody .a-date.focused,
#calTbody .a-date:active{
background: #e7e7e7;
border-radius: 10px;
}
#calTbody .a-date.current.event.focused{
background-color: #e377a7;
color: #fff;
border-radius: 10px;
}
#calTbody .a-date.current.event.focused:before {
background-color: #fff;
}
#calTbody .a-date.event:before {
content: '';
position: absolute;
top: 4px;
right: 0;
left: 0;
margin: auto;
background-color: #e377a7;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
}
#calTFooter{
display: flex;
justify-content: space-between;
-ms-align-items: center;
align-items: center;
font-size: 1.1em;
padding: 0 1em;
margin-top: 0.5em;
}
#calTFooter #calLink{
font-size: 0.8em;
display: inline-block;
padding: 0.6em 0.8em;
flex-shrink: 0;
text-decoration: none;
color: #e377a7;
}
#calTFooter #calLink:hover{
background-color: #ffedf5;
}
#calTFooter #eventTitle{
margin: 0;
margin-right: 0.1em;
font-weight: normal;
font-size: 0.95em;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}