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

 * 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

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



root {

    display: block;

}



html,

body {

    height: 100%;

}



body {

    background-color: #CAEDF3;

}



#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: #4A4D9B;

    border-bottom: 4px solid #EBA719;

}



#book-appointment-wizard #company-name {

    display: inline-block;

    font-size: 24px;

    color: #FFF;

    margin: 16px 10px 0 15px;

    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: 530px;

}



#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;

}



#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 #128ACC;

}



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

    font-size: 12px;

    display: block;

    text-align: center;

    color: #A9C5BB;

}



#book-appointment-wizard .active-step {

    display: inline-block;

    height: 40px;

    width: 40px;

    float: left;

    background: #FFF;

    padding: 1px;

    margin-right: 10px;

    margin-top: 3px;

    border: 3px solid #EBA719;

}



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

    color: #4cc281;

    font-size: 18px;

}



#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: 15px;

    padding: 1px;

    display: inline-block;

}



#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

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

#cancel-appointment-frame {

    padding: 15px 0;

    margin: 0;

    background: #FAFAFA;

    border-bottom: 1px solid #E2E2E2;

}



#cancel-appointment-frame p {

    margin-top: 8px;

    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: 80%;

        margin: 20px auto;

    }



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

        width: 45%;

    }



    #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: 260px;

        margin: auto; /* center */

    }



    #book-appointment-wizard #available-hours {

        overflow: auto;

        margin: 20px auto;

        width: 260px;

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

    }



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

        margin-right: 30px;

    }



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

        padding: 8px 3px;

    }



    #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%;

    }

}