jquery-grid/css/timepicker.min.css

jQuery Grid by Gijgo.com is a plug-in for the jQuery Javascript library. It is a very fast and extandable datagrid, and will add advanced interaction controls to any HTML table. This plugin has build-in integration with Bootstrap and Material Design. Free

.gj-timepicker [role=input]::-ms-clear{display:none}.gj-timepicker [role=right-icon]{cursor:pointer}.gj-picker.timepicker [role=header]{font-size:58px;padding:20px 0;line-height:58px;display:flex;align-items:baseline;user-select:none;justify-content:center}.gj-picker.timepicker [role=header] div{cursor:pointer;width:66px;text-align:right}.gj-picker [role=header] [role=mode]{position:relative;width:0}.gj-picker [role=header] [role=mode] span{position:absolute;left:7px;line-height:18px;font-size:18px}.gj-picker [role=header] [role=mode] span[role=am]{top:7px}.gj-picker [role=header] [role=mode] span[role=pm]{bottom:7px}.gj-picker [role=body] [role=dial]{width:256px;color:rgba(0,0,0,.87);height:256px;position:relative;background:#eee;border-radius:50%;margin:10px}.gj-picker-md .arrow-begin,.gj-picker-md [role=body] [role=arrow]{background-color:#2196f3}.gj-picker [role=body] [role=hour]{top:calc(50% - 16px);left:calc(50% - 16px);width:32px;height:32px;cursor:pointer;position:absolute;font-size:14px;text-align:center;line-height:32px;user-select:none;pointer-events:none}.gj-picker [role=body] [role=hour].selected{color:rgba(255,255,255,1)}.gj-picker [role=body] [role=arrow]{top:calc(50% - 1px);left:50%;height:2px;position:absolute;pointer-events:none;transform-origin:left center;transition:all 250ms cubic-bezier(.4,0,.2,1);width:calc(50% - 52px)}.gj-picker .arrow-begin{top:-3px;left:-4px;width:8px;height:8px;position:absolute;border-radius:50%}.gj-picker .arrow-end{top:-15px;right:-16px;width:0;height:0;position:absolute;box-sizing:content-box;border-width:16px;border-radius:50%}.gj-timepicker-md{font-family:Roboto,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;letter-spacing:.04em;line-height:1;color:rgba(0,0,0,.87);position:relative}.gj-timepicker-md.small .gj-textbox-md{font-size:14px}.gj-timepicker-md.small .gj-icon{font-size:22px}.gj-timepicker-md.large .gj-textbox-md{font-size:18px}.gj-timepicker-md.large .gj-icon{font-size:28px}.gj-timepicker-md [role=right-icon]{cursor:pointer;position:absolute;right:0;top:0;font-size:24px}.gj-picker-md .arrow-end{border:16px solid #2196f3}.gj-timepicker-bootstrap :active,.gj-timepicker-bootstrap :focus{box-shadow:none}.gj-picker-bootstrap .arrow-begin,.gj-picker-bootstrap [role=body] [role=arrow]{background-color:#888}.gj-picker-bootstrap .arrow-end{border:16px solid #888}.gj-timepicker-bootstrap .input-group-addon{border-left:0;position:relative;width:38px;border-radius:0 4px 4px 0}.gj-timepicker-bootstrap.input-group-sm .input-group-addon{width:30px}.gj-timepicker-bootstrap.input-group-lg .input-group-addon{width:46px}.gj-timepicker-bootstrap .input-group-addon .gj-icon,.gj-timepicker-bootstrap .input-group-addon .material-icons{position:absolute;font-size:21px;top:6px;left:8px}.gj-timepicker-bootstrap.input-group-sm .input-group-addon .gj-icon,.gj-timepicker-bootstrap.input-group-sm .input-group-addon .material-icons{font-size:19px;top:5px;left:5px}.gj-timepicker-bootstrap.input-group-lg .input-group-addon .gj-icon,.gj-timepicker-bootstrap.input-group-lg .input-group-addon .material-icons{font-size:27px;top:10px;left:10px}.gj-timepicker-bootstrap [role=right-icon] button{width:38px;position:relative}.gj-timepicker-bootstrap.input-group-sm [role=right-icon] button{width:30px}.gj-timepicker-bootstrap.input-group-lg [role=right-icon] button{width:48px}.gj-timepicker-bootstrap [role=right-icon] button .gj-icon,.gj-timepicker-bootstrap [role=right-icon] button .material-icons{position:absolute;font-size:21px;top:7px;left:9px}.gj-timepicker-bootstrap.input-group-sm [role=right-icon] button .gj-icon,.gj-timepicker-bootstrap.input-group-sm [role=right-icon] button .material-icons{top:4px;left:6px;font-size:19px}.gj-timepicker-bootstrap.input-group-lg [role=right-icon] button .gj-icon,.gj-timepicker-bootstrap.input-group-lg [role=right-icon] button .material-icons{font-size:27px;top:8px;left:10px}