/* zBooking2 Web App */
/* Note: These are the structural rules, custom colors are defined directly in the style section of the HTML file. */

html, body { margin: 0; padding: 0; }
body { visibility: hidden; position: relative; margin-bottom: 1em; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clear { clear: both; }
a { }
a:link { color: inherit; }
a:visited { color: inherit; }
a:hover { color: inherit; }
a:active { color: inherit; }
button { cursor: pointer; border-width: 0; font-size: 1em; padding: 0.4em 1em; }
button:disabled { cursor: default; }
button a { text-decoration: none; }
button .fa { margin-right: 0.5em; }
.big-btn { font-weight: bold; font-size: larger; }
.snd-btn { font-weight: normal; }
input { padding: 0.3em; font-size: 1em; }
input[type="checkbox"] { width: inherit; }
textarea { width: 100%; padding: 0.3em; }
#overlay { display: none; position: absolute; background-color: #ccc; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; opacity: 0.3; }
#overlay-spinner { display: none; font-size: 10em; position: fixed; top: 50%; left: 50%; margin-left: -0.5em; margin-top: -0.5em; z-index: 101; }
#language { margin: 0 0.5em 0.5em 0.5em; }
.panel { margin-bottom: 1em; padding: 1em; }

/* --- header --- */
.header { margin-bottom: 1.5em; }
.header .language-wrapper { text-align: right; min-height: 0.5em; font-size: 0.8em; }
.header .language-wrapper select.language { margin-bottom: 0.5em; }
.header .language-wrapper .ui-selectmenu-button { width: 4em; margin-bottom: 0.5em; text-align: center; margin-top: -1px; }
.header .language-wrapper .ui-selectmenu-button-open { border-radius: 0; }
.header .language-wrapper .ui-selectmenu-icon { display: none; }
.header .language-wrapper .ui-selectmenu-text { margin: 0; }
.header .logo-wrapper img { max-width: 100%; }
.header .name-wrapper { display: inline-block; }
.header .name-wrapper .name { display: inline-block; }
.header .title-wrapper { display: inline-block; float: right; margin-left: 1em; }
.header .title-wrapepr .title { display: inline-block; }

/* --- main page --- */
.step-icon { border-radius: 1em; margin-right: 0.5em; width: 1.2em; height: 1.2em; line-height: 100%; text-align: center; display: inline-block; font-size: smaller; font-weight: bold; }
.disabled .step-icon { font-weight: normal; }
.error { display: none; margin-top: 0.2em; }
.error-wrapper.has-error.invalid .error.invalid { display: block; }
.error-wrapper.has-error.required .error.required { display: block; }
.work-wrapper { margin-top: 0.5em; }
.works-wrapper.disabled span { background-color:#ccc; pointer-events: none; }
.works-wrapper.disabled span span.ui-selectmenu-icon { display: none;    }
.add-work-button-wrapper { margin-top: 1em; }
.input-icon { display: inline-block; height: 100%; width: 1.3em; text-align: center; vertical-align: middle; font-size: 1.2em; }
.date-picker-wrapper { display: none; }
.date-wrapper { display: inline-block; }
#date { text-align: center; }
th.ui-datepicker-week-end { color: #a33; }
#time { text-align: center; }
.time-wrapper { display: inline-block; }
.time-picker-wrapper { display: none; }
.time-picker-wrapper table { width: 100%; }
.time-picker-wrapper .time { text-align: center; }
.time-picker-wrapper .time.avail { cursor: pointer; }
.time-picker-wrapper .hour { text-align: right; width: 2em; padding-right: 0.5em; }
.time-picker-wrapper .no-free-slots { display: none; padding: 0.4em 0; }
.time-picker-wrapper .no-date-selected { display: none; padding: 0.4em 0; }
.time-picker-wrapper.no-free-slots .no-free-slots { display: block; }
.time-picker-wrapper.no-date-selected .no-date-selected { display: block; }
#step-2 .time-picker-wrapper.no-free-slots .has-free-slots { display: none; }
#step-2 .time-picker-wrapper.no-date-selected .has-free-slots { display: none; }
.gdpr-text { margin-top: 0.5em; }
.cancel-button-wrapper { float: left; }
.book-button-wrapper { text-align: right; }

/* --- success page --- */
#success-page { display: none; }
.success-icon { font-size: 2em; margin-right: 0.5em; }
.success-message-wrapper { margin-bottom: 2em; }
.success-message { font-size: 1.2em; font-weight: bold; display: inline; }
.success-message-email { display: none; }
.success-message-wrapper.has-email .success-message-email { display: block; }
.summary-container ul li { line-height: 1.5em; }
.summary-container ul li .summary-item label { display: inline-block; min-width: 8em; }
.summary-container ul li .summary-item .value { display: inline-block; margin-left: 2em; }
.summary-container ul li .summary-item .value label { min-width: 0; }
.close-button-wrapper { float: left; }
.book-again-btn-wrapper { text-align: right; margin-bottom: 1em; }
.upload-attachment-container { margin-top: 1em; }
.upload-warning-text { color: red; font-weight: bold; }
.upload-warning .hidden { display: none; }
.upload-warning .shown { display: inline-block; }

/* --- warning page --- */
#warning-page { display: none; }
.warning-message-wrapper { text-align: center; }
.warning-message { font-size: 1.2em; font-weight: bold; }

/* --- error page --- */
#error-page { display: none; }
.error-icon { font-size: 2em; margin-right: 0.5em; }
.error-message { font-size: 1.2em; font-weight: bold; }
.reset-btn-wrapper { text-align: center; margin-top: 2em; margin-bottom: 1em; }

/* --- Extra small devices (portrait phones, less than 576px) --- */
.label { margin-bottom: 0.7em; font-weight: bold; }
.head { margin-bottom: 0.7em; font-weight: bold; }
.label-input:not(:first-child) { margin-top: 1em; }
.label-input label { display: block; margin-bottom: 0.3em; }
.ui-selectmenu-button.ui-button { width: 100%; }
.add-work-button-wrapper { text-align: center; }
.add-work-button-wrapper button { width: 100%; }
input { width: 100%; }
.date-wrapper { width: 100%; margin-bottom: 1em; }
.time-wrapper { width: 100%; }
.date-wrapper input { width: 100%; padding-right: 2em; margin-right: -2em; }
.time-wrapper input { width: 100%; padding-right: 2em; margin-right: -2em; }
.date-picker-wrapper { text-align: center; }
.time-picker-wrapper { margin-top: 1em; }
.time-picker-wrapper .time-table { display: none; }
.time-picker-wrapper .time-table .time { padding: 0.2em; }
#date-picker { display: inline-block; }
#step-2.date-picking .date-wrapper { display: none; }
#step-2.date-picking .time-wrapper { display: none; }
#step-2.date-picking .date-picker-wrapper { display: block; }
#step-2.time-picking .date-wrapper { display: block; }
#step-2.time-picking .time-wrapper { display: none; }
#step-2.time-picking .date-picker-wrapper { display: none; }
#step-2.time-picking .time-picker-wrapper { display: block; }

/* --- Very small devices --- */
@media screen and (max-width: 576px) {
    .summary-container ul li .summary-item label { display: block; }
}

/* --- Small devices (landscape phones, 576px and up) --- */
@media (min-width: 576px) {
    .add-work-button-wrapper { text-align: right; }
    .add-work-button-wrapper button { width: auto; }
    .date-wrapper { width: 50%; padding-right: 1em; }
    .time-wrapper { width: 50%; padding-left: 1em; float: right; }
    .double-step-wrapper { display: table; width: 100%; table-layout: fixed; margin-bottom: 1em; }
    .double-step { display: table-row; }
    .double-step .panel { display: table-cell; }
    .double-step-gap { display: table-cell; width: 1em; }
}

/* --- Medium devices (tablets, 768px and up) --- */
@media (min-width: 768px) {
    body { padding-left: 1em; padding-right: 1em; }
    #language { margin: 0 auto; }
    #step-2 .time-select-wrapper { display: none; }
    #step-2.date-picking .date-wrapper,
    #step-2.date-picking .time-wrapper,
    #step-2.time-picking .date-wrapper,
    #step-2.time-picking .time-wrapper { display: inline-block; }
    .time-picker-wrapper { margin-top: 0; }
    .time-picker-wrapper .time-table { display: table; }
}

/* --- Large devices (desktops, 992px and up) --- */
@media (min-width: 992px) {
    #language { width: 950px; margin: 0 auto; }
    .panel .inputs { display: table; width: 100%; }
    .panel .inputs .label-input { display: table-row; }
    .panel .inputs .label-input label { display: table-cell; padding: 0 0.5em 1em 0; min-width: 7em; }
    .panel .inputs .label-input .input { display: table-cell; width: 100%; }
    .panel .inputs .label-input .input .error { margin: 0.2em 0 0.5em 0; }
    #step-2.date-picking .date-and-time-picker-wrapper,
    #step-2.time-picking .date-and-time-picker-wrapper { display: table; width: 100%; }
    #step-2.date-picking .date-and-time-picker-wrapper .date-and-time-picker,
    #step-2.time-picking .date-and-time-picker-wrapper .date-and-time-picker { display: table-row; }
    #step-2.date-picking .date-and-time-picker-wrapper .date-and-time-picker .date-picker-wrapper,
    #step-2.time-picking .date-and-time-picker-wrapper .date-and-time-picker .date-picker-wrapper { display: table-cell; vertical-align: top; }
    #step-2.date-picking .date-and-time-picker-wrapper .date-and-time-picker .time-picker-wrapper,
    #step-2.time-picking .date-and-time-picker-wrapper .date-and-time-picker .time-picker-wrapper { display: table-cell; vertical-align: top; width: 100%; }
    #date-picker { margin-right: 1em; }
    #step-2.time-picking .time-table { display: table; }
}

/* --- Extra large devices (large desktops, 1200px and up) --- */
@media (min-width: 1200px) {
}

@media print {
    body { padding: 3em; }
    .language-wrapper { display: none; }
    .logo-wrapper { display: none; }
    #success-page { font-size: 11pt; }
    #success-page button { display: none; }
}