*, *:before, *:after {
    box-sizing: border-box;
}
  
  .datepicker {
    width: 100%;
    background-color: white;
    margin: auto;
    overflow: hidden;
    border: none;
    border-radius: 4px;
  }
  .datepicker .datepicker-header {
    height: 250px;
  }
  .datepicker .ui-datepicker-inline {
    padding: 10px 6px;
  }
  .datepicker .ui-datepicker-header {
    text-align: center;
    text-transform: uppercase;

  }
  .datepicker .ui-datepicker-header .ui-datepicker-prev,
  .datepicker .ui-datepicker-header .ui-datepicker-next {
    display: inline;
    float: left;
    cursor: pointer;
    font-size: 1.4em;
    padding: 0 10px;

    color: var(--light);
  }
  .datepicker .ui-datepicker-header .ui-datepicker-next {
    float: right;
  }
  .datepicker .ui-datepicker-calendar {
    width: 100%;
    text-align: center;
    height:200px;
    font-size: 16px;
  }
  .datepicker .ui-datepicker-calendar thead {
    color: var(--light);
  }
  /*.datepicker .ui-datepicker-calendar tr th, .datepicker .ui-datepicker-calendar tr td {
    padding-bottom: .5em;
  }*/
  .datepicker .ui-datepicker-calendar a {
    color: var(--light);
    text-decoration: none;
    display: block;
    margin: 0 auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    cursor: pointer;
  }

  .ui-datepicker-unselectable.ui-state-disabled {
    min-width: 30px;
    min-height: 30px;
    line-height: 30px;
  }

  .diaconsesion a {
    color: var(--light) !important;
    background-color: var(--primary);
  }

  .ui-state-active {
    border: 2px solid black;
  }

  .ui-datepicker-title{
   font-size: 20px;
    margin-bottom: 0.5rem;
  }

  .ui-datepicker-month,
  .ui-datepicker-year {
    font-weight: bold;
    color: var(--text);
  }

@media (max-width: 995px){
  .datepicker .ui-datepicker-calendar {
    width: 100%;
    text-align: center;
    height: 400px;
    font-size: 20px;
  }
  .ui-datepicker-unselectable.ui-state-disabled,
  .datepicker .ui-datepicker-calendar a {
    min-width: 45px;
    min-height: 45px;
    line-height: 45px;
  }
}

@media (max-width: 575px) {
  .datepicker .ui-datepicker-calendar {
    height: 230px;

  }
  .ui-datepicker-unselectable.ui-state-disabled,
  .datepicker .ui-datepicker-calendar a {
    min-width: 35px;
    min-height: 35px;
    line-height: 35px;
  }
}