$cellHeight: 30px;

#datepicker {
  margin-bottom: 20px;
}
input[type="text"] {
  height: 30px;
}

.ui-datepicker-hover a,
.ui-datepicker-hover:after {
  background-color: lighten(#62748c, 15%) !important;
  color: #fff !important;
}

.ui-datepicker-select a {
  background-color: darken(#62748c, 15%);
  color: #fff !important;
}

.ui-datepicker {
  background: #fff;
    padding: 10px;

    &:after {
        display: block;
        content: '';
        height: 0;
        overflow: hidden;
        clear: both;
    }
  
  .ui-datepicker-group {
    float: left;
    width: 50%;
  }

    .ui-datepicker-header {
        color: #62748c;
        font: 14px/25px 'Arial';
        position: relative;
        text-align: center;
        text-transform: uppercase;

        .ui-datepicker-prev, .ui-datepicker-next {
          
            cursor: pointer;
            height: 15px;
            overflow: hidden;
            position: absolute;
            text-indent: -100em;
            top: 5px;
            user-select: none;
            width: 15px;



       
        


      
      &:hover {
        background-color: #050505;
      }

            &.ui-state-disabled {
                opacity: 0.3;
            }
        }
        .ui-datepicker-prev {
            left: 10px;
        }
        .ui-datepicker-next {
            right: 10px;
        }
    }


       .ui-datepicker-prev {
              background-image: url('https://code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_444444_256x240.png');
            background-position: -80px -192px; /* Ajusta según el sprite de iconos */
            background-repeat: no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
            text-indent: -9999px;
        }


         .ui-datepicker-next {
              background-image: url('https://code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_444444_256x240.png');
           background-position: -48px -192px; /* Ajusta según el sprite de iconos */
            background-repeat: no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
            text-indent: -9999px;
        }
    .ui-datepicker-calendar {
    border-collapse: collapse;
        font-size: 12px;
        cursor: default;

        th, td {
            text-align: center;
            vertical-align: middle;
            width: 36px;
            height: 36px;
            line-height: 36px;
      padding: 0;
      z-index: 1;
        }

        th {
            color: #62748c;
            font: 14px/36px 'Arial';
        }

        td {
            color: #8d8d8d;
      padding: 2px 0;
      position: relative;
      
      &:before,
      &:after{
        bottom: 2px;
        content: '';
        left: 0;
        top: 2px;
        position: absolute;
        width: 100%;
        z-index: -1;
      }
      
      &:before {
        background: #eee;
      }
      
      &:first-child:before {
        border-radius: $cellHeight/2 0 0 $cellHeight/2;
      }
      
      &:last-child:before {
        border-radius:  0 $cellHeight/2 $cellHeight/2 0;
      }

            &.ui-datepicker-other-month, &.ui-state-disabled {
                color: #d0d0d0;
            }
        }

        a {
            color: inherit;
            display: inline-block;
            height: 36px;
            text-decoration: none;
            width: 36px;
        }
        .ui-datepicker-highlight:after {
            background: #00335a;
        }
   
    .ui-checkin:after {
      left: 50%;
      width: 50%;
    }
    
    .ui-checkout:after {
      right: 50%;
      width: 50%;
    }
    
    .ui-datepicker-highlight a {
      color: #fff;
    }
    .ui-checkin a,
    .ui-checkout a {
                  width: 36px;
            background-color: #f0ca5a;
            border-radius: 50%;
            color: #00335a;
    }
    .ui-checkin.ui-datepicker-hover .ui-state-hover {
      border-radius: 50%;
    }
    .ui-datepicker-hover .ui-state-hover {
      border-radius: 0 50% 50% 0;
    }
        .ui-datepicker-today a {
            background: #62748c;
      border-radius: 50%;
            color: #fff;
        }
    }
}

.ui-datepicker-trigger {
    float: left;
    height: 15px;
    margin: 13px 0 0 -35px;
    overflow: hidden;
    text-indent: -100em;
    width: 16px;
}