/* ******* Date Picker ***** */

/* .datePickerBox::before,
.datePickerBox::after {
    content: "\2750";
    position: absolute;
    top: 25px;
    right: 5px;
    font-size: 1.8rem;
}

.datePickerBox::after {
    content: "\229E";
    font-size: 1rem;
    top: 32px;
    right: 10px;
} */
/*  */

:root {
    --sdpBg: #858585;
    --sdpTxt: #444;
    --sdpSubBg: #b9b9b9;
    --sdpSubTxt: #555;
    --sdpBtn: #e4e4e4;
    --sdpWeekTxt: #176f7a;
    --sdpCellBorder: #ccc;
    --sdpSubBgend: #c80842;
    --sdpToday: #bb9f59;
    --sdpHover: rgb(130, 170, 190);
}

.darkTheme {
    --sdpBg: #485167;
    --sdpTxt: #BCBCBE;
    --sdpSubBg: #41495d;
    --sdpSubTxt: #a9a9ab;
    --sdpBtn: #323948;
    --sdpWeekTxt: #19bfd3;
    --sdpCellBorder: #666;
    --sdpSubBgend: #E47A2E;
    --sdpToday: #554d48;
    --sdpHover: #12141a;
}

.datePickerBox {
    width: 100%;
    position: relative;
}

.datePickerBox .samiDatePicker {
    padding: 4px;
    background-color: var(--sdpBg);
    color: var(--sdpTxt);
    position: absolute;
    top: 102%;
    z-index: 2010;
    border-radius: 2px;
    box-shadow: 2px 2px 4px #000;
    margin-bottom: 10px;
}

.datePickerBox .samiDatePicker .header {
    display: flex;
    grid-gap: 4px;
    margin-bottom: 4px;
    justify-content: space-between;
    height: 25px;
}

.datePickerBox .samiDatePicker .header .hide {
    width: 14.28%;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    background-color: var(--sdpSubBg);
}

.datePickerBox .samiDatePicker .header .hide:before,
.datePickerBox .samiDatePicker .header .hide:after {
    position: absolute;
    /* right: 17px; */
    /* right: 11px; */
    right: calc(50% - 2px);
    /* right: 50%; */
    content: ' ';
    height: 25px;
    width: 2px;
    background-color: var(--sdpTxt);
}

.datePickerBox .samiDatePicker .header .hide:before {
    transform: rotate(45deg);
}

.datePickerBox .samiDatePicker .header .hide:after {
    transform: rotate(-45deg);
}

.datePickerBox .samiDatePicker .header .jMonthSelect {
    width: 35.7%;
    border-radius: 2px;
    border: none;
    background-color: var(--sdpBtn);
    padding: 0 !important;
    height: 25px !important;
}

.datePickerBox .samiDatePicker .header .jYearInput {
    width: 35.7%;
    border-radius: 2px;
    border: none;
    padding: 4px 4px 4px 7px !important;
    background-color: var(--sdpBtn);
	height: 100% !important;
}

.datePickerBox .samiDatePicker .header .clean {
    width: 14.28%;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    line-height: 25px;
    background-color: var(--sdpSubBg);
}

.datePickerBox .samiDatePicker .weeks .week,
.datePickerBox .samiDatePicker .days .day {
    width: 14.28%;
    display: inline-block;
    border: 1px solid var(--sdpCellBorder);
    text-align: center;
    position: relative;
}

.datePickerBox .samiDatePicker .weeks .week {
    background-color: var(--sdpSubBg);
    padding: 5px;
    font-weight: bold;
    color: var(--sdpWeekTxt);
}

.datePickerBox .samiDatePicker .days .day {
    cursor: pointer;
    background-color: var(--sdpBtn);
}

.datePickerBox .samiDatePicker .days .day.null {
    background-color: var(--sdpBg);
    border: none;
}

.datePickerBox .samiDatePicker .days .day.today {
    background-color: var(--sdpToday);
}

.datePickerBox .samiDatePicker .days .day.off {
    color: #999;
}

.datePickerBox .samiDatePicker .days .day.off:hover {
    color: #555;
}

.datePickerBox .samiDatePicker .days .day:hover,
.datePickerBox .samiDatePicker .days .day.focus {
    background-color: var(--sdpHover);
}

.datePickerBox .samiDatePicker .days .dayNumCell {
    padding-top: 2px;
    padding: 5px 10px 10px 10px;
}

.datePickerBox .samiDatePicker .days .cellLeft,
.datePickerBox .samiDatePicker .days .cellRight {
    font-size: 7px;
    text-align: right;
    display: inline-block;
    color: var(--sdpSubTxt);
    position: absolute;
    bottom: 0;
    right: 2px;
}

.datePickerBox .samiDatePicker .days .day .cellLeft {
    text-align: left;
    left: 2px;
}

.datePickerBox .samiDatePicker .days .day.off .cellLeft,
.datePickerBox .samiDatePicker .days .day.off .cellRight {
    color: #999;
}

.datePickerBox .samiDatePicker .buttons {
    display: flex;
    justify-content: space-between;
    margin: 3px 0;
}

.datePickerBox .samiDatePicker .buttons span {
    background-color: var(--sdpBtn);
    padding: 3px;
    border-radius: 2px;
    width: 33%;
    text-align: center;
    cursor: pointer;
}

.datePickerBox .samiDatePicker .buttons span:nth-child(2) {
    background-color: var(--sdpToday);
}

.datePickerBox .samiDatePicker .weekend {
    color: var(--sdpSubBgend) !important;
}

/* ******* Date Picker ***** */
/*.formBox .datePickerBox .samiDatePicker .header .jYearInput {
    height: auto !important;
} */