#inline-datepicker {
   width: 100%;
   margin: 20px auto;
   border: 1px solid #fff;
   padding: 10px;
   background-color: #fff;
   height: 100%;

}
.ui-datepicker .ui-datepicker-title,

.ui-datepicker-month,
.ui-datepicker-year{
   color: #fff !important;
}
.ui-datepicker .ui-datepicker-title,
.ui-widget-header{
   background: #FEA82F !important;
}
.ui-state-default, .ui-widget-content .ui-state-default{
   border: none !important;
   background: none !important;
}

 
 .ui-datepicker.ui-widget {
   overflow: hidden;
 }

 .clock {
  
   height: 150px;
   border-radius: 50%;
   background-color: #fff;
   position: relative;
   
}

.clock::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #000;
}

.number {
   --rotation: 0deg;
   text-align: center;
   position: absolute;
   height: 100%;
   width: 100%;
   text-align: center;
   transform: rotate(var(--rotation));
}

.number1 {
   --rotation: 30deg;
}

.number2 {
   --rotation: 60deg;
}

.number3 {
   --rotation: 90deg;
}

.number4 {
   --rotation: 120deg;
}

.number5 {
   --rotation: 150deg;
}

.number6 {
   --rotation: 180deg;
}

.number7 {
   --rotation: 210deg;
}

.number8 {
   --rotation: 240deg;
}

.number9 {
   --rotation: 270deg;
}

.number10 {
   --rotation: 300deg;
}

.number11 {
   --rotation: 330deg;
}

.hand {
   --rotation: 0deg;
   position: absolute;
   bottom: 50%;
   left: 50%;
   background: #222;
   transform-origin: bottom;
   transform: translatex(-50%)rotate(var(--rotation));
   border-radius: 30px;

}

.hour {
   width: 5px;
   height: 30%;
}

.minute {
   width: 3px;
   height: 33%;
   background-color: #222;
   --rotation: 0deg;
}

.second {
   width: 3px;
   height: 35%;
   background-color: #B01F24;
   --rotation: 0deg;
}