@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
root {
    display: block;
}
html, body {
    height: 100%;
}
body {
    background-attachment: fixed;
    background-color: #f4f4f4;
    background-image: url("https://www.brachtstueck-kosmetik.de/images/hintergrund.gif");
	font-family:"Raleway",Arial, Helvetica, sans-serif !important;
}
#main {
    display: table;
    vertical-align: middle;
}
#main .wrapper {
    display: table-cell;
    height: 100vh;
    vertical-align: middle;
}
#book-appointment-wizard {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 0 4px #b6b6b6;
	min-height: 480px;
    padding: 0 10px;
}
#book-appointment-wizard #header {
    background: #fff none repeat scroll 0 0;
    border-bottom: 4px solid #630f38;
    height: 90px;
    padding: 5px;
}
#book-appointment-wizard #company-name {
    color: #fff;
    display: inline-block;
    float: left;
    margin: 5px 15px;
}
#book-appointment-wizard #steps {
    display: inline-block;
    float: right;
    margin-top: 17px;
    width: 180px;
}
#book-appointment-wizard .wizard-frame {
    min-height: 530px;
	height:auto;
    padding: 10px 20px;
}
#book-appointment-wizard .wizard-frame .frame-container {
    height: 440px;
    margin-bottom: 10px;
}
#book-appointment-wizard .frame-container .frame-title {
    background-color: #a2185b;
    color: #fff;
    font-size: 1.5em;
    font-weight: normal;
    margin-bottom: 28px;
    padding: 10px;
    text-align: center;
	line-height: normal;
}
#book-appointment-wizard .frame-container .frame-content {
    float: none;
    margin: auto;
}
#book-appointment-wizard .wizard-frame .command-buttons {
    text-align: right;
}
#book-appointment-wizard .wizard-frame .command-buttons .btn {
    margin-right: 10px;
    min-width: 80px;
}
#book-appointment-wizard .book-step {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: inline-block;
    float: left;
    height: 30px;
    margin-right: 10px;
    margin-top: 9px;
    padding: 1px;
    width: 30px;
}
#book-appointment-wizard .book-step strong {
    color: #aaa;
    display: block;
    font-size: 12px;
    text-align: center;
}
#book-appointment-wizard .active-step {
    background: #fff none repeat scroll 0 0;
    border: 2px solid #a2185b;
    display: inline-block;
    float: left;
    height: 40px;
    margin-right: 10px;
    margin-top: 3px;
    padding: 1px;
    width: 40px;
}
#book-appointment-wizard .active-step strong {
    color: #a2185b;
    font-size: 18px;
}
#book-appointment-wizard #frame-footer {
    background: #fafafa none repeat scroll 0 0;
    border-top: 1px solid #eee;
    font-size: 80%;
    padding: 10px;
    text-align: center;
}
#book-appointment-wizard #steps .custom-qtip {
    border-width: 2px;
}
#book-appointment-wizard #available-hours .available-hour {
    border: 1px solid #ccc;
    display: inline-block;
    font-size: 14px;
    margin: 0 5px 10px;
    text-align: center;
    width: 50px;
}
#book-appointment-wizard #available-hours .available-hour:hover {
    background-color: #a2185b;
    border: none;
    color: #fff;
    font-size: 1.1em;
    cursor: pointer;
    font-weight: normal;
	margin: 0 5px 10px;
    text-align: center;
    width: 50px;
}
#book-appointment-wizard #available-hours .selected-hour {
    background-color: #a2185b;
    border: none;
    color: #fff;
    font-size: 1.1em;
    font-weight: normal;
    margin: 0 5px 10px;
    text-align: center;
    width: 50px;
}
#book-appointment-wizard .span3 {
    min-width: 270px;
}
#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;
	color:#a2185b;
}
#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 0s;
}
#book-appointment-wizard .captcha-title .glyphicon-refresh:hover {
    color: #1a865f;
}
#book-appointment-wizard .captcha-image {
    border-radius: 3px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    float: right;

    margin-bottom: 20px;
}
#book-appointment-wizard .captcha-text {
    margin-bottom: 20px;
    width: 100%;
}
#message-frame, #success-frame {
    background: #fff none repeat scroll 0 0;
    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-frame {
    background: #fafafa none repeat scroll 0 0;
    border-bottom: 1px solid #e2e2e2;
    margin: 0;
    padding: 15px 0;
}
#cancel-appointment-frame p {
    margin-bottom: 0;
    margin-top: 8px;
}
#service-description {
	background-color: #f9f9f9;
    border: 1px dashed #999;
    box-sizing: border-box;
    display: inline-block;
    float: left;
    margin-bottom: 20px;
    padding: 10px;
    width: 100%;
}
#service-description strong {
    font-size: 110%;
}
select:focus, select.form-control:focus {
    box-shadow: 0 -2px 0 #630f38 inset !important;
}
a {
    color: #a2185b !important;
}
.btn-primary {
    background-color: #a2185b !important;
}
.btn-primary:hover, .btn-primary:active:hover {
    background-color: #630f38 !important;
}
.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary.focus:active, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
    background-color: #630f38 !important;
}
.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary.focus:active, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
    background-color: #630f38 !important;
}

.btn-primary:active {
    background-color: #630f38 !important;
    background-image: none !important;
}
.btn-primary:hover, .btn-primary:active:hover {
    background-color: #630f38 !important;
}
.btn-primary:focus {
    background-color: #630f38 !important;
}
.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background-color: #630f38 !important;
}
.btn-primary:hover {
    background-color: #630f38 !important;
}
.text-primary {
    color: #a2185b !important;
}
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: 0 -2px 0 #a2185b inset;
}
.btn-success {
    background-color: #a2185b;
    border-color: transparent;
    color: #fff !important;
}
.btn-success:hover, .btn-success:active:hover {
    background-color: #630f38;
}
.btn-success:active:hover, .btn-success.active:hover, .open > .dropdown-toggle.btn-success:hover, .btn-success:active:focus, .btn-success.active:focus, .open > .dropdown-toggle.btn-success:focus, .btn-success.focus:active, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus {
    background-color: #630f38;
    border-color: rgba(0, 0, 0, 0);
    color: #ffffff;
}
.btn-success:active {
    background-color: #630f38;
    background-image: radial-gradient(circle, #a2185b 10%, #630f38 11%);
    background-repeat: no-repeat;
    background-size: 1000% auto;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.btn-success:focus {
    background-color: #630f38;
}
.alert-success {
    background-color: #eee !important;
    border: 1px solid #aaa !important;
    color: #222 !important;
}

#service-description ul {
    margin: 0;
    padding-left: 1em;
}
@media (max-width: 768px) {
html, body {
    min-height: 100%;
}
#main {
    min-height: 100%;
    padding: 0 5vw;
}
#main .wrapper {
    width: 100vw;
}
#book-appointment-wizard #header {
    height: auto;
    overflow: auto;
}
#book-appointment-wizard #company-name {
    display: block;
    float: none;
    text-align: center;
}
#book-appointment-wizard #steps {
    display: block;
    float: none;
    margin: 20px auto;
    overflow: auto;
}
#book-appointment-wizard .wizard-frame {
    height: auto;
    padding: 0;
}
#book-appointment-wizard .wizard-frame .frame-container {
    height: auto;
}
#book-appointment-wizard .wizard-frame .command-buttons {
    float: none;
    margin: 20px auto;
    width: 80%;
}
#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 {
    display: block;
    margin: auto;
    max-width: 300px;
    width: 100%;
}
#book-appointment-wizard .wizard-frame #select-date {
    margin: auto;
    width: 260px;
}
#book-appointment-wizard #available-hours {
    margin: 20px auto;
    overflow: auto;
    padding-left: 0;
    width: 100%;
}
#book-appointment-wizard #available-hours div {
    margin-right: 0;
    text-align: center;
}
#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 {
    float: right;
    width: 45%;
}
#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;
}
#message-frame, #success-frame {
    border: medium none;
    height: auto;
    padding: 35px;
    text-align: center;
}
#message-frame #message-icon, #success-frame #success-icon {
    display: block;
    float: none !important;
    margin: auto;
    width: 64px;
}
#success-frame .btn {
    margin-bottom: 10px;
    max-width: 250px;
    width: 80%;
}
#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 {
    display: block;
    margin: 0;
    width: 100vw;
}
#book-appointment-wizard {
    box-shadow: none;
}
#book-appointment-wizard .captcha-title {
    margin: 7px 0 10px;
}
#book-appointment-wizard .captcha-image {
    float: left;
}
#message-frame, #success-frame {
    height: 100%;
}
}