/*! Author: Roland Oth, igumbi.com Description: CSS for the igumbi online booking tool. Use the existing classes to overwrite and create your custom stylesheet. The custom stylesheet can be loaded in the igumbi backend and will overwrite the style declarations in this stylesheet. */ textarea, input, select { border: 1px solid #cccccc; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; font-size: 110%; line-height: 1.5em; padding: 3px; padding-left: 4px; margin: 0; } .igumbiclear { clear: both; } * html #avform { width: 200px; } .sellerspinner { margin-top: 1rem; margin-left: auto; margin-right: auto; background: url(/images/embed/ajax-loader.gif) no-repeat; width: 220px; height: 20px; display: block; } #avform { padding: 10px 6px; width: 200px; height: 240px; h3 { margin-top: 2px; font-size: 1.2em; } & .hidden { display: none; } #avformerror { color: red; } fieldset { border: 0; margin: 10px 0; padding: 0; .control-group { clear: both; } } .name, .suffix { width: 64px; font-size: 14px; height: 34px; line-height: 14px; display: flex; align-items: center; justify-content: end; overflow: hidden; float: left; text-align: right; padding-right: 2px; } .suffix { justify-content: start; padding-left: 2px; font-size: 11px; } .avformfield { display: block; overflow: hidden; float: left; height: 34px; padding-top: 3px; width: 120px; input { margin-left: 2px; height: 28px; padding: 1px 3px; font-size: 14px; } &.narrow { width: 64px; } &.discount_code { input { width: 110px; font-size: 11px; } } } #avfnrrooms, #avfpersons, #avfchildren1, #avfchildren2, #avfchildren3, #avfchildren4, #avfchildren5 { text-align: right; width: 48px; } #avfnrrooms.bed { background: #fff url(/images/embed/bed.png) no-repeat 4px 6px; &:focus { background: #fff url(/images/embed/bed-focus.png) no-repeat 4px 6px; } } #avfnrrooms.buggy { background: #fff url(/images/embed/buggy.png) no-repeat 4px 6px; &:focus { background: #fff url(/images/embed/buggy-focus.png) no-repeat 4px 6px; } } #avfnrrooms.house { background: #fff url(/images/embed/house.png) no-repeat 4px 6px; &:focus { background: #fff url(/images/embed/house-focus.png) no-repeat 4px 6px; } } #avfnrrooms.meeting { background: #fff url(/images/embed/meeting.png) no-repeat 4px 6px; &:focus { background: #fff url(/images/embed/meeting-focus.png) no-repeat 4px 6px; } } #avfpersons { background: #fff url(/images/embed/persons.png) no-repeat 4px 6px; &:focus { background: #fff url(/images/embed/persons-focus.png) no-repeat 4px 6px; } } #avfarr, #avfdep { text-align: left; width: 108px; background: #fff url(/images/embed/obt-calendar.png) no-repeat 90px 4px; &:focus { background: #fff url(/images/embed/obt-calendar-focus.png) no-repeat 90px 4px; } } .widebutton { width: 190px; height: 32px; margin-top: 13px; margin-bottom: 10px; } } #free_rooms .btnclose { float: right; padding: 4px 10px; font-size: 2em; background-color: #e6e6e6; background-color: rgba(204, 204, 204, 0.5); a { text-decoration: none; } } #dialog { width: 500px; padding-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; margin-bottom: 30px; font-size: 11px; height: 1%; } #dialog_header { padding: 5px; border: 1px solid #bbb; min-height: 80px; h3, p { width: 96%; } h3 { font-size: 1.4em; margin-bottom: 5px; margin-top: 2px; } p { font-size: 1.2em; margin-top: 2px; margin-bottom: 2px; } .date_text: { padding-bottom: 0px; } .avstatus { border: 1px solid red; padding: 5px; color: red; } } #offersummary { margin-top: 5px; height: auto; display: flex; padding: 4px 10px; min-height: 110px; border: 1px dashed grey; .extras-items { list-style: none; margin-bottom: 10px; .offeritem-quantity { width: 140px; display: inline-block; } .offeritem-productname { width: 200px; display: inline-block; } .offeritem-price { display: inline-block; width: 80px; text-align: right; } } .yourbooking { .product { display: inline-block; float: left; width: 185px; min-height: 110px; } .buttonarea { display: block; float: left; width: 140px; margin-top: 30px; } & .bookingsummary { float: left; font-size: 1.3em; padding-left: 10px; .total, .total_with_extras, .nrrooms, .persons { font-weight: bold; } } } } #free_rooms { .line, .productcategoryline { padding: 5px; border: 1px dashed grey; margin-top: 5px; min-height: 110px; height: auto; display: block; overflow: auto; .product { float: left; width: 185px; .productname { width: 185px; font-size: 1.3em; font-weight: bold; } .productdescription { font-size: 1em; width: 185px; } } .extra { display: block; width: 100%; overflow: auto; margin-bottom: 1.5em; .product_extra { width: 300px; .productname { width: 300px; } .productdescription { width: 300px; } } .productimage_extra { width: 0px; float: left; height: 1em; } .personoffers { width: 130px; .offerselect { display: inline-block; } } } .productimage { float: left; width: 130px; min-height: 90px; margin-bottom: 5px; display: block; img { padding: 5px; width: 120px; background: #fff; -moz-box-shadow: #bbb 0 3px 5px; -webkit-box-shadow: #bbb 0 3px 5px; } } .dateandpriceinfo { float: left; padding-left: 5px; width: 95px; display: block; .priceinfo { width: 90px; padding-right: 5px; } } .totalandbookbutton { float: left; width: 60px; display: block; .total { width: 60px; padding: 5px 0px; font-size: 21px; text-align: right; } .total_with_extras { padding-top: 30px; text-align: right; } } } .specialconditions { width: 350px; display: none; border: 1px dashed grey; background: #fff; padding: 5px; position: absolute; margin-top: -75px; margin-left: 30px; } .productcategoryline { .product { padding-left: 5px; padding-right: 5px; width: 35%; } .personoffers, .extras_price { float: left; display: block; width: 32%; padding-left: 10px; .persons { margin-bottom: 8px; .personcount { font-size: 1.3em; } } } .extras_price { text-align: right; width: 130px; } .offerselect { width: 140px; } } } #book { h3 { margin-top: 6px; } input { width: 121px; } select { width: 100px; } .control-group { width: 100%; display: inline-block; } .wrapper { display: inline-block; width: 100%; .personal { float: left; width: 50%; padding-top: 15px; } .address { float: left; width: 50%; padding-top: 15px; } } .checkin, .creditcard, .wrapper, .banktransfer { padding-bottom: 8px; border-bottom: 1px solid #bbb; width: 100%; } /*similar to control group but with multiple label/input fields*/ .ccfield-group { display: inline-block; margin-bottom: 10px; } .card-number { width: 160px; } .card-month { margin-right: 4px; } .card-year { } /*Stripe card-element*/ #book #card-element { display: block; width: 100%; margin-left: 0; margin-bottom: 0.75em; } #book #card-element input { width: 100%; padding: 0.75em; color: var(--color-700); background-color: #ffffff; border-width: 1px; border-color: var(--color-400); } input::-moz-placeholder, .input::-moz-placeholder { color: var(--color-600); } input:-ms-input-placeholder, .input:-ms-input-placeholder { color: var(--color-600); } input::placeholder, .input::placeholder { color: var(--color-600); } .comments { padding: 10px 0; } #payment-methods { margin-bottom: 1.25em; border-bottom-width: 2px; border-color: var(--color-200); } #payment-methods li { display: none; } #payment-methods li.visible { display: inline-block; margin-right: 1.25em; list-style-type: none; } #payment-methods input[type="radio"] { display: none; } #payment-methods label { display: flex; flex: 1 1 0%; cursor: pointer; } #payment-methods input + label { position: relative; padding-top: 0.25em; padding-bottom: 0.25em; text-transform: uppercase; text-decoration: none; font-size: 0.875em; } #payment-methods label::before { position: absolute; width: 100%; left: 0; border-bottom-width: 2px; border-color: var(--color-700); opacity: 0; --transform-translate-x: 0; --transform-translate-y: 0; --transform-rotate: 0; --transform-skew-x: 0; --transform-skew-y: 0; --transform-scale-x: 1; --transform-scale-y: 1; transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)); --transform-translate-x: 0; --transform-translate-y: 0; --transform-rotate: 0; --transform-skew-x: 0; --transform-skew-y: 0; --transform-scale-x: 1; --transform-scale-y: 1; transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)); --transform-scale-x: 0; transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; content: ""; bottom: -2px; /* transform: scaleX(0); transition: all 0.25s ease-in-out; */ } #payment-methods label:hover { color: var(--color-700); cursor: pointer; } #payment-methods input:checked + label { color: var(--color-700); } #payment-methods label:hover::before, #payment-methods input:checked + label::before { opacity: 1; --transform-scale-x: 1; } .payment-info.redirect { display: none; } .fieldwarning, #bookform_errors { border: 1px solid #6f2121; background-color: #b32d2d; background: #b32d2d -moz-linear-gradient(top, #cc4a4a, #b32d2d, #aa2222); background: #b32d2d -webkit-gradient(linear, left top, left bottom, color-stop(0, #cc4a4a), color-stop(0.5, #b32d2d), color-stop(1, #aa2222)); color: #fff; } #bookform_errors { display: none; margin-top: 30px; padding: 10px; } .mandatory { font-weight: bold; } .name, .name2, .name3 { width: 50px; height: 20px; display: block; overflow: hidden; float: left; margin-right: 5px; margin-top: 2px; padding-top: 6px; text-align: right; } .name2 { width: 95px; } .name3 { text-align: left; } .field1, .field2, .field3, .field4 { display: block; float: left; height: 32px; margin-top: 2px; width: 120px; } .field1 { width: 140px; } .field4 { width: 74%; input { width: 100%; } } .zip { width: 45px; } #expiration_month { width: 50px; } #expiration_year { width: 66px; } #card_type { width: 130px; } .comments, .cancellation, .checkin, .creditcard, .button { display: inline-block; p { width: 100%; } } .comments textarea { width: 450px; } /*Stripe fields*/ #labelholdername { text-align: left; } #cardholder-name { width: 180px; } #card-errors { color: red; &.tw-block { display: block; } } /*End of Stripe fields*/ #commentstextarea { float: left; padding: 5px; height: 75px; } .persondetails { border: 1px solid red; } .finalbutton { margin-left: 96px; } .finalbuttonwide { width: 250px; } .finalizespinner { padding-top: 20px; padding-left: 10px; display: inline-block; width: 100%; } .confirmpolicy { width: 100%; min-height: 2em; margin-bottom: 2em; display: inline-block; input[type="checkbox"] { width: 20px; } label.name3 { width: 180px; } } #hotel_dataprotection_policy_url, #hotel_agb_url { margin-left: 10px; } .voucherstatus-fail { margin-bottom: 0.25rem; border-radius: 0.25rem; border-width: 1px; border-style: solid; border-color: rgba(220, 38, 38, 1); background-color: rgba(254, 226, 226, 1); padding: 0.5rem; color: rgba(127, 29, 29, 1); } .voucherstatus-success { margin-bottom: 0.25rem; border-radius: 0.25rem; border-width: 1px; border-style: solid; border-color: rgba(22, 163, 74, 1); background-color: rgba(220, 252, 231, 1); padding: 0.5rem; color: rgba(20, 83, 45, 1); } } #displayfinal { .addressfinal { padding-top: 15px; } } .clear { clear: both; } $igumbigreen: #bdd73c; .altavail { display: block; margin-bottom: 30px; padding: 4px; .explain { li { text-align: center; padding: 6px 16px; } } .imgdesc { display: inline-block; .productimage { border: 4px solid white; display: block; float: left; width: 120px; height: 80px; margin-bottom: 10px; img { width: 120px; height: 80px; } } .altproductdescription { padding: 4px; .productname { font-size: 1.3em; font-weight: bold; } display: block; float: left; padding: 4px; width: 340px; } } ul { display: block; width: 100%; height: 26px; margin: 0; padding: 0; list-style: none; li { display: inline-block; padding: 2px; font-size: 13px; color: #555; border: 1px solid #ddd; border-bottom-width: 4px; border-top-width: 3px; float: left; min-width: 1em; &.ared { background-color: lighten(red, 20%); color: #eee; } &.aorange { background-color: lighten($igumbigreen, 30%); } &.agreen { background-color: $igumbigreen; } &.weekend { border-color: #aaa; } &.requested { border-bottom-color: lighten(blue, 20%); } } } }