:export {
    cranepurple800: #5c1349;
    cranepurple900: #4e0d3a;
    cranepurple700: #71135c;
    cranered400: #f7363e;
    white: #fff;
    purple: #6200ee;
}

.timepicker-ui-normalize {
    box-sizing: content-box !important;
}

.timepicker-ui-modal {
    font-family: 'Roboto', sans-serif;
    position: fixed;
    opacity: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(156, 155, 155, 0.6);
    z-index: 5000;
}

    .timepicker-ui-modal.removed {
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        background-color: transparent;
    }

.timepicker-ui-measure {
    position: absolute;
    top: -624.9375rem;
    width: 3.125rem;
    height: 3.125rem;
    overflow: scroll;
}

.timepicker-ui-wrapper, .timepicker-ui-wrapper.mobile {
    position: fixed;
    z-index: 5001;
    width: 20.5rem;
    height: 31.25rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 0.25rem;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-wrapper {
        flex-direction: row;
        height: 22.5rem;
        width: 36.5rem;
    }
}

@media screen and (max-width: 20.625rem) and (orientation: portrait) {
    .timepicker-ui-wrapper {
        width: 19.6875rem;
    }
}

.timepicker-ui-wrapper.mobile {
    height: 13.625rem;
}

@media screen and (max-width: 20.625rem) {
    .timepicker-ui-wrapper.mobile {
        width: 19.6875rem;
    }
}

.timepicker-ui-header, .timepicker-ui-header.mobile {
    padding-top: 3.25rem;
    padding-bottom: 2.25rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    height: 6.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}

    .timepicker-ui-header.mobile {
        padding-bottom: 0;
    }

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-header {
        height: auto;
        flex-direction: column;
    }
}

.timepicker-ui-select-time, .timepicker-ui-select-time.mobile {
    text-transform: uppercase;
    position: absolute;
    top: calc(1.75rem - 0.75rem);
    left: 1.5rem;
    font-size: 0.75rem;
    color: #a9a9a9;
}

.timepicker-ui-body {
    height: 16rem;
    padding-right: 2.25rem;
    padding-left: 2.25rem;
}

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-body {
        padding-right: 0;
        padding-left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.4375rem;
    }
}

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-wrapper-landspace {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}

.timepicker-ui-footer, .timepicker-ui-footer-mobile {
    height: 4.75rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-footer {
        justify-content: flex-end;
    }
}

.timepicker-ui-clock-face {
    background-color: #e0e0e0;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    position: relative;
}

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-clock-face {
        height: 16rem;
        width: 16rem;
        top: 0.9375rem;
    }
}

.timepicker-ui-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    user-select: none;
    touch-action: none;
    transform: translate(-50%, -50%);
    background-color: #6200ee;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 100%;
}

.timepicker-ui-hour-time-12, .timepicker-ui-minutes-time {
    position: absolute;
    width: 3rem;
    height: 3rem;
    text-align: center;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
    user-select: none;
}

    .timepicker-ui-hour-time-12 span, .timepicker-ui-minutes-time span {
        touch-action: none;
        user-select: none;
    }

.timepicker-ui-wrapper-time, .timepicker-ui-wrapper-time.mobile {
    display: flex;
    margin-right: 0.625rem;
}

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-wrapper-time {
        margin-right: 0;
    }
}

.timepicker-ui-wrapper-time.mobile {
    position: relative;
}

.timepicker-ui-hour, .timepicker-ui-minutes, .timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {
    width: calc(6rem - 1.5rem);
    height: calc(5rem - 1.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.2rem;
    background-color: #e4e4e4;
    border-radius: 0.4375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    border: 0.125rem solid transparent;
    padding: 0.625rem;
}

    .timepicker-ui-hour:hover, .timepicker-ui-hour.active, .timepicker-ui-minutes:hover, .timepicker-ui-minutes.active, .timepicker-ui-hour.mobile:hover, .timepicker-ui-hour.mobile.active, .timepicker-ui-minutes.mobile:hover, .timepicker-ui-minutes.mobile.active {
        color: #6200ee;
        background-color: #ece0fd;
    }

    .timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {
        height: calc(4.375rem - 1.5rem);
    }

        .timepicker-ui-hour.mobile[contenteditable='true']:focus, .timepicker-ui-hour.mobile[contenteditable='true']:active, .timepicker-ui-minutes.mobile[contenteditable='true']:focus, .timepicker-ui-minutes.mobile[contenteditable='true']:active {
            border: 0.125rem solid #6200ee;
            outline-color: #6200ee;
            user-select: all;
        }

.timepicker-ui-dots, .timepicker-ui-dots.mobile {
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.6rem;
    user-select: none;
    touch-action: none;
}

.timepicker-ui-wrapper-type-time, .timepicker-ui-wrapper-type-time.mobile {
    display: flex;
    flex-direction: column;
    height: 5rem;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: #787878;
}

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-wrapper-type-time {
        flex-direction: row;
        width: 100%;
    }
}

.timepicker-ui-wrapper-type-time.mobile {
    height: 4.375rem;
}

.timepicker-ui-am, .timepicker-ui-pm, .timepicker-ui-am.mobile, .timepicker-ui-pm.mobile {
    height: calc(2.5rem - 0.125rem);
    width: calc(3.25rem - 0.125rem);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.125rem solid #d6d6d6;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .timepicker-ui-am:hover, .timepicker-ui-am.active, .timepicker-ui-pm:hover, .timepicker-ui-pm.active, .timepicker-ui-am.mobile:hover, .timepicker-ui-am.mobile.active, .timepicker-ui-pm.mobile:hover, .timepicker-ui-pm.mobile.active {
        color: #6200ee;
        background-color: #ece0fd;
    }

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-am, .timepicker-ui-pm {
        width: 100%;
    }
}

.timepicker-ui-am, .timepicker-ui-am.mobile {
    border-top-left-radius: 0.4375rem;
    border-top-right-radius: 0.4375rem;
    border-bottom-width: calc(0.0469rem / 2);
}

    .timepicker-ui-am.mobile {
        border-bottom-left-radius: 0;
    }

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-am {
        border-top-left-radius: 0.4375rem;
        border-bottom-left-radius: 0.4375rem;
        border-top-right-radius: 0;
        border-top-width: 0.0938rem;
        border-right-width: calc(0.0469rem / 2);
    }
}

.timepicker-ui-pm, .timepicker-ui-pm.mobile {
    border-bottom-left-radius: 0.4375rem;
    border-bottom-right-radius: 0.4375rem;
    border-top-width: calc(0.0469rem / 2);
}

    .timepicker-ui-pm.mobile {
        border-top-right-radius: 0;
    }

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-pm {
        border-bottom-right-radius: 0.4375rem;
        border-top-right-radius: 0.4375rem;
        border-bottom-left-radius: 0;
        border-bottom-width: 0.0938rem;
        border-left-width: calc(0.0469rem / 2);
    }
}

.timepicker-ui-cancel-btn, .timepicker-ui-ok-btn, .timepicker-ui-cancel-btn.mobile, .timepicker-ui-ok.btn-mobile {
    color: #6200ee;
    text-transform: uppercase;
    border-radius: 0.4375rem;
    background-color: transparent;
    text-align: center;
    font-size: 0.95rem;
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    outline: none;
}

    .timepicker-ui-cancel-btn:hover, .timepicker-ui-ok-btn:hover, .timepicker-ui-cancel-btn.mobile:hover, .timepicker-ui-ok.btn-mobile:hover {
        background-color: #d6d6d6;
    }

    .timepicker-ui-cancel-btn, .timepicker-ui-cancel-btn.mobile {
        width: 4.5rem;
        margin-right: 0.25rem;
    }

    .timepicker-ui-ok-btn, .timepicker-ui-ok-btn.mobile {
        width: 4rem;
        margin-left: 0.25rem;
    }

.timepicker-ui-wrapper-btn, .timepicker-ui-keyboard-icon, .timepicker-ui-wrapper-btn-mobile, .timepicker-ui-keyboard-icon-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
}

.timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {
    width: 2.75rem;
    height: 2.75rem;
    position: relative;
    bottom: -1.75rem;
    left: 0.75rem;
    transition: all 0.3s ease;
}

    .timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon,
    .timepicker-ui-keyboard-icon-wrapper:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon,
    .timepicker-ui-keyboard-icon-wrapper.mobile:hover .timepicker-ui-keyboard-icon.mobile {
        background-color: #d6d6d6;
        border-radius: 0.4375rem;
    }

.timepicker-ui-keyboard-icon, .timepicker-ui-keyboard-icon.mobile {
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #4e545a;
    height: 1.25rem;
    box-sizing: content-box;
}

    .timepicker-ui-keyboard-icon:hover, .timepicker-ui-keyboard-icon.mobile:hover {
        color: #6200ee;
    }

@media screen and (min-width: 20rem) and (max-width: 51.5625rem) and (orientation: landscape) {
    .timepicker-ui-keyboard-icon-wrapper, .timepicker-ui-keyboard-icon-wrapper.mobile {
        position: absolute;
        bottom: 0.5rem;
    }
}

.timepicker-ui-wrapper-btn, .timepicker-ui-wrapper-btn.mobile {
    margin-right: 0.5rem;
    position: relative;
    bottom: -0.875rem;
}

.timepicker-ui-hour-text, .timepicker-ui-minute-text, .timepicker-ui-hour-text.mobile, .timepicker-ui-minute-text.mobile {
    position: absolute;
    bottom: -1.375rem;
    font-size: 0.8rem;
    color: #a9a9a9;
}

    .timepicker-ui-minute-text, .timepicker-ui-minute-text.mobile {
        left: 7.5rem;
    }

.timepicker-ui-clock-hand {
    position: absolute;
    background-color: #6200ee;
    bottom: 50%;
    height: 33.5%;
    left: calc(50% - 0.0625rem);
    transform-origin: center bottom 0;
    width: 0.125rem;
}

.timepicker-ui-circle-hand {
    position: absolute;
    top: -1.3125rem;
    left: -1.3125rem;
    width: 0.25rem;
    border: 1.25rem solid #6200ee;
    height: 0.25rem;
    box-sizing: content-box;
    border-radius: 100%;
    transition: all 0.2s ease;
}

    .timepicker-ui-circle-hand.small-circle {
        top: -0.8125rem;
        left: -0.8125rem;
        border-width: 0.75rem;
    }

@media screen and (min-width: 20rem) and (max-width: 51.25rem) and (orientation: landscape) {
    .timepicker-ui-circle-hand {
        top: -1.1125rem;
    }
}

.timepicker-ui-value-tips {
    outline: none;
}

    .timepicker-ui-value-tips.active {
        color: #fff;
    }

.timepicker-ui-clock-animation {
    animation: clockanimation 350ms linear;
}

.timepicker-ui-open-element.disabled {
    pointer-events: none;
    touch-action: none;
    user-select: none;
}

.timepicker-ui-tips-animation {
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.opacity {
    transition: opacity 0.15s linear;
}

    .opacity.show {
        opacity: 1;
    }

.invalid-value {
    border-color: #d50000 !important;
    color: #d50000 !important;
}

    .invalid-value:hover, .invalid-value:focus, .invalid-value:active {
        border-color: #d50000 !important;
        color: #d50000 !important;
    }

@keyframes clockanimation {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}



:export {
    cranepurple800: #5c1349;
    cranepurple900: #4e0d3a;
    cranepurple700: #71135c;
    cranered400: #f7363e;
    white: #fff;
    purple: #6200ee;
}

.timepicker-ui-wrapper.crane-straight, .timepicker-ui-wrapper.mobile.crane-straight {
    border-radius: 0;
    background-color: #4e0d3a;
    color: #fff;
}

    .timepicker-ui-wrapper.crane-straight.radius, .timepicker-ui-wrapper.mobile.crane-straight.radius {
        border-radius: 1.25rem;
    }

.timepicker-ui-select-time.crane-straight, .timepicker-ui-select-time.mobile.crane-straight {
    color: #e5e5e5;
}

.timepicker-ui-clock-face.crane-straight, .timepicker-ui-clock-face.mobile.crane-straight {
    background-color: #71135c;
}

.timepicker-ui-dot.crane-straight, .timepicker-ui-dot.mobile.crane-straight {
    background-color: #f7363e;
}

.timepicker-ui-hour.crane-straight, .timepicker-ui-minutes.crane-straight, .timepicker-ui-hour.mobile.crane-straight, .timepicker-ui-minutes.mobile.crane-straight {
    background-color: #71135c;
    border-radius: 0;
    color: #fff;
}

    .timepicker-ui-hour.crane-straight.radius, .timepicker-ui-minutes.crane-straight.radius, .timepicker-ui-hour.mobile.crane-straight.radius, .timepicker-ui-minutes.mobile.crane-straight.radius {
        border-radius: 1.25rem;
    }

    .timepicker-ui-hour.crane-straight:hover, .timepicker-ui-hour.crane-straight.active, .timepicker-ui-minutes.crane-straight:hover, .timepicker-ui-minutes.crane-straight.active, .timepicker-ui-hour.mobile.crane-straight:hover, .timepicker-ui-hour.mobile.crane-straight.active, .timepicker-ui-minutes.mobile.crane-straight:hover, .timepicker-ui-minutes.mobile.crane-straight.active {
        background-color: #f7363e;
    }

    .timepicker-ui-hour.mobile.crane-straight[contenteditable='true']:focus, .timepicker-ui-hour.mobile.crane-straight[contenteditable='true']:active, .timepicker-ui-minutes.mobile.crane-straight[contenteditable='true']:focus, .timepicker-ui-minutes.mobile.crane-straight[contenteditable='true']:active {
        border-color: #fff;
        outline-color: #fff;
    }

.timepicker-ui-dots.crane-straight, .timepicker-ui-dots.mobile.crane-straight {
    color: #fff;
}

.timepicker-ui-wrapper-type-time.crane-straight, .timepicker-ui-wrapper-type-time.mobile.crane-straight {
    color: #fff;
}

.timepicker-ui-am.crane-straight, .timepicker-ui-pm.crane-straight, .timepicker-ui-am.mobile.crane-straight, .timepicker-ui-pm.mobile.crane-straight {
    border: 0.125rem solid transparent;
    border-radius: 0;
    background-color: #71135c;
}

.timepicker-ui-am:hover.crane-straight, .timepicker-ui-am.active.crane-straight, .timepicker-ui-pm:hover.crane-straight, .timepicker-ui-pm.active.crane-straight, .timepicker-ui-am.mobile:hover.crane-straight, .timepicker-ui-am.mobile.active.crane-straight, .timepicker-ui-pm.mobile:hover.crane-straight, .timepicker-ui-pm.mobile.active.crane-straight {
    color: #fff;
    background-color: #f7363e;
}

.timepicker-ui-am.crane-straight.radius {
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}

.timepicker-ui-pm.crane-straight.radius {
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}

@media screen and (min-width: 20rem) and (max-width: 47.9375rem) and (orientation: landscape) {
    .timepicker-ui-am.crane-straight.radius {
        border-bottom-left-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
    }
}

@media screen and (min-width: 20rem) and (max-width: 47.9375rem) and (orientation: landscape) {
    .timepicker-ui-pm.crane-straight.radius {
        border-top-left-radius: 1.25rem;
        border-top-right-radius: 1.25rem;
    }
}

@media screen and (min-width: 20rem) and (max-width: 47.9375rem) and (orientation: landscape) {
    .timepicker-ui-am.mobile.crane-straight.radius {
        border-bottom-left-radius: 0rem;
        border-bottom-right-radius: 0rem;
    }
}

@media screen and (min-width: 20rem) and (max-width: 47.9375rem) and (orientation: landscape) {
    .timepicker-ui-pm.mobile.crane-straight.radius {
        border-top-left-radius: 0rem;
        border-top-right-radius: 0rem;
    }
}

.timepicker-ui-cancel-btn.crane-straight, .timepicker-ui-ok-btn.crane-straight, .timepicker-ui-cancel-btn.mobile.crane-straight, .timepicker-ui-ok-btn.mobile.crane-straight {
    color: #fff;
    border-radius: 0rem;
}

    .timepicker-ui-cancel-btn.crane-straight.radius, .timepicker-ui-ok-btn.crane-straight.radius, .timepicker-ui-cancel-btn.mobile.crane-straight.radius, .timepicker-ui-ok-btn.mobile.crane-straight.radius {
        border-radius: 0.8125rem;
    }

.timepicker-ui-cancel-btn:hover.crane-straight, .timepicker-ui-ok-btn:hover.crane-straight, .timepicker-ui-cancel-btn.mobile:hover.crane-straight, .timepicker-ui-ok-btn.mobile:hover.crane-straight {
    background-color: #f7363e;
}

.timepicker-ui-keyboard-icon-wrapper.crane-straight, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight {
    color: #fff;
}

    .timepicker-ui-keyboard-icon-wrapper.crane-straight.radius, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius {
        border-radius: 1.25rem;
    }

    .timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon,
    .timepicker-ui-keyboard-icon-wrapper.crane-straight:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon,
    .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight:hover .timepicker-ui-keyboard-icon.mobile {
        background-color: #f7363e;
        color: #fff;
        border-radius: 0;
    }

    .timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon,
    .timepicker-ui-keyboard-icon-wrapper.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile, .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon,
    .timepicker-ui-keyboard-icon-wrapper.mobile.crane-straight.radius:hover .timepicker-ui-keyboard-icon.mobile {
        border-radius: 0.875rem;
    }

.timepicker-ui-keyboard-icon.crane-straight:hover, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover {
    color: #fff;
}

    .timepicker-ui-keyboard-icon.crane-straight:hover.radius, .timepicker-ui-keyboard-icon.mobile.crane-straight:hover.radius {
        border-radius: 1.25rem;
    }

.timepicker-ui-clock-hand.crane-straight {
    background-color: #f7363e;
}

.timepicker-ui-circle-hand.crane-straight {
    border-color: #f7363e;
}

.timepicker-ui-value-tips.crane-straight {
    color: #fff;
}