/* >> m-calendar_side CSS
----------------------------------------------------*/
.m-calendar_side{margin: 2em 0;}
.calendar-title{font-weight: bold; height: 44px; font-size: 1.4em; color: #626262; text-align: center; /*margin-bottom: 0.5em;*/ padding: 0 20px;}
.calendar-title a{color: #626262;}
.cal-btn-left { width: 44px; height: 44px; cursor: pointer; float: left;}
.cal-btn-right { width: 44px; height: 44px; cursor: pointer; float: right;}

.calendar-body{width: 100%; max-width: 272px; margin: 0 auto;}

.day{float: left; width: 36px; background: #f5f7f3; text-align: center; border-radius: 4px; border: 1px solid #8a8a8a; font-size: 1.5em; font-weight: bold; margin-right: 3px; padding: 9px 0; margin-bottom: 6px;}
.day.blank{background-color: #fff; border: 1px solid #ddd;}
.day.nth7{margin-right: 0;}
a.day{color: #fff; background-color: #34495e; border-color: #34495e;}

/* >> TAB & PC
--------------------------------------------*/
@media only screen and (min-width: 520px){

    .calendar-body{max-width: 298px;}
    
    .day{margin-right: 3px; width: 40px;}

}

/* >> PC
--------------------------------------------*/
@media only screen and (min-width: 960px){
    
    .calendar-body{max-width: none; padding: 6px 20px 0;}
    .day{margin-right: 6px; width: 44px;}
}

@media only screen and (min-width: 1000px){}

@media only screen and (min-width: 1100px){}