.period-navigator {
    /* background: white; */
    padding: 15px 15px;
    /* text-align: center; */
    position: relative;
}

li.event {padding: 5px 5px;/* padding-bottom: 10px; */font-size: .9rem;line-height: 20px;list-style: none;text-shadow: 1px 1px 70px;}
li.event:first-child{color: #009688;color: #008c7f;}
li.event:nth-child(2){color: #8BC34A;color: #ab1d23;}
li.event:nth-child(3){color: #ced244;color: #131b43;}

.days {
    /* border: 1px solid lightgrey; */
    display:flex;
    flex-wrap:wrap;
    box-shadow: 0px -1px 2px #ccc;
}

.day-name, .day{
    /* padding: 3px; */
    /* border: 1px solid silver; */
    /* margin-left: 1px; */
    width: calc(100%/7);
    /* text-align:center; */
    display: inline-block;
}
.day-name {
    text-transform: capitalize;
    background: rgba(0, 206, 209, 0.04);
    padding: 10px 5px;
}
.day {
    border: 1px dotted silver;
    border-color: #795548;
    /* padding: 15px 15px; */
    /* text-align: left; */
    /* height: 100px; */
}
.day.disabled {
    /* border: 1px dotted silver; */
    /* color:silver; */
}
.day.selected {
    background: #8BC34A;
    color: white;
}
.day.selected:hover {
    background: #E0E0E0;
}
.day:hover {
    background: #E3F2FD;
}

.day-number{display:block;font-size: 1rem;background: #f1f5f7;font-weight: bold;padding: 3px;color: #888d90;}
.cur-date {
    background: #e2efe2;
    color: red;
}
.cur-date li.event:nth-child(2), .day:hover li.event:nth-child(2){
    color: #698647;
}
.cur-date li.event:nth-child(3), .day:hover li.event:nth-child(3){
    color: #9a9c51;
    color: #131b43;
}
span.event-count {
    background: pink;
    padding: 1px 4px;
    font-size: .7rem;
    border-radius: 3px;
    font-weight: bold;
    color: red;
    line-height: 15px;
    /* display: block; */
    float: right;
}

span.event-date {
    /* background: lime; */
    padding: 3px 5px;
}

span.event-name {
    /* background: yellowgreen; */
    border-left: 3px solid #2196F3;
    padding: 3px 5px;
}

ul.dayly-events {
    /* border: 1px solid silver; */
    padding: 10px;
    /* box-shadow: inset 0px 2px 11px -6px black; */
}

ul.events {
    padding: 2px;
    margin: 0;
}

.period-navigator {
    /* background: white; */
    padding: 15px 15px;
    /* text-align: center; */
    position: relative;
}

span.period-value {
    width: 8rem;
    display: inline-block;
    text-align: center;
}