.datepicker-container{
    z-index: 999999;
}
.datepicker-plot-area {
    border: none;
    box-shadow: 0 0 30px 0 rgba(82, 63, 105, .2);
    border-radius: 15px;
    padding: 10px;
}

.datepicker-plot-area {
    width: 275px;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn {
    width: 7%;
    background-color: var(--cool-grey);
    border-radius: 2px;
    color: var(--cool-grey);
    height: 30px;
    transition: all 0.3s;
}
.datepicker-plot-area .datepicker-navigator .pwt-btn-next::after,
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev::after{
    content: "\e902";
    padding-top: 5px;
    font-family: 'icomoon';
    color: var(--white);
    font-size: 8px;
    transform: rotate(90deg);
}
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev::after{
    transform: rotate(270deg);
    padding-top: 0;
    padding-bottom: 5px;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-next, .datepicker-plot-area .datepicker-navigator .pwt-btn-switch, .datepicker-plot-area .datepicker-navigator .pwt-btn-switch, .datepicker-plot-area .datepicker-navigator .pwt-btn-next {
    float: right;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-next, .datepicker-plot-area .datepicker-navigator .pwt-btn-prev {
    transform: scaleX(-1);
}

.datepicker-plot-area .datepicker-day-view .table-days td.selected span {
    background-color: var(--lipstick);
    text-shadow: none;
}

.datepicker-plot-area .datepicker-day-view .table-days td.today span {
    background-color: var(--dark);
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-prev, .datepicker-plot-area .datepicker-navigator .pwt-btn-prev {
    float: left;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-switch, .datepicker-plot-area .datepicker-navigator .pwt-btn-switch {
    width: 82%;
    background-color: var(--light-grey);
    color: var(--cool-grey);
    font-size: 14px;
}

.datepicker-plot-area .toolbox, .datepicker-plot-area .toolbox {
    display: flex;
    justify-content: center;
}

.datepicker-plot-area .toolbox>div, .datepicker-plot-area .toolbox>div {
    margin: 0 5px !important;
    background-color: var(--cool-grey) !important;
    color: var(--white);
    border-radius: 6px;
    transition: all 0.3s;
}

.datepicker-plot-area .table-days td {
    height: 44px;
}

.datepicker-plot-area .table-days td.selected span, .datepicker-plot-area .table-days td.selected:hover span, .datepicker-plot-area .table-days td:hover span, .datepicker-plot-area .table-days td.today span, .datepicker-plot-area .table-days td.selected span, .datepicker-plot-area .table-days td.selected:hover span, .datepicker-plot-area .table-days td:hover span, .datepicker-plot-area .table-days td.today span, .datepicker-plot-area .table-days td.today:hover span {
    background-color: var(--lipstick);
    color: var(--white) !important;
    border: none;
    text-shadow: none;
    border-radius: 10px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
}

.datepicker-plot-area .table-days td span, .datepicker-plot-area .table-days td span.other-month {
    font-size: 16px;
    margin: 0 auto;
}

.datepicker-plot-area .table-days td span {
    color: #7e8299 !important;
}

.datepicker-plot-area .table-days td span.other-month {
    color: var(--light-grey) !important;
}

.datepicker-plot-area .table-days td:hover span, .datepicker-plot-area .table-days td:hover span {
    background-color: var(--light-grey) !important;
    color: #555 !important;
}

.datepicker-plot-area .toolbox>div:hover, .datepicker-plot-area .datepicker-navigator .pwt-btn:hover, .datepicker-plot-area .table-days td.today span, .datepicker-plot-area .table-days td.today span:hover, .datepicker-plot-area .month-item.selected, .datepicker-plot-area .month-item.selected:hover, .datepicker-plot-area .year-item.selected, .datepicker-plot-area .year-item.selected:hover, .datepicker-plot-area .toolbox>div:hover, .datepicker-plot-area .datepicker-navigator .pwt-btn:hover, .datepicker-plot-area .table-days td.today span, .datepicker-plot-area .table-days td.today span:hover, .datepicker-plot-area .month-item.selected, .datepicker-plot-area .year-item.selected, .datepicker-plot-area .year-item.selected:hover {
    background-color: var(--lipstick);
    color: var(--white);
}
.datepicker-plot-area .datepicker-navigator .pwt-btn-next:hover,
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev:hover{
    color: var(--lipstick);
}

.datepicker-plot-area .header .header-row, .datepicker-plot-area .header .header-row {
    height: 35px !important;
    background-color: var(--light-grey);
    border-radius: 6px;
}

.datepicker-plot-area .header .header-row-cell, .datepicker-plot-area .header .header-row-cell {
    height: 35px;
    line-height: 30px;
    font-weight: normal;
    font-size: 14px;
    color: var(--lipstick);
}

.datepicker-plot-area .month-item, .datepicker-plot-area .year-item, .datepicker-plot-area .month-item, .datepicker-plot-area .year-item {
    width: 27.333%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    font-size: 16px;
    text-shadow: none;
    border-radius: 4px;
}

.datepicker-plot-area .month-item:hover, .datepicker-plot-area .year-item:hover, .datepicker-plot-area .month-item:hover, .datepicker-plot-area .year-item:hover {
    background-color: var(--dark) !important;
}

.datepicker-plot-area .datepicker-month-view, .datepicker-plot-area .datepicker-year-view {
    padding: 20px;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn {
    width: 13%;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px !important;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-switch {
    width: 70%;
    border-radius: 8px;
}

.datepicker-plot-area .table-days td.selected span, .datepicker-plot-area .table-days td.selected:hover span, .datepicker-plot-area .table-days td:hover span, .datepicker-plot-area .table-days td.today span, .datepicker-plot-area .table-days td.today:hover span, .datepicker-plot-area .table-days td {
    height: 36px !important;
}

.datepicker-plot-area .header .header-row-cell {
    font-size: 11px;
}

.datepicker-plot-area .month-item, .datepicker-plot-area .year-item {
    height: 35px !important;
    line-height: 35px !important;
    width: 28% !important;
    font-size: 13px !important;
    margin: 5px 5px 0 !important;
    border-radius: 10px !important;
}

.datepicker-plot-area .datepicker-year-view .year-item.selected, .datepicker-plot-area .datepicker-month-view .month-item.selected {
    background-color: var(--lipstick);
    text-shadow: none;
}

.datepicker-plot-area .datepicker-day-view .table-days td span {
    font-size: 13px;
}

.datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell {
    line-height: 35px;
    color: var(--dark);
}

.datepicker-plot-area .pwt-hide {
    display: none;
}
.datepicker-plot-area .datepicker-time-view input{
    height: 30px;
    background-color: var(--light-grey);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
}
.datepicker-plot-area .datepicker-time-view .down-btn, .datepicker-plot-area .datepicker-time-view .up-btn{
    color: var(--cool-grey);
}
.datepicker-plot-area .datepicker-time-view .down-btn:hover, .datepicker-plot-area .datepicker-time-view .up-btn:hover{
    color: var(--lipstick);
}