.ui-datepicker {
    border-radius: .25em;
    box-shadow: 1px 2px 0 0 rgba(0,0,0,.1);
    font-family: inherit;

    & .ui-widget-header {
        background-color: unset;
        background-image: linear-gradient(to right, turquoise, royalblue);
        color: whitesmoke;

        & .ui-datepicker-title select option {
            color: #333333;
        }
    }

    
    & .ui-datepicker-prev {

        cursor: pointer;

        &.ui-datepicker-prev-hover {
            background-color: transparent;
            border: none;
            left: 2px;
            top: 2px;
        }

        &::before {
            content: "\f053";
            font-family: "FontAwesome";
            width: 16px;
            height: 16px;
            font-size: 16px;
            color: white;
            top: 10%;
            left: 20%;
            position: absolute;
        }

        & .ui-icon {
            visibility: hidden;
        }
    }

    & .ui-datepicker-next {

        cursor: pointer;

        &.ui-datepicker-next-hover {
            background-color: transparent;
            border: none;
            right: 2px;
            top: 2px;
        }

        &::before {
            content: "\f054";
            font-family: "FontAwesome";
            width: 16px;
            height: 16px;
            font-size: 16px;
            color: white;
            top: 10%;
            right: 0;
            position: absolute;
        }

        & .ui-icon {
            visibility: hidden;
        }
    }


    & table.ui-datepicker-calendar a.ui-state-default {
        border-radius: .25em;
    }
}