@recras/online-booking-js/docs/demo.css

JS library for easy integration of Recras online booking and voucher sales

html {
    box-sizing: border-box;
    color: hsl(147, 25%, 25%);
    height: 100%;
    margin: 0;
}
*, *::before, *::after {
    box-sizing: inherit;
}
body {
    background-image: url('https://www.onionbooking.com/static/images/header.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    font-family: sans-serif;
    height: 100%;
    margin: 0;
}
main {
    background: rgba(255, 255, 255, 0.8);
    min-height: 100vh;
    margin: 0 auto;
    padding: 1em;
    max-width: 800px;
}

img {
    height: auto;
    max-width: 100%;
}
input, select, textarea {
    background: #fff;
    border: 1px solid hsl(147, 25%, 50%);
    padding: 0.25em;
}
button {
    background: hsl(147, 25%, 50%);
    border: 0;
    border-bottom: 2px solid hsl(147, 25%, 25%);
    border-radius: 0.25em;
    color: #fff;
}
button:hover, button:active {
    background: hsl(147, 25%, 67%);
    border-bottom-color: hsl(147, 25%, 50%);
}
input:invalid, select:invalid, textarea:invalid {
    background: rgb(255, 250, 250);
    border: 2px solid currentColor;
    color: #a00;
    padding: calc(0.25em - 1px);
}
button:disabled {
    cursor: not-allowed;
}
.recras-price, .priceSubtotal {
    text-align: right;
}
input:not([type="checkbox"]):not([type="radio"]):not(input[type="number"]), select, textarea, .radioGroup {
    font: inherit;
    max-width: 100%;
    width: 300px;
}
input[type="number"] {
    font: inherit;
    width: 6em;
}
.radioGroup {
    line-height: 1.5;
}
.priceLine, .discountLine {
    font-weight: bold;
}
.recras-contactform-required::after {
    content: '*';
}

.recras-product-dependency, .maximum-amount, .minimum-amount {
    color: #a00;
    padding-left: 0.25em;
}
.booking-error {
    background: hsl(0, 25%, 96%);
    border: 1px solid #a00 !important;
    padding: 0.5em !important;
}
.recras-success {
    background: hsl(120, 25%, 96%);
    border: 1px solid hsl(120, 40%, 40%);
    padding: 0.5em !important;
}

.recras-onlinebooking > form + form, .recras-finalise {
    border-top: 2px solid hsla(147, 25%, 25%, 0.25);
}

hr {
    background: hsl(147, 25%, 25%);
    border: 0;
    color: hsl(147, 25%, 25%);
    height: 2px;
}

.recras-onlinebooking > *:not(.recras-active):not(.recras-completed) {
    /*display: none; /* Umcomment to hide sections we haven't gotten to yet */
}

@media (max-width: 640px) {
    .recras-amountsform > div {
        grid-template-columns: 1fr 7em;
    }
    .recras-amountsform > div > div:first-child {
        grid-column: 1 / 3;
    }
    .recras-contactform > div {
        grid-template-columns: 1fr;
    }
}