.cld-main{
  width: 360px;
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
	cursor: default;
	-webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}
.cld-main a{
  color: #0080FF;
}
.cld-main svg{
  fill: #0080FF;
}
  .cld-datetime{
		display: flex;
    position: relative;
		padding: 6px 0;
    width: 100%;
    min-width: 100px;
    margin: auto;
		font-weight: 600;
		text-transform: uppercase;
		border-top: 1px solid #282828;
		border-left: 1px solid #282828;
		border-right: 1px solid #282828;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
    overflow: hidden;
  }
	
  .cld-datetime .today{
    position: relative;
    width: calc(100% - 40px);
    margin: auto;
    text-align: center;
  }
	
  .cld-nav {
    position: relative;
    height: 18px;
		margin: 2px 15px 0 15px;
  }
	
  .cld-nav:hover { cursor: pointer; }
  .cld-nav svg { fill: #484848; }
  .cld-nav:hover svg { fill: #005EFF; }
	
.cld-labels {
	background-color: #484848;
	color: white;
	padding: 6px 0;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
		
.cld-days{
	display: flex;
	flex-wrap: wrap;
	margin: 10px 0 0 0;
  padding-left: 0;
}
  .cld-label {
    box-sizing: border-box;
    display: inline-block;
    width: calc(14.28%);
		font-weight: bold;
    text-align: center;
  }
  .cld-day {
    display: inline-block;
    margin: 1px;
		box-sizing: border-box;
		width: calc(14.28% - 2px);
		font-weight: bold;
    text-align: center;
		border-radius: 5px;
		background: #f5f5f5;
		color: #686868;
  }
	
  .cld-day.today .cld-number {
		border-color: #686868;
		
    background: #e0e0e0;
    color: #484848;
  }
  .cld-day.disableDay{
    opacity: 0.5;
  }
  .cld-day.nextMonth, .cld-day.prevMonth{
    opacity: 0.15;
  }
    .cld-number{
      position: relative;
      margin: 0;
      padding: 10px;
			border: 2px solid transparent;
			border-radius: 5px;
    }
      .cld-title{
        position: absolute;
        z-index: 5;
        display: none;
        top: 44px;
        left: 0;
        padding: 5px 10px;
        background: #fff;
        white-space: nowrap;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 12px;
      }
      .cld-number:hover .cld-title{
        display: block;
      }
      .cld-title::before{
        content: '';
        position: absolute;
        top: -7.5px; left: 14px;
        width: 0;
        height: 0;
        border-left: 7.5px solid transparent;
        border-right: 7.5px solid transparent;

        border-bottom: 7.5px solid #282828;
      }
      .cld-number.eventday{
        font-weight: bold;
        color: #02b8f6;
				border-color: #02b8f6;
      }
      .cld-number.eventday:hover{
        cursor: pointer;
        background: #eee;
      }
      .today .cld-number.eventday:hover{
        background: #005EFF;
      }