:root {
	--m-primary: #02647E;
    --m-secondary: #F56425;
}

/***
Bootstrap Datetimepickers Restyle(in v1.2.4)
***/

.modal-open .datetimepicker {
    z-index: 10060 !important;
}

.datetimepicker table .active {
    background-image: none !important;
    background-color: var(--m-primary) !important;
    filter: none !important;
}

.datetimepicker table td, .daterangepicker table td {
    font-weight: 300 !important;
    font-family: 'Lato', 'Open Sans', sans-serif;
}

.datetimepicker table th, .daterangepicker table th {
    font-family: 'Lato', 'Open Sans', sans-serif;
    font-weight: 400 !important;
}


/***
Bootstrap Datepickers Restyle(in v1.2.4)
***/

.modal-open .datepicker {
    z-index: 10020 !important;
}

.datepicker-dropdown.dropdown-menu {
	border: 1px solid #C7CCD0 !important;
	box-shadow: 0 1px 24px 0 rgba(0,0,0,.15) !important;
}

.datepicker table .active {
    background-image: none !important;
    background-color: var(--m-primary) !important;
    filter: none !important;
}

.datepicker table td,
.datetimepicker table td,
.daterangepicker table td  {
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: 'Lato', 'Open Sans', sans-serif;
}
.datepicker table td,
.datetimepicker table td {
    border: 1px solid #e4e7e7 !important;
}

.datepicker table th,
.datetimepicker table th,
.daterangepicker table th {
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: 'Lato', 'Open Sans', sans-serif;
}
.datepicker table th.datepicker-switch,
.datetimepicker table th.switch {
    padding: 5px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    font-weight: 600 !important;
}

.daterangepicker .calendar th.prev,
.daterangepicker .calendar th.next,

.datepicker table th.prev,
.datepicker table th.next,

.datetimepicker table th.prev,
.datetimepicker table th.next {
    padding: 0px !important;
    font-size: 0px !important;
    min-width: 40px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    border-radius: 4px !important;
    border: 1px solid #e4e7e7;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans', sans-serif !important;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.datepicker .datepicker-months table thead,
.datepicker .datepicker-years table thead {
    display: inline-table;
    width: 100% !important;
    margin-bottom: 10px !important;
}
.datepicker .datepicker-months table thead th.next,
.datepicker .datepicker-years table thead th.next {
    margin-right: -7px !important;
}

#AppointmentCalendar #calendar .fc-left .fc-prev-button:before,
#AppointmentCalendar #calendar .fc-left .fc-next-button:before,

.daterangepicker .calendar th.prev:before,
.daterangepicker .calendar th.next:before,

.datepicker table th.prev:before,
.datepicker table th.next:before,

.datetimepicker table th.prev:before,
.datetimepicker table th.next:before {
    width: 20px;
    height: 20px;
    content: ' ';
    color: #82888a;
    font-size: 20px;
    line-height: 30px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px auto;
}

#AppointmentCalendar #calendar .fc-left .fc-prev-button:before,
.daterangepicker .calendar th.prev:before,
.datepicker table th.prev:before,
.datetimepicker table th.prev:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='%2382888a'%3E%3Cpath d='M336.2 274.5l-210.1 210h805.4c13 0 23 10 23 23s-10 23-23 23H126.1l210.1 210.1c11 11 11 21 0 32-5 5-10 7-16 7s-11-2-16-7l-249.1-249c-11-11-11-21 0-32l249.1-249.1c21-21.1 53 10.9 32 32z'%3E%3C/path%3E%3C/svg%3E");
}

#AppointmentCalendar #calendar .fc-left .fc-next-button:before,
.daterangepicker .calendar th.next:before,
.datepicker table th.next:before,
.datetimepicker table th.next:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='%2382888a'%3E%3Cpath d='M694.4 242.4l249.1 249.1c11 11 11 21 0 32L694.4 772.7c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210.1-210.1H67.1c-13 0-23-10-23-23s10-23 23-23h805.4L662.4 274.5c-21-21.1 11-53.1 32-32.1z'%3E%3C/path%3E%3C/svg%3E");
}

.daterangepicker .calendar th.prev:hover,
.daterangepicker .calendar th.next:hover,

.datepicker table th.prev:hover,
.datepicker table th.next:hover,
.datepicker table th.prev:focus,
.datepicker table th.next:focus,
.datepicker table th.prev:active,
.datepicker table th.next:active,

.datetimepicker table th.prev:hover,
.datetimepicker table th.next:hover,
.datetimepicker table th.prev:focus,
.datetimepicker table th.next:focus,
.datetimepicker table th.prev:active,
.datetimepicker table th.next:active {
    border: 1px solid #c4c4c4;
    background-color: #ffffff !important;
}

.datepicker.dropdown-menu,
.datetimepicker.dropdown-menu {
    min-width: 300px !important;
}
.datepicker table,
.datetimepicker table {
    width: 100% !important;
}
.datepicker, .datetimepicker {
    padding: 15px !important;
}
.datepicker.dropdown-menu th,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.datepicker-inline td,

.datetimepicker.dropdown-menu th,
.datetimepicker.datepicker-inline th,
.datetimepicker.dropdown-menu td,
.datetimepicker.datepicker-inline td {
    padding: 8px !important;
}

.daterangepicker table th,
.daterangepicker table td {
    padding: 5px !important;
}

.datepicker table tr td.today,
.datetimepicker table tr td.today {
    position: relative;
}

.datepicker table tr td span.month:hover,
.datepicker table tr td.today,
.datepicker table tr td.day.active,

.datetimepicker table tr td span.month:hover,
.datetimepicker table tr td.today,
.datetimepicker table tr td.day.active {
    color: #fff !important;
    border-radius: 0px !important;
    background-color: var(--m-primary) !important;
    background: linear-gradient(180deg,var(--m-primary), var(--m-primary)) !important;
}

.datepicker table tr td span.month,
.datepicker table tr td span.month:hover {
	border-radius: 0.25rem !important;
}

.datepicker table tr td.today:before,
.datepicker table tr td.day.active:before,

.datetimepicker table tr td.today:before,
.datetimepicker table tr td.day.active:before {
    right: 4px;
    bottom: 4px;
    content: '';
    position: absolute;
    display: inline-block;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #ffffff;
    border-top-color: rgba(0, 0, 0, 0.2);
}

.datepicker-switch, .datetimepicker .switch {
    color: #565a5c;
    font-size: 18px;
    font-weight: bold !important;
}
.datepicker.dropdown-menu, .datetimepicker.dropdown-menu {
    z-index: 9999 !important;
	margin-block-start: 39px !important;
}
.datepicker-dropdown.datepicker-orient-top,
.datetimepicker-dropdown.datetimepicker-orient-top {
    margin-top: 10px;
}
.daterangepicker {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.daterangepicker .daterangepicker_input {
    margin-top: 5px !important;
    margin-bottom: 15px !important;
}
.daterangepicker .daterangepicker_input i {
    top: 14px !important;
}
.daterangepicker .input-mini {
    padding-left: 30px !important;
}
.daterangepicker.opensright:before {
    left: 26px !important;
}
.daterangepicker.opensright::after {
    left: 27px !important;
}

.daterangepicker.opensleft {
    margin-right: 25px !important;
}