#dtpick {
   position: fixed;
   top: 100px;
   left: 0px;
   display: block;
   background-color: white;
   -webkit-box-shadow: 0px 0px 20px 1px #000000; 
   box-shadow: 0px 0px 20px 1px #000000;
}

#dtpick .is-hidden {
   display: none;
}


#dtpick .calendar {
   float: left;
   width: 100vw;
   max-width: 500px;
}

#dtpick .title {
   position: relative;
   text-align: center;
}

#dtpick .label {
   display: inline-block;
   position: relative;
   overflow: hidden;
   margin: 0 10px;
   font-size: 24px;
   line-height: 30px;
   font-weight: bold;
   background-color: #fff;
}

#dtpick .label.time {
   color: #555;
   padding: 0 5px;
   margin: 0;
}
#dtpick .label.time-spacer {
   color: #555;
   margin: 0;
}

#dtpick .title select {
   cursor: pointer;
   position: absolute;
   margin: 0;
   left: 0;
   top: 0;
   opacity: 0;
   width: 100%;
   height: 100%;
}

#dtpick .prev,
#dtpick .next {
   display: block;
   cursor: pointer;
   position: relative;
   outline: none;
   border: 0;
   padding: 0 20px;
   width: 20px;
   height: 30px;
   /* hide text using text-indent trick, using width value (it's enough) */
   text-indent: 20px;
   white-space: nowrap;
   overflow: hidden;
   background-color: transparent;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 20px 30px;
   opacity: .5;
}

#dtpick .prev:hover,
#dtpick .next:hover {
   opacity: 1;
   background-color: lightgray;
}

#dtpick .prev {
   float: left;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
}

#dtpick .next {
   float: right;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
}

#dtpick .prev.is-disabled,
#dtpick .next.is-disabled {
   opacity: .0;
   pointer-events: none;
}

#dtpick .select {
   display: inline-block;
}

#dtpick .table {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
   border: 0;
}

#dtpick .table th,
.table td {
   width: 14.285714285714286%;
   padding: 0;
}

#dtpick .table th {
   color: #555;
   font-size: 15px;
   line-height: 25px;
   font-weight: bold;
   text-align: center;
}

#dtpick .is-empty {
   width: 14.285714285714286%;
   height: 40px;
}

#dtpick .button {
   cursor: pointer;
   display: block;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   outline: none;
   border: 0;
   margin: 0;
   width: 100%;
   padding: 5px;
   color: #555;
   font-size: 15px;
   line-height: 30px;
   text-align: center;
   background: #f5f5f5;
   height: initial;
}

#dtpick .button.ok {
   height:39px; width:50px; background-color:skyblue; color:black; font-weight:bold; font-size:20px; 
}

#dtpick .is-selected .button {
   color: #000;
   font-weight: bold;
   background: #33aaff;
}

#dtpick .is-disabled .button {
   background: #D5E9F7;
}

#dtpick .is-disabled .button {
   pointer-events: none;
   cursor: default;
   color: #999;
   opacity: .3;
}

#dtpick .is-outside-current-month .button {
   color: #999;
   opacity: .3;
}

#dtpick .is-selection-disabled {
   pointer-events: none;
   cursor: default;
}

#dtpick .divider {
   border-top:1px solid gray; 
   border-bottom:1px solid lightgray; 
   margin: 5px 0;  
}

#dtpick .button:hover {
   color: #000;
   background: magenta;
   font-weight: bold;
}