smart-webcomponents-react/source/styles/components/smart.timepicker.css

[](https://jqwidgets.com/license/)

.smart-time-picker{display:block;width:var(--smart-time-picker-default-width);height:var(--smart-time-picker-default-height);line-height:initial;min-width:250px}.smart-time-picker>.smart-container{width:100%;height:100%}.smart-time-picker .smart-main-container{width:100%;height:calc(100% - var(--smart-calendar-title-height));padding:2%;background-color:var(--smart-background)}.smart-time-picker .smart-header{display:flex;width:100%;height:var(--smart-calendar-title-height);background-color:var(--smart-primary);color:var(--smart-primary-color);justify-content:center;align-items:center}.smart-time-picker .smart-header:focus{outline:var(--smart-background) solid 1px}.smart-time-picker .smart-footer{display:none}.smart-time-picker .smart-svg-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.smart-time-picker .smart-am-container,.smart-time-picker .smart-hour-container,.smart-time-picker .smart-minute-container,.smart-time-picker .smart-pm-container{opacity:.5;cursor:pointer}.smart-time-picker .smart-hour-minute-container{display:flex;font-size:50px}.smart-time-picker .smart-hour-minute-container div:nth-child(2){opacity:.5}.smart-time-picker .smart-am-pm-container{margin-left:10px}.smart-time-picker .smart-selected{opacity:1}.smart-time-picker .smart-svg-picker{border-radius:50%;background-color:var(--smart-background);position:relative;box-sizing:content-box;touch-action:none}.smart-time-picker .smart-svg-picker:focus{border:1px solid var(--smart-outline);outline:0}.smart-time-picker .smart-svg-picker.animate{animation:smart-time-picker-animation .5s linear}.smart-time-picker .smart-label{fill:var(--smart-background-color)}.smart-time-picker .smart-label.smart-selected{fill:var(--smart-primary-color);stroke:var(--smart-primary-color);stroke-width:0}.smart-time-picker .smart-needle,.smart-time-picker .smart-needle-central-circle{fill:var(--smart-primary)}.smart-time-picker[disabled] .smart-am-container,.smart-time-picker[disabled] .smart-hour-container,.smart-time-picker[disabled] .smart-minute-container,.smart-time-picker[disabled] .smart-pm-container,.smart-time-picker[readonly] .smart-am-container,.smart-time-picker[readonly] .smart-hour-container,.smart-time-picker[readonly] .smart-minute-container,.smart-time-picker[readonly] .smart-pm-container{cursor:default}.smart-time-picker[footer] .smart-footer{display:block;width:100%;height:30px}.smart-time-picker[footer] .smart-svg-container{height:calc(100% - 30px)}.smart-time-picker[view=landscape]{width:var(--smart-time-picker-default-height);height:var(--smart-time-picker-default-width);min-width:400px}.smart-time-picker[view=landscape]>.smart-container{display:flex}.smart-time-picker[view=landscape] .smart-header{flex-direction:column;width:33%;height:100%}.smart-time-picker[view=landscape] .smart-main-container{width:67%;height:100%}.smart-time-picker[view=landscape] .smart-am-pm-container{margin-left:0}@keyframes smart-time-picker-animation{0%,100%{opacity:1}25%,75%{opacity:.5}50%{opacity:0}}.smart-time-picker[right-to-left] .smart-footer,.smart-time-picker[right-to-left] .smart-header{direction:rtl}.smart-time-picker[right-to-left] .smart-am-pm-container{margin:0 10px 0 0}.smart-time-picker[right-to-left][view=landscape]>.smart-container{flex-direction:row-reverse}