/*!Don't remove this!
 * duDatePicker styles
 * 
 * Author: Dionlee Uy
 * Email: dionleeuy@gmail.com
 */
 @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 .dcalendarpicker {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   visibility: hidden;
   opacity: 0;
   background-color: transparent;
   transition: background-color 0.2s linear, opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: background-color, opacity;
   z-index: 100001;
   overflow: hidden;
 }
 
 .dcalendarpicker .dudp__wrapper {
   font-size: 12px;
   line-height: normal;
   position: absolute;
   display: flex;
   flex-direction: column;
   left: 50%;
   top: 50%;
   min-width: 312px;
   overflow: hidden;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   outline: none;
   border-radius: 24px;
   transform: translate(-50%,-50%);
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform, -moz-transform, opacity;
 }
 
 .dcalendarpicker .dudp__calendar-header {
   font-size: 16px;
   padding: 16px 32px;
   color: #ffffff;
   box-sizing: content-box;
 }
 
 .dcalendarpicker .dudp__calendar-header .dudp__sel-year,
 .dcalendarpicker .dudp__calendar-header .dcp_sel-date {
   display: block;
   cursor: pointer;
     font-weight: bold;
 }
 
 .dcalendarpicker .dudp__calendar-header .dudp__sel-year:hover,
 .dcalendarpicker .dudp__calendar-header .dcp_sel-date:hover {
   color: #fff;
 }
 
 .dcalendarpicker .dudp__calendar-header .dcp_sel-date {
   font-size: 24px;
 }
 
 .dcalendarpicker .dudp__cal-container {
   position: relative;
   background-color: #fff;
   width: 312px;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   overflow: hidden;
   flex: 0 1 auto;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__btn-cal-prev,
 .dcalendarpicker .dudp__cal-container .dudp__btn-cal-next {
   position: absolute;
   top: 0;
   left: 12px;
   display: block;
   text-align: center;
   font-size: 28px;
   line-height: 44px;
   width: 48px;
   height: 48px;
   font-weight: 500;
   cursor: pointer;
   border-radius: 50%;
   opacity: 1;
   transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1), background-color 0.25s linear;
   will-change: opacity, background-color;
   z-index: 2;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__btn-cal-prev:hover,
 .dcalendarpicker .dudp__cal-container .dudp__btn-cal-next:hover {
   background-color: #d9d9d9;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__btn-cal-prev:active,
 .dcalendarpicker .dudp__cal-container .dudp__btn-cal-next:active {
   background-color: #bfbfbf;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__btn-cal-prev.dp__hidden,
 .dcalendarpicker .dudp__cal-container .dudp__btn-cal-next.dp__hidden {
   opacity: 0;
   visibility: hidden;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__btn-cal-next {
   left: auto;
   right: 12px;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar-views {
   width: 936px;
   overflow: hidden;
   opacity: 1;
   transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
   will-change: opacity;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar-views.dp__animate-out {
   opacity: 0;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar-views.dp__hidden {
   visibility: hidden;
   opacity: 0;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar {
   display: inline-block;
   padding: 0 16px 16px;
   opacity: 1;
   transform: translateX(-100%) perspective(1px);
   transition: none;
   will-change: transform;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar.dp__zooming {
   transition: transform 0.25s, opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar.dp__animate-zoom {
   opacity: 0;
   transform: translateX(-100%) perspective(1px) scale(0.85);
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar.dp__animate-left {
   transform: translateX(-200%);
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar.dp__animate-right {
   transform: translateX(0);
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-month-year {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: row-reverse;
   text-align: center;
   line-height: 48px;
   font-size: 15px;
   font-weight: bold;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-month-year span {
   display: inline-block;
   cursor: pointer;
   padding: 0 4px;
 }
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-month-year span.cal-year::after { content: "년"; }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__weekdays {
   display: flex;
   flex-direction: row;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__weekdays span {
   display: inline-block;
   flex: 0 1 auto;
   width: 40px;
   text-align: center;
   color: #323232;
   font-size: 14px;
   line-height: 40px;
   vertical-align: middle;
     color: #888888;
     font-weight: bold;
     letter-spacing: 0.25px;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week {
   display: flex;
   flex-direction: row;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date {
   position: relative;
   flex: 0 1 auto;
   display: block;
   text-decoration: none;
   text-align: center;
   color: #323232;
   width: 40px;
   line-height: 40px;
   height: 40px;
   outline: none;
   cursor: pointer;
     font-weight: bold;
     font-size: 14px;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 50%;
   transition: background-color .24s, color .24s;
   z-index: -1;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.dudp__pm, .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.dudp__nm {
   color: #969696;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.disabled {
   cursor: not-allowed;
   color: #c8c8c8;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date:not(.disabled):not(.selected):not(.range-from):not(.range-to):hover:before {
   background-color: #d9d9d9;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date:not(.disabled):not(.selected):not(.range-from):not(.range-to):active:before {
   background-color: #bfbfbf;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.current {
   font-weight: bold;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.in-range {
   border-radius: 0;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.selected, .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.range-from, .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.range-to {
   font-weight: normal;
   color: #fff !important;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.range-from {
   border-radius: 50% 0 0 50%;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.range-to {
   border-radius: 0 50% 50% 0;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__calendar .dudp__cal-week .dudp__date.range-from.range-to {
   border-radius: 50%;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__months-view {
   height: 340px;
   display: flex;
   flex-direction: column;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   justify-content: center;
   align-items: center;
   opacity: 1;
   transform: scale(1) perspective(1px);
   transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
   will-change: transform, opacity;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__months-view.dp__animate-out {
   opacity: 0;
   transform: scale(1.3);
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__months-view.dp__hidden {
   display: none;
   opacity: 0;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__months-view .dudp__month-row {
   display: flex;
   flex-direction: row;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__months-view .dudp__month {
   flex: 0 1 auto;
   display: inline-block;
   line-height: 63px;
   min-width: 63px;
   text-align: center;
   font-size: 14px;
   cursor: pointer;
   border-radius: 50%;
   transition: background-color .2s linear;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__months-view .dudp__month:hover {
   background-color: #d9d9d9;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__months-view .dudp__month:active {
   background-color: #bfbfbf;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__months-view .dudp__month.selected {
   font-weight: 500;
   color: #1565c0;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__years-view {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fff;
   opacity: 1;
   transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
   overflow-y: scroll;
   overflow-x: hidden;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__years-view.dp__hidden {
   opacity: 0;
   visibility: hidden;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__years-view .dudp__year {
   display: block;
   padding: 10px 0;
   text-align: center;
   font-size: 16px;
   cursor: pointer;
   transition: background-color .2s linear;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__years-view .dudp__year:hover {
   background-color: #d9d9d9;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__years-view .dudp__year:active {
   background-color: #bfbfbf;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__years-view .dudp__year.selected {
   font-weight: 500;
   font-size: 24px;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__buttons {
   padding: 0 16px 16px;
   text-align: right;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__buttons.dp__hidden {
   visibility: hidden;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__buttons:after {
   content: '';
   display: block;
   clear: both;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__buttons .dudp__button {
   display: inline-block;
   font-size: 16px;
   padding: 0 8px;
   min-width: 40px;
   letter-spacing: 0.25px;
   text-align: center;
   text-transform: uppercase;
   height: 38px;
   line-height: 38px;
   font-weight: bold;
   cursor: pointer;
   border-radius: 4px;
   transition: background-color .2s linear;
 }
 .dcalendarpicker .dudp__cal-container .dudp__buttons .dudp__button.cancel {
   color: #888888;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__buttons .dudp__button.clear {
   float: left;
   color: #b71c1c !important;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__buttons .dudp__button:hover {
   background-color: #d9d9d9;
 }
 
 .dcalendarpicker .dudp__cal-container .dudp__buttons .dudp__button:active {
   background-color: #bfbfbf;
 }
 
 .dcalendarpicker.dp__open {
   visibility: visible;
   opacity: 1;
   background-color: rgba(0, 0, 0, 0.7);
 }
 
 .dcalendarpicker.dp__open .dudp__wrapper {
   transform: translate(-50%,-50%) scale(1);
 }
 
 .dcalendarpicker.dp__closing {
   opacity: 0;
   background-color: transparent;
 }
 
 .dcalendarpicker[inline='true'] {
   top: auto;
   left: auto;
   right: auto;
   bottom: auto;
   background-color: transparent !important;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 
 .dcalendarpicker[inline='true'] .dudp__wrapper {
   position: relative;
   left: auto;
   bottom: auto;
   transform: none;
 }
 
 .dcalendarpicker[inline='true'].dp__open .dudp__wrapper {
   transform: none;
 }
 
 .dcalendarpicker[inline='true'] .dudp__cal-container {
   width: 272px;
 }
 
 .dcalendarpicker[inline='true'] .dudp__cal-container .dudp__calendar {
   padding: 0 10px;
 }
 
 @media (max-height: 414px) {
   .dcalendarpicker .dudp__wrapper {
     flex-direction: row;
     bottom: 8px;
   }
   .dcalendarpicker .dudp__calendar-header {
     width: 110px;
   }
 }
 
 @media (max-height: 320px) {
   .dcalendarpicker .dudp__wrapper {
     bottom: 0;
   }
 }
 
 body[datepicker-display='on'] {
   overflow: hidden;
 }