]> html { clear:both; overflow:auto; overflow-x:auto; overflow-y:auto; padding:0px; } * { } html { background-color:#222; background-size:cover; background-repeat:no-repeat; background-position:center; background-attachment:fixed; overflow:initial; overflow-x:initial; overflow-y:initial; } body { background-color:#222; background-size:cover; background-repeat:no-repeat; background-position:center; background-attachment:fixed; font-family:'Open Sans', sans-serif; margin:0px; min-height:100%; overflow-x:hidden !important; overflow-y:auto !important; -webkit-tap-highlight-color:rgba(255,255,255,0); overscroll-behavior-y:contain; } body.overflow-hidden { overflow:hidden !important; } div.footer { height:180px; } a.hup-hide-small-logo { left: 0px; position: relative; } .hup-bar .hup-bar-item.hup-hide-small-logo:hover { border-bottom: 0; background-color: transparent !important; margin-left: 0px; } .hup-house-keeping { margin-top: 16px; } iframe.hup-frame { position: relative; width: 100%; border: 0px; padding-left: 0px; height: 300px; display: block; } /*div.side-bar { display: flex; flex-direction: row; position: fixed; left: 6px; top: -10px; margin-top: 0px; height: 238px;*/ /* width: 40px; */ /*justify-content: center; z-index: 200; margin-left: 0px; width: 300px; height: 65px; } div.side-bar div { border: solid 1px #253e5c; border-radius: 0 0 35px 35px; color: #fff; flex-basis: 30%; padding: 4px; margin-bottom: 4px; padding-top: 4px; font-size: 2em; text-align: center; cursor: pointer; background-color: #333; margin: 2px; margin-bottom: 0px; }*/ .hup-button-accent { background-color: transparent; color: #fff; border-radius: 25px; font-size: 16px; padding: 8px; border: solid 1px #333; padding-left: 24px; padding-right: 24px; } .hup-button:hover { background-color: #4d78aa !important; } button#loginButton { padding: 16px; padding-left: 24px; padding-right: 24px; } div.side-bar { display: flex; flex-direction: row; position: fixed; left: 0px; top: 2px; margin-top: 0px; height: 238px; z-index: 200; margin-left: 0px; width: 100%; height: 74px; padding-left: 24px; padding-right: 24px; } div.side-bar div.side-button { border: solid 1px #333; border-radius: 50%; color: #fff; padding: 4px; margin-bottom: 4px; padding-top: 0px; font-size: 2em; text-align: center; cursor: pointer; background-color: #222; margin: 2px; margin-bottom: 0px; padding-left: 12px; padding-right: 12px; } div.side-bar div.left-section { flex-basis: 142px; display: flex; align-items: center; } div.side-bar div.right-section { flex-basis: 142px; display: flex; align-items: center; cursor: pointer; justify-content: flex-end; align-items: center; } div.side-bar div.top-options { display: flex; flex-basis: calc(100% - 284px); align-items: center; justify-content: center; position: relative; top: 0px; } body.getaway div.side-bar div.side-button.top-option.option-online { border-radius: 35px 0 0 35px; } body.getaway button#addHouse { border-radius: 0 25px 25px 0; } body.getaway button#addBaskets { display:none; } div.side-bar div.side-button.top-option { width: 30%; max-width: 160px; border-radius: 0px; margin: 0; padding-bottom: 0; display: block; margin-top: 2px; } div.side-bar div.side-button:hover { background: #4d78aa; } div.side-bar div.side-button.top-option.option-restaurant { border-radius: 35px 0 0 35px; margin-left: 8px; border-right: 0; } div.side-bar div.side-button.top-option.option-vouchers { border-radius: 0 35px 35px 0; margin-right: 8px; border-left: 0; } div.side-bar div.side-button.top-option h3, div.side-bar div.side-button.top-option h4 { font-weight: 400; padding: 0; margin: 0; font-size: 16px; padding-top: 8px; text-transform: uppercase; margin-top: -6px; } div.side-bar div.side-button.home-button, div.side-bar div.side-button.boat-button { margin-right: 10px; } div.side-bar div.side-button.home-button a, div.side-bar div.side-button.boat-button a { padding: 0px !important; width: 50px; display: block; position: relative; left: 6px; pointer-events: none; } div.side-bar .home-button a img { width: 100%; } div.side-bar div.right-section a { color: #fff; text-decoration: none; margin-right: 8px; pointer-events: none; } div.side-bar div.selected { background-color: #253e5c; color: #fff; } div.side-bar div.selected h3 { color: #fff; } div.side-bar div.search-button, div.side-bar div.home-button, div.side-bar div.user-button, div.side-bar div.boat-button { height: 64px; width: 64px; padding: 0px; flex-shrink: 0; } div.side-bar div.search-button i, div.side-bar div.user-button i { font-weight: 600; font-size: 26px; position: relative; top: 4px; } div.hup-topbar { height: 80px; border-top: 0 !important; background-color: #222; background: url('../images/top_bar_3.png'); background-size: contain; } @media (max-width: 780px) { div.hup-topbar { display: none; } } #saleForm { margin-bottom: 400px; } #key p, #key h3 { color: rgba(250, 250, 250, 0.85) !important; margin: 0px; font-weight: 400; } ul#key li.selected { border: solid 3.5px #253e5c; border-radius: 16px; } ul#key li.selected p, ul#key li.selected h3 { color: #fff !important; } ul#key li.hk-daily p, ul#key li.hk-daily h3 { color: rgba(0, 0, 0, 0.75) !important; } div.group { display:inline-block; position:relative; margin-left:8px; margin-top:60px; } div.group h2 { color:#fff; font-weight:300; position:absolute; top:-60px; } div.lodges { border:solid #333 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; cursor:pointer; position:absolute; border-radius: 10px; } div.lodges p { color:#fff; font-size:1em; text-align:center; height:100%; margin:0px; border-radius: 10px; } div.loch { border:solid #333 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:10px; cursor:pointer; position:absolute; } div.loch p { color:#fff; font-size:1em; text-align:center; height:100%; margin:0px; border-radius: 10px; } div.hotel { border:solid #333 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; cursor:pointer; position:absolute; border-radius: 10px; } div.hotel p { color:#fff; font-size:1em; text-align:center; height:100%; margin:0px; border-radius: 10px; } div.coach { border:solid #333 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:10px; cursor:pointer; position:absolute; } div.coach p { color:#fff; font-size:1em; text-align:center; height:100%; margin:0px; border-radius: 10px; } .hup-buildings { display:inline-block; list-style-type:none; } .hup-buildings div.group.arrivals div.notArrival p { background: #333 !important; color: #333 !important; } .hup-buildings div.group.arrivals div.arrival { } div.hup-top { position:relative; } .hup-bar .hup-bar-item.hup-hide-small-logo { display:block !important; } input.hup-search { background-color:transparent; border:0; border-bottom:solid #ddd 2px; color:#fff; font-family:'Open Sans', sans-serif; font-size:1.4em; outline:none; } .hup-active { color:#333; } .hup-bar { background-color: #333; } .hup-bar .hup-bar-item.hup-active:hover { background: #fff !important; color: #253e5c; } .hup-no-list { list-style-type:none; margin:0px; padding:0px; } .hup-star-rating { cursor:pointer; display:flex; font-size:3em; text-align:center; width:400px; margin:0 auto; flex-direction:row-reverse; } .hup-star-rating i { margin:16px; } .hup-star-rating i:hover { color:#fff; } .hup-star-rating i:hover ~ i { color:#fff; } .hup-star-rating i.selected { color:#fff; } #guestSurvey p { color:#fff; } ul.offers { } li.offer { color:#fff; cursor:pointer; display:inline-block; margin:8px; padding:8px; } li.offer i { color:#333; } li.offer:hover { color:#fff; } li.offer.selected { border:solid #fff 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; color:#fff; } li.offer.selected i { color:#fff; } .hup-auto-center { float:initial; margin:0 auto; } ul.nations { } li.nation { color:#fff; cursor:pointer; display:inline-block; margin:8px; padding:8px; } li.nation i { color:#333; } li.nation:hover { color:#fff; } li.nation.selected { border:solid #fff 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; color:#fff; } li.nation.selected i { color:#fff; } ul.nationSelect { } ul.nationSelect li { background-color:#fff; color:#333; cursor:pointer; } label { color:#fff; } .room-menu { display:none; position:fixed; left:50%; right:16px; top:80px; bottom:0; width:500px; margin-left:-258px; padding:16px; z-index:6; } .room-menu h3 { background-color: #fff; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; -khtml-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; color: #253e5c; text-align: center; margin-bottom: 0; } .room-menu > p { background: #fff; color: #253e5c; margin: 0; margin-bottom: 10px; border-radius: 0 0 8px 8px; text-align: center; } .room-menu ul { background-color:#fff; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; display:none; list-style-type:none; margin:0; padding:0; } .room-menu ul li { border:solid #ccc 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; cursor:pointer; font-size:1.5em; padding:16px; } .room-menu ul li:hover { background-color:#253e5c; color:#fff; } .room-menu ul.top-menu { display:block; } .room-menu ul.maintenance { } .room-menu ul.hk-still-need { } .room-menu div.options { color: #253e5c; font-size: 2em; position: absolute; width: calc(100% - 32px); margin-top: 16px; } .room-menu div.options .back-menu { cursor:pointer; display:none; float:left; margin-left:16px; } .room-menu div.options .close-menu { cursor:pointer; float:right; margin-right:16px; } .room-menu ul.hk li div { border: 1px solid #000; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; float: right; height: 10px; width: 10px; margin: 16px; } ul#key { text-align: center; list-style-type: none; margin: 0px; vertical-align: top; display: flex; flex-direction: row; padding: 0; justify-content: center; flex-wrap: wrap; } ul#key li { display: inline-block; margin: 4px; width: 90px; height: 120px; cursor: pointer; } ul#key li div { border: solid #333 2px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; padding: 6px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; text-align: left; padding-left: 12px; } .hup-sending { display:none; } .hup-sending-fail { display:none; } .hup-sending-success { display:none; } p { color:#fff; } h3 { color:#fff; } h2 { color:#fff; } table { color:#fff; } ul.searchRes { margin:0px; padding:0px; text-align: left; } ul.searchRes li { background-color:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; list-style-type:none; position:relative; margin-top:8px; padding-right: 148px; color:#333; overflow: auto; } ul.searchRes li p { color:#333; } ul.searchRes li h3 { color:#333; } ul.searchRes li.voucher { border:solid 3px #00A4CC; } ul.searchRes li.registration { border: solid 3px #a1a1a1; } ul.searchRes li.booking { border:solid 3px #253e5c; } ul.searchRes li.siros { border:solid 2px #253e5C; padding-left:8px; } ul.searchRes li div.sale { position:relative; padding-left:8px; } ul.searchRes li div.sale.sold { border-top:solid 2px #ddd; } ul.searchRes li div.book { text-align:right; position:absolute; right:10px; top:24px; z-index:2; padding-left:8px; } ul.searchRes li.no-results { font-size: 20px; text-align: center; padding-right: 0px; background: transparent; } ul.searchRes li.no-results h3 { color: #a93b3b; font-weight: 300; } ul.searchRes li div.options { text-align: right; position: absolute; right: 8px; top: 0px; bottom: 0px; width: 132px; padding-left: 8px; z-index: 2; display: flex; flex-direction: column; border-left: solid 1px #ddd; } ul.searchRes li div.options button { margin-bottom: 0px !important; font-size: 14px; background-color: transparent; border: solid 1px #ddd; color: #333; } ul.searchRes li div.options button.bookButton { border: 2px solid #333; background: #222; color: #fff; padding: 8px; } ul.searchRes li div.options button.addNotes { border: 2px solid #cebfe9; background-color: rgba(206, 190, 233, 0.25); } ul.searchRes li div.book.booked { border-bottom:solid 2px #ddd; text-align:center; position:relative; right:0px; top:0px; z-index:2; } ul.searchRes li.filter-search { padding-right: 16px; display: flex; background-color: transparent; } ul.searchRes li.filter-search div.filter { padding-right: 16px; padding: 8px; border: solid 1px #333; border-radius: 25px; margin-right: 4px; color: #fff; } ul.searchRes li.filter-search div.filter.selected { background: #fff; border: solid 1px #ddd; color: #333; } span.searchHigh { background: #f6ff8a; color: #333; } div.bookButton { display: inline-block; padding-bottom: 6px; } ul.searchRes li div.reg { position:relative; padding-left:8px; } ul.searchRes li div.reg + div.sale { border-top: 2px solid #ddd; } h3 span.soldDate { font-size: 13px; } div.hup-container-sales { text-align: center; margin-bottom: 48px; } div.hup-history-section h3 span.amount { font-size: 42px; } div.salesRegisteredSection { text-align: center; margin-left: 4px; margin-right: 4px; display: inline-block; overflow: hidden; } div.salesRegisteredSection.listVisible { display:block; } div.salesRegisteredSection.listNotVisible { display: none; } div.salesRegisteredSection.listVisible h2.salesRegistered { display: block; border-bottom: 0; font-size: 28px; border-bottom: 1px solid #333; height: 60px; transition: height 0.50s ease-in; width: auto; } div.salesRegisteredSection.listVisible h2.salesRegistered.listVisible i { display: none; } h2.salesRegistered i { display: none; font-size: 16px; margin-left: 10px; } h2.salesRegistered { height: 0px; transition: height 0.50s ease-out; color: #999; cursor: pointer; font-size: 24px; margin: 0px; padding-left: 16px; padding-right: 16px; width: 0px; } h2.salesRegistered.highlight i { display: inline-block; } h2.salesRegistered.highlight { color: #fff; font-size: 28px; border-bottom: solid 3px #333; display: inline-block; height: 50px; background: #222; width: auto; } div.hup-trans-booked-flag { border: #222 solid 2px; padding-left: 8px; padding-right: 8px; border-radius: 10px; margin-left: 16px; padding-top: 0px; background: seagreen; } div.hup-trans-reg-flag { border: #222 solid 2px; padding-left: 8px; padding-right: 8px; border-radius: 10px; margin-left: 16px; padding-top: 0px; background: #562e8b; } div.hup-seller.not-sold { background: red; padding-left: 8px; padding-right: 8px; border-radius: 10px; margin-left: 0px; } div.date-pick-trans { position: relative; height: 56px; } div.date-pick-trans input { border: 0; cursor: pointer; /* font-size: 0px; */ height: 88%; background: #333; color: #fff; text-align: right; outline: none; margin-left: 48px; width: calc(100% - 50px); outline: none; border-radius: 10px; padding-right: 4px; color-scheme: dark; } div.date-pick-trans .date-value-overlay { position: absolute; width: 90%; top: 0px; left: 0px; background: #222; pointer-events: none; height: 88%; padding-top: 3px; border-radius: 10px 0 0 10px; border: solid 1px #333; } div.reg h4 { color: #ca2727; padding-left: 8px; padding-right: 8px; margin-top: 16px; margin-bottom: 16px; margin-right: 132px; animation: blinker 0s linear infinite; } div.sale h4 { color: #ca2727; padding-left: 8px; padding-right: 8px; margin-top: 16px; margin-bottom: 16px; margin-right: 132px; } div.name { display: flex; align-items: center; } div.name div { font-size: 16px; flex-grow: 1; white-space: nowrap; } li.sale.payment div.name div { max-width: 38%; overflow: hidden; margin-right: 8px; } div.hup-history-section > h3 { max-width: 350px; margin: 0 auto; position: relative; text-align: center; } div.hup-history-section h3 .hup-trans-last { position: absolute; left: -38px; top: 6px; padding: 8px; cursor: pointer; } div.hup-history-section h3 .hup-trans-next { position: absolute; right: -38px; top: 6px; padding: 8px; cursor: pointer; } div.hup-history-section h3 .hup-trans-next.disabled { color: #222; } div.hup-history-section ul.hup-trans-list { margin: 0; padding: 12px; position: relative; margin-bottom: 32px; margin-left: 16px; margin-right: 16px; border: solid 1px; border-radius: 16px; padding-left: 8px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item { display: flex; color: #fff; cursor: pointer; flex-wrap: wrap; border: solid 1px transparent; border-radius: 8px; position: relative; align-items: center; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item.selected { border: solid 1px #999; border-radius: 8px; background: #333; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item:hover { border: solid 1px #999; border-radius: 8px; background: #333; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.hup-voucher { width: 170px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.hup-date { margin-right: 12px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.hup-amount { position: absolute; right: 16px; top: 3px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.hup-amount div.hup-sale-full { position: absolute; left: -150px; top: 1px; background: #333; padding: 0px 16px; border-radius: 10px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.hup-upgrade { background-color: #253e5c; padding-left: 12px; padding-right: 12px; border-radius: 8px; margin-left: 16px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div span { display: inline-block; width: 100px; text-align: right; border-left: solid 1px #333; margin-left: 16px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.name div { font-size: 16px; margin-right: 12px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.name div:first-child { width: 150px; white-space: nowrap; overflow: hidden; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.name div:hover a { display: block; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.name div a { display: none; position: absolute; background-color: #333; padding: 16px; } ul.hup-trans-overlay.searchRes { flex-shrink: 0; width: 100%; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.name div.icon { width: 40px; height: 32px; overflow: hidden; } img.tra-icon { width: 128px; top: -5px; position: relative; } img.tra-icon.virtual-payment { left: -84px; } img.tra-icon.web-sale { left: -40px; } img.tra-icon.pay-link { width: 64px; left: -10px; top: 0px; } img.tra-icon.boat-link { width: 50px; left: -4px; top: -2px; } .event { margin-left: 120px; } .event span.title { padding-left: 16px; padding-right: 16px; color: #3e82d2; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.hup-amount.hup-pay-link { right: 150px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.hup-upgrade.pay-link { background: #ad6400; position: absolute; right: 16px; height: 26px; display: flex; align-items: flex-end; padding: 0px 20px; top: 3px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.hup-upgrade.pay-link.paid { background: rgb(36 97 68); } @keyframes blinker { 50% { opacity: 0.3; } } ul.searchRes li div.info_OLD { background:#333; border:solid 2px #ddd; -moz-border-radius:10px 0 0 10px; -webkit-border-radius:10px 0 0 10px; -khtml-border-radius:10px 0 0 10px; border-radius:10px 0 0 10px; color:#fff; position:absolute; right:-4px; top:50%; margin-top:12px; padding:8px; } ul.searchRes li div.info { color: #222; position: absolute; right: 10px; top: -11px; border: 0 !important; margin-top: 0px; padding: 8px; text-align: center; } ul.searchRes li div.info.sale { border:solid 2px #00A4CC; border-right:0; top: -2px; } ul.searchRes li div.info.reg { border:solid 2px #EDFF00; border-right:0; } ul.searchRes li div.info.book { border:solid 2px #253e5c; border-right:0; } ul.searchRes li div.info.siros { border:solid 2px #253e5C; border-right:0; } ul.searchRes li h3.confirmation { text-transform: uppercase; } div.newSale { position: relative; } div.upgrade-container { margin-left: 6px; margin-top: -12px; margin-bottom: 20px; border-radius: 8px 0 0 8px; border: solid 1px #ddd; } span.upgrade-message { background-color: #253e5c; padding-left: 12px; padding-right: 12px; border-radius: 8px 0 0 8px; color: #fff; font-weight: 300; display: inline-block; } span.upgrade-message-reason { background-color: #fff; color: #253e5c; display: inline-block; padding-left: 16px; } img.snow-flake { width: 64px; position: absolute; top: 10px; right: 10px; border-radius: 50%; border: solid 1px #333; } div.winter { background: #a2d7e3; color: #333; padding: 2px 10px; border-radius: 16px; } /*@keyframes zoomBasket { 0% { zoom: 0.4; } 100% { zoom: 1; } } ul.searchRes li.sale ul.baskets li { zoom: 0.4; } ul.searchRes li.sale:hover li { animation: zoomBasket; animation-duration: 1.2s; animation-timing-function: linear; animation-fill-mode: forwards; }*/ div.newSale div.hup-logo img { width: 64px !important; margin: 16px; } div.newSale div.bill { display: flex; align-items: center; justify-content: flex-start; } div.newSale div.bill div.total { font-size: 20px; } li.sale.basket div.newSale div.bill div.paid { display: none; } li.sale.basket div.newSale div.bill button.downloadSale { display: none; } li.sale.basket button.downloadSale { display: none; } div.newSale div.bill { padding-left: 124px; } li.sale .user-comments { margin-left: 124px; margin-top: 16px; margin-bottom: 10px; margin-right: 10px; } div.newSale div.bill div.paid { color: green; display: flex; align-items: center; margin: 8px; margin-left: 16px; } div.newSale div.bill div.paid p { color: inherit; font-weight: 700; margin: 4px; } div.newSale div.bill div.paid.unpaid { color: red; } div.newSale div.bill div.paid.unpaid div.addPay { color: #fff; border: solid 1px #302a42; border-radius: 8px; margin-left: 10px; padding: 10px; background: rgb(56 48 75); font-size: 12px; } div.newSale div.hup-sale-payment { margin-left: 120px; border: solid 1px #ddd; border-radius: 8px; padding-left: 8px; padding-right: 8px; margin-bottom: 16px; } div.newSale div.hup-sale-payment img { height: 32px; } div.newSale div.hup-sale-payment img.sumup-img { height: 24px; margin-right: 32px; padding-bottom: 2px; } div.hup-sale-payment img.stripe-img { margin: 0px; margin-right: 32px; } div.newSale div.hup-sale-payment span { display: inline-block; margin-right: 16px; font-size: 14px; } div.newSale div.hup-sale-payment.highlight span { font-weight: 700; } div.newSale div.hup-sale-bottom { border-top: solid 1px #ddd; height: 48px; } div.newSale div.hup-sale-bottom div.source { display: inline-block; float: right; margin-top: 8px; } #basketBox div.newSale div.bill div.paid { display: none; } li.sale.payment ul.baskets { margin-top: 16px; margin-bottom: 16px; } li.sale.payment ul.baskets p.payment-description { padding: 8px; padding-left: 0; } li.sale.payment ul.baskets p.payment-description span.option { background: #333; color: #fff; padding: 10px; margin-right: 8px; } ul.baskets { margin: 0; padding: 0; margin-left: 120px; margin-bottom: 32px; } ul.baskets li { padding-right: 0px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #ddd; position: relative; } ul.baskets li.notes p { background-color:#fff; text-align: center; font-weight: 700; font-size: 14px; width: 100%; } ul.baskets li h4 { font-size: 14px; margin-top: 6px; margin-bottom: 6px; } ul.baskets li p { margin: 0px; font-size: 12px; } ul.baskets li div.img-cut-out { width: 120px; height: 120px; position: relative; overflow: hidden; background-size: cover; background-position: center; border: solid 1px #ddd; border-radius: 10px 0 0 10px; } ul.baskets li div.img-cut-out img { max-width: 220px; max-height: 230px; display: table-cell; vertical-align: middle; } ul.baskets li div.content { width: calc(100% - 120px); background-color: #fff; border: solid 1px #ddd; border-radius: 0 10px 10px 0; padding-left: 6px; /*margin-left: 150px;*/ } span.booking-id { border: solid 1px #ddd; color: #009688; padding: 8px; margin: 0px; border-radius: 16px; font-size: 16px; margin-right: 12px; } span.booking-source { margin-left: 16px; border-radius: 16px; padding: 6px; } ul.baskets li h4.booking-title { margin-top: 12px; margin-top: 10px; } ul.baskets li h4.booking-type { font-size: 16px; } ul.baskets li p.booking-notes { margin-bottom: 10px; } div#guests table { width: 100%; } #roomSelect { display:none; list-style-type:none; position:absolute; left:calc(25% + 6px); top:48px; height:260px; overflow-y:auto; padding:0px; } #roomSelect li { background-color:#fff; border:1px solid #ddd; color:#333; cursor:pointer; margin:0px; padding:4px; } #roomSelect li div { border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; float:right; height:24px; width:22px; } #roomSelect li:hover { background-color:#253e5c; color:#fff; } .hup-room-select { position:relative; } .hup-room-select input { border:1px solid #ddd; } .hup-room-select #room { border:1px solid #ddd; margin-left:6px; } .hup-room-select #bookingId { border:1px solid #ddd; } div#roomColour { border:1px solid #ddd; float:left; height:44px; width:23%; margin-left:6px; } .hup-sending-success { text-align:center; } .hup-sending-success .hup-container { text-align:center; } .hup-sending h3 { display: none; } .hup-sending.booking h3.booking { display: block; } .hup-sending.note h3.note { display: block; } .hup-sending.payment h3.payment { display: block; } .hup-sending-fail h3 { display: none; } .hup-sending-fail.booking h3.booking { display: block; } .hup-sending-fail.note h3.note { display: block; } .hup-sending-fail.payment h3.payment { display: block; } .hup-sending-success h3 { display:none; } .hup-sending-success.booking h3.booking { display: block; } .hup-sending-success.note h3.note { display: block; } .hup-sending-success.payment h3.payment { display: block; } .user-comments { border: 2px solid #cebfe9; border-radius: 10px; padding: 8px; font-size: 16px; background-color: rgba(206, 190, 233, 0.25); color: #222222; text-align: left; } .user-comments .user-comment { border-bottom:solid 2px #e2d8f5 } .user-comments .user-comment:last-child { border-bottom: 0; } .user-comments .user-comment .hup-date-time { font-size: 13px; font-weight: 700; } .user-comments .user-comment .hup-user-id { font-size: 16px; font-weight: 700; padding: 8px; display: inline-block; } .user-comments .user-comment p { margin: 2px; color: #222; } .room-menu-bg { background-color:rgba(30, 30, 30, 0.95); background-attachment:fixed; display:none; position:fixed; left:0px; right:0px; top:0px; bottom:0px; z-index:5; filter:blur(100px); box-shadow:inset 0 0 2000px rgba(255, 255, 255, .5); } p.details { display:none; position:absolute; top:20px; width:100%; } .room-info { background-color: #fff; border: 1px solid #ddd; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; text-align: center; margin-bottom: 8px; padding: 16px; min-height: 80px; } .room-info .hk-note { text-align:left; text-indent:8px; } .room-info div.colour { border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; float:left; height:50px; width:134px; padding-top:10px; } div.welcome h2 { font-size:6em; text-align:center; } .hup-input { border:1px solid #ddd; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; } #useVoucher label { float:left; margin-left:24px; } #pettyCash { } #pettyCash div.options { } #pettyCash div.options div { color:#fff; cursor:pointer; display:inline-block; text-decoration:underline; margin-right:16px; } #pettyCash div.options a { color:#fff; cursor:pointer; display:inline-block; text-decoration:underline; margin-right:16px; } #pettyCash div.pettyScroll { height:500px; margin-top:48px; overflow-y:auto; } #pettyCash table { border:1px solid #ddd; display:table; position:relative; width:100%; table-layout:fixed; } #pettyCash table thead tr { } #pettyCash table tbody { } #pettyCash table tbody td.cR { text-align:right; padding-right:16px; } #pettyCash table thead th { background:#333; border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-top:1px solid #ddd; position:sticky; top:0; } #pettyCash table tbody td { border-left:1px solid #ddd; width:15%; } .hup-daily { border:1px solid #ccc; } .room-info .hup-daily { } .hup-white { background-color:#fff; } ul#key li.hk-daily div.hup-white { } ul.menuItem.hk li.hk-daily div.daily { height:60px; width:60px; } #guests div.guestScroll { height:500px; margin-top: 8px; overflow-y:auto; } #discountContainer { margin-top: 48px; } #guests table { border: 1px solid #ddd; display: table; position: relative; width: 100%; table-layout: fixed; } #guests table thead tr { } #guests table tbody { } #guests table tbody td.cR { text-align:right; padding-right:16px; } #guests table thead th { background:#333; border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-top:1px solid #ddd; position:sticky; top:0; } #guests table tbody td { border-left:1px solid #ddd; width:15%; } #calendar { position:relative; height:360px; overflow-x:hidden; overflow-y:auto; } #calendarHeading { position:relative; height:48px; overflow:hidden; } #calendarMonth { display:inline-block; float:left; position:relative; height:450px; width:180px; margin-right:-30px; margin-top:48px; overflow:hidden; } .date-pick div.hup-mobile-select { display: none; max-width: 400px; } .date-pick select { background: #333; border: 0; border-bottom: 2px solid #ddd; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; color: #fff; font-size: 1.5em; height: 48px; margin-bottom: 8px; margin-right: 8px; flex-grow: 1; } .date-pick select option { text-align: center; } #addBookingForm { text-align:center; } #datePick { opacity:0; } div.hours { display:block; } #addBookingForm { display:none; } #addBookingForm .stage { display:none; } #addBookingForm table { margin:0 auto; } #addBookingForm table td.hup-hour { border:0; -moz-border-radius:35px; -webkit-border-radius:35px; -khtml-border-radius:35px; border-radius:35px; color:#fff; cursor:pointer; display:inline-block; font-size:1.5em; font-weight:300; text-align:center; width:80px; margin:16px; padding:16px; } #addBookingForm table td { border:1px solid #ddd; -moz-border-radius:35px; -webkit-border-radius:35px; -khtml-border-radius:35px; border-radius:35px; color:#fff; cursor:pointer; display:inline-block; font-size:1.5em; font-weight:300; text-align:center; width:80px; margin:16px; padding:16px; } #addBookingForm table td.hup-blank { background:none !important; border:0; } #addBookingForm table td:hover { background-color:#fff; color:#333; } #addBookingForm table td.selected { background-color:#fff; color:#333; } #addBookingForm table td.hours td.hup-highlight { background:#fff; color:#333; } #addBookingForm table div.mins { display:inline-block; width:auto; } #addBookingForm table div.mins div { border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; color:#fff; cursor:pointer; display:inline-block; font-size:1.5em; font-weight:300; text-align:center; width:80px; margin:16px; padding:16px; } #addBookingForm table div.mins div.hup-highlight { background:#fff; color:#333; } #addBookingForm table.hup-room-type { border-spacing:8px; } #addBookingForm table.hup-room-type td { display:table-cell; height:160px; width:160px; margin-right:16px; } #addBookingForm table.hup-room { border-spacing:8px; table-layout:fixed; } #addBookingForm table.hup-room td { display:table-cell; height:160px; width:160px; margin-right:16px; } #addBookingForm table td.hup-text { border:0; display:table-cell; width:auto; } #addBookingForm table td.hup-text:hover { background-color:transparent; color:#fff; } #bookTable { border:1px solid #ddd; -moz-border-radius:50%; -webkit-border-radius:50%; -khtml-border-radius:50%; border-radius:50%; color:#fff; cursor:pointer; display:table; font-size:1.5em; font-weight:300; text-align:center; height:200px; width:200px; margin:0 auto;; padding:16px; } #bookTable:hover { background-color:#fff; color:#333; } #bookTable div { display:table-cell; vertical-align:middle; } #restaurantFrame { border:0; position:fixed; left:0px; right:0px; top:80px; bottom:0px; height:calc(100% - 80px); width:100%; } ul.userMenu { margin-top: 18px; list-style-type: none; padding: 0px; } ul.userChangePassword { max-width: 500px; margin: 0 auto; padding: 0px; } ul.userMenu li { cursor: pointer; } ul.userMenu > li { display: inline-block; margin-right: 16px; padding-left: 16px; padding-right: 16px; border-left: 2px solid #222; border-right: 2px solid #222; } ul.userMenu li h3 { margin-top: 0px; margin-bottom: 0px; } ul .userChangePassword { list-style-type: none; padding: 0px; max-width: 400px; margin: 0 auto; } ul.userChangePassword li { display: flex; flex-direction: column; padding: 8px; } ul.userChangePassword li:last-child { display: inline-flex; flex-direction: row; margin-top: 16px; } ul.userChangePassword input.hup-invalid { border-width: 5px; } .hup-change-password .hup-button { border: solid 1px #ddd; border-radius: 35px; margin-right: 8px; margin-left: 8px; } .hup-change-password .hup-button:hover { background-color: rgb(201, 228, 168) !important; color:#333; } #chartForm { padding-bottom: 380px; } div.hup-chart-header-container { position: fixed; top: 0px; left: 150px; height: 78px; right: 0px; background-color: #40255c; z-index: 5; } div.hup-chart-menu { position: fixed; top: 0px; left: 0px; height: 78px; width: 150px; background-color: #40255c; z-index: 6; } div.hup-chart-menu h2 { display: inline-block; width: 42px; margin-left: 4px; text-align: center; cursor: pointer; } div.hup-chart-menu h2.selected { background-color: #fff; border-radius: 10px; color: #222; } div.hup-chart-months { left: 150px; position: relative; margin-top: 0px; } div.hup-chart-month { display: inline-block; height: 46px; color: #fff; font-size: 16px; background-color: #40255c; position: -webkit-sticky; position: sticky; left: 150px; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } div.hup-chart-month h3 { text-transform: uppercase; font-size: 16px; text-align: left; text-indent: 8px; } div.hup-chart-month h3 span { text-transform: initial; font-size: 13px; text-indent:8px; } .date-pick { max-width: 600px; margin: 0 auto; } #svg g a { cursor: pointer; } #svg g a.selected { stroke: #222; stroke-width: 0.5; } #svg g a:hover { stroke: #222; stroke-width: 0.5; } #chartDatePick { background-color: #222; border: solid 2px #333; position: fixed; top: 80px; left: 0px; z-index: 10; width: 100%; padding-top: 24px; } i.fas.fa-wheelchair { font-size: 0.8em; margin-left: 6px; } div.hup-chart-nights h3 { display: inline-block; font-size: 20px; margin-left: 16px; text-align: center; width: 100px; } div.hup-chart-nights ul { display: inline-block; margin-left: 6px; text-align: center; } div.hup-chart-nights ul li { display: inline-block; padding: 16px; padding-top: 10px; padding-bottom: 10px; margin-left: 8px; text-align: center; border: solid 1px #333; border-radius: 10px; cursor: pointer; } div.hup-chart-nights ul li:hover { background-color: #fff; } div.hup-chart-nights ul li.selected { background-color: #fff; } div.hup-chart-head { position: sticky; top: 0px; z-index: 5; border-bottom: solid 1px #333; } div.hup-chart-data { padding-top: 0px; } div.hup-chart-header { height: 32px; position: relative; background-color: #40255c; width: 42400px; left: 150px; } div.hup-chart-header div { display: inline-block; border: solid 1px rgba(0,0,0,0.1); color: #fff; font-size: 16px; text-align: center; position: -webkit-sticky; position: sticky; top: 0px; cursor: pointer; border-radius: 35px; box-sizing: border-box; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } div.hup-chart-type { left: 0px; position: relative; z-index: 3; } div.hup-chart-type h3 { display:inline-block; position: -webkit-sticky; position: sticky; text-align: left; left: 16px; font-size: 16px; font-weight: 300; } div.hup-chart-group-bg { position: sticky; left: 0px; top: 0px; background-color: #333; width: 42px; height: 28px; z-index:2; display: inline-block; } .vs-graph { border: solid 1px #333; border-radius: 16px; } /* custom scrollbar */ ::-webkit-scrollbar { width: 20px; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: #333; border-radius: 20px; border: 6px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: #253e5c; } .vs-scroll { overflow-x: auto; height: 100px !important; white-space: nowrap; left: 0px; } .date-pick .hup-chart-nights { display: none; } .date-pick.date-nights { height: 116px !important; overflow: hidden; } .date-pick.date-nights .hup-chart-nights { display: block; } div.hup-float { position: absolute; top: -32px; left: -2px; background-color: #ad6400; border: solid 2px #253e5c; color: #fff; font-size: 13px; border-radius: 6px; padding-left: 4px; padding-right: 4px; } div.hup-float.buy-room { padding-left: 4px; padding-right: 6px; top: -2px; left: auto; right: -32px; } .hup-cell-select { height: 28px; position: absolute; left: 0px; top: 0px; border: solid 2px #253e5c; background-color: #ad6400; width: 82px; border-radius: 6px; white-space: nowrap; } .hup-cell-select-detail { border-spacing: 0px; } .hup-cell-select-detail tr { display:none; } .hup-cell-select-detail tr td { display:none; } .hup-cell-select-detail tr.sub-head-row { display:inline-block; } .hup-cell-select-detail tr.sub-head-row td:nth-child(3) { display: block; font-size: 13px; width: 41px; margin-top: -2px; text-align: center; border-right: 1px solid #333; } .vs-graph-year { min-width: 90px; margin-top: 4px; margin-right: 2px; } .vs-graph-year.selected { background-color: #333; } .vs-graph.vs-header { overflow: hidden; position: relative; height: 550px; } .vs-overlay { position:absolute; bottom: 0px; top: 32px; left: 0px; } .vs-graph.multi { overflow: visible; padding: 0px; border-radius: 35px 0px 35px 0; display:inline-block; overflow: hidden; cursor: pointer; } .vs-monthly .vs-graph.multi { overflow: hidden; } .vs-overlay-position .vs-graph { position: absolute; bottom: 0%; height: 100%; width: 100%; border: 0px; } .week-container h3.total.month { display: block; position: relative; left: auto; top: auto; background: transparent; text-align: center; width: auto; } div.name.month { display: block; position: relative; left: auto; top: auto; color: #fff; text-align: center; font-size: 14px; } .vs-underlay .vs-graph .week-container .week { display: none; } .week-container { height: 100%; position: relative; display: inline-block; cursor: pointer; border-radius: 35px 0px 35px 0; } .week-container:hover { background-color: #333; } .week-container.selected { background-color: transparent; } .point-container { position: absolute; bottom: 0px; width: 100%; } .week { position: relative; background-color: #253e5c; border-radius: 35px 0px 35px 0; width: 100%; height: 100%; } .week-container .name { position: absolute; top: -16px; color: #fff; white-space: nowrap; display: none; font-size: 0.8em; left: 0px; width: 116px; text-align: center; background-color: #333; border-radius: 0 25px 0 0; } .week-container.start .name { display: block; width: 100%; text-align: center; top: auto; bottom: 2px; left: 4px; background-color: transparent; } .week-container.selected .name { display: block; top: 16px; width: 100%; text-align: center; left: 16px; font-size: 0.8em; background-color: transparent; } .vs-graph.multi .week-container.start .name { display: none; } .week-container.selected.small .name { width: 100%; text-align: center; } .vs_graph:hover .week-container.selected .name { display: none; } .week-container:hover .name { display: block; } .week-container.selected h3 { width: 100%; left: 24px; background-color: transparent; } .week-container.selected h3.total { width: 100%; left: 24px; background-color: transparent; } .week-container h3 { position: absolute; top: -6px; display: none; font-size: 16px; width: 116px; left: 0px; background-color: #333; border-radius: 0 0 25px 0; text-align: center; font-size: 0.8em; } .week-container h3.total { top: 20px; left: 24px; width: 100%; text-align: center; font-size: 0.8em; width: 116px; left: -116px; background-color: #333; border-radius: 25px 25px 0 25px; } .vs-overlay .week-container h3 { top: 0px; } .vs-overlay .week-container h3.total { top: 20px; border-radius: 25px 0 0 25px; } .vs-overlay .week-container div.name { top: -12px; } .vs-graph.multi.vs-graph-year { border-radius: 40%; } .week-container:hover h3 { display: block; } .week-container.selected h3 { display: block; } .vs-graph.multi .week-container.selected h3 { display: none; } .vs-graph.multi .week-container.selected h3.total { display: block; top: 24px; } text.first { pointer-events:none; } .hup-chart-green { background-color: #253e5c !important; color: #fff !important; } .hup-dark-blue { background-color: #253e5c !important; color: #fff !important; } .hup-gray { background-color: #253e5c !important; color: #fff !important; } li.hk-occupied div h3, li.hk-occupied div p { color: #fff !important; } div.hup-graph-drop-down-container { position: absolute; right: 16px; top: 24px; z-index: 5; cursor: pointer; } div.hup-graph-drop-down { border-radius: 16px; padding: 8px; color: #fff; text-align: right; } div.hup-graph-drop-down.selected { background-color: #333; } div.hup-graph-drop-down i { margin-left: 6px; } .hup-graph-drop-down-menu.dropped { display: block; } .hup-graph-drop-down-menu { padding: 0px; margin: 0px; list-style-type: none; display: none; position: absolute; width: 150px; background-color: #333; border: solid 1px #222; right: 0px; } .hup-graph-drop-down-menu li { color: #fff; padding-right: 8px; text-align: right; } .hup-graph-drop-down-menu li:hover { color: #333; background-color: #fff; } .hup-graph-drop-down-menu li.selected { color: #333; background-color: #fff; } div.hup-chart-room { height: 28px; position: relative; background-color: #333; width: 42000px; cursor: pointer; } div.hup-chart-room:hover { background-color: #222; border-top: solid 1px #333; border-bottom: solid 1px #333; } div.hup-chart-room-name { display: inline-block; z-index: 6; background-color: #253e5c; width: 120px; color: #fff; font-size: 16px; padding-left: 10px; position: -webkit-sticky; position: sticky; left: -4px; border: solid 1px #333; height: 28px; float: left; border-radius: 0 10px 10px 0; box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px 0 inset; } div.hup-chart-room-bg { display: inline-block; z-index: 3; background-color: pink; width: 150px; color: #fff; font-size: 16px; padding-left: 10px; position: -webkit-sticky; position: sticky; left: 0px; border: solid 2px #333; height: 28px; } div.hup-chart-room-colour { display: inline-block; position: relative; z-index: 2; background-color: #253d5e; width: 30px; color: #fff; font-size: 16px; padding-left: 0px; position: -webkit-sticky; position: sticky; left: 2px; border: solid 1px #333; border-right: solid 1px #333; z-index: 5; height: 28px; border-radius: 10px 0 0 10px; text-align: center; float: left; box-shadow: rgba(0,0,0,0.3) 2px 2px inset; } div.hup-chart-black { background-color: #222; } div.hup-chart-room-day1 { display: inline-block; position: relative; z-index: 5; background-color: transparent; width: 42px; color: #fff; font-size: 16px; padding-left: 10px; position: -webkit-sticky; position: sticky; left: 150px; border: solid 3px #253e5c; height: 28px; display:none; } div.hup-chart-header div.hup-chart-date-day1 { display: inline-block; position: relative; z-index: 5; background-color: transparent; width: 126px; color: #fff; font-size: 16px; padding-left: 10px; position: -webkit-sticky; position: fixed; left: 318px; border: solid 1px rgba(30,30,30,0.25); border-top: solid 6px rgba(30,30,30,0.5); border-bottom: solid 3px rgba(30,30,30,0.5); border-radius: 35px; height: 42px; top: 38px; pointer-events: none; background-color: rgba(255,255,255,0.1); } div.hup-chart-header div.hup-chart-date-column { height: 100%; border: solid 2px rgba(30,30,30,0.5); border-radius: 20px; position: fixed; left: 318px; width: 126px; color: #fff; font-size: 16px; padding-left: 10px; z-index: 4; top: 38px; pointer-events: none; background-color: rgba(255,255,255,0.05); } div.hup-chart-item { display: inline-block; border: solid 1px #333; height: 26px; overflow: hidden; white-space: nowrap; position: absolute; background-color: #fff; color: #333; font-size: 14px; padding: 2px; border-radius: 6px; } div.hup-chart-item.hup-blue { background-color: #253e5C; } div.hup-chart-item:hover { border: solid 2px #253e5c; } div.hup-chart-item.hup-selected { background-color: #222 !important; border: solid 1px #253e5c; color: #fff; } div.hup-close-pop { position: absolute; top: 0px; right: 0px; padding: 16px; background-color: rgb(41, 47, 34); cursor: pointer; } div.hup-close-pop i { color: #fff; font-size: 1.2em; } div.hup-close-pop:hover i { color: #253e5c; } div.hup-chart-pop { position: fixed; bottom: 0px; left: 0px; right: 0px; height: 300px; background: #222; border-top: solid 3px #253e5c; padding-left: 16px; z-index: 7; display: none; } div.hup-chart-pop { position: fixed; bottom: 0px; left: auto; right: 0px; height: 340px; background: #222; border-top: solid 4px #253e5c; padding-left: 16px; z-index: 7; padding-right: 16px; display: none; border-left: 12px solid rgb(41, 47, 34); /* border-radius: 16px; */ border-right: 1px solid; border-bottom: 1px solid; min-width: 600px; overflow-y: auto; } div.hup-chart-pop p { width: 580px; } div.hup-chart-hk div.hup-tag { float: right; margin-right: -2px; border-radius: 6px 0 0 6px; background: rgba(0, 0, 0, 0.5); margin-top: 6px; padding-right: 12px; padding-left: 8px; border-left: solid 2px rgba(0, 0, 0, 0.2); } div.hup-chart-hk div.hup-chart-room-name { display: inline-block; margin-left: 8px; background-color: rgba(0,0,0,0.25); border: 0; border-top: 0; padding: 6px; color: #fff; float: initial; height: auto; width: 160px; left: 20px; border-radius: 0 0 6px 6px; } div.hup-chart-people { display: inline-block; margin-left: 16px; color: rgba(0,0,0,0.5); } div.hup-hk, div.hup-hk-key { max-width: 980px; margin: 16px auto; margin-bottom: 32px; text-align: left; } .hup-hk-groups { max-width: 600px; margin: 0 auto; overflow: hidden; } .hk-group-menus { display: flex; justify-content: center; margin-top: 16px; } .hk-group-menus .hk-group-menu { border: solid 1px #333; border-radius: 8px; width: 30%; max-width: 180px; margin-right: 8px; margin-left: 8px; cursor: pointer; color: #fff; padding-left: 16px; } .hk-group-menus .hk-group-menu.selected { background-color: #121924; border: solid 2px #253e5c; } .hk-group-menus .hk-group-menu span { font-size: 20px; display: block; } .hk-group-menu-info { color: #fff; border: solid 1px #333; border-radius: 8px; text-align: center; margin-top: 24px; margin-left: auto; margin-right: auto; margin-bottom: 0px; max-width: 576px; cursor: pointer; } .hk-group-menu-info .forecasts { display: flex; overflow: auto; } .hup-hk-groups.forecasts { height: auto; } .hup-hk-forecast { margin-left: 16px; margin-right: 16px; } .forecasts .forecast-box { width: 71px; flex-shrink: 0; cursor: pointer; } .forecasts .forecast-box:first-child { position: sticky; background-color: #222; left: 0px; z-index:1; border: 0; border-right: 1px solid #333; border-radius: 10px 0 0; margin-right: 4px; } .forecast-date span { position: relative; top: -6px; font-size: 11px; } .forecast-date .date { border-bottom: 1px #333 solid; } .hup-hk-key h2 { font-weight: 300; /* padding-left: 14px; */ text-align: center; margin-bottom: 0; margin-top: 24px; } .hup-hk-heading { text-align: center; font-size: 24px; max-width: 500px; margin: 0 auto; } .hup-arrival-last { float: left; margin-top: 10px; margin-left: 10px; cursor: pointer; } .hup-arrival-next { float: right; margin-top: 10px; margin-right: 10px; cursor: pointer; } .hup-hk-sub-heading { text-align: center; font-size: 14px; cursor: pointer; display: flex; justify-content: center; align-items: center; } .hup-hk-sub-heading div.refreshTime { margin-left: 6px; } .hup-chart-desc { border-radius: 0 0 10px 10px; background-color: rgba(255, 255, 255, 0.25) !important; color: rgba(0,0,0,0.5)!important; padding: 8px; padding-left: 190px; min-height: 40px; } .hup-gray .hup-hk-detail { color: #fff !important; } .hup-gray .hup-chart-people { color: #fff !important; } .hup-gray .hup-chart-desc { color: #fff !important; } .hup-hk-detail { display: inline-block; margin-left: 8px; color: rgba(0,0,0,0.5); } .hup-chart-hk { margin: 8px; border: solid 1px #333; border-radius: 10px; cursor: pointer; } #guests div.guestScroll { height: auto; } .hup-frame-add-voucher, .hup-frame-add-payment, .hup-frame-payment-history { width: 100%; height: 1080px; border-radius: 25px; border: solid 1px #333; } .hup-voucher-summary { position: relative; } .hup-voucher-summary h2 { position: relative; } .hup-voucher-summary h2 span { position: absolute; font-size: 14px; right: 0px; top: -16px; } .hup-voucher-report { position: relative; padding: 6px; border: solid 1px #333; border-radius: 10px; height: 46px; margin-bottom: 6px; } .hup-voucher-container { width: calc(100% - 112px); position: absolute; left: 112px; top: 4px; } .hup-voucher-item { position: relative; border: solid 5px #333; text-indent: 6px; color: #fff; margin-bottom: 6px; white-space: nowrap; border-radius: 0 10px 10px 0; background-color: #253e5c; } .hup-voucher-item:hover { cursor: pointer; padding: 3px; border-width: 2px; } .hup-voucher-item span{ white-space: nowrap; } .hup-voucher-title { width: 110px; display: inline-block; color: #fff; font-size:16px; text-align: right; padding-right: 10px; padding-top: 2px; } .hup-voucher-sub-item { display: inline-block; position: absolute; right: 0px; text-indent: 6px; border-left: 1px solid #333; } .hup-payment { border-top: solid 1px #333 } .hup-payment h3{ display: inline-block; margin-right: 12px; } .hup-payment img { width: 120px; margin: 16px; display: inline-block; } .hup-payment span { display: inline-block; margin-right: 16px; } .voucher-options div.back-all-offers { background-color: #222; color: #fff; padding: 16px; padding-left: 24px; padding-right: 24px; border-radius: 25px; margin: 2px; margin-top: 16px; cursor: pointer; display: inline-block; border: solid 1px #333; } .voucher-options ul { list-style: none; margin-left: 0px; padding-left: 0px; margin-top: 0px; border-top: solid 3px #333; display: inline-block; margin-bottom: 0px; } .voucher-options ul li { display: inline-block; background-color: #253e5c; color: #fff; padding: 8px; padding-left: 12px; padding-right: 12px; border-radius: 6px; margin: 2px; cursor: pointer; } .voucher-options ul li.selected { background-color: #333; } .voucher-options div.offer-container { position: relative; } .voucher-options div.offer-container h3.offer-call-centre { display: inline-block; margin-top: 16px; } .voucher-options div.offers { display: flex; flex-wrap: wrap; padding-left: 16px; } .voucher-options div.offers div.offer { display: inline-block; width: calc(25% - 8px); border: solid 1px #333; border-radius: 35px; padding: 8px; margin-right: 8px; cursor: pointer; text-align: center; margin-bottom: 16px; } .voucher-options div.offers div.offer h2 { font-size: 64px; margin-top: 0px; margin-bottom: -32px; } .voucher-options div.offers div.offer p:first-child { margin-top: 0px; } .voucher-options div.offers div.offer div.offer-bottom { display: flex; align-items: center; justify-content: space-between; } .voucher-options div.offers div.offer div.offer-bottom span { border: solid 1px #333; border-radius: 50%; padding: 6px; margin-left: 0px; color: #fff; min-width: 42px; } .voucher-options div.offers div.offer div.offer-bottom div.button-offer { background-color: #222; border-radius: 25px; padding: 8px; color: #fff; text-transform: uppercase; border: solid 1px #333; padding-left: 16px; padding-right: 16px; } .voucher-options p.view-all-offers { text-decoration: underline; margin-top: 32px; cursor: pointer; } .voucher-options div.offers div.offer div.offer-bottom i { font-size: 24px; color: rgb(30, 30, 30); } .voucher-options div.offers div.offer:hover div.offer-bottom div.button-offer { background-color: #4d78aa; } .voucher-options div.offers div.offer:hover div.offer-bottom span { color: #fff; } .boat-menu { padding: 0px; } .boat-option { border: solid 2px; border-radius: 10px; padding: 8px; margin-bottom: 16px; } .boat-options ul { list-style: none; margin-left: 0px; padding-left: 0px; margin-top: 0px; display: inline-block; margin-bottom: 0px; } .boat-options ul li { display: inline-block; background-color: #253e5c; color: #fff; padding: 8px; padding-left: 12px; padding-right: 12px; border-radius: 6px; margin: 2px; cursor: pointer; text-transform: uppercase; } .boat-options ul li.selected { /*background-color: #333;*/ } div.boat-options { margin-bottom: 24px; } .hup-button.hup-view { float: right; top: -46px; position: relative; color: #fff; display:none; } .hup-button.hup-download { float: right; top: -46px; position: relative; color: #fff; /*display: none;*/ } iframe.hup-check-out { border-radius: 16px; } div.hup-hide-frame { position: absolute; top: 16px; right: 42px; font-size: 1.6em; color: #253e5c; cursor: pointer; } div#signup { position: absolute; top: 58px; right: 0px; height: calc(100% - 58px ); overflow-y: auto; width: 60%; max-width: 540px; background: #222; border-left: solid #333 10px; z-index: 6; } ul.signups { list-style-type: none; margin:0px; padding:0px; } ul.signups li.selected { background-color: #666; border: solid #fff 1px; } ul.signups li { padding: 16px; border: solid 1px #333; border-radius: 10px; padding-top:0px; margin-bottom: 6px; color:#fff; cursor: pointer; } ul.signups li p { margin: 0px; float: right; margin-top: 16px; font-size: 13px; font-weight: 600; } ul.signups li div div { float: right; background-color: #253e5c; border-radius: 6px; position: relative; top: -10px; padding: 6px; } a.signups.selected { background-color: #fff; color: #333; } a.signups { display: inline-block; float: right; top: 8px; position: relative; right: 8px; text-decoration: none; background: #222; border-radius: 8px; padding: 8px; } div#signup h2 { display: inline-block; } div.copy-data, div.copy-trans, div.copy-selected, div.weekly-trans { background-color: #333; border-radius: 6px; padding: 6px; padding-left: 12px; padding-right: 12px; position: relative; top: -4px; color: #fff; display: inline-block; margin-left: 16px; cursor: pointer; } div.weekly-trans { float: right; margin-top: -12px; margin-right: 12px; } div.copy-selected span { display: inline-block; width: 16px; height: 16px; border-radius: 6px; background-color: #666; border: solid 1px #fff; position: relative; top: 2px; } img.copied, img.copied-trans { position: relative; top: -4px; } div.copy-trans { float: right; top: -16px; right: 16px; } img.copied-trans { float: right; top: -26px; } p.hup-trans-date { text-align: center; max-width: 500px; margin: 0 auto; } div.hup-history-section ul.hup-trans-list { margin-top: 16px; } div.hup-seller { margin-left: 16px; } div.hup-hide-frame:hover { color: #333; } div.hup-res-source { float: right; font-size: 20px; border: solid 1px #ddd; padding: 6px; border-radius: 10px; margin-top: -58px; margin-right: 8px; } ul.searchRes li div.options button.mobile-cog { display: none; } ul.searchRes li div.info.sale { text-align: left; } div.guest-options.hup-framed { display: flex; border-radius: 10px; justify-content: center; margin-top: 24px; } div.guest-options.hup-framed .hup-framed { display: none; border-radius: 0; } div.guest-options.hup-framed .hup-button { border-radius: 0; background-color: #222; border: solid 1px #333; padding-top: 12px; padding-bottom: 12px; margin-top: 0 !important; } div.guest-options.hup-framed .hup-button:first-child { border-radius: 25px 0 0 25px; } div.guest-options.hup-framed .hup-button:last-child { border-radius: 0px 25px 25px 0; } div.guest-options.hup-framed .hup-button:only-child { border-radius: 25px; } /*div.guest-options.hup-framed .hup-button:not(.hup-framed):first-child { border-radius: 10px 0 0 10px; } div.guest-options.hup-framed .hup-button:not(.hup-framed):last-child { border-radius: 0 10px 10px 0; }*/ div.guest-options.hup-framed .hup-button.selected { background-color: #253e5c; border: solid 1px #253e5c2e; } .hup-button.selected { background-color: #333; } .hup-arrival-last, .hup-arrival-next { background: #333; display: block; padding: 20px; border-radius: 10px 0 0 10px; } .hup-arrival-next { border-radius: 0 10px 10px 0; } .forecasts .forecast-box { background-color: #222; border: solid 2px transparent; border-radius: 10px; } .forecasts .forecast-box.selected { background-color: #121924; border: solid 2px #253e5c; border-radius: 10px; } .voucher-options div.offer-container { padding: 0px; } @media (max-width: 1366px) { /*body.chart { zoom: 2; }*/ .vs-scroll { overflow-x: auto; left: 0px; } } @media (max-width: 780px) { #roomSelect { float: left; position: relative; left: 0px; top: 2px; } div#signup { width: 100%; } /*body.chart { zoom: 3; }*/ div #roomColour { left: 0px; width: 100%; margin-left: 0px; } .hup-room-select #room { margin-left: 0px; } #key { margin-left: 16px; padding: 0px; } ul.hup-buildings { padding: 0px; } ul.hup-buildings li { margin-left: 8px; } .room-menu { zoom: 1; width: 100%; left: 0px; margin-left: 0; position: absolute; top: 4px; right: 0px; } ul.hup-buildings { margin-left: 0px; } div.side-bar { display: flex; flex-direction: row; width: 100%; margin-top: auto; top: auto; left: 0px; right: 0px; bottom: 0px; height: 150px; z-index: 20; background-color: #333; border-top: solid 2px #333; padding-top: 72px; justify-content: space-between; } div.side-bar div.top-options { min-width: initial; position: absolute; top: 2px; left: 2px; right: 2px; } div.side-bar div.boat-button { position: absolute; top: 76px; left: 172px; } div.side-bar div.top-options div.top-option h3, div.side-bar div.top-options div.top-option h4 { font-size: 16px; } #newSale { padding-left: 0px; width: 100%; } #newPhone { padding-left: 0px; width: 100%; } .hup-chart-desc { padding-left: 14px; } div.hup-chart-pop { min-width: auto; padding-bottom: 80px; } div.hup-chart-pop p { width: auto; } div.name { flex-direction: column; } span.saleDate { display: block; } ul.searchRes li { padding: 0px; } ul.searchRes li div.options { bottom: auto; border: 0; background-color: #fff; padding: 8px; z-index: 5; align-items: flex-end; width: 150px; right: 0px; } div.optionContainer { height: 56px; position: absolute; right: 0px; overflow: hidden; width: 68px; border-radius: 10px; } ul.searchRes li div.options.selected { height: auto; border: solid #ddd; border-radius: 0 6px; } ul.searchRes li div.options button.mobile-cog { display: block; width: 50px; font-size: 20px; padding: 0px; margin-top: 0px !important; background-color: #fff !important; color: #5e6c4f; } ul.searchRes li div.options button.mobile-cog i { pointer-events: none; } ul.searchRes li h3 { padding-top: 42px; } ul.searchRes li h3 span { display:block; } ul.searchRes li h3 span.searchHigh { display: inline-block; } ul.searchRes li ul.baskets li { flex-direction:column; } ul.baskets { margin-left: 8px; } ul.baskets li div.content { width: auto; } ul.searchRes li div.info { right: 52px; } .hup-container, .hup-panel { padding: 0.01em 0.01em; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.name div { display: none; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.name div:first-child { display: inline-block; } .hup-hk-sub-heading { flex-direction: column; } .voucher-options div.offers div.offer { width: calc(50% - 6px); margin-right: 2px; margin-left: 4px; } div.guest-options.hup-framed .hup-button:nth-child(n+2) { padding-left: 10px; padding-right: 10px; } div.side-bar div.side-button.home-button { margin-right: 0px; margin-left: 10px; } } @media(max-width:500px) { body.mini div.side-bar div.top-options { position: fixed; width: 100%; height: 100%; z-index: 10000; background: #333; } body.mini .side-button.home-button { display: none; } body.mini .side-button.boat-button.option-boats { display: none; } }