/* ----------------------------------------------------------------------------

 * Easy!Appointments - Open Source Web Scheduler

 *

 * @package     EasyAppointments

 * @author      A.Tselegidis <alextselegidis@gmail.com>

 * @copyright   Copyright (c) 2013 - 2018, Alex Tselegidis

 * @license     http://opensource.org/licenses/GPL-3.0 - GPLv3

 * @link        http://easyappointments.org

 * @since       v1.0.0

 * ---------------------------------------------------------------------------- */

 .ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
    margin: auto !important;
}


root {

    display: block;

}

.ui-datepicker table {
    font-size: 14px !important;
    border-collapse: collapse;
}



.btn {
    font-size: 16px;
}

h3, .h3 {
    font-size: 28px;
}

html,

body {

    height: 100%;
    font-size: 14px;
    background-color: #31a5d6;

}








#main {

    display: table;

    vertical-align: middle;

}



#main .wrapper {

    height: 100vh;

    display: table-cell;

    vertical-align: middle;

}



/* BOOK APPOINTMENT WIZARD

 ------------------------------------------------------------------------------ */

#book-appointment-wizard {

    background: #FFF;

    box-shadow: 0px 1px 1px #B6B6B6;

    min-height: 480px;

    padding: 0;

}



#book-appointment-wizard #header {

    padding: 5px;

    height: 90px;

    background: #003366;

    border-bottom: 4px solid #297cd0;

}



#book-appointment-wizard #company-name {

    display: inline-block;

    font-size: 22px;
    line-height: 22px;;

    color: #FFF;

    margin: 12px 10px 0 12px;

    float: left;

}



#book-appointment-wizard #steps {

    width: 180px;

    display: inline-block;

    float: right;

    margin-top: 17px;

}



#book-appointment-wizard .wizard-frame {

    padding: 10px 20px;

    height: 560px;

}



#book-appointment-wizard .wizard-frame .frame-container {

    height: 440px;

    margin-bottom: 10px;

}



#book-appointment-wizard .frame-container .frame-title {

    text-align: center;

    margin-bottom: 28px;

    color: #666;

}



#book-appointment-wizard .frame-container .frame-content {

    margin: auto;

    float: none;

}



#book-appointment-wizard .wizard-frame .command-buttons {

    float: right;

}



#book-appointment-wizard .wizard-frame .command-buttons .btn {

    min-width: 80px;

    margin-right: 10px;
    padding-top:10px;
    padding-bottom:10px;

}



#book-appointment-wizard .book-step {

    display: inline-block;

    height: 30px;

    width: 30px;

    float: left;

    background: #FFF;

    padding: 1px;

    margin-right: 10px;

    margin-top: 9px;

    border: 3px solid #1c6b99;

}



#book-appointment-wizard .book-step strong {

    font-size: 12px;

    display: block;

    text-align: center;

    color: #2993d0;

}



#book-appointment-wizard .active-step {

    display: inline-block;

    height: 46px;

    width: 46px;

    float: left;

    background: #FFF;

    padding: 1px;

    margin-right: 10px;

    margin-top: 0px;

    border: 3px solid #2993d0;

}



#book-appointment-wizard .active-step strong {

    color: #297cd0;

    font-size: 22px;

}



#book-appointment-wizard #frame-footer {

    padding: 10px;

    text-align: center;

    border-top: 1px solid #EEE;

    background: #FAFAFA;

}



#book-appointment-wizard #steps .custom-qtip {

    border-width: 2px;

}





#book-appointment-wizard #available-hours .available-hour {
    font-size: 16px;
    padding: 2px 14px;
    display: block;
    border: 1px solid;
    margin: 2px;
    text-align: center;
    margin-bottom: 13px;
    float: inherit;
}



#book-appointment-wizard #available-hours .available-hour:hover {

    font-weight: bold;

    background-color: #CAEDF3;

    cursor: pointer;

}



#book-appointment-wizard #available-hours .selected-hour {

    color: #0088cc;

    font-weight: bold;

}



#book-appointment-wizard .span3 {

    min-width: 270px; /* This is especially needed for ie8 */

}



#book-appointment-wizard #appointment-details p,

#book-appointment-wizard #customer-details p {

    font-size: 16px;

    line-height: 28px;

}



#book-appointment-wizard #wizard-frame-1 label {

    font-size: 19px;

    margin-bottom: 12px;

}



#book-appointment-wizard #wizard-frame-1 select {

    margin-bottom: 25px;

}



#book-appointment-wizard .captcha-title {

    float: left;

    margin-right: 20px;

    margin-top: 7px;

}



#book-appointment-wizard .captcha-title .glyphicon-refresh {

    cursor: pointer;

    transition: all 0.3s linear;

}



#book-appointment-wizard .captcha-title .glyphicon-refresh:hover {

    color: #1A865F;

}



#book-appointment-wizard .captcha-image {

    float: right;

    margin-bottom: 20px;

    border-radius: 3px;

    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);

}



#book-appointment-wizard .captcha-text {

    width: 100%;

    margin-bottom: 20px;

}



/* BOOK SUCCESS & MESSAGE

   ------------------------------------------------------------------------- */

#message-frame,

#success-frame {

    background: #FFF;

    border: 1px solid #DDDADA;

    padding: 70px;

}



#message-frame #message-icon,

#success-frame #success-icon {

    margin-top: 20px;

}



#message-frame .alert,

#success-frame .alert {

    margin-top: 20px;

}



/* CANCEL APPOINTMENT

   ------------------------------------------------------------------------- */



.booking-header-bar {

    padding: 10px 0;

    margin: 0;

    background: #FAFAFA;

    border-bottom: 1px solid #E2E2E2;

}



.booking-header-bar p {

    margin-top: 2px;

    margin-bottom: 0;

}



/* MOBILE DEVICES

   ------------------------------------------------------------------------- */

@media (max-width: 768px) {

    /**

     * BOOKING WIZARD

     */

    html,

    body {

        min-height: 100%;

    }



    #main {

        min-height: 100%;

        padding: 0 5vw;

    }



    #main .wrapper {

        width: 100vw;

    }



    #book-appointment-wizard #header {

        overflow: auto;

        height: auto;

    }



    #book-appointment-wizard #company-name {

        float: none;

        display: block;

        text-align: center;

    }



    #book-appointment-wizard #steps {

        float: none;

        display: block;

        overflow: auto;

        margin: 20px auto;

    }



    #book-appointment-wizard .wizard-frame {

        padding: 0 10px;

        height: auto;

    }



    #book-appointment-wizard .wizard-frame .frame-container {

        height: auto;

    }



    #book-appointment-wizard .wizard-frame .command-buttons {

        float: none;

        width: 98%;

        margin: 16px auto;

    }



    #book-appointment-wizard .wizard-frame .command-buttons .btn {

        width: 45%;
        padding-top:10px;
        padding-bottom:10px;

    }



    #book-appointment-wizard .wizard-frame .command-buttons #button-next-2,

    #book-appointment-wizard .wizard-frame .command-buttons #button-next-3 {

        float: right;

    }



    #book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {

        width: 100%;

        max-width: 300px;

        margin: auto;

        display: block;

    }



    #book-appointment-wizard .wizard-frame #select-date {

        width: 100%;
        max-width: 416px;

        margin: auto; /* center */
        text-align: center;

    }



    #book-appointment-wizard #available-hours {

        overflow: auto;

        margin: auto;

        margin-top: 16px;

        text-align: center;

        width: 100%;

        padding-left: 14px; /* center at the bottom of datepicker */

    }



    #book-appointment-wizard #available-hours div {

        margin-right: -14px;

    }



    #book-appointment-wizard #available-hours .available-hour {
        padding: 4px 8px;
        border: 1px solid;
        margin-bottom: 11px;
    }



    #book-appointment-wizard #form-message {

        display: block;

        text-align: center;

    }



    #book-appointment-wizard #book-appointment-form {

        width: 45%;

        float: right;

    }



    #book-appointment-wizard #book-appointment-form #book-appointment-submit {

        width: 100%;

    }



    .popover .popover-title {

        text-align: center;

    }



    .popover .popover-content #language-list .language {

        margin: 10px 0;

    }



    /**

     * BOOK SUCCESS

     */

    #message-frame,

    #success-frame {

        text-align: center;

        height: auto;

        border: none;

        padding: 35px;

    }



    #message-frame #message-icon,

    #success-frame #success-icon {

        width: 64px;

        display: block;

        margin: auto;

        float: none !important;

    }



    #success-frame .btn {

        margin-bottom: 10px;

        width: 80%;

        max-width: 250px;

    }



    /**

     * CANCEL APPOINTMENT

     */

    #cancel-appointment-frame {

        text-align: center;

    }



    .ui-dialog .ui-dialog-title {

        font-size: 1.2em;

    }

}



@media (max-width: 480px) {

    body {

        background-color: #FAFAFA;

    }



    #main {

        padding: 0;

    }



    #main .wrapper {

        width: 100vw;

        margin: 0;

        display: block;

    }



    #book-appointment-wizard {

        box-shadow: none;

    }



    #book-appointment-wizard .captcha-title {

        margin: 7px 0 10px 0

    }



    #book-appointment-wizard .captcha-image {

        float: left;

    }



    #message-frame,

    #success-frame {

        height: 100%;

    }

}