.cld-main {width: 100%;max-width: 800px;}
.cld-main a{ color: #3f347d;}
  .cld-datetime{ position: relative; width: 66%; min-width: 100px; max-width: 300px; margin: auto; overflow: hidden; }
  .cld-datetime .today{ position: relative; float: left; width: calc(100% - 40px); margin: auto;text-align: center; }
  .cld-nav{ position: relative; width: 20px; height: 20px; margin-top: 2px; }
  .cld-nav:hover{cursor: pointer; }
  .cld-nav:hover svg{fill: #666;}
  .cld-rwd{float: left; }
  .cld-fwd{ float: right;  }
.cld-labels, .cld-days{ padding-left: 0;}
  .cld-label, .cld-day{ box-sizing: border-box;display: inline-block; width: 14.28%;text-align: center;  }
  .cld-day{ display: block; float: left; position: relative; margin: 0; padding: 5px; height: 106px;
     border: 1px solid #7780a7; overflow-y: auto; }
  .cld-day.clickable:hover{ cursor: pointer; }
  .cld-day.today{ border: 1px solid #9dff00;}
  .cld-day.disableDay{ opacity: 0.5; }
  .cld-day.nextMonth, .cld-day.prevMonth{ opacity: 0.33; }
    .cld-number{ margin: 0;text-align: left;    }
      .cld-title{font-size: 10px;display: block;margin: 0;font-weight: normal; }
      .cld-day:hover{background: #ac9378; }
      .cld-number.eventday{font-weight: bold;  }
      .cld-number.eventday:hover{ background: #a96f5b; }
      .today .cld-number.eventday:hover{ background: #b823ea; }

 @media (max-width: 600px) { 
        .cld-day{ height: 100px !important;}
        #calendar { margin-top: 2em; }
}