/**
 * MAIN CSS FILE FOR EASY!APPOINTMENTS
 */
root { 
    display: block;
}

body {  
    background-color: #f2f2f2;
    background: url('../../images/bg.jpg') no-repeat left top fixed;
    background-size: cover;
}


.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    color: #008378;
}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus {
    border:1px solid #119edb;
    background:#008378 url(images/ui-bg_highlight-soft_25_ffffff_1x100.png) 50% 50% repeat-x;
    font-weight:bold;
    color:#fff
}


/* BOOK APPOINTMENT WIZARD
 ------------------------------------------------------------------------------ */
#book-appointment-wizard {
    width: 660px;
    background: #FFF;
    box-shadow: 0px 1px 1px #B6B6B6;
    min-height: 480px;
    opacity: 0.9;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#book-appointment-wizard #header {
    padding: 5px;
    height: 70px;
    background: #02867b;
    border-bottom: 4px solid #00524b;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

#book-appointment-wizard #company-name { 
    font-weight: bold;
    color: #FFF;
    font-size: 22px;
    margin: 27px 10px 0 14px;
    display: inline-block;
    text-shadow: 0px 1px 1px #8F8888;
    float: left;
}

#book-appointment-wizard #steps {
    width: 225px;
    display: inline-block;
    float: right;
    margin-top: 10px;
}

#book-appointment-wizard .wizard-frame {
    padding: 10px 20px;
    height: 434px;
}

#book-appointment-wizard .wizard-frame .frame-container {
    height: 375px;
    margin-bottom: 10px;
    overflow:hidden;
}

#book-appointment-wizard .frame-container .frame-title {
    text-align: left;
    margin-bottom: 15px;
    margin-top: 10px;
}

#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: 20px;
    width: 20px;
    float: left;
    background: #FFF;
    padding: 3px;
    margin-right: 10px;
    margin-top: 10px;
    border: 3px solid #00524b;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#book-appointment-wizard .book-step strong {
    font-size: 18px;
    display: block;
    text-align: center;
    color: #555;
}

#book-appointment-wizard .active-step {
    display: inline-block;
    height: 20px;
    width: 20px;
    float: left;
    background: #fff;
    padding: 10px;
    margin-right: 10px;
    margin-top: 3px;
    border: 3px solid #00524b;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

#book-appointment-wizard .active-step strong {
    color: #00524b;
    font-size: 25px;
}

#book-appointment-wizard #frame-footer {
    padding: 10px;
    text-align: center;
    border-top: 1px solid #eee;
    background: #555;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

#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: #02867b;
    font-weight: bold;
    text-decoration: underline;
}

#book-appointment-wizard .span3 {
    min-width: 130px; /* This is especially needed for ie8 */
}

#book-appointment-wizard #customer-details p { 
    font-size: 16px; 
    line-height: 28px; 
}

#book-appointment-wizard #appointment-details p {
    font-size: 16px; 
    line-height: 28px;
    padding: 10px 15px;
    border: solid 1px #517bb1;
    background: #e3efff;
}

#book-appointment-wizard #appointment-details p  strong {
    color: #02867b !important;
}

#book-appointment-wizard #service-description {
    margin-top: 10px;
    padding: 10px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-height: 80px;
}

#book-appointment-wizard #wizard-frame-3 .text-error {margin: 0 0 25px;}

#book-appointment-wizard #wizard-frame-1 label, #book-appointment-wizard #wizard-frame-3 label {
    font-size: 17px;
    margin-bottom: 2px;
}

#book-appointment-wizard #wizard-frame-1 select {
    margin-bottom: 25px;
}


/* CANCEL APPOINTMENT 
   ------------------------------------------------------------------------- */
#cancel-appointment-frame {
    padding: 12px 17px 0;
    background: #FAFAFA;
    border-bottom: 1px solid #E2E2E2;
    overflow: auto;
}

#cancel-appointment-frame p {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 0;
    width: 515px;
}

#cancel-appointment-frame form {
    display: inline;
}

#company-details {
    border: solid 1px #f7eaa7;
    padding: 10px;
    background-color: #fcf8e3;
    font-size: 0.95em;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    text-align:left;
    
}

#company-details a {display:block;}

.themap {
    display:nonne;
}

.pi-google-map {
    width:100%;
    height: 225px;
    overflow: auto !important;
}



@media (max-width: 568px) {
    body {
        padding: 25px;
    }
    .container {
        /*width:500px;*/
        position:absolute;
        top:50px;
        margin: 0 auto;
    }

    #main {width: 100% !important;}

    #book-appointment-wizard {
        width:87% !important;
        position:absolute !important;
        left: 0px !important;
        top: 0px !important;
        margin: 0 10px 25px 0;
    }

    #book-appointment-wizard #company-name {font-size: 20px;}

    #book-appointment-wizard #steps {
        margin-top: 3px;
        width: 250px;
        float: none;
        position: absolute;
        left: 5%;
        top: 54px;
    }

     #book-appointment-wizard #cancel-appointment-frame .pull-left {
        width: 100%;
        padding-top: 20px !important;
     }

    #book-appointment-wizard .wizard-frame {
        padding: 10px 20px;
        height: 455px;
        width: 88%;
    }

    #book-appointment-wizard .wizard-frame .frame-container {
        height:auto;
        width: 100%;
    }

    #book-appointment-wizard .wizard-frame .frame-container .frame-title {
        width: 100%;
        line-height: 1.2em;
        margin-top: 20px;
    }

    #book-appointment-wizard .wizard-frame .frame-container h3.frame-title {
        font-size: 21px;
    }

    #book-appointment-wizard .wizard-frame .frame-container select {
        width: 100%;
    }

    #service-description {
        width: 92%;
    }

    #book-appointment-wizard #wizard-frame-1 {height:auto !important; margin-bottom: 30px;}
    #book-appointment-wizard #wizard-frame-2 {height:auto !important; margin-bottom: 30px;}
    #book-appointment-wizard #wizard-frame-3 {height:auto !important; margin-bottom: 30px;}
    #book-appointment-wizard #wizard-frame-4 {height:auto !important; margin-bottom: 30px;}
    #book-appointment-wizard #wizard-frame-5 {height:auto !important; margin-bottom: 30px;}

    #button-next-1 {margin-right:0 !important;}
    
    #book-appointment-wizard .wizard-frame .frame-container .span3 {
        min-width: 150px;
        float:left;
    }

    #book-appointment-wizard .wizard-frame .frame-container .sp-cal {
        width:280px;
    }

    #book-appointment-wizard .wizard-frame .frame-container .sp-hrs {
        width:100%;
    }

    #book-appointment-wizard .wizard-frame .frame-container .sp-coords input {
        width:95%;
    }

    #book-appointment-wizard .wizard-frame .frame-container .sp-coords textarea {
        width:95%;
        height: 50px;
    }

    #book-appointment-wizard .wizard-frame .frame-container .frame-content {
        width: 100% !important;
        margin:0;
    }

    #book-appointment-wizard .wizard-frame .frame-container .frame-content ui-datepicker-inline {
        width:98%;
    }

    #available-hours {
        width: 100%;
        height: auto;
        overflow-y: scroll;
        margin-top: 10px;
    }

    #available-hours div {
        width: 33% !important;
    }

    #available-hours div br { 
        display: none;
    }

    #available-hours div span {
        float: left; 
        font-size: 13px !important;
        /*padding: 1px 7px 1px !important;*/
        padding: 3px 5px !important;
        width: 32.5%;
        border: solid 1px #ddd;
        background: #f6f6f6;
        margin: 3px;
    }

    .available-hour:nth-child(odd) {
        background: #fff;
    }

    .available-hour:nth-child(even) {
        background: #efefef;
    }
    
    #book-appointment-wizard #frame-footer {
        width: 94% !important;
    }

    .ui-widget-header {
        background: #02867b !important;
        color: #fff;
    }

    body .ui-icon, .ui-widget-content .ui-icon {
        background-image: url(libs/jquery/images/ui-icons_ffffff_256x240.png) !important;
    }

}