.ui-datepicker{
    font-family: $font-default;
    font-size: 1.4rem;
    background: $color-snow;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 0 1rem -0.4rem #000;
    -webkit-border-radius: 0.3rem;
    -moz-border-radius: 0.3rem;
    border-radius: 0.3rem;
    z-index:9 !important;

    .ui-state-disabled{
        background:transparent !important;
        cursor: default;
    }
}

.ui-datepicker-header{
    font-family:$font-title;
    font-weight:700;
    background: $color-featured;
    color: $color-snow;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;

    .ui-datepicker-prev,
    .ui-datepicker-next{
        width: 1rem;
        height: 1.1rem;
        margin: auto;
        top: 0;
        bottom: 0;

        &.ui-state-hover{
            background-color:transparent;
            border:0;
        }
        span{
            width: 1rem;
            height: 1.5rem;
            cursor: pointer;
            text-indent: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            background-image: none;

            &:before{
                font-family: 'icomoon', sans-serif !important;
                content: "\e902";
                display: inline-block;
                color:#fff;
                font-weight:normal;
                font-size: 1rem;
            }

            span{
                background-image:none;
            }
        }
    }

    .ui-datepicker-prev{
        left: 0.5rem;

        span:before{transform: rotate(90deg)}
    }

    .ui-datepicker-next{
        right: 0.5rem;

        span:before{transform: rotate(-90deg)}
    }
}

.ui-datepicker-calendar{
    border: 0.1rem solid $color-smoke;
    border-top: 0;
    margin: 0 !important;

    tr:last-child td{
        padding-bottom: 0.8rem;
    }

    td, th{
        &:last-child{
            padding-right: 1rem;
        }
    }

    th{
        text-align: right;
        font-family:$font-title;
        font-size: 1.2rem;
        font-weight: 700;
    }

    td a{
        line-height: 2rem;
        &.ui-state-active{
            color: $color-snow;
        }

        &:hover{
            background: $color-snow-dark;
        }
    }

    .ui-state-disabled{
        background-color: inherit !important;
        color: #ccc;
    }

    .ui-state-default{
        background:none;
        border:none;
        padding:0.3rem;
        text-align: center;
        color: $color-slate;
    }

    .ui-state-highlight{
        color: $color-featured;
    }

    .ui-state-active{
        background:$color-featured;
        &:hover{
            background:$color-featured;
        }
    }
}
