/*
  persian-datepicker - v0.4.5 
  Author: reza babakhani 
 http://babakhani.github.io/PersianWebToolkit/datepicker 
 */

.datepicker-plot-area, .unselectable {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

    .animation, .datepicker-plot-area .datepicker-time-view .down-btn, .datepicker-plot-area .datepicker-time-view .up-btn {
        -webkit-transition: all 100ms ease;
        -moz-transition: all 100ms ease;
        -ms-transition: all 100ms ease;
        -o-transition: all 100ms ease;
        transition: all 100ms ease;
    }

    .date-item-disable, .datepicker-plot-area .datepicker-day-view .table-days td.disabled span, .datepicker-plot-area .datepicker-month-view .month-item-disable, .datepicker-plot-area .datepicker-year-view .year-item-disable, .reset-curve {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .datepicker-plot-area .datepicker-time-view .down-btn, .datepicker-plot-area .datepicker-time-view .up-btn, .top-big-curve {
        -webkit-border-radius: 6px 6px 0 0;
        -moz-border-radius: 0;
        border-radius: 6px 6px 0 0;
        -moz-border-radius-topleft: 6px;
        -moz-border-radius-topright: 6px;
    }

    .bottom-big-curve, .datepicker-plot-area .datepicker-time-view .down-btn {
        -webkit-border-radius: 0 0 6px 6px;
        -moz-border-radius: 0;
        border-radius: 0 0 6px 6px;
        -moz-border-radius-bottomright: 6px;
        -moz-border-radius-bottomleft: 6px;
    }

    .big-curve, .datepicker-plot-area, .datepicker-plot-area .datepicker-time-view > div.time-segment {
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }

        .date-item, .datepicker-plot-area .datepicker-day-view .table-days td span, .datepicker-plot-area .datepicker-month-view .month-item, .datepicker-plot-area .datepicker-year-view .year-item, .small-curve {
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

.datepicker-plot-area, .main-box-shadow {
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

    .date-item, .date-item-disable, .datepicker-plot-area .datepicker-day-view .table-days td span, .datepicker-plot-area .datepicker-day-view .table-days td.disabled span, .datepicker-plot-area .datepicker-header .btn-next, .datepicker-plot-area .datepicker-header .btn-prev, .datepicker-plot-area .datepicker-header .btn-switch, .datepicker-plot-area .datepicker-month-view .month-item, .datepicker-plot-area .datepicker-month-view .month-item-disable, .datepicker-plot-area .datepicker-time-view .down-btn, .datepicker-plot-area .datepicker-time-view .up-btn, .datepicker-plot-area .datepicker-time-view input, .datepicker-plot-area .datepicker-time-view > div.time-segment, .datepicker-plot-area .datepicker-year-view .year-item, .datepicker-plot-area .datepicker-year-view .year-item-disable, .datepicker-plot-area .toolbox .btn-today, .interactive-item {
        cursor: pointer;
    }

    .date-item, .datepicker-plot-area .datepicker-day-view .table-days td span, .datepicker-plot-area .datepicker-month-view .month-item, .datepicker-plot-area .datepicker-year-view .year-item {
        font: 14px;
        background-color: #fff;
        color: #333;
        border: 0;
        text-shadow: none;
    }

    .date-item-disable, .datepicker-plot-area .datepicker-day-view .table-days td.disabled span, .datepicker-plot-area .datepicker-month-view .month-item-disable, .datepicker-plot-area .datepicker-year-view .year-item-disable {
        background-color: #f1f1f1 !important;
        color: #ccc !important;
        border: none !important;
        text-shadow: none !important;
        cursor: default;
    }

    .date-item-today, .datepicker-plot-area .datepicker-day-view .table-days td span.today {
        background-color: #333;
        color: #fff;
        border: 0;
        text-shadow: none;
    }

    .date-item-numb, .datepicker-plot-area .datepicker-day-view .table-days td span.other-month {
        background-color: "";
        color: #ccc;
        border: none;
        text-shadow: none;
    }

    .date-item-selected, .datepicker-plot-area .datepicker-day-view .table-days td span.selected, .datepicker-plot-area .datepicker-month-view .month-item.selected, .datepicker-plot-area .datepicker-year-view .year-item.selected {
        background-color: #006dcc !important;
        color: #fff;
        border: none;
        text-shadow: 1px 1px 1px #000;
    }

    .date-item-hover, .datepicker-plot-area .datepicker-day-view .table-days td span:hover, .datepicker-plot-area .datepicker-month-view .month-item:hover, .datepicker-plot-area .datepicker-year-view .year-item:hover {
        background-color: #eee;
        color: "";
        border: 0;
        text-shadow: none;
    }

.datepicker-plot-area {
    box-sizing: border-box;
    overflow: hidden;
    min-height: 70px;
    display: block;
    width: 200px;
    padding: 0 5px;
    position: absolute;
    top: 100px;
    font: 12px BYekan;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 9999;
}

    .datepicker-plot-area table, .datepicker-plot-area td, .datepicker-plot-area th {
        border: solid 1px;
        background: 0 0;
  color: #000;
  background-color: #f7ca77;
  border-color: #f1a417;
  -webkit-border-radius: 0;
  border-radius: 0;
    }

    .datepicker-plot-area * {
        text-align: center;
        color: #333;
    }

.datepicker-plot-area-inline-view {
    display: block !important;
    width: 100%;
    position: static;
    float: left;
}

.datepicker-plot-area .datepicker-day-view, .datepicker-plot-area .datepicker-month-view, .datepicker-plot-area .datepicker-year-view {
    display: block;
    width: 98%;
    float: left;
    min-height: 200px !important;
    margin: 0 1%;
}

.datepicker-plot-area .datepicker-time-view {
    display: block;
    float: left;
    width: 100%;
    padding: 5px 1%;
    margin: 3px 0;
    background: #f9f9f9;
    border-top: 1px solid #f1f1f1;
}

    .datepicker-plot-area .datepicker-time-view > div.time-segment {
        display: block;
        width: 22%;
        height: 60px;
        float: left;
        overflow: hidden;
    }

        .datepicker-plot-area .datepicker-time-view > div.time-segment:hover .down-btn, .datepicker-plot-area .datepicker-time-view > div.time-segment:hover .up-btn {
            font-weight: 700;
            background-color: #fff;
        }

    .datepicker-plot-area .datepicker-time-view .divider {
        display: block;
        width: 3%;
        height: 60px;
        line-height: 60px !important;
        float: left;
        overflow: hidden;
        font: 12px bold;
    }

    .datepicker-plot-area .datepicker-time-view .down-btn, .datepicker-plot-area .datepicker-time-view .up-btn {
        display: block;
        float: left;
        width: 100%;
        margin: 0;
        height: 20px;
        line-height: 18px;
    }

        .datepicker-plot-area .datepicker-time-view .down-btn:hover, .datepicker-plot-area .datepicker-time-view .up-btn:hover {
            background-color: #eee;
        }

    .datepicker-plot-area .datepicker-time-view input {
        display: block;
        width: 90%;
        margin: 0 5%;
        height: 20px;
        padding: 0;
        border: none;
        background: #f9f9f9;
    }

.datepicker-plot-area .datepicker-day-view .table-days {
    width: 100%;
    float: left;
    direction: rtl;
}

    .datepicker-plot-area .datepicker-day-view .table-days tr {
        width: 300px;
    }

    .datepicker-plot-area .datepicker-day-view .table-days td {
        height: 26px;
        padding: 0;
        margin: 0;
    }

        .datepicker-plot-area .datepicker-day-view .table-days td span {
            display: block;
            width: 100%;
            height: 26px;
            line-height: 26px;
            padding: 0;
            margin: 0;
        }

.datepicker-plot-area .datepicker-day-view .month-grid-box {
    display: block;
    width: 100%;
    float: right;
    min-width: 150px;
    height: 180px;
    margin: 10px 1% 5px;
}

    .datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row {
        display: block;
        width: 100%;
        height: 25px;
        float: left;
    }

    .datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell {
        display: block;
        width: 14%;
        height: 25px;
        float: right;
        line-height: 25px;
        text-indent: 6px;
        font: 12px BYekan;
        font-weight: 700;
        color: #333;
    }

.datepicker-plot-area .datepicker-month-view .month-item, .datepicker-plot-area .datepicker-year-view .year-item {
    display: block;
    width: 31%;
    margin: 2px 1% 0;
    float: right;
    height: 36px;
    line-height: 34px;
}

.datepicker-plot-area .toolbox {
    display: block;
    width: 100%;
    float: left;
    padding: 3px 0;
}

    .datepicker-plot-area .toolbox .btn-today {
        display: block;
        width: 60px;
        height: 20px;
        line-height: 16px;
        margin: 0 auto;
        font-weight: 700;
        background-color: #fff;
    }

        .datepicker-plot-area .toolbox .btn-today:hover {
            background-color: #eee;
        }

.datepicker-plot-area .datepicker-header {
    display: block;
    width: 98%;
    height: 30px;
    float: left;
    padding: 3px 1% 0;
}

    .datepicker-plot-area .datepicker-header .btn-next, .datepicker-plot-area .datepicker-header .btn-prev, .datepicker-plot-area .datepicker-header .btn-switch {
        height: 28px;
        line-height: 28px;
        font-weight: 700;
        background-color: #fff;
        color: #333;
    }

        .datepicker-plot-area .datepicker-header .btn-next:hover, .datepicker-plot-area .datepicker-header .btn-prev:hover, .datepicker-plot-area .datepicker-header .btn-switch:hover {
            background-color: #eee;
        }

    .datepicker-plot-area .datepicker-header .btn-next {
        display: block;
        width: 15%;
        float: left;
    }

    .datepicker-plot-area .datepicker-header .btn-switch {
        display: block;
        width: 66%;
        margin: 0 2%;
        float: left;
    }

    .datepicker-plot-area .datepicker-header .btn-prev {
        display: block;
        width: 15%;
        float: left;
    }


    /*----------------*/