.clocklet,
.clocklet-ampm,
.clocklet-container,
.clocklet-dial,
.clocklet-hand,
.clocklet-hand-origin,
.clocklet-plate,
.clocklet-tick {
    touch-action:manipulation;
    touch-action:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
    box-sizing:border-box;
    position:absolute;
    font-size:inherit;
}

.clocklet--inline,
.clocklet-container--inline {
    position:static
}

.clocklet-container {
    display:inline;width:0;
    height:0;
}

.clocklet {
    font-size:16px;
    width:270px;
    height:270px;
    margin-top:1px;
    padding:8px;
    border-radius:3px;
}

.clocklet:not(.clocklet--showing) {
    transition:opacity .2s ease-out;
}

.clocklet:not(.clocklet--shown):not(.clocklet--inline) {
    opacity:0;
    pointer-events:none;
}

[data-clocklet-placement=bottom][data-clocklet-alignment=left] {
    transform-origin:0 0;
}

[data-clocklet-placement=bottom][data-clocklet-alignment=right] {
    transform-origin:100% 0;
}

[data-clocklet-placement=top][data-clocklet-alignment=left] {
    transform-origin:0 100%;
}

[data-clocklet-placement=top][data-clocklet-alignment=right] {
    transform-origin:100% 100%;
}

.clocklet-plate {
    position:relative;
    height:100%;
    border-radius:50%;
}

.clocklet-dial {
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    border-radius:50%;
}

.clocklet-ampm:before,
.clocklet-hand,
.clocklet-hand-origin,
.clocklet-tick {
    z-index:1;
}

.clocklet-hand {
    left:0;
    top:6.4%;
    right:0;
    bottom:50%;
    margin:auto;
    transform-origin:50% 100%;
}

.clocklet-tick {
    width:1.75em;
    height:1.75em;
    margin:-.875em;
    border-radius:50%;
    padding-left:5px;
    outline:0;
    border:0;
    cursor:pointer;
    background-color:transparent;
    color:inherit;
    font-family:inherit;
    font-weight:inherit;
}

.clocklet-tick:before {
    content:attr(data-clocklet-tick-value);
}

.clocklet-ampm {
    top:calc(50% + .75em);
    left:0;
    right:0;
    margin:auto;
    width:3em;
    height:1.5em;
    border-radius:.75em;
    cursor:pointer;
}

.clocklet-ampm,
.clocklet-ampm:before {
    display:flex;
    align-items:center;
    justify-content:center 
}

.clocklet-ampm:before {
    position:relative;
    width:2em;
    height:2em;
    border-radius:50%;
    content:attr(data-clocklet-ampm);
    transform:translateX(-1em);
}

.clocklet--shown .clocklet-ampm:before {
    transition:transform .1s ease-out;
}

.clocklet-ampm[data-clocklet-ampm=pm]:before {
    transform:translateX(1em);
}

.clocklet-ampm[data-clocklet-ampm-formatted]:not([data-clocklet-ampm-formatted=""]):before {
    content:attr(data-clocklet-ampm-formatted);
}

.clocklet-hand-origin {
    left:calc(50% - 5px);
    top:calc(50% - 5px);
    right:calc(50% - 5px);
    bottom:calc(50% - 5px);
    border-radius:50%;
}

.clocklet:not([data-clocklet-value]) .clocklet-hand,
.clocklet:not([data-clocklet-value]) .clocklet-hand-origin,
.clocklet[data-clocklet-value=""] .clocklet-hand,
.clocklet[data-clocklet-value=""] .clocklet-hand-origin {
    display:none;
}

.clocklet-dial--hour {
    width:calc(40% + 56px);
    height:calc(40% + 56px);
}

.clocklet-hand--hour {
    width:8px;
}

.clocklet-tick--hour[data-clocklet-tick-value="0"]:before {
    content:"12";
}

.clocklet-dial--minute {
    width:100%;
    height:100%;
}

.clocklet-hand--minute {
    width:2px;
}

.clocklet-tick--minute:not([data-clocklet-tick-value$="0"]):not([data-clocklet-tick-value$="5"]) {
    transform:scale(.6);
}

@media screen and (max-width:480px) {
    .clocklet {
        transform:scale(.8);
    }
}

@media screen and (max-width:400px) {
    .clocklet {
        transform:scale(.75);
    }
}

.clocklet {
    border:1px solid #ddd;
    background-color:#eee;
}

[data-clocklet-placement=top] {
    box-shadow:4px -4px 4px hsla(0,0%,50.2%,.5);
}

[data-clocklet-placement=bottom] {
    box-shadow:4px 4px 4px hsla(0,0%,50.2%,.5);
}

.clocklet-plate {
    background-color:#fff;
}

.clocklet-hand {
    background-color:#a1ddff;
}

.clocklet-hand-origin {
    background-color:#4bf;
}

.clocklet-tick--selected {
    background-color:#57c2ff;
    color:#fff;
}

.clocklet--hoverable:not(.clocklet--dragging) .clocklet-tick:hover {
    background-color:#7ccfff;
}

.clocklet-ampm {
    background-color:hsla(0,0%,80%,.6);
}

.clocklet-ampm:before {
    background-color:#57c2ff;
    color:#fff;
}

.clocklet-ampm:hover:before {
    background-color:#7ccfff;
}