.calBox {
  padding: 2px;
  text-align: center;
  font-family: 'open-regular';
  font-style: normal;
}

.calElement {
  margin: 1px;
  display: inline-block;
  overflow:hidden;
  font-family: 'open-regular';
  font-style: normal;
}

.calMonth {
  text-transform: uppercase;
}

.calDay {
  position: relative;
  /*width: 98%;
  display: table;
  margin: 0 auto;*/
}

.calDay .calElement {
  font-size: 14px;
  margin: 0 4px;
  padding: 4px 0;
  color: rgba(0,0,0,0.4);
  border: 1px solid #ddd;
  background-color: #fff;
}
.event-icon {
  margin: 5px 0 0 !important;
  font-size: 20px;
  color: rgba(0,0,0,0.4) !important;
}

.calDay .calElement.selected,
.calDay .calElement.selected .event-icon {
  /*background-color: #44955D;*/
  color: rgba(255,255,255,0.8) !important;
}

.calDay .calElement.prev,
.calDay .calElement.next {
  font-size: 30px;
  border: none;
  background-color: transparent;
  position: absolute;
}
.calDay .calElement.prev {
  left: 0;
  top: 22px;
}
.calDay .calElement.next {
  right: 0;
  top: 22px;
}

.calDay .calElement.prev:before {
  content: "\f104";
  font-family: 'zylog-icons';
}

.calDay .calElement.next:before {
  content: "\f105";
  font-family: 'zylog-icons';
}

span.calElement.next:hover, span.calElement.prev:hover {
  cursor: pointer;
}

.calDay .calElement .dayNumber {
  font-size: 30px;
  font-family: 'open-regular';
  font-weight: bold;
  width: 25px;
  height: 25px;
  color: #222222;
}

.calDay .calElement.selected .dayNumber {
  color: #fff;
}

.calElement.selected .dayNumber {
    color: #000;
    margin: 0 auto -20px;
}

.cal-Day span.calElement:hover {
  background-color: #f11924;
  cursor: pointer;
}


/* custom */
    .wrap-dt-mth {
        display: inline-block;
        padding: 10px 23px;
        color: #969696;
        font-size: 20px;
        width: 100%;
        direction: rtl;
    }
    .event-calendar {
      display: inline-block;
      vertical-align: middle;
      padding-left: 10px;
    }

    .calYear .calElement,
    .calMonth .calElement {
        display: none;
    }

    .calYear .calElement.selected,
    .calMonth .calElement.selected {
        display: block;
        width: auto !important;
        font-size: 20px;
    }

    .calYear,
    .calMonth {
        display: inline-block;
        vertical-align: middle;
    }

    @media screen and (max-width: 1000px) {
      .calDay .calElement .dayNumber {
        font-size: 20px;
        padding: 0;
      }
      .wrap-dt-mth {
        font-size: 1rem;
        direction: rtl;
      }
      .event-icon {
        font-size: 16px;
        margin: 0 !important;
      }
      .calDay .calElement {
        font-size: 0.85rem;
      }
      .calDay {
          padding-top: 4px;
          padding-bottom: 4px;
      }
      .calDay .calElement.prev, 
      .calDay .calElement.next {
        font-size: 20px;
        top: 20px;
      }
    }

    @media screen and (max-width: 768px) {
      .calDay .calElement .dayNumber {
        font-size: 18px;
      }
      .event-icon {
        font-size: 15px;
      }
      .calDay .calElement.prev, 
      .calDay .calElement.next {
        font-size: 18px;
        top: 18px;
      }
    }

    @media screen and (max-width: 500px) {
      .calDay .calElement .dayNumber,
      .calDay .calElement {
        font-size: 10px;
      }
      .calElement.selected .dayNumber {
        display: inline;
      }
      .calDay .calElement.prev, 
      .calDay .calElement.next {
        top: 14px;
      }
    }

/* End of custom */

.calDay .crep {

}