/* ----------------------------------------------------------------------------
 * Easy!Appointments - Open Source Web Scheduler
 *
 * @package     EasyAppointments
 * @author      A.Tselegidis <alextselegidis@gmail.com>
 * @copyright   Copyright (c) 2013 - 2015, Alex Tselegidis
 * @license     http://opensource.org/licenses/GPL-3.0 - GPLv3
 * @link        http://easyappointments.org
 * @since       v1.0.0
 * ---------------------------------------------------------------------------- */

/****
     FILE VERSIONING
     Version:  v4.3.2
****/
a {
    color: #0589ff;
}
a:hover,
a:focus {
    color: #0848c1;
    text-decoration: underline;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label,
.has-error .terms-control {
    color: #ff0000;
}
.checkbox-error {
    box-shadow: inset 0px 0px 1px 2px #ff0000;
}
.text-danger {
    color: var(--wizard-txt-color-inactive);
    font-weight: bold;
}
.border-error {
    border: 2px solid var(--wizard-txt-color-inactive) !important;
}
body .custom-qtip {
    border: none;
    border-radius: 0;
    padding: 10px;
    font-size: 12px;
    line-height: 20px;
}

body .ui-widget {
    font-family: var(--main-font);
    font-size: 1.1em;
}

body .ui-widget-overlay {
    background: #000 50% 50% repeat-x;
    opacity: 0.5;
    filter: Alpha(Opacity=50);
}

body .ui-dialog .ui-dialog-titlebar-close {
    display: none;
}

body .ui-draggable .ui-dialog-titlebar {
    /*    background: var(--main-bg-color);*/
    /*    color: var(--main-txt-color);*/
    font-size: 1.5em;
    /*    text-shadow: 1px 1px 0px var(--main-bg-color-border-shadow);*/
    padding: 14px 10px;
    /*    border-bottom: 4px solid var(--main-bg-color-border);*/
    margin-bottom: 10px;
}

body .ui-dialog {
    padding: 0;
    z-index: 2000;
    border: none !important;
    box-shadow: 0 0 10px #333;
    background: white;
}
#message_box {
    padding-left: 30px;
    padding-right: 30px;
}
body .ui-dialog .ui-dialog-buttonpane {
    padding: 0.3em 1em 0.3em 0.4em;
    border: none;
}

body .ui-button .ui-icon,
body .ui-button:hover .ui-icon {
    background-image: url('../ext/jquery-ui/images/ui-icons_222222_256x240.png');
}

body .ui-dialog #error-technical {
    max-width: 500px;
}

body .ui-datepicker {
    border: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 100%;
    background: var(--calendar-default-bg-color);
    margin: auto;
    padding: 0;
    border: 1px solid;
    box-shadow: 0px 0px 16px 0px #a5a5a5;
}

body .ui-datepicker .ui-widget-header {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--main-bg-color-border);
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    height: 40px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

body .ui-datepicker td a,
body .ui-datepicker td span {
    text-align: center !important;
    box-sizing: border-box;
    height: 32px;
}

.ui-datepicker table {
    min-height: 300px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    border-radius: 20px;
    background-color: black;
}

.breaks tr:hover td {
    background: #ffffc2 !important;
}

.working-plan td {
    vertical-align: middle;
}

.breaks td {
    vertical-align: middle;
}

li.language:hover {
    cursor: pointer;
    color: #005580;
}

#select-language {
    cursor: pointer;
    display: inline-block;
    padding: 4px 5px;
}

#select-language.active {
    box-shadow: 0 0 20px #1a865f;
}

#language-list {
    list-style: none;
    padding-left: 0px;
}

/* JQUERY UI DATETIME PICKER ADDON
   ------------------------------------------------------------------------- */
.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
}
.ui-timepicker-div dl {
    text-align: left;
}
.ui-timepicker-div dl dt {
    height: 25px;
    margin-bottom: -25px;
}
.ui-timepicker-div dl dd {
    margin: 0 10px 10px 65px;
}
.ui-timepicker-div td {
    font-size: 90%;
}
.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.ui-timepicker-rtl {
    direction: rtl;
}
.ui-timepicker-rtl dl {
    text-align: right;
}
.ui-timepicker-rtl dl dd {
    margin: 0 65px 10px 10px;
}

/* BOOTSTRAP THEME FIXES
   ------------------------------------------------------------------------- */
.clickable-link {
    text-decoration-line: underline;
    text-decoration-color: blue;
}
.select2-container--classic .select2-selection--single .select2-selection__rendered {
    line-height: 18px;
    white-space: normal;
}

.select2-container .select2-selection--single {
    height: auto;
}

/*  Color themes  */
body {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
}
#book-appointment-wizard #header {
    border-bottom: 1px solid var(--main-bg-color-border);
}
#book-appointment-wizard #company-name {
    color: var(--header-txt-color);
}
#book-appointment-wizard #frame-footer {
    border-top: 1px solid var(--wizard-footer-bg-color-border);
    background: var(--wizard-footer-bg-color);
}
body .ui-datepicker td a.ui-state-active,
body .ui-datepicker td a.ui-state-highlight {
    border: 2px solid var(--control-active-bg-color-border);
    color: var(--control-active-txt-color);
    font-weight: bolder;
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single,
/*.select2-container .select2-selection--single .select2-selection__rendered,*/
.select2-selection__arrow,
.ui-widget-header a {
    background: var(--control-default-bg-color);
    color: var(--control-default-txt-color);
}

.select2-container--classic .select2-selection--single .select2-selection__placeholder {
    background-color: var(--control-default-bg-color);
    color: var(--main-txt-color);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] {
    background-color: var(--control-inactive-bg-color);
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--classic .select2-selection--single {
    background: var(--control-default-bg-color);
    background-color: white;
    color: var(--control-default-txt-color);
    background-image: none;
    border: 1px solid var(--control-default-bg-color-border);
    background-repeat: none;
    filter: none;
}
.select2-results__option,
body .ui-draggable .ui-dialog-titlebar,
.label-success,
 .btn-primary, .btn-primary:focus,
.button-provider, .button-provider:focus,
.button-insurance, .button-insurance:focus,
/*.service-button-container,*/
.button-service, .button-service:focus,
.button-location, .button-location:focus,
.label-success[href]:hover,
.label-success[href]:focus,

.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: var(--control-default-bg-color);
    color: var(--control-default-txt-color);
    outline: none;
}
.text-primary {
    color: var(--wizard-txt-color);
}

body .ui-draggable .ui-dialog-titlebar {
    color: var(--wizard-txt-color);
    text-shadow: 1px 1px 0px var(--wizard-txt-color-shadow);
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom-color: var(--wizard-bg-color-border);
    text-align: center;
}
.ui-dialog .ui-dialog-title {
    width: 100%;
    overflow: unset;
    overflow: visible;
}
.ui-dialog .ui-dialog-buttonpane button {
    padding: 10px;
    width: 100px;
    border: 1px solid gray;
}
.ui-dialog .ui-dialog-buttonpane button:hover {
    background: whitesmoke;
}
/*.ui-state-default, .ui-widget-content .ui-state-default, */
.ui-widget-header .ui-state-default {
    border: 1px solid var(--control-default-bg-color-border);
    font-weight: normal;
}

.command-buttons .button-next {
    background: var(--command-next-bg-color);
    color: var(--command-next-txt-color);
}

.command-buttons .button-back {
    background: var(--command-back-bg-color);
    color: var(--command-back-txt-color);
}

.btn-primary {
    border-color: transparent;
}
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus,
input[type='number']:focus,
.form-control[type='text']:focus,
.form-control[type='password']:focus,
.form-control[type='email']:focus,
.form-control[type='tel']:focus,
.form-control[contenteditable]:focus {
    box-shadow: 0px -2px 0px var(--control-hover-bg-color-border) inset;
}
ul.checkout-bar li,
ul.checkout-bar li:before,
ul.checkout-bar li.active,
ul.checkout-bar:before,
ul.checkout-bar li.visited::before,
ul.checkout-bar li.active:before {
    background-color: var(--control-active-bg-color);
}
ul.checkout-bar li.visited {
    color: var(--control-default-txt-color);
}
@media all and (min-width: 620px) {
    ul.checkout-bar li.visited:after {
        background-color: var(--control-default-bg-color);
    }
    ul.checkout-bar li.active:after {
        background-color: var(--control-active-bg-color);
    }
}
body .ui-datepicker td a.ui-state-highlight {
    color: var(--control-default-txt-color);
    background: var(--control-default-bg-color);
}

#book-appointment-wizard #available-hours .available-hour:focus,
body .ui-datepicker td a:focus,
body .ui-datepicker-header a:focus,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    color: var(--control-default-txt-color);
    text-decoration: none;
    background: var(--control-default-bg-color) !important;
    font-weight: normal;
    border-bottom-color: var(--control-default-bg-color-border) !important;
}
#book-appointment-wizard #header,
.ui-widget-header a,
.ui-widget-header {
    background: var(--header-bg-color);
    color: var(--header-txt-color);
}
#book-appointment-wizard .wizard-frame {
    background-color: var(--wizard-bg-color);
    border-color: var(--wizard-bg-color-border);
    /*	 box-shadow: 0px 23px 72px 6px var(--wizard-bg-color-shadow); */
}
/*.select2-container--classic .select2-selection--single .select2-selection__rendered,*/
/*.Zebra_DatePicker td.dp_selected {
    background: var(--control-default-txt-color) ;
    color: var(--control-default-bg-color);
}
.Zebra_DatePicker td.dp_hover {
    background: var(--control-hover-bg-color) ;
    color: var(--control-hover-txt-color);

}*/
.select2-container--classic .select2-results__option--highlighted[aria-selected],
#book-appointment-wizard #available-hours .selected-hour,
.provider-selected,
.service-selected,
.button-selected,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
body .ui-datepicker td a.ui-state-active,
.btn-success {
    background: var(--control-active-bg-color) !important;
    color: var(--control-active-txt-color) !important;
    border-color: var(--control-active-bg-color-border) !important;
    font-weight: bold;
    box-shadow: 0px 2px 7px var(--control-active-box-shadow-color);
    border-radius: 4px;
}
body .ui-datepicker td a.ui-state-active {
    border-bottom-color: var(--control-active-bg-color-border) !important;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
    background-color: var(--control-default-bg-color);
}
.ui-icon,
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon {
    /*background-image: url("../ext/jquery-uiimages/ui-icons_ffffff_256x240.png");*/
    /*    background-image: url("../ext/jquery-ui/images/ui-icons_062126_256x240.png");*/
    /*background-image: url("../ext/jquery-uiimages/ui-icons_222222_256x240.png");*/
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
#book-appointment-wizard #available-hours .available-hour:hover,
.button-selected:focus,
.button-provider:hover,
.button-provider:active:hover,
.button-provider:focus,
.button-location:hover,
.button-location:active:hover,
.button-location:focus,
.button-service:focus,
.button-insurance:hover,
.button-insurance:active:hover,
.button-insurance:focus,
.btn-primary:hover,
.btn-primary:active:hover,
.btn-primary:focus {
    background: var(--control-hover-bg-color);
    color: var(--control-hover-txt-color);
    outline: none;
}

.gm-style-iw-d {
    max-width: 300px;
    /*    min-width: 300px;*/
    padding: 0px !important;
    width: 100%;
    height: 100%;
    margin: auto;
    overflow: hidden !important;
}

.gm-style-iw.gm-style-iw-c {
    padding: 0px !important;
    min-width: 230px !important;
}

.goog-te-gadget span {
    display: none;
}

/*jQuery Message Pop-up Modification */
.ui-dialog .appt-edit-dialog {
    text-align: center !important;
    padding-bottom: 10px !important;
}

.ui-dialog .appt-edit-dialog .ui-dialog-buttonset {
    float: none !important;
}

.ui-dialog .btn-appt-edit {
    width: auto !important;
    font-family: var(--main-font) !important;
}

/* Mobile Devices */
@media (max-width: 768px) {
    .gm-style-iw-d {
        max-width: 300px;
        min-width: 260px;
        padding: 0px !important;
        width: 100%;
        height: 100%;
        margin: auto;
        overflow: hidden !important;
        max-height: 170px !important;
    }

    .gm-style-iw.gm-style-iw-c {
        padding: 0px !important;
        max-height: 160px !important;
        max-width: 260px !important;
    }
}