.ui-datepicker{
    margin-top: 4px!important;
    width: 226px!important;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 16%);
    border-radius: 8px!important;
    border: 1px solid rgba(0,0,0,.15)!important;
    font-family: 'DM Sans'!important;
}
.ui-datepicker-calendar tr{
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.ui-datepicker-calendar tr:last-child {
    border-bottom: none;
}
.ui-datepicker table{
    border-radius: 0rem 0rem 0.5rem 0.5rem;
    margin: 0 0 0.2em!important;
}

.ui-datepicker .ui-datepicker-header, .ui-widget-header {
    position: relative;
    height: 48px!important;
    padding: 8px!important;
    background: #D1E0FF;
    border: unset;
    border-radius: 0.5rem 0.5rem 0rem 0rem;
}
.ui-datepicker .ui-datepicker-title{
    text-align: center;
    display: flex;
    justify-content: center!important;
    line-height: 2rem!important;
    gap: 10px!important;
    color: #306EF2 !important;
    font-weight: 500 !important;
    margin: 0px 20px 0px 20px!important;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 6px!important;
    width: 1rem!important;
    height: 1rem!important;
    text-align: center!important;
}
.ui-datepicker .ui-datepicker-prev{
    left: 8px!important;
}
.ui-datepicker .ui-datepicker-next{
    right: 8px!important;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span{
    margin-top: 0px!important;
    margin-left: -10px!important;
}
.button.icon-chevron--left.next-btn-w, .button.icon-chevron--right.next-btn-e  {
    font-size: 1.25rem!important;
    font-weight: bolder;
}
.ui-datepicker .ui-datepicker-title select {
    font-size: .875rem!important;
    height: 1.875rem!important;
    border: 0.0625rem solid #E1E6ED;
    border-radius: 0.25rem;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #39414D;
    padding: 0px 8px 0px 8px!important;
    background-color: #fff;
} 
.dt-week {
    width: 16.125rem!important;
}
table.ui-datepicker-calendar thead {
    background: #F5F7FA;
}
.ui-datepicker th {
    padding: 0px!important;
    text-align: center;
    border: 0;
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    height: 2rem;
    color: #39414D;
}
.ui-datepicker td{
    padding: 0px!important;
    height: 2rem!important;
    width: 2rem!important;
    box-sizing: border-box;
    border: 0;
    font-size: 0.75rem;
    line-height: 1.875rem;
}
.ui-datepicker td :not(a.ui-state-active){
    height: 2rem;
}
.ui-datepicker td.ui-datepicker-today a:not(.ui-state-active) {
    border: 1px solid #4B82FA !important;
    border-radius: 50% !important;
    line-height: 1.875rem;
    color: #4B82FA!important;
}
.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    text-align: center !important;
    text-decoration: none;
    font-style: normal;
    font-weight: 400;
    padding: 0px!important;
    color: #4b5564!important;
    background: #fff !important;
    border: unset !important;
    line-height: 1.875rem;
}

.ui-datepicker td.ui-datepicker-other-month a:not(.ui-state-active,.ui-state-highlight) {
    color: #8FA0BA !important;
}
table.ui-datepicker-calendar span, table.ui-datepicker-calendar a {
    font-weight: 400 !important;
    font-size: 0.75rem !important;
    color: #4B5564 !important;
    padding: 0px!important;
}
.ui-widget.ui-widget-content:not(.ui-autocomplete) {
    border: unset;
    padding: 0rem;
    box-shadow: 0rem 0.125rem 0.25rem rgb(0 0 0 / 8%), 0rem 0.5rem 1rem rgb(0 0 0 / 16%) !important;
    border-radius: 0.5rem !important;
}

.ui-state-active:not(.ui-autocomplete):not(.report-anchor), .ui-widget-content .ui-state-active:not(.ui-autocomplete):not(.report-anchor), .ui-widget-header .ui-state-active:not(.ui-autocomplete), a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover:not(.ui-autocomplete) {
    background: #3273dc !important;
    font-weight: normal;
    color: #fff !important;
    border-radius: 50%;
    border: 1px solid #3273dc!important;
}

table.ui-datepicker-calendar a:hover ,table.ui-datepicker-calendar .ui-state-active:not(.ui-autocomplete):hover {
    background: #D1E0FF !important;
    border-radius: 50% !important;
    color: #4B5564!important;
    border: 1px solid #D1E0FF!important;
}
.ui-datepicker .ui-datepicker-buttonpane{
    margin: 0rem!important;
}
.ui-datepicker .ui-datepicker-buttonpane button{
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    line-height: 1.125rem!important;
    padding: 0.375rem 0.75rem !important;
    border: 0.063rem solid #4B82FA ;
    background: #fff ;
    color: #4B82FA ;
    border-radius: 6.25rem !important;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.ui-priority-secondary{
    opacity: 1!important;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    border: unset !important;
    background: unset !important;
    font-weight: normal;
    color: #306EF2 !important;
}
.ui-datepicker-buttonpane .ui-state-hover, .ui-datepicker-buttonpane .ui-widget-content .ui-state-hover,
.ui-datepicker-buttonpane .ui-widget-header .ui-state-hover, .ui-datepicker-buttonpane  .ui-state-focus, .ui-datepicker-buttonpane
 .ui-widget-content .ui-state-focus, .ui-datepicker-buttonpane
 .ui-state-focus,.ui-datepicker-buttonpane .ui-button:hover, .ui-datepicker-buttonpane .ui-button:focus {
    color: #4B82FA !important;
    border: 0.063rem solid #4B82FA !important;
    background: #EDF3FF !important;
 }

.button.icon-chevron--right.next-btn-e{
    color: #306EF2 !important;
    cursor: pointer;
}
.button.icon-chevron--left.next-btn-w{
    color: #306EF2 !important;
    cursor: pointer;
    
}
.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
    margin: 2rem;
}
.ui-datepicker-week-col{
    text-align: center;
}

/* Note: pls use below css for scheduled and unavailable for calendar */

.date-scheduled {
    background: #E3FCEF !important;
    color: #00875A !important;
}
.date-unavailable {
    background: #F5F7FA !important;
    color: #8FA0BA !important;
}
.input-calendar {
    position: relative !important;
  }
  .input-calendar input {
    cursor: pointer;
  }
  .calendar-align {
    position: absolute !important;
    top: 0 !important;
    padding-top: 0.5rem !important;
  }
  .icon-calendar{
    right: 0.625rem !important;
    z-index: 0 !important;
    font-size: 0.813rem !important;
    color: #39414D !important;
    cursor: pointer;
    pointer-events: none;
  }
.input-calendar .icon-validation {
    display: none;
    right: 0.625rem;
    line-height: 0.875rem;
}
.input-calendar.input-group-danger .icon-calendar, .input-calendar.input-group-success .icon-calendar {
    right: 1.75rem !important;
}
.input-calendar.input-group-danger .icon-validation {
    display: inline;
    color: #ff0000;
    font-size: 0.875rem;
}
.input-calendar.input-group-danger .icon-validation:before {
    content: "\f332";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.input-calendar.input-group-success .icon-validation {
    display: inline;
    font-size: 0.875rem;
    padding-top: 0.5rem !important;
}
.input-calendar.input-group-success .icon-validation:before {
    content: "\e9c2";
}