/* calendar */

/* body */
.ui-datepicker{
    padding: 10px;
    width: auto;
}
.ui-widget-content{
    border: none;

    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.2);
    border-radius: 2px;

    background: #FFFFFF;
}

/* header */
.ui-datepicker .ui-datepicker-header {
    padding: 0;
    margin-bottom: 15px;
}

/* title */
.ui-datepicker .ui-datepicker-title{
    font-family: "Exo 2", sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: calc(24/16);
    color: #000000;
}

/* table */
.ui-datepicker table{
    width: auto;
    margin: 0 auto;
}



/* arrow */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{
    top: 50%;
    width: 24px;
    height: 24px;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

    background: #FFFFFF;

    cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev{
    left: 0;
}
.ui-datepicker .ui-datepicker-next{
    right: 0;
}

/* prev */
.ui-icon-circle-triangle-w{
    background: #FFFFFF url("../../img/icons/angle-left-gray-6x12.svg") center no-repeat !important;
}
.ui-icon-circle-triangle-w:hover{
    background: #FFFFFF url("../../img/icons/angle-left-black-6x12.svg") center no-repeat !important;
}
/* next */
.ui-icon-circle-triangle-e{
    background: #FFFFFF url("../../img/icons/angle-right-gray-6x12.svg") center no-repeat !important;
}
.ui-icon-circle-triangle-e:hover{
    background: #FFFFFF url("../../img/icons/angle-right-black-6x12.svg") center no-repeat !important;
}

/* hover */
.ui-widget-header .ui-state-hover{
    border: none;
}



/* names of days of week */
.ui-datepicker th {
    padding: 0 0 10px 0;

    font-family: "Exo 2", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: calc(14.4/12);
    color: #000000;
    text-transform: uppercase;
}
.ui-datepicker .ui-datepicker-week-end{
    color: #C80000;
}

/* cell */
.ui-datepicker td {
    padding: 4px;
}

/* days of week */
.ui-datepicker td .ui-state-default{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
            justify-content: center;

    width: 32px;
    height: 32px;

    border: none;
    border-radius: 50%;

    color: #000000;

    background: #F8F8F8;
}
.ui-datepicker td .ui-state-default:hover{
    color: #4D3A73;

    background: #FFDB4D;
}
.ui-datepicker td .ui-state-active{
    color: #FFFFFF;

    background: #8D67CC;
}