/* default css */

    .tp-wrapper, .tp-wrapper * {
        box-sizing: border-box;
    }

    .tp-wrapper button {
        cursor: pointer;
        font-family: inherit;
    }

    .tp-wrapper button:focus {
        outline: none;
    }

/* end of default css */

/* wrapper */

    .tp-wrapper {
        width: 100%;
        position: relative;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
        background-color: #fff;
        overflow: unset !important;
    }

/* end of wrapper */

/* input */

    .tp-input {
        position: absolute;
        z-index: -99;
        top: -100%;
    }

/* end of input */

/* button */

    .tp-button {
        text-align: center;
        display: flex;
        flex-direction: column;
        padding: 10px;
        border-radius: 4px;
        height: 100%;
        justify-content: center;
    }
    
    .tp-wrapper.tp-disabled .tp-button {
        opacity: 0.6;
    }

    .tp-button.tp-selected-ampm {
        border: 1px #ccc solid;
        background-color: #fff !important;
        width: 42px;
        height: 39px;
        transition: color 0.6s, border-color 0.6s;
        color: #000 !important;
        font-size: 13px;
    }

    .tp-button.tp-selected-ampm:focus {
        border-color: #84AEF8;
        color: #84AEF8 !important;
    }

    .tp-button.tp-selected-ampm:hover, .tp-ampm-container.tp-active .tp-button.tp-selected-ampm {
        color: #4484f4 !important;
        border-color: #4484f4;
    }
    
    .tp-wrapper.tp-disabled .tp-button.tp-selected-ampm {
        cursor: default;
    }
    
    .tp-wrapper.tp-disabled .tp-button.tp-selected-ampm, .tp-wrapper.tp-disabled .tp-button.tp-selected-ampm:hover {
        color: #ccc !important;
        background-color: #FCFCFC;
        border-color: #ccc;
    }

    .tp-button.tp-now {
        transition: box-shadow 0.6s, background-color 0.6s;
        border: 1px #4484f4 solid;
        background-color: #4484f4 !important;
        color: #fff !important;
        font-size: 13px;
        height: 39px;
    }

    .tp-button.tp-now:hover {
        box-shadow: 0 0 5px rgba(0,0,0,0.22);
    }
    
    .tp-button.tp-now:focus {
        background-color: #0d58d9 !important;
    }
    
    .tp-wrapper.tp-disabled .tp-button.tp-now {
        cursor: default;
    }
    
    .tp-wrapper.tp-disabled .tp-button.tp-now, .tp-wrapper.tp-disabled .tp-button.tp-now:hover {
        color: #ccc !important;
        background-color: #FCFCFC !important;
        border-color: #ccc;
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }

/* end of button */

/* time picker */

    /* container */

        .tp-container {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            background-color: #fff;
        }

    /* end of container */

    /* fields */

        .tp-field {
            display: flex;
            flex-direction: column;
            width: 60px;
            border: 1px #ccc solid !important;
            border-radius: 4px !important;
            font-family: inherit;
            padding: 10px !important;
            transition: border 0.6s ease, box-shadow 0.6s ease, background-color 0.6s ease;
            margin-bottom: 0 !important;
            height: 39px;
        }

        .tp-field:focus {
            outline: none !important;
            box-shadow: 0 0 5px rgba(0,0,0,0.22) !important;
            border: 1px solid rgba(0,0,0,0.22) !important;
            border-bottom: 1px solid rgba(0,0,0,0.22);
            background-color: #fff;        
        }
        
        .tp-wrapper.tp-disabled .tp-field {
            color: #ccc;
            background-color: #FCFCFC;
        }

    /* end of fields */

    /* colon */

        .tp-colon {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            margin: 0 10px;
            font-size: 18px;
            font-weight: 600;
        }
        
        .tp-wrapper.tp-disabled .tp-colon {
            color: #ccc;
        }

    /* end of colon */

    /* am pm select */

        .tp-ampm-container {
            position: relative;
            margin: 0 10px;
        }

        .tp-ampm-options {
            position: absolute;
            top: 93%;
            left: 0;
            background-color: #fff;
            border-radius: 4px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border: 1px #4484f4 solid;
            border-top: none;
            width: 100%;
            overflow: hidden;
            display: none;
            z-index: 99;
        }

        .tp-ampm-container.tp-active .tp-ampm-options {
            display: block;
        }

        .tp-ampm-option {
            border: none;
            background-color: transparent !important;
            padding: 5px;
            font-size: 10px;
            display: block;
            transition: background-color 0.6s;
            width: 100%;
            color: #000 !important;
        }

        .tp-ampm-option:hover, .tp-ampm-option:focus {
            background-color: #f7f7f7 !important;
        }

        .tp-ampm-option.tp-active, .tp-ampm-option.tp-active:hover {
            background-color: #F3F6F9 !important;
        }
        
        .tp-wrapper.tp-disabled .tp-ampm-option {
            color: #ccc !important;
        }

    /* end of am pm select */

/* end of time picker */