.date-picker-x-container{position: relative}.date-picker-x{background: #444;box-sizing: content-box;color: #fff;display: none;font: 18px/1 Arial;padding: 10px;position: absolute;top: 100%;transform: translateY(15px);user-select: none;width: 308px;z-index: 9}.date-picker-x::before{border-color: #444 transparent;border-style: solid;border-width: 0 10px 10px;bottom: 100%;content: "";left: 20px;position: absolute}.date-picker-x.to-top{bottom: 100%;top: auto;transform: translateY(-15px)}.date-picker-x.to-top::before{border-width: 10px 10px 0;bottom: auto;top: 100%}.date-picker-x.active{display: block}.date-picker-x *{box-sizing: border-box}.date-picker-x .dpx-title-box{align-items: center;border-bottom: 1px solid #ccc;display: flex;height: 45px;justify-content: space-between;padding-bottom: 10px}.date-picker-x .dpx-prev,.date-picker-x .dpx-next{color: rgba(255, 255, 255, 0.6);cursor: pointer;display: block;font-size: 22px;line-height: 50px;text-align: center;transition: 0.2s;width: 50px}.date-picker-x .dpx-prev:hover,.date-picker-x .dpx-next:hover{color: #fff}.date-picker-x .dpx-title{display: block;font-size: 18px;line-height: 40px;padding: 0 10px}.date-picker-x:not([data-dpx-type="year"]) .dpx-title{cursor: pointer}.date-picker-x .dpx-content-box{box-sizing: content-box;display: flex;flex-wrap: wrap;height: 288px;justify-content: center;padding-top: 10px}.date-picker-x .dpx-btns{border-top: 1px solid #ccc;display: flex;padding-top: 10px}.date-picker-x .dpx-btns .dpx-item{flex: 1 1 0;height: 30px !important}.date-picker-x .dpx-item{align-items: center;display: flex;flex: 1 0 25%;justify-content: center}.date-picker-x .dpx-item:not(.dpx-weekday){cursor: pointer}.date-picker-x .dpx-item:not(.dpx-weekday):hover{box-shadow: inset 0 0 0 2px #3385ff, inset 0 0 0 4px #444}.date-picker-x .dpx-weekday{font-size: 15px;height: 24px !important}.date-picker-x[data-dpx-type="day"] .dpx-item{flex-basis: 44px;height: 44px}.date-picker-x .dpx-current{box-shadow: inset 0 0 0 2px #66a3ff}.date-picker-x .dpx-selected{background: #06f}.date-picker-x .dpx-weekend{color: #f99}.date-picker-x .dpx-out{color: #bbb}.date-picker-x .dpx-disabled{color: #bbb !important;cursor: default !important;box-shadow: none !important}.date-picker-x .dpx-disabled.dpx-current{box-shadow: inset 0 0 0 2px #66a3ff !important}.date-picker-x::before{border: solid transparent;content: " ";display: block;height: 0;position: absolute;pointer-events: none;width: 0;bottom: 100%}.dpx-title-box::after{border: solid transparent;content: " ";display: block;height: 0;position: absolute;pointer-events: none;width: 0;bottom: 100%}.date-picker-x::before{border-color: rgba(255, 255, 255, 0);border-bottom-color: #ccc;border-width: 10px}.dpx-title-box::after{border-color: rgba(255, 255, 255, 0);border-bottom-color: #fff;left:20px;border-width: 10px;top:-19px}.date-picker-x.to-top::before{bottom:-10px;top:inherit;border-top-color: #ccc;border-bottom-color: transparent}.date-picker-x.to-top .dpx-title-box:after{border-top-color: #fff;bottom:-19px;border-bottom-color: transparent;top:inherit;left:20px}.date-picker-x{background: #fdfdfd;box-sizing: content-box;color: #444;display: none;font: 13px/1 Arial;padding: 10px;position: absolute;top: calc(100% - 10px);border: 1px solid #ccc;-webkit-transform: translateY(15px);transform: translateY(15px);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width: 260px;z-index: 9}@media (max-width:767px){.date-picker-x{top: calc(100% - 10px)}}.date-picker-x.to-top{bottom: calc(100% - 10px);top: auto}.date-picker-x[data-dpx-type=day] .dpx-item{flex-basis: 34px;height: 25px}.date-picker-x .dpx-next,.date-picker-x .dpx-prev{color: #444}.date-picker-x .dpx-item:not(.dpx-weekday):hover{border: 1px solid #ccc;box-shadow: none}.date-picker-x .dpx-selected{background: #e87f00;color: #fff}.date-picker-x .dpx-current{border: 1px solid #decfa0;box-shadow: none;background: #decfa0;color: #353535;font-weight: 500}.date-picker-x .dpx-next:hover,.date-picker-x .dpx-prev:hover{color: #ccc}@media (max-width:460px){.date-picker-x .dpx-next:hover,.date-picker-x .dpx-prev:hover{color: #444}}.date-picker-x .dpx-content-box{height: auto}.date-picker-x .dpx-btns .dpx-item{flex: 1 1 0;height: 25px!important}.date-picker-x .dpx-title{font-size: 16px}@media (max-width:460px){.date-picker-x .dpx-title{font-size: 12px}}.date-picker-x .dpx-weekend.dpx-item{color: #444!important}.date-picker-x .dpx-disabled.dpx-item{color: #bbb!important;cursor: not-allowed!important}.date-picker-x .dpx-weekend.dpx-out.dpx-item{color: #bbb!important}@media (max-width:500px){.date-picker-x[data-dpx-type=day] .dpx-item{flex-basis: 30px}.date-picker-x{width: 250px}.date-picker-x .dpx-weekday{font-size: 12px}}