@media screen and (min-width: 781px){
.my-calendar-nav ul{
width: 100%;
height: auto;
padding: 20px 0;
box-sizing: border-box;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.my-calendar-nav a{
font-size: 100%;
color: #000000;
}
.my-calendar-prev{
padding: 0 20px;
box-sizing: border-box;
}
.my-calendar-next{
padding: 0 20px;
box-sizing: border-box;
}

caption.heading.my-calendar-month{
font-size: 140%;
margin-bottom: 20px;
text-align: center;
}

table.my-calendar-table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
table-layout: fixed;
margin-top: -40px;
margin-bottom: 20px;
padding: 0;
box-sizing: border-box;
}
.my-calendar-table th{
background: #eeeeee;
border: 1px solid #cccccc;
vertical-align: middle;
text-align: center;
margin-top: 20px;
font-size: 100%;
color: #000000;
padding: 10px;
box-sizing: border-box;
}
.my-calendar-table td{
height: 70px;
border: 1px solid #cccccc;
vertical-align: middle;
text-align: center;
color: #000000;
line-height: 2.2;
padding: 15px 10px;
box-sizing: border-box;
}
abbr{
text-decoration: none;
}
.mc-main th.sun{
background-color:#ffcccc;
}
.mc-main th.sat{
background-color:#EAF4FF;
}

.mc-main .calendar-event .details, .mc-main .calendar-events {
position: absolute;
border: 1px solid #cccccc;
background: #ffffff;
font-size: 90%;
left: 50%;
width: 500px;
padding: 20px;
z-index: 3;
text-align: left;
}

.mc-main .details .close {
float: right;
width: 16px !important;
padding: 5px;
}

.mc-main.mini .details .close {
position: absolute;
top: 8px;
right: 8px;
}
}

@media screen and (max-width: 780px){
.my-calendar-nav ul{
width: 100%;
height: auto;
padding: 20px 0;
box-sizing: border-box;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.my-calendar-nav a{
font-size: 100%;
color: #000000;
}
.my-calendar-prev{
padding: 0 20px;
box-sizing: border-box;
}
.my-calendar-next{
padding: 0 20px;
box-sizing: border-box;
}

caption.heading.my-calendar-month{
font-size: 140%;
margin-bottom: 20px;
text-align: center;
}

table.my-calendar-table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
table-layout: fixed;
margin-top: -40px;
margin-bottom: 20px;
padding: 0;
box-sizing: border-box;
}
.my-calendar-table th{
background: #eeeeee;
border: 1px solid #cccccc;
vertical-align: middle;
text-align: center;
margin-top: 20px;
font-size: 100%;
color: #000000;
padding: 10px;
box-sizing: border-box;
}
.my-calendar-table td{
height: 70px;
border: 1px solid #cccccc;
vertical-align: middle;
text-align: center;
color: #000000;
line-height: 2.2;
padding: 15px 10px;
box-sizing: border-box;
}
abbr{
text-decoration: none;
}
.mc-main th.sun{
background-color:#ffcccc;
}
.mc-main th.sat{
background-color:#EAF4FF;
}

.mc-main .calendar-event .details, .mc-main .calendar-events {
position: absolute;
border: 1px solid #cccccc;
background: #ffffff;
font-size: 90%;
left: 10%;
width: 300px;
padding: 20px;
z-index: 3;
text-align: left;
}

.mc-main .details .close {
float: right;
width: 16px !important;
padding: 5px;
}

.mc-main.mini .details .close {
position: absolute;
top: 8px;
right: 8px;
}
}

@media screen and (max-width: 780px){
.my-calendar-nav ul{
width: 100%;
height: auto;
padding: 20px 0;
box-sizing: border-box;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.my-calendar-nav a{
font-size: 100%;
color: #000000;
}
.my-calendar-prev{
padding: 0 20px;
box-sizing: border-box;
}
.my-calendar-next{
padding: 0 20px;
box-sizing: border-box;
}

caption.heading.my-calendar-month{
font-size: 140%;
margin-bottom: 20px;
text-align: center;
}

table.my-calendar-table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
table-layout: fixed;
margin-top: -40px;
margin-bottom: 20px;
padding: 0;
box-sizing: border-box;
}
.my-calendar-table th{
background: #eeeeee;
border: 1px solid #cccccc;
vertical-align: middle;
text-align: center;
margin-top: 20px;
font-size: 100%;
color: #000000;
padding: 10px;
box-sizing: border-box;
}
.my-calendar-table td{
height: 70px;
border: 1px solid #cccccc;
vertical-align: middle;
text-align: center;
color: #000000;
line-height: 2.2;
padding: 10px;
box-sizing: border-box;
}
abbr{
text-decoration: none;
}
.mc-main th.sun{
background-color:#ffcccc;
}
.mc-main th.sat{
background-color:#EAF4FF;
}

.mc-main .calendar-event .details, .mc-main .calendar-events {
position: absolute;
border: 1px solid #cccccc;
background: #ffffff;
font-size: 90%;
left: 10%;
width: 300px;
padding: 20px;
z-index: 3;
text-align: left;
}

.mc-main .details .close {
float: right;
width: 16px !important;
padding: 5px;
}

.mc-main.mini .details .close {
position: absolute;
top: 8px;
right: 8px;
}
}

@media screen and (max-width: 780px){
.my-calendar-nav ul{
width: 100%;
height: auto;
padding: 20px 0;
box-sizing: border-box;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.my-calendar-nav a{
font-size: 100%;
color: #000000;
}
.my-calendar-prev{
padding: 0 20px;
box-sizing: border-box;
}
.my-calendar-next{
padding: 0 20px;
box-sizing: border-box;
}

caption.heading.my-calendar-month{
font-size: 140%;
margin-bottom: 20px;
text-align: center;
}

table.my-calendar-table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
table-layout: fixed;
margin-top: -40px;
margin-bottom: 20px;
padding: 0;
box-sizing: border-box;
}
.my-calendar-table th{
background: #eeeeee;
border: 1px solid #cccccc;
vertical-align: middle;
text-align: center;
margin-top: 20px;
font-size: 100%;
color: #000000;
padding: 10px;
box-sizing: border-box;
}
.my-calendar-table td{
height: 70px;
border: 1px solid #cccccc;
vertical-align: middle;
text-align: center;
color: #000000;
line-height: 2.2;
padding: 15px 10px;
box-sizing: border-box;
}
abbr{
text-decoration: none;
}
.mc-main th.sun{
background-color:#ffcccc;
}
.mc-main th.sat{
background-color:#EAF4FF;
}

.mc-main .calendar-event .details, .mc-main .calendar-events {
position: absolute;
border: 1px solid #cccccc;
background: #ffffff;
font-size: 90%;
left: 10%;
width: 300px;
padding: 20px;
z-index: 3;
text-align: left;
}

.mc-main .details .close {
float: right;
width: 16px !important;
padding: 5px;
}

.mc-main.mini .details .close {
position: absolute;
top: 8px;
right: 8px;
}
}