@import "../scss/variables.scss";


  .ui-datepicker{
    background: $white;
    position: relative;
    display: block;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    border: 1px solid $grey;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);

    .ui-datepicker-header{
      padding: 10px 0;


      .ui-datepicker-title{
        select{
          width: 35%;
          margin: 4px;
        }
      }

      .ui-datepicker-prev,
      .ui-datepicker-next{
        position: absolute;
        height: 40px;
        line-height: 40px;
        width: 40px;
        cursor: pointer;
        text-align: center;
        &:after{
          font-family: 'FontAwesome';
          font-size: $font-20;
        }
        .ui-icon{
          display: none;
        }
      }

      .ui-datepicker-prev{
        left: 4px;
        &:after{
          content: '\f100';
        }
      }
      .ui-datepicker-next{
        right: 4px;
        &:after{
          content: '\f101';
        }
      }
    }

    .ui-datepicker-calendar{
      width: 90%;
      margin: auto;
      margin-bottom: 20px;
      font-size: $font-14;

      th,
      td{

        transition: .4s;
        > a,
        > span{
          display: block;
          cursor: pointer;
          padding: 6px;
          border-radius: 20px;
        }

        &.ui-datepicker-current-day{
          > a,
          > span{
            background: $black;
            color: $white;
          }
        }

        &.ui-datepicker-other-month{
          > a,
          > span{
            color: $grey;
          }
        }
      }
    }
  }