.ng-mydp {
  position: static;
}

.ng-myrtl {
  direction: rtl;
}

.ng-mydp * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
}

.ng-mydp table {
  display: table;
  border-spacing: 0;
}

.ng-mydp table td,
.ng-mydp table th {
  padding: 0;
  margin: 0;
  vertical-align: middle;
  border: none;
}

.myDpSelector {
  padding: 4px;
  border: 1px solid #CCC;
  border-radius: 4px;
  z-index: 100000;
}

.myDpViewChangeAnimation {
  animation: myDpViewChangeAnimation 0.2s linear;
}

@keyframes myDpViewChangeAnimation {
  0% {
    transform: scale(0.7);
    opacity: 0.1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.myDpAnimationFadeIn {
  animation: myDpAnimationFadeIn 0.5s linear;
}

@keyframes myDpAnimationFadeIn {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.myDpAnimationFadeOut {
  animation: myDpAnimationFadeOut 0.3s linear forwards;
}

@keyframes myDpAnimationFadeOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}

.myDpAnimationScaleTopIn {
  animation: myDpAnimationScaleTopIn 0.3s linear;
}

@keyframes myDpAnimationScaleTopIn {
  0% {
    transform: scaleY(0);
    transform-origin: 100% 0%;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 100% 0%;
  }
}

.myDpAnimationScaleTopOut {
  animation: myDpAnimationScaleTopOut 0.3s linear forwards;
}

@keyframes myDpAnimationScaleTopOut {
  0% {
    transform: scaleY(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    transform-origin: 100% 0%;
    opacity: 0;
  }
}

.myDpAnimationScaleCenterIn {
  animation: myDpAnimationScaleCenterIn 0.3s linear;
}

@keyframes myDpAnimationScaleCenterIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.myDpAnimationScaleCenterOut {
  animation: myDpAnimationScaleCenterOut 0.3s linear forwards;
}

@keyframes myDpAnimationScaleCenterOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.myDpAnimationRotateIn {
  animation: myDpAnimationRotateIn 0.3s linear;
}

@keyframes myDpAnimationRotateIn {
  0% {
    transform: scale(0.3) rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.myDpAnimationRotateOut {
  animation: myDpAnimationRotateOut 0.3s linear forwards;
}

@keyframes myDpAnimationRotateOut {
  0% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
  100% {
    transform: scale(0.3) rotate(-45deg);
    opacity: 0;
  }
}

.myDpAnimationFlipDiagonalIn {
  animation: myDpAnimationFlipDiagonalIn 0.3s linear;
}

@keyframes myDpAnimationFlipDiagonalIn {
  0% {
    transform: rotate3d(1, 1, 0, -78deg);
  }
  100% {
    transform: rotate3d(1, 1, 0, 0deg);
  }
}

.myDpAnimationFlipDiagonalOut {
  animation: myDpAnimationFlipDiagonalOut 0.3s linear forwards;
}

@keyframes myDpAnimationFlipDiagonalOut {
  0% {
    transform: rotate3d(1, 1, 0, 0deg);
    opacity: 1;
  }
  100% {
    transform: rotate3d(1, 1, 0, 78deg);
    opacity: 0;
  }
}

.myDpSelectorAbsolute {
  position: absolute;
}

.myDpSelectorPosInitial {
  position: initial;
}

.myDpSelector:focus {
  box-shadow: -1px 1px 6px 0px #ADD8E6;
  outline: none;
}

.myDpSelectorArrow {
  background: #FFF;
}

.myDpSelectorArrow:after,
.myDpSelectorArrow:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.myDpSelectorArrow:after {
  border-color: rgba(250, 250, 250, 0);
  border-bottom-color: #FAFAFA;
  border-width: 10px;
  margin-left: -10px;
}

.myDpSelectorArrow:before {
  border-color: rgba(204, 204, 204, 0);
  border-bottom-color: #CCC;
  border-width: 11px;
  margin-left: -11px;
}

.myDpSelectorArrow:focus:before {
  border-bottom-color: #ADD8E6;
}

.myDpSelectorArrowLeft:after,
.myDpSelectorArrowLeft:before {
  left: 24px;
}

.myDpSelectorArrowRight:after,
.myDpSelectorArrowRight:before {
  left: 86%;
}

::-ms-clear {
  display: none;
}

.myDpCalTable,
.myDpMonthTable,
.myDpYearTable,
.myDpFooterBar {
  border-radius: 0 0 4px 4px;
}

.myDpCalTable.myDpNoFooter tbody tr:nth-child(6) td:first-child,
.myDpMonthTable.myDpNoFooter tbody tr:nth-child(4) td:first-child,
.myDpYearTable.myDpNoFooter tbody tr:nth-child(5) td:first-child {
  border-bottom-left-radius: 4px;
}

.myDpCalTable.myDpNoFooter tbody tr:nth-child(6) td:last-child,
.myDpMonthTable.myDpNoFooter tbody tr:nth-child(4) td:last-child,
.myDpYearTable.myDpNoFooter tbody tr:nth-child(5) td:last-child {
  border-bottom-right-radius: 4px;
}

.myDpCalTable,
.myDpMonthTable,
.myDpYearTable {
  table-layout: fixed;
  width: 100%;
  background-color: #FFF;
  font-size: 14px;
}

.myDpFooter {
  height: calc(100% - 60px);
}

.myDpNoFooter {
  height: calc(100% - 30px);
}

.myDpCalTable,
.myDpMonthTable,
.myDpYearTable,
.myDpWeekDayTitle,
.myDpDaycell,
.myDpMonthcell,
.myDpYearcell {
  border-collapse: collapse;
  color: #333;
  line-height: 1.1;
}

.myDpDaycell,
.myDpMonthcell,
.myDpYearcell {
  padding: 4px;
  text-align: center;
}

.myDpDaycell {
  background-color: #fff;
  position: relative;
}

.myDpWeekDayTitle {
  background-color: transparent;
  color: #333;
  font-size: 13px;
  font-weight: normal;
  vertical-align: middle;
  max-width: 36px;
  overflow: hidden;
  white-space: nowrap;
  height: 23px;
  text-align: center;
}

.myDpWeekDayTitleWeekNbr {
  width: 20px;
}

.myDpMonthcell {
  background-color: #fff;
  overflow: hidden;
  white-space: nowrap;
}

.myDpYearcell {
  background-color: #fff;
  width: 20%;
}

.myDpMonthNbr {
  font-size: 10px; 
  display: block;
}

.myDpDaycellWeekNbr {
  font-size: 9px;
  cursor: default;
  text-align: center;
  color: #333;
}

.myDpPrevMonth,
.myDpNextMonth {
  color: #999;
}

.myDpMonthYearSelBar {
  display: flex;
  height: 30px;
  flex-wrap: nowrap;
  flex-direction:row;
  background-color: #fff;
}
.myDpMonthSelBar, .myDpYearSelBar {
  width:49%;
  display:flex;
  justify-content: space-between;
}

.myDpPrevBtn {
  margin-left: 10px;
}

.myDpNextBtn {
  margin-left: auto;
  margin-right: 10px;
}

.myDpMonthYearText {
  width: 100%;
  line-height: 30px;
  text-align: center;
}

.myDpFooterBar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  background-color: #fff;
}

.myDpHeaderBtn {
  background: transparent;
  padding: 0;
  border: none;
  line-height: 30px;
  height: 28px;
  margin-top: 1px;
  color: #000;
  outline: none;
  cursor: default;
}

.myDpFooterBtn {
  margin: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myDpMonthBtn,
.myDpYearBtn {
  font-size: 16px;
}

.myDpMonthBtn {
  margin-right: 6px;
}

.myDpHighlight {
  color: #C30000;
}

.myDpDimDay {
  opacity: 0.5;
}

.myDpCurrMonth {
  background-color: #fff;
  font-weight: normal;
}

.myDpMarkDate {
  position: absolute;
  top: 2px;
  left: 2px;
  border-right: 8px solid transparent;
}

.myDpMarkCurrDay,
.myDpMarkCurrMonth,
.myDpMarkCurrYear {
  border-bottom: 2px solid #333;
}

.myDpHeaderLabelBtnNotEdit {
  cursor: default;
}

.myDpHeaderBtn::-moz-focus-inner,
.myDpPrevBtn::-moz-focus-inner,
.myDpNextBtn::-moz-focus-inner {
  border: 0;
}

.myDpHeaderBtn:focus,
.myDpMonthLabel:focus,
.myDpYearLabel:focus,
.myDpFooterBtn:focus {
  color: #66afe9;
  outline: none;
}

.myDpDaycell:focus,
.myDpMonthcell:focus,
.myDpYearcell:focus {
  box-shadow: inset 0 0 0 1px #66afe9;
}

.myDpTableSingleDay:hover,
.myDpTableSingleMonth:hover,
.myDpTableSingleYear:hover {
  background-color: #DDD;
}

.myDpMonthLabel,
.myDpYearLabel,
.myDpDaycell,
.myDpMonthcell,
.myDpYearcell {
  cursor: pointer;
}

.myDpHeaderBtnEnabled:hover,
.myDpMonthLabel:hover,
.myDpYearLabel:hover,
.myDpFooterBtn:hover {
  color: #777;
}

.myDpHeaderBtnEnabled {
  cursor: pointer;
}

.myDpHeaderBtnDisabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.myDpDisabled {
  cursor: default;
  color: #777;
  background: repeating-linear-gradient(-45deg, #ccc 7px, #ccc 8px, transparent 7px, transparent 14px);
}

.myDpRangeColor {
  background-color: #dbeaff;
}

.myDpSelectedDay,
.myDpSelectedMonth,
.myDpSelectedYear {
  border: none;
  background-color: #8EBFFF;
}

@font-face {
  font-family: 'angular-mydatepicker';
  src: url('data:application/octet-stream;base64,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') format('woff');
  font-weight: normal;
  font-style: normal;
}

.myDpIcon {
  font-family: 'angular-mydatepicker';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #222;
  font-size: 20px;
}

.myDpIconLeftArrow:before {
  content: "\e800";
}

.myDpIconRightArrow:before {
  content: "\e801";
}