.cld-main a{
  color: #0080FF;
}
.cld-main svg{
  fill: #0080FF;
}
.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: #005EFF;
}
.cld-rwd{
  float: left;
}
.cld-fwd{
  float: right;
}
.cld-nav svg:hover{

}
.cld-labels{
    margin-top:20px
}
.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{
  border: 1px solid #eee;
    line-height: 65px;
    position: relative;
}
.cld-day.today .cld-number{
    background: #cbfdcc;
    color: #122043;
    font-weight: bold;
}
.cld-day.disableDay{
  opacity: 0.5;
}
.cld-day.nextMonth, .cld-day.prevMonth{
  opacity: 0.33;
}
.cld-number{
  position: relative;
  margin: 0;
  padding: 10px;
}
.cld-title{
  position: absolute;
  z-index: 5;
  display: none;
  top: 35px;
  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: 10px;
  width: 0;
  height: 0;
  border-left: 7.5px solid transparent;
  border-right: 7.5px solid transparent;

  border-bottom: 7.5px solid #ccc;
}

/*############################ Information modal css starts #############################################*/
#event-modal .modal-dialog{
    width:65%;
}
.info-modal-header{
    border-bottom: none;
    position: relative;
    text-align: center;
    margin: -20px -20px 0;
    border-radius: 5px 5px 0 0;
    padding: 35px;
}
.green{
    background: #47c9a2;
}
.maroon{
    background: maroon;
}
.info-modal-content{
    padding: 20px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
}
.info-modal-icon{
    font-size:60px!important;
    color:white
}
.calendar-marker{
    position: relative;
    width:12px;
    height:12px;
    border-radius: 100%;
    margin-right: 5px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.6);
}
.color1{
    background: green;
}
.color2{
    background: red;
}
.color3{
    background: blue;
}
.event-sign{
    position:absolute;
    top:5px;
    right:5px;
    font-size: 22px;
    color: #717171;
}
.marker-holder{
    position:absolute;
    bottom: 0;
    left:0;
    right:0;
    width:100%;
    height:15px;
    display: flex;
    display: -webkit-flex;
    align-content: center;
    justify-content: flex-start;
}
.color-index{
    width:40px;
    height:30px
}
table tr:nth-child(2) .color-index{
    background: red;
}
table tr:nth-child(3) .color-index{
    background: green;
}
table tr:nth-child(4) .color-index{
    background: blue;
}
.calendar-index td{
    padding: 0 10px;
}
.calendar-index tr{
    margin-bottom: 5px;
}
.calendar-index th{
    padding: 20px 0;
}
.event-day:hover{
    cursor: pointer;
    background: #efefef;
}

.modal-date-holder{
    position: relative;
    width:100%;
    min-height:500px;
    background: seagreen;
    color: white;
    text-align: center;
    padding: 50px 20px 20px;
}
.pos-center{
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    top:50%;
    left:50%
}
.modal-date-holder .fas{
    font-size: 100px;
    display: block;
    margin-bottom: 30px;
}
#event-modal .modal-body, #event-modal .modal-content{
    padding: 0;

}
.modal-date{
    font-weight: bold;
    font-size: 36px;
}
.modal-event-holder{
    width:100%;
    height: 500px;
    padding: 20px;
}
.event-detail{
    width:100%;
    padding: 20px;
    text-align: left;
    color:black;
    border-bottom: 1px solid #c2c2c2;
}
.modal-event-holder .pos-center{
    width:95%;
    height: 500px;
    overflow-y: auto;
}
.modal-event-holder .btn-danger{
    position: absolute;
    right:10px;
    top:10px;
    z-index:10
}

/*############################ Information modal css ends #############################################*/


@media (min-width:200px) and (max-width: 991px) {
    #event-modal .modal-dialog{
        width:95%;
    }
    .cld-day{
        line-height: 35px;
    }

    .modal-date-holder {
        min-height: unset;
        padding: 20px 20px 20px;
    }
    .pos-center {
        position: relative;
         -webkit-transform: unset;
        -moz-transform: unset;
        -ms-transform: unset;
        -o-transform: unset;
         transform: unset;
         top: unset;
         left: unset;
    }
    .modal-event-holder {
        min-height: unset;
        padding: 20px 0px;
    }
    .modal-date-holder .fas {
        font-size: 70px;
    }
    .modal-date-holder .btn-danger{
        position: absolute;
        right:10px;
        top:10px;
        z-index:10
    }
    .event-sign{
        font-size: 12px;
    }
    .calendar-marker{
        width: 10px;
        height: 10px;
    }
    
}