@import "variables";
@import "../../jquery-ui/jquery-ui.theme";

.ui-widget-header {
    background-color: #fff;
}
.ui-dialog-buttonpane {
    background-color: #fff;
}

.ui-datepicker table {
    margin-top: 10px;
    margin-bottom: 10px;
}

.ui-datepicker .ui-datepicker-buttonpane button,
.ui-timepicker .ui-timepicker-buttonpane button {
    @include Button;
    text-transform: none;
    opacity: 1;
}

.ui-datepicker button.ui-datepicker-close,
.ui-timepicker button.ui-timepicker-close {
    background-color: $Color_Emerald;
    color: #fff;

    &:hover {
        background-color: $Color_CheapEmerald;
    }
}

.ui-datepicker-calendar .ui-state-default,
.ui-timepicker-table .ui-state-default {
    padding: 2px;
    text-align: center;
    font-weight: 400;
    border: none;
}

.ui-datepicker-calendar .ui-state-hover {
    border: none;
}

.ui-datepicker-header {
    background-color: #000;
    color: #fff;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    color: #fff;
    cursor: pointer;
}

.ui-icon-circle-triangle-e:before {
    content: $icon-arrow-right;
}

.ui-icon-circle-triangle-w:before {
    content: $icon-arrow-left;
}

.ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    background-color: $Color_Dark;
    color: #fff;
    font-size: 16px;
    padding: 5px 0;
}

.ui-timepicker-title {
    background-color: $Color_Dark;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding: 5px 0;
}

.ui-timepicker-table table {
    margin: 10px 0;
}

.ui-datepicker td,
.ui-timepicker-table td {
    padding: 3px;
}
