.calendar{display:grid;grid-template-columns:repeat(7,1fr)}.month{display:flex;flex-wrap:wrap}#public-upcoming-events-container{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:10px auto;padding:0;width:100%;max-width:1000px}.public-upcoming-events-director{background-color:var(--secondary-background-color);height:200px;padding:0 10px;border-radius:10px;margin:0 5px;align-content:center;font-weight:700;font-size:1.5em}#public-upcoming-events{text-transform:uppercase;width:100%;font-weight:700;padding:0;margin:0;ul{ width:100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } li{ display: inline-flex; flex-direction: column; background-color: #333333; border-radius: 5px; margin: 10px 0; } object{ min-width: 300px; width:100%; max-width: 440px; } .heading{ display:flex; flex-direction: row; padding-top: 10px; } .container{ display: flex; flex-direction: column; padding:0; margin:0; text-align: left; } .month-day{ display: inline-block; padding:7px; margin: 0 5px; font-size: 1.5em; border-radius: 10px; }}@media(max-width:800px){.calendar-container{display:none}}.calendar-container{background:#fff;width:100%;margin-bottom:20px;border-radius:10px;box-shadow:0 15px 40px rgba(0,0,0,.12)}.calendar-container header{display:flex;align-items:center;padding:25px;justify-content:space-between;box-sizing:border-box}header .calendar-navigation{display:flex}header .calendar-navigation span{height:38px;width:38px;margin:0 1px;cursor:pointer;text-align:center;line-height:38px;border-radius:50%;user-select:none;color:#aeabab;font-size:1.9rem}.calendar-navigation span:last-child{margin-right:-10px}header .calendar-navigation span:hover{background:#f2f2f2}header .calendar-current-date{font-weight:500;font-size:1.45rem}.calendar-body{padding:20px}.calendar-body ul{list-style:none;flex-wrap:wrap;display:flex;text-align:center}.calendar-body .calendar-dates{margin-bottom:20px}.calendar-body li{width:calc(100%/7);padding:0;margin:0;min-height:110px;font-size:1.07rem;color:#414141;box-sizing:border-box}.calendar-body .calendar-weekdays li{cursor:default;font-weight:500}.calendar-body .calendar-dates li{position:relative;cursor:pointer}.calendar-dates li.inactive{color:#aaa}.active{border:2px solid #000!important;.calendar-day{ background-color: blue; !important; color: var(--primary-text-color); }}.calendar-date{display:flex;flex-direction:column;color:#fff;font-weight:700;margin:5px}.calendar-event{border-radius:5px;margin:5px}.calendar-day,.calendar-title,.calendar-time{display:inline-block;box-sizing:border-box;width:100%}.calendar-day{margin-left:5px;margin-top:5px;width:40px;border-radius:10px;background:#faebd7;margin-bottom:5px}.calendar-title,.calendar-time{color:#f8f8ff}.calendar-event:hover+.calendar-hover-element-absolute-container{visibility:visible}.calendar-hover-element-absolute-container{visibility:hidden;position:relative;z-index:1;top:-100px}.calendar-hover-element{position:absolute;top:0;right:-325px;background:var(--secondary-background-color);color:var(--primary-text-color);padding:10px;border-radius:10px;width:300px;max-width:90vw;cursor:default;.calendar-hover-title, .calendar-hover-time, .calendar-hover-description{ display: inline-block; width:100%; } .calendar-hover-title{ font-weight: bold; font-size: 1.25em; } .calendar-hover-image-object{ display:inline-block; max-width:100%; img{ width:100%; } }}