// GLOBAL .fichecenter { max-width: 100%; width: 100%; margin: 0 auto; } .fichecenter h2 { margin: 0; padding: 25px 0; font-size: 22px; border-bottom: 1px solid #ebebeb; color: #666666; } // CALENDAR .calendar { display: flex; flex-flow: column; } .calendar .header .month-year { font-size: 20px; font-weight: bold; color: #636e73; padding: 20px 0; } .calendar .days { display: flex; flex-flow: wrap; } .calendar .days .day_name { width: calc(100% / 7); border-right: 1px solid #2c7aca; padding: 10px; text-transform: uppercase; font-size: 12px; font-weight: bold; color: #818589; color: #fff; background-color: #448cd6; width: 11.93%; width: 150px; } .calendar .days .day_name:nth-child(7) { border: none; } .calendar .days .day_num { display: flex; flex-flow: column; width: calc(100% / 7); border-right: 1px solid #e6e9ea; border-bottom: 1px solid #e6e9ea; padding: 15px; padding: 10px; font-weight: bold; color: #7c878d; cursor: pointer; min-height: 100px; min-height: 50px; width: 11.91%; width: 150px; } .calendar .days .day_num .event { font-size: 0.7em!important; } .calendar .days .day_num .event span { font-size: 1em!important; } .calendar .days .day_num .event .n2f.category-icon { font-size: 1.3em; } .calendar .days .day_num span { display: inline-flex; width: 140px; font-size: 14px; } .calendar .days .day_num .event { margin-top: 10px; font-weight: 500; font-size: 14px; padding: 3px 6px; margin:0 0 8px 0; border-radius: 4px; background-color: #f7c30d; color: #fff; word-wrap: break-word; padding: 0px; } .calendar .days .day_num .event span { width: 60px; width: calc(25%); width: calc(40%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calendar .days .day_num .event.green { background-color: #51ce57; } .calendar .days .day_num .event.blue { background-color: #518fce; } .calendar .days .day_num .event.red { background-color: #ce5151; } .calendar .days .day_num:nth-child(7n+1) { border-left: 1px solid #e6e9ea; } .calendar .days .day_num:hover { background-color: #fdfdfd; } .calendar .days .day_num.ignore { background-color: #fdfdfd; color: #ced2d4; cursor: inherit; } .calendar .days .day_num.selected { background-color: #f1f2f3; cursor: inherit; }