/* CSS Document */ /* /////////////////////// Version: 2.6.2 Lastmod: 2025-05-16 /////////////////////// */ /* 2025-03-06: Höhe der Items Zimmerangebot weiter begrenzt, damit, sofern viel Beschrweibungstext vorhanden, weiterhin das Item am Overflow angschnitten dargestellt wird ! */ @keyframes cardmove1 { 0% { top: 40vh; opacity:0; transform: rotate(90deg) rotate3d(0,90,0,90deg); filter: blur(0px); } 20% { top: 40vh; opacity:0.3; transform: rotate(90deg) rotate3d(0,0,0,90deg); filter: blur(0px); } 80% { top: 40vh; opacity:0.3; transform: rotate(90deg) rotate3d(0,0,0,90deg); filter: blur(0px); } 100% { top: 40vh; opacity:0; transform: rotate(90deg) rotate3d(0,-90,0,90deg); filter: blur(0px); } } @keyframes cardmove2 { 0% { opacity:0; transform:rotate(90deg) scale(1); filter: blur(0px); color: rgba(142,142,142,1.00); background-color: rgba(0,152,121,1.00) } 25% { opacity:0.3; transform:rotate(90deg) scale(0.95); filter: blur(0px); color: rgba(208,18,113,1.00); background-color: rgba(253,0,118,1.00) } 50% { opacity:0.3; transform:rotate(90deg) scale(1); filter: blur(0px); color: rgba(0,154,41,1.00); background-color: rgba(177,177,177,1.00) } 75% { opacity:0.3; transform:rotate(90deg) scale(1.05); filter: blur(0px); color: rgba(208,18,113,1.00); background-color: rgba(253,0,118,1.00) } 100% { opacity:0; transform:rotate(90deg) scale(1); filter: blur(0px); color: rgba(142,142,142,1.00); background-color: rgba(0,152,121,1.00) } } @keyframes cardmove3 { 0% { top: 40vh; opacity:0; filter: blur(0px); color: rgba(0,118,105,1.00); background-color: rgba(0,152,121,1.00) } 10% { top: 40vh; opacity:0.3; filter: blur(0px); color: rgba(0,118,105,1.00); background-color: rgba(0,152,121,1.00) } 100% { top: 150vh; opacity:0.3; filter: blur(0px); color: rgba(0,118,105,1.00); background-color: rgba(0,152,121,1.00) } } @keyframes cccardmove { 0% { top: -60vh; opacity:0; filter: blur(120px); } 10% { top: 20vh; opacity:1; filter: blur(0px); } 100% { top: 110vh; opacity:1; filter: blur(0px); } } @keyframes movedown { 0% { top:300px; opacity:0; transform: scale(0); } 20% { top:300px; opacity:1; transform: scale(1.5); } 50% { top:300px; opacity:1; transform: scale(1.5); } 90% { top:120vh; opacity:1; transform: scale(1); } 100% { top:120vh; opacity:0; transform: scale(1); } } @keyframes rolling { 0% { background-position: 1vw bottom; } 100% { background-position: 103vw bottom; } } @keyframes contentfade { 0% { opacity: 0; } 90% { opacity: 0; } 100% { opacity: 1; } } @keyframes bodyfade { 0% { background: rgba(0,0,0,1); } 90% { background: rgba(0,0,0,1); } 100% { background: rgba(245,245,245,1); } } @keyframes bling { 0% { transform: scale(1); } 50% { transform: scale(1.1); background-color:rgb(69,60,67); } 100% { transform: scale(1); } } html, body, header, main, footer { display:inline-block; width:100%; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; box-sizing: border-box; position:relative; } html { font-size: 1.1em; min-width:320px; } body { /* Add FadeIn Animation */ min-height: 100vh; margin:0px auto; float: none; display:block; position:fixed; } html { min-width:98vw; max-width:100vw; width:100%; height:auto; max-height:100vh; min-height:100vh; } h1, h2, h3 { font-weight:400; } h4, h5 { font-weight:200; } h6, h7, h8, h9 { font-weight:100; } html { background: rgba(255,255,255,1.00); } header, footer { text-align: center; } header:before { background-image: url("images/OS_logoColor.svg"); background-repeat: no-repeat; background-position: center 67px; background-size: auto calc(8vh - 68px); display:block; position:relative; content:''; width:100%; z-index:20; } footer { color:rgba(225,225,225,1.00); font-size:0.9rem; padding:10px 20px; opacity:0.76; } footer a { color:rgba(180,180,180,1.00); font-size:1rem; opacity:0.875; letter-spacing: 0.5px; text-decoration: none; font-weight:100; } body { background-size: 100%; background-size: cover; background-repeat: no-repeat; background-position: center top; } body { background:rgba(245,245,245,1); } footer { background-image: url("images/OS_logoColor.svg"); background-size:7vh; background-position: center 2vh; background-repeat: no-repeat; } div#sessionStatus { display: block; position: fixed; width: 100%; top: 29px; height: auto; z-index: 20; left: 0px; overflow: hidden; background: rgba(0,0,0,0.00); box-shadow: inset 0px 0px 16px 0px rgba(0,0,0,0.8); } div#sessionStatus > div { text-align: center; position: relative; float: left; width: 10%; height: 32px; padding: 0px 0px 0px 0px; box-sizing: border-box; font-size: 16px; font-weight: 400; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color:white !important; } div#sessionStatus > div { background:lightslategray; opacity:0.33; z-index:2; } div#sessionStatus > div.active { background:rgb(245,245,245); color:black !important; opacity:0.7; box-shadow: 0px 0px 48px 8px rgba(0,0,0,0.75); z-index:3; } div#sessionStatus > div.done { background: seagreen; opacity:0.75; } div#sessionStatus > div:before { display: block; content: ''; opacity: 0.5; position: absolute; width: 100%; height: 32px; top: 0px; left: 0px; background-image: url("pic/statbg.svg"); background-position: center; background-repeat: no-repeat; /* background-size: auto 21px; */ background-size: auto 24px; } main form { display:inline-block; width:100%; box-sizing: border-box; padding:0px 0px; margin:0px 0px 0px 0px; } main form > h3 { display:inline-block; margin:2vh 0px 1vh 0px; width:100%; float:left; text-align: left; font-size:2.5rem; border-bottom: 1px solid rgba(0,0,0,0.5); padding:0px 20px 16px 5vw; } main form > p { display:inline-block; margin:2vh 0px 1vh 0px; width:100%; float:left; text-align: center; font-size:1.55rem; line-height:1.76; } main form > p > a { text-decoration: none; font-weight:inherit; color:inherit; } .hidden { display:none !important; visibility:hidden !important; } a.btnstyle, button.button, input.btnstyle { font-family: "Open Sans", Helvetica, Arial, "sans-serif"; display:block; outline:none; margin:0px; box-sizing: border-box; text-align: center; border:0px solid rgba(0,0,0,0.0); padding:14px 24px; font-size:1.25rem; line-height: 1; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; color:#fff; -webkit-appearance: none; border-radius: 5px; height:auto; letter-spacing: 0.25px; } input, input:hover, input:active, input:focus, a, a:hover, a:active, a:focus, input.btnstyle, input.btnstyle:hover, input.btnstyle:active, input.btnstyle:focus, button, button:hover, button:active, button:focus { outline:0 !important; } input::-moz-focus-inner { border: 0px solid rgba(0,0,0,0.0) !important; outline:0 !important; } button.button:hover, input.btnstyle:hover { cursor: pointer; background-color: rgba(0,0,0,1); } button.button.hidden, input.btnstyle.hidden { display:none; } div.signature-pad--actions > div > button.button.save, input.next_btn, input.prev_btn { position:absolute; width:auto; bottom:0px; z-index:10; font-size:2.25rem; padding:17px 58px 19px 58px !important; line-height: 1; font-weight: 200; right: 5%; } input.next_btn { right:6%; } button.button.save, input.next_btn { background: rgba(0,177,130,1.00); } input.prev_btn { left: 6%; } button.button.clear, input.prev_btn { background: rgba(91,91,91,1.00); } input.next_btn, button.button.save, input.next_btn, input.prev_btn, button.button.clear, input.prev_btn { -webkit-box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25); box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25); } div.signature-pad--actions > div > button.button.save { position:fixed; bottom:14.5vh; } input.fullwidth { width: 60%; padding:32px 32px 32px 32px !important; height:auto; right:50%; margin-right: -30%; font-weight: bold; font-size: 4rem; } div.fixTop { position: fixed; z-index:2147483645 !important; display:block; top: 68px; right:132px; box-sizing: border-box; width:112px; height:112px; text-align: center; padding:0px 0px 0px 0px; background: rgba(255,2,6,0) !important } div.exit_btn { display:inline-block; width:100%; position:absolute; left:0px; top:0px; } div.exit_btn { border-radius: 5px; color: rgba(212,212,212,1); border: 0px solid rgba(0,0,0,0.10); padding: 89px 12px 14px 12px !important; font-weight: 200; text-transform: uppercase; font-size: 1rem !important; background: rgba(0,0,0,0); box-sizing: border-box; cursor: pointer; } div.exit_btn:hover { color:#fff; } div.btn_overay { display: block; right: 24px; top: 12px; position: absolute !important; height: 64px; width: 64px; border-radius: 50%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#63666d+0,28343b+100 */ background: rgb(99,102,109); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(99,102,109,1) 0%, rgba(40,52,59,1) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(99,102,109,1) 0%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, rgba(99,102,109,1) 0%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63666d', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.5); box-sizing: border-box !important; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; pointer-events: none; } div.btn_overay > span { padding: 0px 0px 0px 0px; box-sizing: border-box !important; display: flex; width: 100%; /* position: absolute; */ /* top: 0px; */ flex-wrap: wrap; left: 0px; height: 100%; text-align: center; border-radius: 50%; font-size: 10px; color: #ddd; line-height: 1; align-content: center; justify-content: space-evenly; justify-items: center; align-items: center; } div.btn_overay > span > b { color: rgba(255,255,255,1); font-size: 1.85rem; font-weight: 200 !important; min-width:100%; display: inline-block; letter-spacing: -3px; margin: 0px; font-family: monospace; padding: 0px; line-height: 1; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } div.btn_overay > div { display:block; position:absolute; height:100%; width:100%; top:-5px; left:-5px; opacity:0.9; border-radius:50%; background-color: transparent !important; border-width: 5px; box-sizing: content-box; border-style: solid; overflow: hidden; z-index:1001; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } div.btn_overay > div.circle { border-top-color: rgba(0,0,0,0); border-right-color: rgba(0,0,0,0); border-bottom-color: rgba(0,0,0,0); border-left-color: rgba(0,0,0,0); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); z-index: 1002; opacity: 0.67; } ul.summary, ul.summary li { display:inline-block; position:relative; box-sizing: border-box; padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; align-items: flex-start; clear:both; } ul.summary li { padding:9px 10px; vertical-align: text-top; align-content: flex-start; border-bottom: solid 1px rgba(0,0,0,0.30); width:100%; font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, "sans-serif"; } ul.summary li > span { display: inline-block; text-align: left; box-sizing: border-box; position: relative; } ul.summary li > span:first-child { float: left; width: 35%; font-size: 2rem; } ul.summary li > span:last-child { float: right; width: 64%; color: rgba(95,95,95,1.00); } ul.summary li:not(:last-child) > span:last-child { padding-left: 12px; font-size:1.67rem; } ul.summary li > span > div.price { display: inline-block; text-align: left; box-sizing: border-box; position:relative; width:auto; float:right; clear:right; color:rgba(102,102,102,1.00) } ul.summary li:last-child { border-bottom: double 3px rgba(0,0,0,0.80); padding-top: 12px; font-weight: 400; font-size:2.45rem; color: rgba(14,170,90,1.00); } ul.summary { display:inline-block; clear:both; float:none !important; width:100%; margin-left:auto; box-sizing: border-box; margin-right: auto; padding-right: 6%; padding-left: 6%; padding-top: 80px; } ul.summary > h4 { display: inline-block; position: relative; box-sizing: border-box; padding: 8px 20px 36px 2px; margin: 0px 0px 22px 0px; font-size: 1.8rem; font-weight: 500; min-width: 100%; align-items: center; text-align: center; border-bottom: 2px solid green; max-height: 100px; overflow: hidden; } div.finalInfo { display:block; width:100%; height:70vh; float:left; background-size:contain; background-repeat: no-repeat; background-position: center top; } div.werbungOnstay { display:block; width:100%; height:62vh; float:left; background-size:cover; background-repeat: no-repeat; background-position: center top; /* background-image: url(images/demo.jpg); */ color:rgba(255,255,255,1.00); box-sizing: border-box; /* padding:40px; */ font-size:150%; background-color:rgba(0,0,0,1) } html, body { height:100vh; max-height:100vh; min-height:100vh; } html, body, header, main, footer { max-width:100%; min-width:100%; width:100%; box-sizing:border-box; display: inline-block; float:none; clear:both; } header, header:before { height: 8vh; } main { height: 85vh; } footer { height: 7vh; } .slidMain, .werbungOnstay, .slidSlides { position:relative; display:flex; align-content: stretch; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; width:100%; height:100vh !important; overflow:hidden; clear:both; float:left; box-sizing: border-box; padding:0px 0px 0px 0px; } .slidSlides > div > div { flex:1; min-height:200px; width:100%; cursor:default; align-self: stretch; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; opacity:0.67; z-index:4; } .slidSlides > div > div > div { display:none; } .werbungOnstay { position:fixed !important; top:0px !important; z-index:1; } .werbungOnstay:before { display:block; position:absolute !important; width:100%; height:100%; content:''; top:0px; left:0px; pointer-events: none !important; z-index:5; background: rgba(0,0,0,1.00); opacity:0.25; } main form.flex { /*position:relative; display:flex; align-content: flex-start; align-items:flex-start; justify-content: flex-start; flex-wrap: wrap; width:100%; height:82vh; */ position: relative; display: flex; align-content: flex-start; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; width: 100%; max-height: 80vh; min-height: 40vh; height: auto; /* z-index: 50; */ box-sizing: border-box; padding-bottom: 30px; /* background-color: aqua; */ overflow-y: auto; } main form.flex > h3, main form.flex > p { width: 100%; display: inline-flex; flex-direction: column; box-sizing: border-box; } main form.flex > label { width:auto; align-self: flex-start; } main form.flex > label.inputBox { width:100%; } main form.flex > label.inputBox input, main form.flex > label.inputBox input[type="text"], main form.flex > label.inputBox input[type="date"], main form.flex > label.inputBox select, main form.flex > label.inputBox input[type="number"] { background-color: rgba(252,255,255,1.00); outline: none; border: 1px solid rgba(55,55,55,0.10); border-radius: 5px; background-position: 12px center; background-repeat: no-repeat; background-size: 24px; } main form.flex > input.prev_btn.btnstyle, main form.flex > input.next_btn.btnstyle { position: fixed; bottom: 140px; max-width: 40%; min-width: 40%; z-index: 800; } main form.flex > input.next_btn.btnstyle.fullwidth { max-width:80%; } strong.textbyAdmin { background: darkcyan; padding: 12px 64px 19px 30px; display: inline-block; box-sizing: border-box; margin-top: 10px; position: relative; width: 100% !important; font-size: 90%; max-height: 104px !important; font-weight: 200; text-align: left; border-radius: 9px; overflow-y: auto; color: white; line-height: 1.5; margin-left: 0% !important; } main form.flex > label.inputBox input:optional, main form.flex > label.inputBox input[type="text"]:optional, main form.flex > label.inputBox input[type="date"]:optional, main form.flex > label.inputBox select:optional, main form.flex > label.inputBox input[type="number"]:optional { border-bottom:2px solid rgba(192,192,192,1.00); } main form.flex > label.inputBox input:required, main form.flex > label.inputBox input[type="text"]:required, main form.flex > label.inputBox input[type="date"]:required, main form.flex > label.inputBox select:required, main form.flex > label.inputBox input[type="number"]:required { border-bottom:2px solid rgba(10,159,162,1.00); background-image: url("icons/check.svg"); padding-left:54px !important } main form.flex > label.inputBox input.invalid, main form.flex > label.inputBox input:invalid, main form.flex > label.inputBox input[type="text"]:invalid, main form.flex > label.inputBox input[type="date"]:invalid, main form.flex > label.inputBox select:invalid, main form.flex > label.inputBox input[type="number"]:invalid { border-bottom:2px solid rgba(236,48,51,1.00); background-image: url("icons/ic_notifications_active_48px.svg"); padding-left:48px !important } main form.flex > label.inputBox input.invalid { border-bottom:2px solid rgba(236,48,51,1.00) !important; background-image: url("icons/ic_notifications_active_48px.svg") !important; padding-left:48px !important; border:2px solid red !important; } main form:not(.flex) { z-index:2147483646; } main form.flex > label, main form.flex > input, main form.flex > h1, main form.flex > h2, main form.flex > h3, main form.flex > h4, main form.flex > p { /* z-index:50; */ } header, footer { z-index:60; } main form.flex > h3 { margin-bottom: 20px !important; margin-top: 0px; font-size: 2rem; line-height: 1.25; padding: 4px 21vw 10px 5vw; align-content: center; align-items: flex-start; text-align: left; max-height: 98px; overflow: hidden; } div.descr { background:rgba(245,245,245,1.00); margin:0px; box-sizing: border-box; display: inline-block; float:left; width:100%; position: relative; padding:12px 20px 12px 20px; font-size:1rem; line-height: 1.75rem; min-height:124px; color:rgba(60,80,60,1) } div.descr > b { float: right; display: inline-block; text-align: right; position: relative; clear: right; width: 100%; margin-top: -38px; max-height: 80px; overflow-y: auto; word-break: break-all; height: auto; padding-left: 40%; box-sizing: border-box; border-top: 1px solid rgba(0,0,0,0.1); } div.descr > b > strong { display: inline-block; text-align: left; position: relative; width: auto; font-size: 2rem; margin-top: 15px; line-height: 1rem; height:40px; } div.descr > b > strong > small { display:inline-block; text-align: left; position: relative; width:auto; margin-left: 12px; font-size:18px; line-height: 20px; } div.infotext, p.infotext { margin-top: -10px; text-align: left; box-sizing: border-box; padding: 9px 32px 10px 60px; line-height: 1.65; font-size: 1.1rem; font-weight: 200; width: auto !important; margin-left: 5%; min-height: 58px; max-width: 90% !important; min-width: 90% !important; color: rgba(128,128,128,1.00); border: 1px solid rgba(125,235,200,1.00); border-radius: 5px; background-image: url("icons/ic_info_outline_48px.svg"); background-size: 32px; background-repeat: no-repeat; background-position: 12px 12px; background-color: rgba(255,255,255,0.5); } div.infotext { margin-top: 32px; position: relative !important; width:90% !important; height: auto; } p.infotext.oncheckout { margin-top:-10px; text-align: left !important; box-sizing: border-box; padding: 32px 10vw 10px 10vw !important; line-height: 1.65; font-size: 1.6rem !important; font-weight: 200; width: auto !important; margin-left: 5%; min-height: 70vh; max-width:90% !important; color: rgba(70,70,70,1.00); border: 1px solid rgba(125,235,200,1.00); border-radius: 5px; background-image: none; background-size: 32px; background-repeat: no-repeat; background-position: 12px 12px; background-color: white; min-width:90%; } p.infotext.oncheckout > strong { background-image: url("images/keybox.png"); background-size:500px; background-repeat: no-repeat; background-position: center top; display: inline-block; position: relative; float: left; width: 100%; box-sizing: border-box; margin-bottom: 80px; text-align: left; color: black !important; background-color: rgba(255,249,178,1.00); padding:680px 64px 48px 54px; font-size:1.7rem; border-radius:9px; } p.infotext.oncheckout > button { font-size: 2.2rem !important; padding: 40px 20px !important; width: 100% !important; margin: 80px 0px !important; display: inline-block !important; } label.productBox, div.whiteBox { display: inline-block; float: left; box-sizing: border-box; padding: 8px 24px 30px 24px; width: 50vw; height: auto; position: relative; background: rgb(246,245,244); z-index: 20; max-width: 570px; min-width: 320px; margin: 20vh auto 50px 10vw; -webkit-box-shadow: 2px 2px 26px 0 rgba(0,0,0,0.25); box-shadow: 2px 2px 26px 0 rgba(0,0,0,0.25); border-radius: 5px; } div.whiteBox > input.btnstyle { position: relative; width: auto; bottom: auto; height: auto; z-index: 21; font-size: 1.33rem; right:auto; text-shadow: none; box-shadow: none; float:right; text-transform: capitalize; margin-top:24px; } div.whiteBox h2 { color:rgba(48,48,48,1.00); font-size: 2.4rem; } div.whiteBox p { color:rgba(72,72,72,1.00); font-size: 1rem; padding-right: 4px; font-weight: 200 !important; margin-top: 12px; line-height: 1.4; margin-bottom: 8px; } div.transBox { display: inline-block; float: left; box-sizing: border-box; padding: 24px; width: 78vw; height: auto; position: relative; background: rgba(233,225,220,0.00); z-index: 20; color:#fff; -webkit-box-shadow: none; box-shadow: none; border-radius: 0px; margin: 15vh 0px 12px 9vw; font-size: 1.5rem; } div.transBox > h1, div.transBox > p { position: relative; } div.transBox > h1 { color: #eee !important; font-size: 2.5rem; font-weight: 200 !important; display: flex; line-height: 1.25; box-sizing: border-box; min-width: 100%; } div.transBox > p { color:#ddd !important; font-size: 1.40rem; font-weight: 100 !important } div.transBox > p { display:inline-block; position:relative; box-sizing: border-box; float: left; padding:0px 38px 0px 0px; width: 47%; margin-top: 12px; } div.transBox > p > button { display:block; outline:none; position: absolute; bottom:0px; border-style: solid; border-width: 0px; border-color: rgba(192,0,100,1.00); margin-top: 17px; font-size: 2rem; font-weight:200; box-sizing: border-box; text-transform: capitalize; background-color: rgba(255,0,128,1.00); padding:16px 24px; text-align: center; min-width: 90%; color: rgba(255,255,255,1.00); cursor: pointer; border-radius: 9px; -webkit-box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25); box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25); } div.transBox > p.descr { min-height:195px; } div.transBox button.blue { border-color: rgba(1,97,185,1.00); background-color: rgba(19,119,225,1.00); } div.transBox button.special { background-color: rgba(172,123,0,1.00); } div.transBox button.lostkey { background-color: #005756; } div.transBox button.checkout { background-color: rgba(112,112,112,1.00); } div.transBox > p > button:hover { background: rgba(255,158,0,1.00); border-color: rgba(172,124,3,1.00); } button.button.save, input.next_btn, button.next_btn { background-color: rgba(255,0,128,1.00) !important; } button.button.clear, input.prev_btn, button.prev_btn { background-color: rgba(19,119,225,1.00) !important; } button.button.save:hover, input.next_btn:hover, button.next_btn:hover, button.button.clear:hover, input.prev_btn:hover, button.prev_btn:hover { background-color: rgba(255,158,0,1.00) !important; } button#totalConfirm.save.next_btn { position: fixed; bottom: 139px; z-index: 8000; right: 5.2vw; width: 41vw; font-size: 3rem; min-height: 82px !important; margin: 0px 0px; } label.productBox { width: 45vw !important; margin: 24px 2.5vw 0px 2.5vw; padding: 0px 0px 0px 0px; -webkit-box-shadow: none; box-shadow: none; background: rgba(255,255,255,1.00); border-radius: 0px; } label.productBox.expand { width: 90% !important; max-width: 90% !important; margin: 12px 5% 4px 5% !important; background-color: rgba(255,255,255,1.00); background-size: contain !important; padding-top: 0px !important; padding-left: 0px !important; border: 24px solid white; box-sizing: border-box; padding-bottom: 8px; } label.productBox.expand, label.productBox.expand > span.checkmark { min-height:40vh !important; } label.productBox.expand > span.checkmark { background-color:rgba(255,255,255,1.00); background-size: contain !important; padding-top: 0px !important } label.productBox.expand > span.checkmark > h5 { margin-top: 28vh !important; min-width: 100% !important; max-width: 100% !important; width: 100% !important; margin: 28vh 0px -1px 0px !important; position: relative; display: inline-flex; box-sizing: border-box; padding-left: 2%; padding-top: 18px; border-bottom: 2px solid #232323; background-color: #232323 !important; color: white !important; padding-right: 31%; flex-direction: column; } label.productBox.expand > span.checkmark > div.price { position: relative; width: 33% !important; display: inline-flex; box-sizing: border-box; font-size: 2rem !important; font-weight: 400 !important; background: transparent !important; padding: 6px 12px 0px 0px; margin-top: -52px; margin-bottom: 0px; margin-left: 66%; flex-direction: row; justify-items: flex-end; text-align: right; justify-content: flex-end; color: white !important; align-items: baseline; line-height: 1; } label.productBox.expand > span.checkmark > div.price > small, label.productBox.expand > span.checkmark > div.price > b { font-weight: 400 !important; color: #ededed !important; display: inline-block; padding: 1px 4px; } label.productBox.expand > span.checkmark > div.price > small { display: inline-flex; font-size: 1.2rem; } label.productBox.expand > span.checkmark > div.price > b > small { display: inline-block; position: absolute; top: -28px; width: 200%; left: -100%; font-size: 20px; letter-spacing: 1px; font-weight: 200; } label.productBox.expand > span.checkmark > h5 > i.setup { color: white; padding-right: 22px; padding-left: 22px; padding-bottom: 7px; padding-top: 4px; font-size: 90%; border: 2px solid; border-radius: 10px; width: auto; margin-right: auto; margin-bottom: 4px; margin-top: 10px; background-color: rgba(255,255,255,0.05); } label.productBox.expand > span.checkmark > div.descr { position: relative; display: inline-flex; box-sizing: border-box; flex-direction: column; padding-left: 2%; padding-right: 2%; overflow-y: auto; font-size: 1.2rem; line-height: 2rem; padding-top: 24px; min-height: 18vh; float: left; max-width: 100%; overflow: hidden; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo { display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; box-sizing: border-box; width: 100%; margin: 0px 0px; padding: 2px 0px 2px 0px; line-height: 1.5; border-bottom: 1px solid lightgray; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo > i, label.productBox.expand > span.checkmark > div.descr > span.ciinfo > b { display: flex; flex-direction: column; box-sizing: border-box; padding: 0px 0px; margin: 0px 0px; font-style: normal; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo > i { align-items: flex-start; text-align: left; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo > b { align-items: flex-end; text-align: right; justify-content: flex-end; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo.booker > b, label.productBox.expand > span.checkmark > div.descr > span.ciinfo.duration > b { font-size: 1.85rem !important; font-weight: 400; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo > i > small, label.productBox.expand > span.checkmark > div.descr > span.ciinfo > b > small { display: inline-flex; flex-direction: row; font-weight: 400; color: darkgray; font-size: 1.1rem; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo.total { font-size: 1.5rem; border-bottom: 6px double lightgray; border-bottom: 0px; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo.room > b { max-height: 128px; justify-content: flex-start; overflow-y: auto; padding-top: 2px; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo.room > b > div { display: flex; flex-direction: column; box-sizing: border-box; padding: 0px 0px; margin: 0px 0px; font-style: normal; align-items: flex-end; text-align: right; justify-content: flex-end; line-height: 1.2; font-size: 1.85rem !important; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo.room > b > div > small { font-size: 1.1rem; font-weight: 400; display: block; padding: 3px 9px; background: red; color: white; min-width: 320px; border-radius: 3px; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo.room > b > small { font-weight: 200; font-size: 1rem; line-height: 1.2; box-sizing: border-box; padding-right: 16px; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo.total > b { } label.productBox.expand > span.checkmark > div.descr > span.ciinfo.total > i { } label.productBox.expand > span.checkmark > div.descr > span.ciinfo.comment { border-bottom: 0px; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo.comment > small { color: red; line-height: 1.3; max-width: 85%; margin: 4px 0px 4px auto; display: inline-block; text-align: right; border-bottom: 0px; font-size: 1.1rem; } label.productBox.expand > span.checkmark > div.descr > span.ciinfo > b, label.productBox.expand > span.checkmark > div.descr > span.ciinfo.room > b, label.productBox.expand > span.checkmark > div.descr > span.ciinfo.booker > b, label.productBox.expand > span.checkmark > div.descr > span.ciinfo.duration > b { font-size: 1.75rem !important; font-weight: 400; } label.productBox.expand > span.checkmark > div.descr > small { font-size: 1.5rem !important; line-height: 2rem; } label.productBox.expand input:checked ~ .checkmark::after { top: 10vh; left: calc(50% - 144px); width: 288px; height: 288px; } label.productBox.compressed, label.productBox.compressed > span.checkmark { /* height: 160px !important; */ box-sizing: border-box !important; min-height: 240px !important; max-height: 360px !important; } label.productBox.compressed { width: 90% !important; display: inline-flex; position: relative; max-width: 90% !important; min-width: 90% !important; box-sizing: border-box !important; margin: 0px 5% 28px 5% !important; -webkit-box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1); box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1); border-radius: 12px; padding-bottom: 20px; } label.productBox.compressed > span.checkmark { display: inline-flex; position: relative; min-width: 100%; max-width: 100%; box-sizing: border-box; background-color: rgba(255,255,255,1.00); background-size: 195px auto !important; background-position: 20px 112px !important; padding: 8px 8px 8px 8px !important; } label.productBox.compressed > span.checkmark > h5 { border-width: 0px !important; margin-top: 0px !important; margin-bottom: 0px !important; min-height: 75px; min-width: 100% !important; max-width: 100% !important; position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; align-content: flex-start; align-items: flex-start; box-sizing: border-box; padding-bottom: 0px; padding-top: 9px !important; padding-left: 13px; padding-right: 280px; line-height: 1.2; margin-left: 0px; font-size: 2.25rem !important; font-weight: 600; letter-spacing: -1.25px; background: rgba(206,206,206,0.00) !important; border-radius: 0px; } label.productBox.compressed > span.checkmark > h5 > small { display: inline-flex; position: relative; width: 100%; float: left; font-size: 1.4rem; box-sizing: border-box; align-items: center; padding-top: 6px; padding-left: 38px; padding-bottom: 6px; color: darkcyan; text-align: right; max-width: 100%; margin-left:-5px; right: auto; top: 0px; font-weight: 200; line-height: 1; margin-top: -2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='darkcyan' width='48'%3E%3Cpath d='M27.95 43.15q-.9.9-2.175.9t-2.175-.9L4.85 24.4q-.5-.5-.675-1.05Q4 22.8 4 22.2V7q0-1.3.85-2.15Q5.7 4 7 4h15.2q.6 0 1.2.175t1.1.675L43.15 23.5q.95.95.95 2.225 0 1.275-.95 2.225ZM25.9 41.1l15.2-15.2L22.2 7H7v15.2ZM12.25 14.8q1.05 0 1.825-.775.775-.775.775-1.825 0-1.05-.775-1.825Q13.3 9.6 12.25 9.6q-1.05 0-1.825.775-.775.775-.775 1.825 0 1.05.775 1.825.775.775 1.825.775ZM7 7Z'/%3E%3C/svg%3E"); background-position: 3px 3px; background-repeat: no-repeat; background-size: 30px; min-height: 30px; background-color: white; } label.productBox.compressed > span.checkmark > div.price { border-width: 0px !important; position: absolute !important; padding: 3px 12px 2px 12px !important; margin: 0px 0px 0px 0px !important; bottom: auto; top: 12px; left: auto; right: 12px; display: block; box-sizing: border-box; color: green !important; font-size: 3rem !important; background: none !important; background-color: white !important; width: auto !important; line-height: 1.2; border-radius: 4px; text-align: right; } label.productBox.compressed > span.checkmark > div.descr { position: relative; display: inline-flex; box-sizing: border-box; border-radius: 0px; padding-left: 230px; padding-right: 182px; padding-top: 10px; margin-bottom: 10px; padding-bottom: 6px; max-height: 160px; min-height: 150px; overflow-y: auto; font-weight: 300; font-size: 1.2rem; line-height: 1.2; border: 2px solid rgba(170,170,170,0.00); color: rgba(66,66,66,1.00); min-width: 100%; max-width: 100%; margin-left: 0px; margin-right: 0px; background-color: transparent; } label.productBox.compressed > span.checkmark > div.price > small { color:#444; font-size:1.5rem; } label.productBox.compressed > span.checkmark::after, label.productBox.compressed input:checked ~ .checkmark::after { bottom: 12px; right: 24px; left: auto; top: auto; width: 8rem; height: 8rem; border-radius: 20px; } label.productBox.compressed > span.checkmark::after { content: ' '; text-align: center; justify-content: center; justify-items: center; color: white; box-sizing: border-box; font-size: 4rem; align-items: center; align-content: center; line-height: 7.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M23.25 2q4.55 0 7.775 3.175Q34.25 8.35 34.25 12.9q0 2.6-1.125 4.9Q32 20.1 29.95 21.7h-1.7v-2.5q1.45-1.15 2.225-2.8.775-1.65.775-3.5 0-3.3-2.35-5.6T23.25 5q-3.3 0-5.65 2.3-2.35 2.3-2.35 5.6 0 1.85.775 3.5t2.225 2.8v3.6q-2.8-1.45-4.4-4.1-1.6-2.65-1.6-5.8 0-4.55 3.225-7.725T23.25 2Zm-1.9 42q-.85 0-1.6-.325-.75-.325-1.3-.875L8.15 32.5l2.8-2.9q.7-.7 1.575-1.075t1.825-.125l3.9.9V13q0-2.1 1.45-3.55Q21.15 8 23.25 8q2.1 0 3.55 1.45 1.45 1.45 1.45 3.55v8.6h1.3q.25 0 .45.1t.45.2l7.4 3.6q1.2.55 1.775 1.775.575 1.225.325 2.525l-1.8 10.9q-.25 1.45-1.4 2.375t-2.6.925Zm-.4-3H35l2.15-12.45L28 24h-2.75V13q0-.9-.55-1.45-.55-.55-1.45-.55-.9 0-1.45.55-.55.55-.55 1.45v19.95l-7.7-1.65-1.15 1.15ZM35 41H20.95 35Z'/%3E%3C/svg%3E"); background-position: center !important; background-size:6rem; background-repeat: no-repeat; } label.productBox.compressed input:checked ~ .checkmark::after { background-size:9rem; } label.productBox > span.checkmark { background-color:#fff !important; } label.inputBox { display:inline-block; float:left; position: relative; width:50%; box-sizing:border-box; padding:4px; margin-top: 24px; } label.inputBox span { display:inline-block; float:left; position: relative; width:100%; box-sizing:border-box; padding:0px; font-size:1.25rem; font-weight:400; color:rgba(95,95,95,1.00); pointer-events: none; } label.inputBox input, label.inputBox select { display:inline-block; position:relative; width:100%; min-width:100%; box-sizing:border-box; padding:10px 12px; font-size:1.33rem; outline:0; border:1px solid rgba(0,0,0,0.1); border-radius:5px; min-height:48px; z-index:10 } label.inputBox.checkboxed { display:inline-block; float:left; position: relative; width:49%; margin:58px 0.5% 15px 0.5%; box-sizing:border-box; padding:0px 4px; background-color: rgba(255,255,255,1.00); border-radius:5px; min-height:55px; } label.inputBox.checkboxed span { font-size:1.2rem; padding-right: 8px; padding-left: 60px; padding-top:7px; line-height:1; } label.inputBox.checkboxed input { display:inline-block; position:absolute; left: 0px; top: 0px; margin:3px; max-width:44px; } label.inputBox input.control, div.onstaySelect > input { padding:10px 12px 10px 58px; } div.onstaySelect > div.onstaySelectTrigger, label.inputBox button.opencontrol { display:block; position:absolute; width:46px; box-sizing: border-box; margin-right:0px; margin-top:0px; margin-left: 0px; min-height:47.75px; left:4px; bottom:5.25px; z-index:15; border-bottom-left-radius: 5px; border-top-left-radius: 5px; outline:none; border:0px; background-color: rgba(255,0,128,1.00); background-image: url('pic/calendar.svg'); background-position: center; background-repeat: no-repeat; background-size: 20px; cursor:pointer; } div.onstaySelect > div.onstaySelectTrigger:hover, label.inputBox button.opencontrol:hover { background-color: rgba(255,158,0,1.00); } a.btnstyle, button.next_btn, button.prev_btn { position:relative; display:inline-block; float:right; width:96%; margin:32px 2% 12px 2%; font-size:1.85rem; padding:14px 32px 15px 32px; line-height: 1; font-weight: 200; outline:0; border-radius:5px; border-width: 0px; color:#fff; background:rgba(53,53,53,1.00); text-decoration: none; box-sizing:border-box; text-align: center;} main form.flex > label.inputBox { display:inline-block; float:left; position: relative; width:85%; box-sizing:border-box; padding:4px; margin-left: 7.5%; margin-top: 24px; } main form.flex > label.inputBox.rf { width:42.5%; margin-left: 5%; } main form.flex > label.inputBox > span { display:inline-block; float:left; position: relative; width:25%; box-sizing:border-box; padding:0px; padding-top: 15px; font-size:1.5rem; font-weight:200; color:rgba(95,95,95,1.00) } main form.flex > label.inputBox.rf > span { width:100%; padding-top: 5px; margin-bottom:4px; font-size:1.25rem; font-weight:400; color:rgba(95,95,95,1.00) } div.onstaySelect { display:inline-block; position:relative; width:100%; height:48px; } div.onstaySelect > input { padding: 10px 48px 10px 12px; } div.onstaySelect > div.onstaySelectTrigger { width:100% !important; height:48px; bottom:auto; left: auto; right:0px; top:1px; border-radius:0px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; background-image: url("icons/up.svg"); background-color: transparent; opacity:0.6; background-position: 99.2% center; } div.onstaySelect.closed > div.onstaySelectTrigger { background-image: url("icons/down.svg"); background-color: transparent; } div.onstaySelect > div.onstaySelectTrigger:hover { background-color: rgba(255,0,190,0.05) } div.onstaySelect > div.onstaySelectOptionBox > span.onstaySelectValue { z-index: 2147483647 !important; } div.onstaySelect > div.onstaySelectOptionBox { position: fixed !important; z-index: 2147483646 !important; top: 0px !important; bottom: 0px !important; margin-top: 0px !important; left: 0px !important; margin-left: 0px !important; float: none !important; display: inline-flex; align-content: space-around; justify-content: space-around; align-items: center; width: 100vw; height: 100vh; box-sizing: border-box !important; background-color: rgba(0,0,0,0.70); font-family: "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif" !important; text-align: center; } div.onstaySelect > div.onstaySelectOptionBox > div.onstaySelectOptionPopUp { z-index: 2147483647 !important; position: relative !important; display: block; float: none; box-sizing: border-box !important; width: 100%; max-width: 600px !important; min-height: 180px; max-height: 50vh; background: #FFF; -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); border-radius:12px; overflow-y: visible; } div.onstaySelect > div.onstaySelectOptionBox > div.onstaySelectOptionPopUp > h4 { display:inline-block; width:100%; float:left; text-align: center; padding: 4px 12px; margin-top:12px; margin-bottom: 20px; font-size:2rem; font-weight:normal; box-sizing: border-box; color:rgba(24,24,24,1); text-transform: uppercase; } div.onstaySelect > div.onstaySelectOptionBox > div.onstaySelectOptionPopUp > div { display:inline-block; position: relative; box-sizing: border-box; width:94%; max-height: 48vh; margin-top: 1vh; margin-left: 3%; margin-right: 3%; padding:12px 12px !important; margin-bottom: 1vh; overflow-y: auto; } input.onstaySelectMasterInputVis, input.onstaySelectMasterInputVis:focus, input.onstaySelectMasterInputVis:active, input.onstaySelectMasterInputVis:visited { -webkit-tap-highlight-color: none !important; outline:none !important; -webkit-touch-callout: none !important; /* iOS Safari */ -webkit-user-select: none !important; /* Safari */ -khtml-user-select: none !important; /* Konqueror HTML */ -moz-user-select: none !important; /* Old versions of Firefox */ -ms-user-select: none !important; /* Internet Explorer/Edge */ user-select: none !important; /* Non-prefixed version, currently */ -webkit-user-input: none !important; /* Safari */ -khtml-user-input: none !important; /* Konqueror HTML */ -moz-user-input: none !important; /* Old versions of Firefox */ -ms-user-input: none !important; /* Internet Explorer/Edge */ user-input: none !important; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } div.onstaySelect > div.onstaySelectOptionBox > div.onstaySelectOptionPopUp span.onstaySelectValue { margin-bottom: 12px; word-break: break-all; overflow: hidden; box-sizing: border-box; clear: both; width: 100%; float: left; font-size: 1.7rem !important; padding: 16px 30px 14px 30px; border-radius: 12px; color: #111; text-align: center; background-color: rgba(252,252,252,1.00); -webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.2); box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.2); pointer-events: all !important; } div.onstaySelect > div.onstaySelectOptionBox > div.onstaySelectOptionPopUp span.onstaySelectValue.selected { background-color: rgba(255,0,128,1.00); color:#fff !important; } h4.close { position:absolute; top:-80px; left:0px; color:#fff !important; cursor:pointer !important; z-index: 2147483647 !important; pointer-events: all !important; background-image: url("pic/cancel.svg"); background-size:64px; background-position: right top; background-repeat: no-repeat; padding-top:18px !important; opacity: 0.9; } h4.close:hover { opacity:0.9; } div.onstaySelect.closed > div.onstaySelectOptionBox { display: none !important; overflow: hidden; visibility: hidden; } input.onstaySelectMasterInputVis, input.onstaySelectMasterInputVis:focus, input.onstaySelectMasterInputVis:active, input.onstaySelectMasterInputVis:hover { -webkit-touch-callout: none !important; -webkit-user-select: none !important; -khtml-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } label.productBox > span.checkmark { display: inline-flex; float: left; text-align: left; flex-wrap: wrap; flex-direction: row; position: relative; min-width: 100%; max-width: 100%; color: rgba(33,33,33,1.00); box-sizing: border-box; font-size: 1.67rem; background-color: rgba(11,96,143,0.00); background-size: 110%; background-repeat: no-repeat; padding: 280px 0px 0px 0px; background-position: center top !important; overflow: hidden; opacity: 0.9; border-radius: 0px; } label.productBox > span.checkmark:after { display: block; position: absolute; top: 25%; left: calc(50% - 24px); width: 48px; height: 48px; content: ''; background-size: 120%; background-position: center !important; background-repeat: no-repeat; background-color: rgba(55,155,166,0.15); border-radius: 40px; -webkit-transition: all 190ms ease-in-out; -moz-transition: all 190ms ease-in-out; -ms-transition: all 190ms ease-in-out; -o-transition: all 190ms ease-in-out; transition: all 190ms ease-in-out; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } label.productBox > input[type="checkbox"], label.productBox > input[type="radio"] { opacity: 0; cursor: pointer; height: 0px; width: 0px; display:none; position: absolute; } label.productBox, label.productBox > span.checkmark { height:auto; overflow:hidden; min-height:280px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } label.productBox { border-radius:2px; overflow: hidden; -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.3); box-shadow: 0 1px 5px 0 rgba(0,0,0,0.3); } label.productBox:hover { -webkit-box-shadow: 0 0px 32px 0 rgba(0,100,100,0.8); box-shadow: 0 0px 32px 0 rgb(0 100 100 / 80%); } /* On mouse-over */ label.productBox:hover input ~ .checkmark { opacity: 1; } /* When the checkbox is checked, add a blue background */ label.productBox input:checked ~ .checkmark { opacity: 1; } label.productBox input:checked ~ .checkmark:after { top:10%; left:calc(50% - 72px); width:144px; height:144px; background-image: url("icons/ic_check_box_white_24px.svg"); background-color: seagreen; -webkit-box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25); box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25); content:""; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } label.productBox > span.checkmark > h5, label.productBox > span.checkmark > p, label.productBox > span.checkmark > div.price, label.productBox > span.checkmark > div.descr { background: rgba(255,255,255,1); box-sizing: border-box; } label.productBox > span.checkmark > h5, label.productBox > span.checkmark > p, label.productBox > span.checkmark > div.price { display:inline-block; position:relative; float:left; width:100%; margin:0px 0px 0px 0px; padding:15px 2px 2px 2px; box-sizing: border-box; } label.productBox > span.checkmark > div.price { padding:5px 12px 2px 12px; } label.productBox > span.checkmark > h5 { background: rgba(255,255,255,1)!important; margin:0px 0px 0px 0px; padding:4px 2px 2px 8px; box-sizing: border-box; } label.productBox > span.checkmark > h5 { font-size: 1.85rem !important; padding:4px 16px 3px 16px; } label.productBox > span.checkmark > p { font-size: 0.95rem; color:rgba(86,86,86,1.00); } label.productBox > span.checkmark > div.price { text-align: right; color: rgba(96,96,96,1.00) !important; font-weight:bold; } label.productBox:nth-child(odd) { margin: 24px auto 0px auto; } label.productBox:nth-child(even) { margin: 24px auto 0px auto; } label.productBox > span.checkmark { background-image: url("images/door.jpg"); } /* label.productBox.extra:nth-child(4) > span.checkmark { background-image: url("images/breakfast.jpg"); } label.productBox.extra:nth-child(5) > span.checkmark { background-image: url("images/paytv.jpg"); } label.productBox.extra:nth-child(6) > span.checkmark { background-image: url("images/parking.jpg"); } label.productBox.extra:nth-child(7) > span.checkmark { background-image: url("images/minibar.jpg"); } label.productBox.room > span.checkmark { background-image: url("images/room1.jpg"); } label.productBox.room:nth-child(4) > span.checkmark { background-image: url("images/room1.jpg"); } label.productBox.room:nth-child(5) > span.checkmark { background-image: url("images/room2.jpg"); } label.productBox.room:nth-child(6) > span.checkmark { background-image: url("images/room3.jpg"); } label.productBox.room:nth-child(7) > span.checkmark { background-image: url("images/room4.jpg"); } label.productBox.room:nth-child(9) > span.checkmark { background-image: url("images/room0.jpg"); } */ .next_btn.btnstyle.uplift, .prev_btn.btnstyle.uplift { z-index:80 !important; } div.popupForOptions:not(.hidden) { display: flex; position: fixed; z-index: 500; background: rgba(0,0,0,0.33); justify-content: center; align-content: space-around; align-items: center; text-align: center; width:100vw; height:100vh; top:0px; left:0px; } div.popupForOptions:not(.hidden) > div.innerWindow { display: inline-flex; box-sizing: border-box; padding:20px 48px 70px 48px; background-color: #FFFFFF; border-radius:12px; justify-content: flex-start; flex-wrap: wrap; font-size:2rem; max-width:60vw; -webkit-box-shadow: 0 2px 9px 0 rgba(0,0,0,0.5); box-shadow: 0 2px 9px 0 rgba(0,0,0,0.5); } div.popupForOptions:not(.hidden) > div.innerWindow button.countOfUnits { display: inline-block; box-sizing: border-box; padding:8px 24px 7px 24px; background-color: #ddd; border-radius:5px; font-size:2rem; margin:9px 3px; color:#111; border:2px solid #ddd; outline: none; line-height: 1; } div.popupForOptions:not(.hidden) > div.innerWindow button.countOfUnits.selected { background-color: rgba(255,0,128,1); color:#fff; border:2px solid #fff; } @media(orientation: landscape) { div.whiteBox { margin: 10vh 0px 12px 25vw; } p.infotext { margin-top: -3px; margin-bottom: 20px !important; min-width:90% !important } label.productBox { margin-top: 4px !important; } header::before { height: 6vh; background-size: 94px; background-position: center 21px; margin-top: 2vh; } input.next_btn, input.prev_btn, input.next_btn.btnstyle.uplift, input.prev_btn.btnstyle.uplift { bottom: 8px !important; } label.productBox { width: 20vw !important; margin:24px 0px 8px 4% !important; float:left !important; } label.productBox, label.productBox > span.checkmark { min-height: 25vh !important; } label.productBox > span.checkmark { padding-top: 22vh !important; } main form.flex > label.inputBox { margin-top: 7px; } div#virtualKeyboard { display:none !important; } .signature-pad { height: 50vh !important; } .signature-pad--body > canvas { max-height:40vh !important; } } @media only screen and (max-width: 1024px) and (orientation: portrait) { html { font-size: 0.750em; } p.infotext { margin-top: -3px; margin-bottom: 20px !important; min-width:90% !important } label.productBox { margin-top: 4px !important; } header::before { height: 6vh; background-size: contain; background-position: center center; margin-top: 2vh; } input.next_btn, input.prev_btn, input.next_btn.btnstyle.uplift, input.prev_btn.btnstyle.uplift { bottom: -8px !important; padding:8px 24px 7px 24px !important } label.productBox { margin:24px 0px 8px 4% !important; } label.productBox, label.productBox > span.checkmark { min-height: 17vh !important; } label.productBox > span.checkmark { padding-top: 17vh !important; background-size: 80%; background-color: transparent; background-position: left top; } main form.flex > label.inputBox { margin-top: 7px; } div#virtualKeyboard { display:none !important; } .signature-pad { height: 50vh !important; } .signature-pad--body > canvas { max-height:40vh !important; } } div.dropdownCard { display:block; width:300px; height:200px; border-radius: 20px; background-color: rgba(211,179,45,1.00); -webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.7); box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.7); box-sizing: border-box; font-size:2rem; text-align: center; color:rgba(96,96,96,0.80); padding:125px 0px 0px 0px; text-transform: lowercase; position: fixed; z-index:100000; opacity:0; left:30%; top:-20vh; background-size: 90%; background-position: center; background-repeat: no-repeat; background-image: url("pic/key-card.svg"); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } div.dropdownCard.kc { width:600px; height:400px; border-radius: 40px; left:50%; margin-left: -290px; font-size:3.33rem; padding:250px 0px 0px 0px; } div.dropdownCard.kc.action1 { top:40vh; opacity: 1; /* opacity: 0.3; transform: rotate(90deg); background-color: rgba(139,139,139,1.00); color: rgba(181,181,181,0.00); animation-name: cardmove1; animation-duration: 3s; animation-timing-function: ease-out; animation-iteration-count: infinite; */ } div.dropdownCard.kc.action2 { top: 40vh; opacity: 1; /* opacity: 0.3; transform: rotate(90deg); background-color: rgba(16,110,170,1.00); animation-name: cardmove2; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; */ } /* MOD !!!!!!! 2025-05-16 !!!!!!!!!!! */ div.dropdownCard.kc.action1, div.dropdownCard.kc.action2 { background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='seagreen' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E"); background-color: transparent !important; box-shadow: 0 0 0 0 transparent !important; font-size:0px !important; color:transparent !important; padding:0px 0px 0px 0px !important; position: fixed; z-index:100000; background-size: 90%; transform: rotate(0deg); } div.dropdownCard.kc.action3 { opacity:1; opacity: 0.3; transform: rotate(90deg); top:150vh; background-color: rgba(16,110,170,1.00); animation-name: cardmove3; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } div.dropdownCard.cc { right:4%; left:auto; background-color: rgba(24,48,76,1.00); font-size:1.2rem; padding-top: 135px; color: #fff !important; text-transform: uppercase; background-image: url("pic/credit-card.svg"); } div.dropdownCard.cc.action { transform: rotate(90deg); animation-name: cccardmove; animation-duration: 7s; animation-iteration-count: infinite; animation-timing-function: linear; } div.printanimation { display: block; max-width: 150px; padding: 10px; position: fixed; background: #fff; z-index: 99999; box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.5); margin: auto; opacity: 0; left: 120px; } div.printanimation.action { -webkit-animation-name: movedown; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 7s; /* Safari 4.0 - 8.0 */ -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-name: movedown; animation-duration: 7s; animation-delay: 2s; } span#addonPlace { display:block; width:100%; box-sizing: border-box; font-weight:400; font-size: 1.85rem !important; } p.infotext.onFinalPage > span#addonPlace { display: block; width: 100%; box-sizing: border-box; font-weight: 400; font-size: 1.85rem !important; color: lightgray; } p.infotext.onFinalPage > span#addonPlace > small { display: inline-flex; width: 100%; justify-content: center; text-align: center; flex-direction: column; color: red; padding: 32px; box-sizing: border-box; font-size: 2rem; padding-top: 290px; background-size: 258px; background-repeat: no-repeat; background-position: center 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='red' %3E%3Cpath d='M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240ZM330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm34-80h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z'/%3E%3C/svg%3E"); } p.infotext.onFinalPage > span#addonPlace > a.button { display: inline-block !important; position: relative !important; float: none !important; box-sizing: border-box !important; border-radius: 9px !important; color: #fff !important; text-decoration: none !important; width: 480px !important; padding: 24px 8px !important; text-align: center !important; margin: 12px auto 100px auto !important; background-color: darkred !important; font-weight: 400 !important; font-size: 2rem !important; box-shadow: 0px 0px 12px 0px black !important; } span.check { display: inline-block; width: 100%; height: 80px; margin-left: 12px; background-image: url("icons/check.svg"); background-size: 80px; background-position: center; background-repeat: no-repeat; } div.ospopup { display:none !important; position:fixed; top:11vh; left:5vw; width:90vw; height:82vh; z-index:999999; background:rgba(255,255,255,1.00); box-sizing: border-box; padding: 90px 48px 40px 48px; border-radius:12px; -webkit-box-shadow: 1px 1px 60px 0 rgba(0,0,0,0.67); box-shadow: 1px 1px 60px 0 rgba(0,0,0,0.67); text-align: center; font-size:2em; overflow-y:auto; background-image: url("icons/ic_info_outline_48px.svg"); background-size:90px; background-position: center 20px; background-repeat: no-repeat; } div.ospopup h2 { text-transform:uppercase; font-weight:200; font-size:3.5rem; color: rgba(0,179,159,1.00) } div.ospopup p { display:block; width:100%; margin-bottom: 48px; line-height: 3.2rem; border-top:1px solid rgba(180,180,180,1.00); border-bottom:1px solid rgba(180,180,180,1.00); padding:32px 24px; box-sizing: border-box; } div.ospopup button { float: none; display:inline-block; font-size:3rem; background-color:rgba(0,151,134,1.00); padding:32px 86px; margin-bottom: 90px; } div.ospopup.open { display:block !important; } div.ospopup span.imprint { display:block; font-size:1.2rem; text-align: center !important; padding:5px 20px 50px 20px; box-sizing: border-box; background:rgba(255,255,255,1.00); } div.ospopup span.imprint h3 { display:block; width:100%; font-size:1.8rem; text-align: left !important; padding:38px 40px 4px 0px; box-sizing: border-box; font-weight:100; margin:0px 0px 0px 0px; } div.ospopup span.imprint p { display:block; width:100%; font-size:1.3rem; text-align: justify !important; padding: 12px 12px 4px 3px; box-sizing: border-box; border:0px; line-height: 2rem; font-weight:100; margin:0px 0px 0px 0px; } div.ospopup span.imprint ul { display:block; width:100%; font-size:1rem; text-align: left !important; padding: 10px 12px 4px 28px; box-sizing: border-box; border:0px; line-height: 2rem; font-weight:200; margin:0px 0px 0px 0px; color:#777 } div.ospopup span.imprint { display:block; font-size:1.2rem; text-align: center !important; padding:5px 20px 50px 20px; box-sizing: border-box; background:rgba(255,255,255,1.00); } div.ospopup span.imprint h3 { display:block; width:100%; font-size:1.8rem; text-align: left !important; padding:38px 40px 4px 0px; box-sizing: border-box; font-weight:100; margin:0px 0px 0px 0px; } div.ospopup span.imprint p { display:block; width:100%; font-size:1.3rem; text-align: justify !important; padding: 12px 12px 4px 3px; box-sizing: border-box; border:0px; line-height: 2rem; font-weight:100; margin:0px 0px 0px 0px; } div.ospopup span.imprint ul { display:block; width:100%; font-size:1rem; text-align: left !important; padding: 10px 12px 4px 28px; box-sizing: border-box; border:0px; line-height: 2rem; font-weight:200; margin:0px 0px 0px 0px; color:#777 } input.onstaySelectMasterInputVis:focus, input.onstaySelectMasterInputVis:active, button:focus, label.inputBox, div.onstaySelectTrigger, input.onstaySelectMasterInputVis, input.onstaySelectMasterInput, div.onstaySelect, div.onstaySelect.closed, h1, h2, h3, h4, h5, h6, h7, h8, h9, p, small, i, b, strong, span { user-select: none; /* supported by Chrome and Opera */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -ms-user-select: none; /* Internet Explorer/Edge */ -moz-user-select: none; /* Firefox */ text-decoration: none; text-emphasis-color: transparent; text-decoration-color: transparent; } input.onstaySelectMasterInputVis, h1, h2, h3, h4, h5, h6, h7, h8, h9 { pointer-events: none; } span.onstaySelectValue, a, input[type="submit"], button { cursor: pointer; } a, a:hover, a:active, a:focus, input::-moz-focus-inner, button::-moz-focus-inner { outline:0; border-width: 0px; } @media only screen and (orientation : landscape) { input.fullwidth { padding: 15px 32px 15px 32px; } input.next_btn, input.prev_btn { bottom:1vh; z-index:50000 !important } label.productBox h5 { margin: 12px 0px 32px 0px; margin-left: -45%; } footer { background-position: 95% top !important } div.transBox > h1 { margin-bottom: 28px !important; margin-top:-30px !important } div.transBox > p.descr { min-height: 155px; } div.transBox > p { width: 32%; min-width:320px; font-size:1.2rem; } div.whiteBox { margin: 13vh 0px 12px 20vw; } main form.flex > label.inputBox.rf { width: 19%; margin-left: 5%; } /* div#signature-pad, div.signature-pad--body, div.signature-pad--body > canvas, div.infotext.sign { max-height: 260px; height:260px !important; overflow:hidden !important; } */ span#addonPlace, p.infotext { padding-top: 10px !important; } span#addonPlace { margin-top: -90px !important; } span#addonPlace h1 img { max-height: 90px !important; margin-top: 10px; margin-bottom: 0px !important; } span#addonPlace h1 { font-size:2rem; } div.printanimation.action.fixum { top:0px !important; transform: scale(0.9); } .svg-wrapper { margin: 33vh 0px 0px 0px !important; } } @media only screen and (orientation : landscape) and (max-width : 1500px ) { html { font-size: 0.8em; } header::before { background-size: 160px !important; min-height: 200px; } input.next_btn, input.prev_btn, input.next_btn.btnstyle.uplift, input.prev_btn.btnstyle.uplift { bottom: 5px !important; } div.transBox > p.descr { min-height: 124px; } div.ospopup { padding: 50px 24px 20px 24px; background-size:40px; min-height: 440px; } div.ospopup p { display: block; width: 100%; margin-bottom: 16px; line-height: 2rem; padding: 24px 16px; } } @media only screen and (max-width: 1024px) { html { font-size: 0.900em; } div.transBox { width: 75vw; } div.whiteBox { width: 67vw; } div.whiteBox p { font-size:1.33rem; } button.next_btn, button.prev_btn { font-size: 2.25rem; } input.next_btn, input.prev_btn, input.next_btn.btnstyle.uplift, input.prev_btn.btnstyle.uplift { bottom: 5px !important; padding: 12px 24px 14px 24px !important; margin:0px 0px; } label.productBox > span.checkmark { padding-top: 12vh !important; background-size: 100%; background-position: center -30px !important; } div.descr { padding: 12px 12px 20px 2px; font-size: 1.1rem; line-height: 1.5rem; color:rgba(120,120,120,1.00) !important } label.productBox, label.productBox > span.checkmark { min-height: 15vh !important; } label.productBox { margin-top: 2px !important; } main form.flex > label.inputBox { margin-top: 2px; } div.signature-pad--actions > div > button.button.save { bottom: 7vh; } .signature-pad--footer button.button.clear { margin-top: -60px; margin-left: 10px; } ul.summary li:last-child > span:first-child small { display:block; } div.ospopup.Min { height: 55vh !important } div.ospopup.Min.Card { top: 25vh !important; left: 16vw !important; width: 70vw !important; height: 55vh !important; } h1 > img { height:120px !important } } body > footer { display: block !important; position: fixed !important; bottom: 0px !important; left: 0px !important; height: 120px !important; color:#bbb; } @media (orientation: portrait) { input.next_btn.btnstyle.uplift, button#totalConfirm.next_btn.uplift, input.prev_btn.btnstyle.uplift { bottom: 532px !important; min-width: 45%; } button#totalConfirm.next_btn.uplift { margin: 0px 0px !important; z-index: 99999 !important; } button#totalConfirm.next_btn.uplift, input.next_btn.btnstyle.uplift { right: -20px !important; } input.prev_btn.btnstyle.uplift { left: -20px !important; } } div.uiConfirm { display: none !important; } div.uiConfirm > div.popupwindow { display:none; } div.uiConfirm.open { display: flex !important; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 9999991; background: rgba(0,0,0,0.8); box-sizing: border-box; padding: 260px 64px 168px 64px; border-radius: 0px; box-shadow: none !important; justify-content: center; align-items: center; margin:0px 0px; } div.uiConfirm.open > div.popupwindow { display: flex !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='seagreen'%3E%3Cpath d='M460-300h40v-220h-40v220Zm20-276.92q10.46 0 17.54-7.08 7.08-7.08 7.08-17.54 0-10.46-7.08-17.54-7.08-7.07-17.54-7.07-10.46 0-17.54 7.07-7.08 7.08-7.08 17.54 0 10.46 7.08 17.54 7.08 7.08 17.54 7.08Zm.13 456.92q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E"); background-size: 68px; background-position: center 20px; background-repeat: no-repeat; width: 100%; max-height: 100%; min-height: 112px; justify-content: center; align-items: flex-start; box-sizing: border-box; background-color: white; padding: 128px 32px 64px 32px; border-radius: 16px; box-shadow: 0px 0px 16px 0px black; flex-direction: row; flex-wrap: wrap; } div.uiConfirm.open > div.popupwindow a.button, div.uiConfirm.open > div.popupwindow button.button { float: none; display: inline-flex; font-size: 2.5rem; box-sizing: border-box; background-color: indianred; font-weight: 200; color: #fff; text-decoration: none !important; padding: 24px 58px 24px 58px; margin: 24px 10px; margin-bottom: 58px; border-radius: 7px; min-width: 210px; line-height: 1; justify-content: center; text-align: center; } div.uiConfirm.open > div.popupwindow button.button { background-color:seagreen; } div.uiConfirm.open > div.popupwindow a.button:hover, div.uiConfirm.open > div.popupwindow button.button:hover { background-color: #333; } div.uiConfirm.open > div.popupwindow > p { display: inline-flex; box-sizing: border-box; text-align: center; width: 100%; justify-content: center; font-size: 1.85rem; font-weight: 400; line-height: 1.5; padding: 4px 4px 8px 4px; } div.uiConfirm div.textual > article { overflow-wrap: break-word; display: inline-flex; width: 100%; line-height: 1.5; box-sizing: border-box; flex-direction: column; justify-content: flex-start; align-content: flex-start; align-items: flex-start; word-break: break-word; max-height: calc(75vh - 150px); min-height: calc(75vh - 150px); overflow-y: auto !important; min-width: 100%; padding: 36px 7vw; } div.uiConfirm.large { display: none !important; } div.uiConfirm.large.open { top: 30px; left: 0px; width: 100vw; height: calc(100vh - 30px); overflow: hidden; background-image: none !important; background-color: rgba(0,0,0,0.7); margin: 0px 0px; box-sizing: border-box; border-radius: 0px; display: flex !important; padding: 2vh 7vw 5vh 7vw; flex-direction: column; justify-content: center; align-items: center; } div.uiConfirm.large.open:after { display:none !important; } div.uiConfirm.large.open div.textual { text-align: left; max-width: 100% !important; min-width: 100%; max-height: 75vh; min-height: 75vh; display: inline-flex; flex-direction: column; line-height: 1.35; box-sizing: border-box; position: relative; padding: 0px 0vw 0vh 0vw; background-color: white; border-radius: 6px; overflow-y: auto; order: 2; margin: 0px 0px !important; } div.uiConfirm.large.open div.textual h2 { display: inline-block; margin: 40px 0px 10px 0px; box-sizing: border-box; font-size: 3.5rem; max-width: 100%; text-align: center; } div.uiConfirm.large.open div.textual > b, div.uiConfirm.large.open div.textual > h3, div.uiConfirm.large.open div.textual > h4, div.uiConfirm.large.open div.textual > h5 { display: inline-block; margin: 20px 0px 10px 0px; box-sizing: border-box; max-width: 100%; min-width: 100%; text-align: left; padding: 4px 0vw; } div.uiConfirm.large.open div.textual button { display: inline-block; position: relative !important; outline: none; right: auto; left: auto; min-width: 128px; max-width: calc(100% - 12vw); width: 100%; float: none; margin-top: auto; letter-spacing: 1px; margin-bottom: 24px; margin-left: 6vw; font-weight: 400 !important; margin-right: 6vw; box-sizing: border-box; padding: 20px 16px; border-radius: 7px; font-weight: bold; background-color: mediumseagreen; color: #fff; text-transform: capitalize; font-size: 3rem; border: none; box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5); } div.uiConfirm.large.open button.close { right: 0px; display: inline-flex; justify-self: flex-end; position: relative; float: right; margin: 0px 0px 0px auto; box-sizing: border-box; box-shadow: 0px 0px 24px 8px rgba(0,0,0,0.2) !important; color: transparent; padding: 0px 0px; z-index: 99; line-height: 1; font-size: 0px; width: 72px; height: 72px; border-radius: 7px; outline: none; border: 0px; background-color: red; background-size: 100%; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' viewBox='0 -960 960 960' width='48'%3E%3Cpath d='m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z'/%3E%3C/svg%3E"); } label.inputBox input.checkbox { background-color: rgba(255,167,168,0.50) !important; color: rgba(0,0,0,0) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48'%3E%3Cpath d='M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Z'/%3E%3C/svg%3E") !important; max-width: 48px !important; min-width: 48px !important; width: 48px !important; max-height: 48px !important; min-height: 48px !important; height: 48px !important; padding: 0px 0px 0px 0px !important; float: right !important; background-size: 58px !important; background-position: center !important; background-repeat: no-repeat !important; box-sizing: border-box !important; } label.inputBox input.checkbox.active { background-color: rgba(169,255,144,0.70) !important; color:rgba(0,0,0,0) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48'%3E%3Cpath d='m419-321 289-289-43-43-246 246-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm0-600v600-600Z'/%3E%3C/svg%3E") !important; } label.inputBox input:focus, label.inputBox input.inputBox:focus, label.inputBox select:focus, main form.flex > label.inputBox input:focus, main form.flex > label.inputBox input[type="text"]:focus, main form.flex > label.inputBox input[type="date"]:focus, main form.flex > label.inputBox select:focus, main form.flex > label.inputBox input[type="number"]:focus, label.inputBox input.focus, label.inputBox input.inputBox.focus, label.inputBox select.focus, main form.flex > label.inputBox input.focus, main form.flex > label.inputBox input[type="text"].focus, main form.flex > label.inputBox input[type="date"].focus, main form.flex > label.inputBox select.focus, main form.flex > label.inputBox input[type="number"].focus { -webkit-box-shadow: 0 1px 15px 0 rgba(255,0,128,0.9) !important; box-shadow: 0 1px 15px 0 rgba(255,0,128,0.9) !important; } button#disasupp { display: flex; min-width: 128px; min-height: 128px; background: seagreen; position: absolute; z-index: 400; outline: none; border-radius: 0px; border-top-right-radius: 89%; bottom: -6px; left: -6px; border: 0px; background-position: 7px center; background-repeat: no-repeat; background-size: 83px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M35.6 12.2q-1.5 0-2.575-1.075Q31.95 10.05 31.95 8.55q0-1.5 1.075-2.575Q34.1 4.9 35.6 4.9q1.5 0 2.575 1.075Q39.25 7.05 39.25 8.55q0 1.5-1.075 2.575Q37.1 12.2 35.6 12.2ZM19.65 43.9q-3.95 0-6.8-2.85Q10 38.2 10 34.25q0-3.95 2.85-6.8 2.85-2.85 6.8-2.85v3q-2.7 0-4.675 1.975Q13 31.55 13 34.25q0 2.7 1.975 4.675Q16.95 40.9 19.65 40.9q2.7 0 4.625-1.875Q26.2 37.15 26.2 33.7h3q0 4.65-2.8 7.425-2.8 2.775-6.75 2.775Zm16.7-1.5V32.2H25.5q-2.45 0-3.675-1.9-1.225-1.9-.225-4.05l4.3-9.45h-4.7l-1.35 3.65-3-1 1.4-3.75q.25-.9.925-1.4.675-.5 1.775-.5h9.6q2 0 3.125 1.6T34 18.7l-4.5 9.55h6.1q1.65 0 2.7 1.05 1.05 1.05 1.05 2.7v10.4Z'/%3E%3C/svg%3E"); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } body.accessible button#disasupp { min-width: 96px; min-height: 96px; background: orangered; bottom: -6px; left: -6px; border-radius: 0px; border-top-right-radius: 55px; opacity: 1; background-position: 13px 12px; background-size: 64px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M28.4 38H14v-3h14.45q3.5 0 6.025-2.325Q37 30.35 37 26.9t-2.525-5.775Q31.95 18.8 28.45 18.8H13.7l5.7 5.7-2.1 2.1L8 17.3 17.3 8l2.1 2.1-5.7 5.7h14.7q4.75 0 8.175 3.2Q40 22.2 40 26.9t-3.425 7.9Q33.15 38 28.4 38Z'/%3E%3C/svg%3E"); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } body.accessible > header div.langSwitch { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; top: auto; bottom: 38vh; transform: scale(1.6); right: 4vw; } body.accessible > header div.langSwitch.open { bottom: 20vh; } body.accessible { background: dimgray; } body.accessible > header { height:30vh !important; /* background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); */ } body.accessible > main { height: 62vh !important; display: flex; justify-content: center; align-content: stretch; justify-items: center; flex-direction: column; } body.accessible > header:before { background-repeat: no-repeat; background-position: center !important; background-size: 45%; overflow: visible; height: 30vh !important; width: 100% !important; left: 0px; } body.accessible > footer { height:5vh !important; background-color: transparent; color:black; animation-name: rolling; animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: linear; animation-delay: 1s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='rgba(255,255,255,0.2)' width='48'%3E%3Cpath d='M35.6 12.2q-1.5 0-2.575-1.075Q31.95 10.05 31.95 8.55q0-1.5 1.075-2.575Q34.1 4.9 35.6 4.9q1.5 0 2.575 1.075Q39.25 7.05 39.25 8.55q0 1.5-1.075 2.575Q37.1 12.2 35.6 12.2ZM19.65 43.9q-3.95 0-6.8-2.85Q10 38.2 10 34.25q0-3.95 2.85-6.8 2.85-2.85 6.8-2.85v3q-2.7 0-4.675 1.975Q13 31.55 13 34.25q0 2.7 1.975 4.675Q16.95 40.9 19.65 40.9q2.7 0 4.625-1.875Q26.2 37.15 26.2 33.7h3q0 4.65-2.8 7.425-2.8 2.775-6.75 2.775Zm16.7-1.5V32.2H25.5q-2.45 0-3.675-1.9-1.225-1.9-.225-4.05l4.3-9.45h-4.7l-1.35 3.65-3-1 1.4-3.75q.25-.9.925-1.4.675-.5 1.775-.5h9.6q2 0 3.125 1.6T34 18.7l-4.5 9.55h6.1q1.65 0 2.7 1.05 1.05 1.05 1.05 2.7v10.4Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 2.75vh; background-position: 1vw bottom; } body.accessible > footer > span { display: inline-block; box-sizing: border-box; margin-top: 80px; padding: 2px 10px 4px; background: rgba(255,255,255,0.7); line-height: 1; margin: 49px 4px 0px 4px; border-radius: 12px; font-size: 1.2rem; } body.accessible > header, body.accessible > main, body.accessible > footer, body.accessible > main form.flex { } body.accessible > main form.flex { display: flex; align-self: stretch; box-sizing: border-box; justify-content: flex-start; height: -webkit-fill-available; align-items: flex-end; max-height: 53vh; max-width: calc(100vw - 180px); margin-left: 25px; padding-right: 0px; padding-top: 24px; padding-bottom: 24px; background-color: white; border-radius: 10px; overflow-y: scroll !important; align-content: flex-start !important; } body.accessible > main form.flex.onpage0, body.accessible > main form.flex.onpage1 { overflow-y: auto !important; align-content: flex-end !important; } body.accessible > main form.flex > div.confirmBox:not(.closed) { /* display: flex; position: fixed; z-index: 50000; box-sizing: border-box; padding: 10vh 7vw 2vh 7vw; width: 92vw; min-height: 47vh; max-height: 70vh; margin-top: 0vh; margin-bottom: -5vh; left: 4.5%; flex-direction: column; align-items: stretch; justify-content: flex-end; box-shadow: 0px 0px 0px 50vh rgba(0,0,0,0.7); */ } body.accessible > main form.flex > div.confirmBox.closed:not(.unconfirmed) { width: 110px; height: 110px; max-height: 110px; min-height: 110px; top: 43vh; right: 24px; left: auto; background-size: 92px; } body.accessible > main form.flex > div.confirmBox.closed:not(.unconfirmed) > button.confClose { } body.accessible > main form.flex div.rfgroup { padding: 0px 0%; min-width: 100%; } body.accessible > main form.flex div.rfgroup > div.rfset { display: inline-flex; flex-direction: column; position: absolute; box-sizing: border-box; min-width: 100%; max-width: 100%; padding: 24px; left: 0%; top: 0px; align-content: flex-start; align-items: flex-start; } body.accessible > main form.flex > p.infotext { min-height: 48px !important; max-height: 45vh !important; } body.accessible > main form.flex div.transBox { display: inline-flex; justify-self: stretch; align-self: stretch; justify-content: space-between; align-content: flex-end; align-items: flex-end; flex-wrap: wrap; width: auto; max-width: 82%; padding: 0px; margin: 10vh 0px 0px 7.5vw; } body.accessible > main form.flex div.transBox > p.descr { min-height: 80px; display: inline-flex; flex-direction: column; flex: 1; max-width: 48%; box-sizing: border-box; padding: 8px 9px 4px 9px; min-width: 33%; } body.accessible > main form.flex div.transBox > p > button { display: inline-flex; justify-content: center; position: relative; bottom: 0px; margin-top: 13px; font-size: 2.25rem; font-weight: 400; padding: 28px 10px; min-width: 96%; border-radius: 18px; } body.accessible div.uiConfirm { /* left: 15vw; */ /* top: 70vh; */ padding-bottom: 150px !important; align-items: flex-end; } body.accessible div.uiConfirm.large.open { top: 42vh; left: 2.5vw !important; max-width: 95vw !important; max-height: 50vh; overflow-y: hidden; justify-content: flex-start; padding-top: 50px; background: white !important; border-radius: 12px; box-shadow: 0px 0px 50vh 0px black; } body.accessible div.uiConfirm.large.open div.textual { max-height: 33vh !important; min-height: 41vh !important; } body.accessible div.uiConfirm.large.open div.textual div.preformated.conform { overflow-wrap: break-word; word-break: break-word; max-height: calc(41vh - 150px); min-height: calc(41vh - 150px); overflow-y: auto !important; min-width: 100%; padding: 17px 2vw; } body.accessible div.uiConfirm.large button.close { top: auto; right: -48px; margin-top: -20px !important; width: 90px; height: 90px; min-height: 90px; } body.accessible > main div.fixTop { position: fixed; z-index: 9998 !important; display: block; top: auto !important; transform: scale(1.5); bottom: 43vh !important; right: 2.2vw !important; box-sizing: border-box; width: 112px; height: 112px; text-align: center; padding: 0px 0px 0px 0px; background: rgba(255,2,6,0) !important; } body.accessible > main div.rfgroup > div.rfSign.open { position: fixed; top: auto; bottom: 14vh; z-index: 99; box-shadow: 0px 0px 64px 0px rgba(0,0,0,1) !important; padding-bottom: 50px; } body.accessible label.productBox, body.accessible div.whiteBox { margin: 13vh auto 50px 10vw; } body.accessible div.onstaySelect > div.onstaySelectOptionBox { padding: 50vh 23vw 3vh; justify-content: flex-end; align-items: stretch; } body.accessible div.onstaySelect > div.onstaySelectOptionBox > div.onstaySelectOptionPopUp { min-height: 180px; max-height: 35vh; } body.accessible div.onstaySelect > div.onstaySelectOptionBox > div.onstaySelectOptionPopUp > div { max-height: 33vh; } body.accessible main form > h3 { border-bottom: 0px solid rgba(0,0,0,0.5); } body.accessible div.sampleIDs { animation-name: none; top: 15.5vh; } body.accessible div.camDialog { align-items: flex-end; padding-bottom: 10vh; } uiConfirm.open div.textual { z-index: 9999999; display: block; position: relative; } body.accessible .date-select .popup { top: 27vh !important; } body.accessible span#camTrigger { top: auto; bottom: 23vh; transform: scale(1.6); right: 4vw; } body.accessible div.ospopup { top: 44vh; height: 50vh; left: 5vw; } body.accessible div.ospopup.Two { top: 44vh; height: 50vh; left: 5vw; } body.accessible div.popupForOptions:not(.hidden) { align-items: flex-end; padding-bottom: 7vh !important; box-sizing: border-box; } body.accessible label.productBox { margin: 2vh auto 4px 5vw; } html { background: none; background-color: darkgoldenrod; background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%23fff' stroke-width='4' stroke-miterlimit='10' cx='50' cy='50' r='48'/%3E%3Cline fill='none' stroke-linecap='round' stroke='%23fff' stroke-width='4' stroke-miterlimit='10' x1='50' y1='50' x2='85' y2='50.5'%3E%3CanimateTransform attributeName='transform' dur='2s' type='rotate' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/line%3E%3Cline fill='none' stroke-linecap='round' stroke='%23fff' stroke-width='4' stroke-miterlimit='10' x1='50' y1='50' x2='49.5' y2='74'%3E%3CanimateTransform attributeName='transform' dur='15s' type='rotate' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/line%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 240px; } body { animation-name: bodyfade; animation-duration: 1.33s; background: rgba(245,245,245,1); } body > main, body > header, body > footer, body > button#disasupp, #virtualKeyboard div#keyboardHeader, div#loadScreen.visible > div, div.exit_bt, div.langSwitch { animation-name: contentfade; animation-duration: 1.33s; opacity:1; } /* Anzalh gewünschter Schlüssel */ label.inputBox.forcing { width:90%; background: rgba(237,196,76,1.00); margin:20px 5% 20px 5%; box-sizing: border-box; padding:24px; border-radius: 7px; } main form.flex > label.inputBox.forcing > span { width: 50% !important; text-align: center !important; font-weight: 200; color: #111 !important; padding-top: 10px !important; font-size: 1.25rem !important; } label.inputBox.forcing > div.onstaySelect.closed { width: 50% !important; } label.inputBox.forcing.forceSelection { width: 90%; background: white; margin: 0px auto 0px 5%; box-sizing: border-box; padding: 64px 24px 64px 24px; border-radius: 7px; position: fixed; top: 40vh; z-index: 200; display: flex; flex-direction: column; justify-content: space-around; align-items: center; box-shadow: 1px 1px 24px 0px #000; } label.inputBox.forcing.forceSelection > span { width:100% !important; font-weight: 200; color:#111; padding-top:7px; padding-bottom:40px; } label.inputBox.forcing.forceSelection > div.onstaySelect.closed { width: 100% !important; text-align: center; display: flex; align-items: center; justify-content: center; } div.popper.forcing { display:none; z-index: 1; } div.popper.forcing.forceSelection { display:block; background: rgba(0,0,0,0.5); width:100vw; height:100vh; position: fixed; top:0px; left:0px; z-index: 199; } button.switch { display:inline-block; float: left; position: relative; box-sizing:border-box; padding:12px 21px; min-width:100px; margin:2px 0px; color: rgba(81,120,130,1.00); outline:none; border:3px solid #fff; text-align: center; font-weight:400; font-size: 1rem; background-color:#F3F3F3; border-radius:9px; margin-top: 0px; } label.forceSelection div.closed > button.switch { font-size: 1.75rem; } button.switch.activ { background-color: rgba(0,180,82,1.00); color:#fff; } button.switch#setOn1 { border-top-right-radius:0px; border-bottom-right-radius:0px; border-right-width: 0px; } button.switch#setOn2 { border-top-left-radius:0px; border-bottom-left-radius:0px; border-left-width: 0px; } .billTableLeftStyle { display:inline-flex !important; box-sizing:border-box; position:relative; width:25% !important; margin:0px 0px 0px 0px; min-height:40px; font-size:1.5rem !important; flex-direction: column; align-items: flex-end; } .billTableLeftStyle.wider { width:75% !important; align-items: flex-start; font-weight: 600; } .billTableLeftStyle.wider > small { font-size: 1.1rem; color: darkgray; box-sizing: border-box; padding-bottom: 8px; min-width: 100%; line-height: 1; font-weight: 200 !important; display: inline-flex; flex-direction: column; opacity: 0.4; padding-left: 18px; padding-top: 3px; } .billTableLeftStyle.wider > small > span { min-width: 100%; line-height: 1; font-weight: 200 !important; display: inline-flex; flex-direction: row; justify-content: space-between; color: #444; border-top: 1px solid #cdcdcd; padding-top: 3px; padding-bottom: 2px; } .billTableLeftStyle.wider > small > span > b { display: inline-flex; flex-direction: column; align-items: flex-end; text-align: right; max-height: 90px; overflow: hidden; color: #444 !important; font-weight: 400; } form#masterForm > p.infotext > b { display: inline-flex; flex-direction: column; box-sizing: border-box; font-weight: 300; border-top: 1px solid lightgray; margin-top: 10px; margin-left:0px; padding-left: 3px; padding-top: 16px; color: crimson; font-size: 1.3rem; padding-bottom: 8px; } p.infotextt strong.textbyAdmin { background: darkcyan; padding: 12px 28px 12px 23px; display: inline-flex; box-sizing: border-box; margin-top: 10px; position: relative; width: 100%; font-size: 90%; max-height: 104px; font-weight: 200; text-align: left; border-radius: 9px; overflow-y: auto; color: white; line-height: 1.5; margin-left: 0px; float: right; } label.inputBox.checkboxed { margin-bottom: 4px; margin-top: 26px; width: 49%; box-sizing: border-box; padding: 6px; display: inline-flex; justify-content: center; align-items: center; min-height: 77px; line-height: 1.2; } label.inputBox.checkboxed > span { color: rgba(20,20,20,1.00); font-size: 1.1rem; padding-right: 13px; padding-left: 70px; padding-top: 0px; padding-bottom: 0px; box-sizing: border-box; line-height: 1; display: flex; justify-content: center; min-height: 68px; align-items: center; } label.inputBox.checkboxed > input[type="text"] { left: 10px; top: 14px; pointer:cursor; pointer-events: none; } div.actionpopup > span { display: inline-flex; max-width: 80vw; min-width: 80vw; box-sizing: border-box; min-height: 480px; max-height: 80vh; transform: scale(0.8); padding: 5vw; background: white; border-radius: 12px; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.8); flex-direction: column; justify-content: flex-start; align-content: stretch; } input.set_email, input.onstaySelectMasterInputVis.setdoctype { font-size: 1.25rem !important; padding: 2px 14px 3px 11px !important; } label.inputBox > button.inputDeletor { display: inline-flex; position: absolute; bottom: 7px; right: 7px; z-index: 12; width: 32px; height: 42px; background-color: transparent; border: 0px; border-radius: 0px 5px 5px 0px; box-sizing: border-box; padding: 0px; margin: 0px; opacity: 0.8; background-size: 24px; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='indianred' height='48' viewBox='0 -960 960 960' width='48'%3E%3Cpath d='M261-120q-24.75 0-42.375-17.625T201-180v-570h-41v-60h188v-30h264v30h188v60h-41v570q0 24-18 42t-42 18H261Zm438-630H261v570h438v-570ZM367-266h60v-399h-60v399Zm166 0h60v-399h-60v399ZM261-750v570-570Z'/%3E%3C/svg%3E"); } label.inputBox.large > button.inputDeletor { bottom: 30px; right: 24px; background-size: 40px; } div.SelectorOfPersons { display: inline-flex; min-width: 90vw; max-width: 90vw; margin: 5vw; box-sizing: border-box; background-color: transparent; padding: 4%; justify-content: space-evenly; min-height: 40vh; align-items: center; flex-wrap: wrap; } div.SelectorOfPersons > button.persnr { animation-name: bling; animation-duration: 0.87s; animation-timing-function: ease-in-out; animation-iteration-count: 3; display: inline-flex; box-sizing: border-box; background-color: rgb(255,0,128); box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5); border: 0px; color: white; padding: 8vh 4vw 1.2vh 3vw; border-radius: 32px; min-width: 27%; background-size: 12vw; opacity: 0.9; background-position: center 1vh; margin: 13px; background-repeat: no-repeat; justify-content: center; font-weight: 600; font-size: 3.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' fill='white' width='24'%3E%3Cpath d='M500-482q29-32 44.5-73t15.5-85q0-44-15.5-85T500-798q60 8 100 53t40 105q0 60-40 105t-100 53Zm220 322v-120q0-36-16-68.5T662-406q51 18 94.5 46.5T800-280v120h-80Zm80-280v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Zm-480-40q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM0-160v-112q0-34 17.5-62.5T64-378q62-31 126-46.5T320-440q66 0 130 15.5T576-378q29 15 46.5 43.5T640-272v112H0Zm320-400q33 0 56.5-23.5T400-640q0-33-23.5-56.5T320-720q-33 0-56.5 23.5T240-640q0 33 23.5 56.5T320-560ZM80-240h480v-32q0-11-5.5-20T540-306q-54-27-109-40.5T320-360q-56 0-111 13.5T100-306q-9 5-14.5 14T80-272v32Zm240-400Zm0 400Z'/%3E%3C/svg%3E"); } @media (orientation: landscape) { div.SelectorOfPersons { margin: 10px 5vw; padding:10px 4%; } div.SelectorOfPersons > button.persnr { background-size: 4vw; } } div.SelectorOfPersons > button.persnr:hover { background-color:darkgreen; } div.SelectorOfPersons > button.persnr.pnr1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='white' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z'/%3E%3C/svg%3E"); animation-delay: 0s; } div.SelectorOfPersons > button.persnr.pnr2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='white' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z'/%3E%3C/svg%3E"); animation-delay: 0.25s; } div.SelectorOfPersons > button.persnr.pnr3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='white' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z'/%3E%3C/svg%3E"); animation-delay: 0.5s; } div.SelectorOfPersons > button.persnr.pnr4 { animation-delay: 0.75s; } div.SelectorOfPersons > button.persnr.pnr5 { animation-delay: 1.0s; } div.SelectorOfPersons > button.persnr.pnr6 { animation-delay: 1.25s; } div.SelectorOfPersons > button.persnr.pnr7 { animation-delay: 1.5s; } div.SelectorOfPersons > button.persnr.pnr8 { animation-delay: 1.75s; } button.ToggleIDScanner { min-height: 64px; display: flex; min-width: 100%; background-color: cornflowerblue; margin-top: -12px; border: 0px; box-sizing: border-box; background-position: 44px center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M2 42v-9.1h3V39h6.1v3Zm34.85 0v-3h6.1v-6.1h3V42Zm-29.2-5.55V11.5h4v24.95Zm6.05 0V11.5h2.1v24.95Zm6.1 0V11.5h4.15v24.95Zm6.25 0V11.5h6.05v24.95Zm8.15 0V11.5h2.1v24.95Zm4.15 0V11.5h1.9v24.95ZM2 15.1V6h9.1v3H5v6.1Zm40.95 0V9h-6.1V6h9.1v9.1Z'/%3E%3C/svg%3E"); background-size: 48px; animation-name: attention; animation-iteration-count: infinite; animation-duration: 2s; padding-left: 120px; color: white; font-size: 1.2rem; justify-content: flex-start; align-items: center; border-radius: 5px; box-shadow: 0px 0px 8px 0px black; margin-bottom: 16px; } form > span#camTrigger.hidden, form > span#camTrigger { display: none !important; } div.rfgroup { display: inline-flex; flex-wrap: wrap; flex-direction: column; position: relative; box-sizing: border-box; padding: 0px 5%; min-width: 100%; overflow: hidden; min-height: 900px; align-content: flex-start; align-items: flex-start; } div.rfgroup > div.rfset { display: inline-flex; flex-direction: column; position: absolute; box-sizing: border-box; min-width: 90%; max-width: 90%; padding: 24px; left: 5%; top: 0px; align-content: flex-start; align-items: flex-start; } div.rfgroup > div.rfset.open { } div.rfgroup > div.rfSign { display: none; flex-direction: column; position: absolute; box-sizing: border-box; min-width: 90%; max-width: 90%; padding: 4px; min-height: 520px; max-height: 520px; left: 5%; top: 160px; align-content: flex-start; align-items: flex-start; z-index: 20; background-color: seagreen; border-radius: 6px; box-shadow: 0px 0px 48px 0px rgba(0,0,0,1); padding-bottom: 128px; } div.rfgroup > div.rfSign.open { display: inline-flex; box-shadow: 0px 0px 0vh 300px white; } div.rfgroup > button.button.sign { display:none; } div.rfgroup > button.button.sign.inview { display: inline-flex; position: absolute; top: 40px; right: 7%; justify-items: center; font-weight: 200; font-size: 2rem; align-items: center; padding: 4px 53px 5px 116px; line-height: 1; width: auto; height: 77px; background-color: seagreen; background-size: 50px; background-position: 30px center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M24 44q-4.25 0-7.9-1.525-3.65-1.525-6.35-4.225-2.7-2.7-4.225-6.35Q4 28.25 4 24q0-4.2 1.525-7.85Q7.05 12.5 9.75 9.8q2.7-2.7 6.35-4.25Q19.75 4 24 4q3.75 0 7 1.2t5.85 3.3l-2.15 2.15q-2.2-1.75-4.9-2.7Q27.1 7 24 7q-7.25 0-12.125 4.875T7 24q0 7.25 4.875 12.125T24 41q7.25 0 12.125-4.875T41 24q0-1.5-.225-2.925-.225-1.425-.675-2.775l2.3-2.3q.8 1.85 1.2 3.85.4 2 .4 4.15 0 4.25-1.55 7.9-1.55 3.65-4.25 6.35-2.7 2.7-6.35 4.225Q28.2 44 24 44Zm-2.95-10.9-8.25-8.3 2.25-2.25 6 6 20.7-20.7 2.3 2.25Z'/%3E%3C/svg%3E"); } div.rfgroup > button.button.sign.empty { background-color: red; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M28 42q-.6 0-1.05-.45-.45-.45-.45-1.05 0-.65.45-1.075Q27.4 39 28 39q2.95 0 4.975-1.2Q35 36.6 35 35q0-1.15-1.475-2.25t-3.975-1.7l2.35-2.35q3.15.95 4.625 2.625T38 35q0 3.35-3.05 5.175Q31.9 42 28 42ZM12 27.3q-3.2-.7-4.6-2.2Q6 23.6 6 22q0-1.75 1.3-3.15t6-3.1q3.3-1.2 4.25-1.95.95-.75.95-1.75 0-1.25-1.1-2.15Q16.3 9 14 9q-1.35 0-2.3.35-.95.35-1.7 1.1-.4.4-1.025.475Q8.35 11 7.85 10.6q-.55-.4-.575-1-.025-.6.375-1.05.85-1.1 2.55-1.825Q11.9 6 14 6q3.4 0 5.45 1.625Q21.5 9.25 21.5 12.05q0 2.05-1.425 3.475Q18.65 16.95 14.5 18.5q-3.35 1.25-4.425 1.975Q9 21.2 9 22q0 .8 1.35 1.525 1.35.725 4.05 1.375Zm24.8-7.7-6.4-6.4 2.25-2.25q.9-.9 2-.9t2 .9l2.4 2.4q.9.9.9 2t-.9 2ZM11 39h2.1l17.25-17.25-2.1-2.1L11 36.9Zm-3 3v-6.4l20.25-20.25 6.4 6.4L14.4 42Zm20.25-22.35 2.1 2.1Z'/%3E%3C/svg%3E"); } div.rfgroup > div.rfSign > button.button.closex { position: absolute; display: inline-flex; } div.rfgroup > div.rfSign.open > button.button.closex { position: relative; display: inline-flex; float: right; margin-left: calc(100% - 64px); margin-top: 0px; min-height: 58px; justify-content: center; align-items: center; line-height: 1; font-size: 1.75rem; padding: 0px 0px; min-width: 61px; color: white; background-color: transparent; border: 4px solid white; margin-bottom: 5px; } div.rfgroup > div.rfSign.open > button.button.closex.prevent { /* visibility: hidden !important; */ } div.rfgroup > div.rfSign.open .signature-pad--body > canvas, .signature-pad--body img.mySignature { display: inline-block; width: 100%; float: left; clear: both; position: relative; min-height: 320px; max-height: 320px; z-index: 21; background-color: #f8f8f8 !important; background-size: 256px; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M28 42q-.6 0-1.05-.45-.45-.45-.45-1.05 0-.65.45-1.075Q27.4 39 28 39q2.95 0 4.975-1.2Q35 36.6 35 35q0-1.15-1.475-2.25t-3.975-1.7l2.35-2.35q3.15.95 4.625 2.625T38 35q0 3.35-3.05 5.175Q31.9 42 28 42ZM12 27.3q-3.2-.7-4.6-2.2Q6 23.6 6 22q0-1.75 1.3-3.15t6-3.1q3.3-1.2 4.25-1.95.95-.75.95-1.75 0-1.25-1.1-2.15Q16.3 9 14 9q-1.35 0-2.3.35-.95.35-1.7 1.1-.4.4-1.025.475Q8.35 11 7.85 10.6q-.55-.4-.575-1-.025-.6.375-1.05.85-1.1 2.55-1.825Q11.9 6 14 6q3.4 0 5.45 1.625Q21.5 9.25 21.5 12.05q0 2.05-1.425 3.475Q18.65 16.95 14.5 18.5q-3.35 1.25-4.425 1.975Q9 21.2 9 22q0 .8 1.35 1.525 1.35.725 4.05 1.375Zm24.8-7.7-6.4-6.4 2.25-2.25q.9-.9 2-.9t2 .9l2.4 2.4q.9.9.9 2t-.9 2ZM11 39h2.1l17.25-17.25-2.1-2.1L11 36.9Zm-3 3v-6.4l20.25-20.25 6.4 6.4L14.4 42Zm20.25-22.35 2.1 2.1Z'/%3E%3C/svg%3E"); } div.rfgroup > div.rfSign.open .signature-pad--body > canvas:hover { pointer-events: all; z-index:22; } div.rfgroup > div.rfSign.open .signature-pad--footer { display: inline-block; position: absolute; float: left; clear: both; width: 100%; bottom: 0px; left: 0px; z-index: 30; box-sizing: border-box; padding: 3px; pointer-events: none; } div.rfgroup > div.rfSign.open .signature-pad--footer > .signature-pad--actions > div > button { pointer-events: all !important; } div.rfgroup > div.rfSign.open div#signature-pad, div.rfgroup > div.rfSign.open div.infotext.sign, div.rfgroup > div.rfSign.open div.signature-pad--body { max-height: 800px; height: auto !important; display:inline-flex !important; } div.rfgroup > div.rfSign.open div.infotext.sign { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; justify-self: flex-start; padding: 0px 0px; background-image: none !important; border-width: 2.5px; border-color: seagreen !important; width: 100% !important; max-width: 100% !important; margin: 0px 0px; margin-top: auto !important; margin-bottom: auto !important; } div.rfgroup > div.rfSign.open div.infotext.sign > b { display: inline-flex; pointer-events: none; box-sizing: border-box; margin: 0px 0px; max-width: 100%; position: absolute; z-index: 32; padding: 13px 12px 17px 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='seagreen' width='48'%3E%3Cpath d='M28 42q-.6 0-1.05-.45-.45-.45-.45-1.05 0-.65.45-1.075Q27.4 39 28 39q2.95 0 4.975-1.2Q35 36.6 35 35q0-1.15-1.475-2.25t-3.975-1.7l2.35-2.35q3.15.95 4.625 2.625T38 35q0 3.35-3.05 5.175Q31.9 42 28 42ZM12 27.3q-3.2-.7-4.6-2.2Q6 23.6 6 22q0-1.75 1.3-3.15t6-3.1q3.3-1.2 4.25-1.95.95-.75.95-1.75 0-1.25-1.1-2.15Q16.3 9 14 9q-1.35 0-2.3.35-.95.35-1.7 1.1-.4.4-1.025.475Q8.35 11 7.85 10.6q-.55-.4-.575-1-.025-.6.375-1.05.85-1.1 2.55-1.825Q11.9 6 14 6q3.4 0 5.45 1.625Q21.5 9.25 21.5 12.05q0 2.05-1.425 3.475Q18.65 16.95 14.5 18.5q-3.35 1.25-4.425 1.975Q9 21.2 9 22q0 .8 1.35 1.525 1.35.725 4.05 1.375Zm24.8-7.7-6.4-6.4 2.25-2.25q.9-.9 2-.9t2 .9l2.4 2.4q.9.9.9 2t-.9 2ZM11 39h2.1l17.25-17.25-2.1-2.1L11 36.9Zm-3 3v-6.4l20.25-20.25 6.4 6.4L14.4 42Zm20.25-22.35 2.1 2.1Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 40px; background-color: transparent; border-radius: 12px; font-size: 1.2rem; color: seagreen; font-weight: 200; } div.rfgroup > div.rfSign.open div#signature-pad { display: inline-flex !important; position: relative; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; margin: 0px 0px; box-sizing: border-box; padding: 0px 0px; justify-self: flex-start; margin-top: 0px !important; top:0px !important; z-index:31; } div.signature-pad--actions > div > button.button.save { position: absolute !important; bottom: -120px !important; right: -10px !important; } div.rfgroup > div.rfset > h2.rfhead { background-size: 55px; background-repeat: no-repeat; background-position: center 4px; display: flex; box-sizing: border-box; padding: 58px 8px 4px 8px; min-width: 142px; max-width: 142px; width: auto; pointer-events: all; text-align: center; z-index: 4; cursor: pointer; background-color: #eee; justify-content: center; border-top-left-radius: 7px; border-top-right-radius: 7px; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2); margin: 2px 0px 0px 0px; -webkit-transition: all 700ms ease-in-out; -moz-transition: all 700ms ease-in-out; -ms-transition: all 700ms ease-in-out; -o-transition: all 700ms ease-in-out; transition: all 700ms ease-in-out; } div.rfgroup > div.rfset > h2.rfhead { color:red; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='red' width='48'%3E%3Cpath d='M22.05 23q-3.15 0-5.35-2.2-2.2-2.2-2.2-5.3 0-3.15 2.2-5.325Q18.9 8 22 8q3.15 0 5.325 2.175Q29.5 12.35 29.5 15.45q0 3.15-2.175 5.35Q25.15 23 22.05 23ZM22 20q1.9 0 3.2-1.325 1.3-1.325 1.3-3.175 0-1.9-1.3-3.2-1.3-1.3-3.15-1.3-1.9 0-3.225 1.3-1.325 1.3-1.325 3.15 0 1.9 1.325 3.225Q20.15 20 22 20Zm22.9 27-7-7q-1.15.85-2.375 1.175Q34.3 41.5 33 41.5q-3.55 0-6.025-2.475Q24.5 36.55 24.5 33q0-3.55 2.475-6.025Q29.45 24.5 33 24.5q3.55 0 6.025 2.475Q41.5 29.45 41.5 33q0 1.3-.325 2.525Q40.85 36.75 40 37.9l7 7ZM33 38.5q2.35 0 3.925-1.575Q38.5 35.35 38.5 33q0-2.35-1.575-3.925Q35.35 27.5 33 27.5q-2.35 0-3.925 1.575Q27.5 30.65 27.5 33q0 2.35 1.575 3.925Q30.65 38.5 33 38.5ZM6 40v-4.7q0-1.85.875-3.15Q7.75 30.85 9.4 30q2.35-1.15 6.125-2.175t7.675-.775q-.4.65-.75 1.425T21.9 30q-3.9-.05-6.8.925-2.9.975-4.5 1.775-.7.4-1.15 1.075Q9 34.45 9 35.3V37h12.9q.55.85 1 1.575.45.725 1 1.425Zm16-24.5ZM21.9 37Z'/%3E%3C/svg%3E"); } div.rfgroup > div.rfset.open > h2.rfhead { color: white; background-color: orangered; } div.rfgroup > div.rfset.open > h2.rfhead { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M22.05 23q-3.15 0-5.35-2.2-2.2-2.2-2.2-5.3 0-3.15 2.2-5.325Q18.9 8 22 8q3.15 0 5.325 2.175Q29.5 12.35 29.5 15.45q0 3.15-2.175 5.35Q25.15 23 22.05 23ZM22 20q1.9 0 3.2-1.325 1.3-1.325 1.3-3.175 0-1.9-1.3-3.2-1.3-1.3-3.15-1.3-1.9 0-3.225 1.3-1.325 1.3-1.325 3.15 0 1.9 1.325 3.225Q20.15 20 22 20Zm22.9 27-7-7q-1.15.85-2.375 1.175Q34.3 41.5 33 41.5q-3.55 0-6.025-2.475Q24.5 36.55 24.5 33q0-3.55 2.475-6.025Q29.45 24.5 33 24.5q3.55 0 6.025 2.475Q41.5 29.45 41.5 33q0 1.3-.325 2.525Q40.85 36.75 40 37.9l7 7ZM33 38.5q2.35 0 3.925-1.575Q38.5 35.35 38.5 33q0-2.35-1.575-3.925Q35.35 27.5 33 27.5q-2.35 0-3.925 1.575Q27.5 30.65 27.5 33q0 2.35 1.575 3.925Q30.65 38.5 33 38.5ZM6 40v-4.7q0-1.85.875-3.15Q7.75 30.85 9.4 30q2.35-1.15 6.125-2.175t7.675-.775q-.4.65-.75 1.425T21.9 30q-3.9-.05-6.8.925-2.9.975-4.5 1.775-.7.4-1.15 1.075Q9 34.45 9 35.3V37h12.9q.55.85 1 1.575.45.725 1 1.425Zm16-24.5ZM21.9 37Z'/%3E%3C/svg%3E"); } div.rfgroup > div.rfset.process > h2.rfhead { background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='white' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E"); } div.rfgroup > div.rfset.safe > h2.rfhead { /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath d='M24 23.95q-3.3 0-5.4-2.1-2.1-2.1-2.1-5.4 0-3.3 2.1-5.4 2.1-2.1 5.4-2.1 3.3 0 5.4 2.1 2.1 2.1 2.1 5.4 0 3.3-2.1 5.4-2.1 2.1-5.4 2.1ZM8 40v-4.7q0-1.9.95-3.25T11.4 30q3.35-1.5 6.425-2.25Q20.9 27 24 27q3.1 0 6.15.775 3.05.775 6.4 2.225 1.55.7 2.5 2.05.95 1.35.95 3.25V40Zm3-3h26v-1.7q0-.8-.475-1.525-.475-.725-1.175-1.075-3.2-1.55-5.85-2.125Q26.85 30 24 30t-5.55.575q-2.7.575-5.85 2.125-.7.35-1.15 1.075Q11 34.5 11 35.3Zm13-16.05q1.95 0 3.225-1.275Q28.5 18.4 28.5 16.45q0-1.95-1.275-3.225Q25.95 11.95 24 11.95q-1.95 0-3.225 1.275Q19.5 14.5 19.5 16.45q0 1.95 1.275 3.225Q22.05 20.95 24 20.95Zm0-4.5ZM24 37Z'/%3E%3C/svg%3E"); */ } div.rfgroup > div.rfset.open.safe > h2.rfhead { /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M24 23.95q-3.3 0-5.4-2.1-2.1-2.1-2.1-5.4 0-3.3 2.1-5.4 2.1-2.1 5.4-2.1 3.3 0 5.4 2.1 2.1 2.1 2.1 5.4 0 3.3-2.1 5.4-2.1 2.1-5.4 2.1ZM8 40v-4.7q0-1.9.95-3.25T11.4 30q3.35-1.5 6.425-2.25Q20.9 27 24 27q3.1 0 6.15.775 3.05.775 6.4 2.225 1.55.7 2.5 2.05.95 1.35.95 3.25V40Zm3-3h26v-1.7q0-.8-.475-1.525-.475-.725-1.175-1.075-3.2-1.55-5.85-2.125Q26.85 30 24 30t-5.55.575q-2.7.575-5.85 2.125-.7.35-1.15 1.075Q11 34.5 11 35.3Zm13-16.05q1.95 0 3.225-1.275Q28.5 18.4 28.5 16.45q0-1.95-1.275-3.225Q25.95 11.95 24 11.95q-1.95 0-3.225 1.275Q19.5 14.5 19.5 16.45q0 1.95 1.275 3.225Q22.05 20.95 24 20.95Zm0-4.5ZM24 37Z'/%3E%3C/svg%3E"); */ } div.rfgroup > div.rfset.warning > h2.rfhead, div.rfgroup > div.rfset.error > h2.rfhead { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M22.05 23q-3.15 0-5.35-2.2-2.2-2.2-2.2-5.3 0-3.15 2.2-5.325Q18.9 8 22 8q3.15 0 5.325 2.175Q29.5 12.35 29.5 15.45q0 3.15-2.175 5.35Q25.15 23 22.05 23ZM22 20q1.9 0 3.2-1.325 1.3-1.325 1.3-3.175 0-1.9-1.3-3.2-1.3-1.3-3.15-1.3-1.9 0-3.225 1.3-1.325 1.3-1.325 3.15 0 1.9 1.325 3.225Q20.15 20 22 20Zm22.9 27-7-7q-1.15.85-2.375 1.175Q34.3 41.5 33 41.5q-3.55 0-6.025-2.475Q24.5 36.55 24.5 33q0-3.55 2.475-6.025Q29.45 24.5 33 24.5q3.55 0 6.025 2.475Q41.5 29.45 41.5 33q0 1.3-.325 2.525Q40.85 36.75 40 37.9l7 7ZM33 38.5q2.35 0 3.925-1.575Q38.5 35.35 38.5 33q0-2.35-1.575-3.925Q35.35 27.5 33 27.5q-2.35 0-3.925 1.575Q27.5 30.65 27.5 33q0 2.35 1.575 3.925Q30.65 38.5 33 38.5ZM6 40v-4.7q0-1.85.875-3.15Q7.75 30.85 9.4 30q2.35-1.15 6.125-2.175t7.675-.775q-.4.65-.75 1.425T21.9 30q-3.9-.05-6.8.925-2.9.975-4.5 1.775-.7.4-1.15 1.075Q9 34.45 9 35.3V37h12.9q.55.85 1 1.575.45.725 1 1.425Zm16-24.5ZM21.9 37Z'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'%3E%3Cpath d='M400-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM80-160v-112q0-33 17-62t47-44q51-26 115-44t141-18h14q6 0 12 2-8 18-13.5 37.5T404-360h-4q-71 0-127.5 18T180-306q-9 5-14.5 14t-5.5 20v32h252q6 21 16 41.5t22 38.5H80Zm560 40-12-60q-12-5-22.5-10.5T584-204l-58 18-40-68 46-40q-2-14-2-26t2-26l-46-40 40-68 58 18q11-8 21.5-13.5T628-460l12-60h80l12 60q12 5 22.5 11t21.5 15l58-20 40 70-46 40q2 12 2 25t-2 25l46 40-40 68-58-18q-11 8-21.5 13.5T732-180l-12 60h-80Zm40-120q33 0 56.5-23.5T760-320q0-33-23.5-56.5T680-400q-33 0-56.5 23.5T600-320q0 33 23.5 56.5T680-240ZM400-560q33 0 56.5-23.5T480-640q0-33-23.5-56.5T400-720q-33 0-56.5 23.5T320-640q0 33 23.5 56.5T400-560Zm0-80Zm12 400Z'/%3E%3C/svg%3E"); } div.rfgroup > div.rfset.warning > h2.rfhead { background-color:orange; color:white; } div.rfgroup > div.rfset.error > h2.rfhead { background-color:red; color:white; } div.rfgroup > div.rfset.done > h2.rfhead { color:green; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='green' width='48'%3E%3Cpath d='M4 40v-4.7q0-1.7.85-3.125T7.4 30q3.6-1.6 6.6-2.3 3-.7 6-.7 1.45 0 3.075.175 1.625.175 3.325.625l-2.45 2.45q-1-.1-1.975-.175Q21 30 20 30q-2.9 0-5.275.525Q12.35 31.05 8.6 32.7q-.85.4-1.225 1.15Q7 34.6 7 35.3V37h15.95l3 3Zm27.25.8-7.05-7.05 2.1-2.1 4.95 4.95L41.9 25.95l2.1 2.1ZM20 23.9q-3.3 0-5.4-2.1-2.1-2.1-2.1-5.4 0-3.3 2.1-5.4 2.1-2.1 5.4-2.1 3.3 0 5.4 2.1 2.1 2.1 2.1 5.4 0 3.3-2.1 5.4-2.1 2.1-5.4 2.1ZM22.95 37ZM20 20.9q1.95 0 3.225-1.275Q24.5 18.35 24.5 16.4q0-1.95-1.275-3.225Q21.95 11.9 20 11.9q-1.95 0-3.225 1.275Q15.5 14.45 15.5 16.4q0 1.95 1.275 3.225Q18.05 20.9 20 20.9Zm0-4.5Z'/%3E%3C/svg%3E"); } div.rfgroup > div.rfset.open.done > h2.rfhead { background-color:green; color:white; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M4 40v-4.7q0-1.7.85-3.125T7.4 30q3.6-1.6 6.6-2.3 3-.7 6-.7 1.45 0 3.075.175 1.625.175 3.325.625l-2.45 2.45q-1-.1-1.975-.175Q21 30 20 30q-2.9 0-5.275.525Q12.35 31.05 8.6 32.7q-.85.4-1.225 1.15Q7 34.6 7 35.3V37h15.95l3 3Zm27.25.8-7.05-7.05 2.1-2.1 4.95 4.95L41.9 25.95l2.1 2.1ZM20 23.9q-3.3 0-5.4-2.1-2.1-2.1-2.1-5.4 0-3.3 2.1-5.4 2.1-2.1 5.4-2.1 3.3 0 5.4 2.1 2.1 2.1 2.1 5.4 0 3.3-2.1 5.4-2.1 2.1-5.4 2.1ZM22.95 37ZM20 20.9q1.95 0 3.225-1.275Q24.5 18.35 24.5 16.4q0-1.95-1.275-3.225Q21.95 11.9 20 11.9q-1.95 0-3.225 1.275Q15.5 14.45 15.5 16.4q0 1.95 1.275 3.225Q18.05 20.9 20 20.9Zm0-4.5Z'/%3E%3C/svg%3E"); } div.rfgroup > div.rfset.open > h2.rfhead { opacity:1; } div.rfgroup > div.rfset:not(.open) > h2.rfhead { opacity:0.1; } div.rfgroup > div.rfset:not(.open).done > h2.rfhead { opacity:0.5; } div.rfgroup > div.rfset:nth-child(2) > h2.rfhead { margin-left:150px; } div.rfgroup > div.rfset:nth-child(3) > h2.rfhead { margin-left:300px; } div.rfgroup > div.rfset:nth-child(4) > h2.rfhead { margin-left:450px; } div.rfgroup > div.rfset:nth-child(5) > h2.rfhead { margin-left:600px; } div.rfgroup > div.rfset:nth-child(6) > h2.rfhead { margin-left:750px; } div.rfgroup > div.rfset:nth-child(7) > h2.rfhead { margin-left:900px; } div.rfgroup > div.rfset > div.rfhandle { display:none; } div.rfgroup > div.rfset.open > div.rfhandle { display:inline-flex; flex-wrap: wrap; min-width:100%; position: relative; box-sizing: border-box; padding: 20px 2px 32px 2px; max-width:100%; border-top: 2px solid #ddd; background-color:white; } div.rfgroup > div.rfset > div.rfhandle > div.rfitem { display: inline-flex; min-width: 250px; width: 33.3%; max-width: 100%; box-sizing: border-box; flex-direction: column; padding: 3px 15px; position: relative; } div.rfgroup > div.rfset > div.rfhandle > div.rfitem.blind { opacity: 0.1; display:none; } div.rfgroup > div.rfset > div.rfhandle > div.rfitem > label { min-width: 100%; max-width: 100%; width: auto; box-sizing: border-box; padding: 0px 0px; margin: 0px 0px; } div.rfgroup > div.rfset > div.rfhandle > div.rfitem > label.inputBox > span { margin-top:20px; } div.rfgroup > div.rfset > div.rfhandle > div.rfitem > label.inputBox > button.opencontrol { display: block; position: absolute; width: 46px; box-sizing: border-box; margin-right: 0px; margin-top: 0px; margin-left: 0px; min-height: 46px; left: 1px; bottom: 1px; z-index: 15; border-bottom-left-radius: 3px; border-top-left-radius: 3px; outline: none; border: 0px; background-color: rgba(255,0,128,1.00); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M9 44q-1.2 0-2.1-.9Q6 42.2 6 41V10q0-1.2.9-2.1Q7.8 7 9 7h3.25V4h3.25v3h17V4h3.25v3H39q1.2 0 2.1.9.9.9.9 2.1v31q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h30V19.5H9V41Zm0-24.5h30V10H9Zm0 0V10v6.5ZM24 28q-.85 0-1.425-.575Q22 26.85 22 26q0-.85.575-1.425Q23.15 24 24 24q.85 0 1.425.575Q26 25.15 26 26q0 .85-.575 1.425Q24.85 28 24 28Zm-8 0q-.85 0-1.425-.575Q14 26.85 14 26q0-.85.575-1.425Q15.15 24 16 24q.85 0 1.425.575Q18 25.15 18 26q0 .85-.575 1.425Q16.85 28 16 28Zm16 0q-.85 0-1.425-.575Q30 26.85 30 26q0-.85.575-1.425Q31.15 24 32 24q.85 0 1.425.575Q34 25.15 34 26q0 .85-.575 1.425Q32.85 28 32 28Zm-8 8q-.85 0-1.425-.575Q22 34.85 22 34q0-.85.575-1.425Q23.15 32 24 32q.85 0 1.425.575Q26 33.15 26 34q0 .85-.575 1.425Q24.85 36 24 36Zm-8 0q-.85 0-1.425-.575Q14 34.85 14 34q0-.85.575-1.425Q15.15 32 16 32q.85 0 1.425.575Q18 33.15 18 34q0 .85-.575 1.425Q16.85 36 16 36Zm16 0q-.85 0-1.425-.575Q30 34.85 30 34q0-.85.575-1.425Q31.15 32 32 32q.85 0 1.425.575Q34 33.15 34 34q0 .85-.575 1.425Q32.85 36 32 36Z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 32px; cursor: pointer; } div.rfgroup > div.rfset > div.rfhandle > div.rfitem > input { } div.rfgroup > div.rfset > div.rfhandle > div.rfitem > select { } label.inputBox input.checkbox.simple { background-color: white !important; border:3px solid #222 !important; } div.rfgroup > button.button.sign.empty { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M28 42q-.6 0-1.05-.45-.45-.45-.45-1.05 0-.65.45-1.075Q27.4 39 28 39q2.95 0 4.975-1.2Q35 36.6 35 35q0-1.15-1.475-2.25t-3.975-1.7l2.35-2.35q3.15.95 4.625 2.625T38 35q0 3.35-3.05 5.175Q31.9 42 28 42ZM12 27.3q-3.2-.7-4.6-2.2Q6 23.6 6 22q0-1.75 1.3-3.15t6-3.1q3.3-1.2 4.25-1.95.95-.75.95-1.75 0-1.25-1.1-2.15Q16.3 9 14 9q-1.35 0-2.3.35-.95.35-1.7 1.1-.4.4-1.025.475Q8.35 11 7.85 10.6q-.55-.4-.575-1-.025-.6.375-1.05.85-1.1 2.55-1.825Q11.9 6 14 6q3.4 0 5.45 1.625Q21.5 9.25 21.5 12.05q0 2.05-1.425 3.475Q18.65 16.95 14.5 18.5q-3.35 1.25-4.425 1.975Q9 21.2 9 22q0 .8 1.35 1.525 1.35.725 4.05 1.375Zm24.8-7.7-6.4-6.4 2.25-2.25q.9-.9 2-.9t2 .9l2.4 2.4q.9.9.9 2t-.9 2ZM11 39h2.1l17.25-17.25-2.1-2.1L11 36.9Zm-3 3v-6.4l20.25-20.25 6.4 6.4L14.4 42Zm20.25-22.35 2.1 2.1Z'/%3E%3C/svg%3E"); position: fixed; bottom: 140px !important; margin: 0px 0px; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5); top: auto; right: 5vw; padding: 0px 0px 0px 0px; font-size: 2.25rem; line-height: 1; width: 42vw; justify-content: center; background-color: rgba(255,0,128,1); } div.rfgroup > button.button.sign.inview:after { content: 'Signature'; } div.rfgroup > button.button.sign.inview.empty:after { content: 'Weiter'; } div.rfgroup > button.button.sign.next_btn.btnstyle.inview:not(.empty) { right: 7.35%; background-color: white !important; margin: 0px 0px; border: 4px solid green; opacity: 0.6; border-radius: 12px 12px 0px 0px; border-bottom-width: 0px; top: 50px; color: green; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='green' width='48'%3E%3Cpath d='M24 44q-4.25 0-7.9-1.525-3.65-1.525-6.35-4.225-2.7-2.7-4.225-6.35Q4 28.25 4 24q0-4.2 1.525-7.85Q7.05 12.5 9.75 9.8q2.7-2.7 6.35-4.25Q19.75 4 24 4q3.75 0 7 1.2t5.85 3.3l-2.15 2.15q-2.2-1.75-4.9-2.7Q27.1 7 24 7q-7.25 0-12.125 4.875T7 24q0 7.25 4.875 12.125T24 41q7.25 0 12.125-4.875T41 24q0-1.5-.225-2.925-.225-1.425-.675-2.775l2.3-2.3q.8 1.85 1.2 3.85.4 2 .4 4.15 0 4.25-1.55 7.9-1.55 3.65-4.25 6.35-2.7 2.7-6.35 4.225Q28.2 44 24 44Zm-2.95-10.9-8.25-8.3 2.25-2.25 6 6 20.7-20.7 2.3 2.25Z'/%3E%3C/svg%3E"); } div.rfgroup > button.button.sign.next_btn.btnstyle.uplift { bottom: 532px !important; right: 0px; margin: 0px 0px; } .signature-pad--body { background-color: white; } button#totalConfirm.next_btn.uplift { min-width: 41% !important; } p.infotext { margin-bottom: 12px; display: inline-block; position: relative; box-sizing: border-box; } strong.textbyAdmin { background: darkcyan; padding: 12px 28px 12px 23px; display: inline-flex; box-sizing: border-box; margin-top: 10px; position: relative; width: 100%; font-size: 90%; max-height: 104px; font-weight: 200; text-align: left; border-radius: 9px; overflow-y: auto; color: white; line-height: 1.5; margin-left: 0px; float: right; align-items: center; } div.preformated { /* Place Customer Preformated Text in this class div */ width: 100%; font-size: 0.675em; color: #333; display: block; box-sizing: border-box; padding: 48px; margin: 0px 0px; background-color: #fff; border-left: #fff solid 2px; font-family: Calibri, Verdana, Helvetica, sans-serif; height: auto; outline: none; } div.preformated > p { box-sizing: border-box; padding: 0px 0px; margin: 0px 0px; } div.preformated.conform { overflow-wrap: break-word; word-break: break-word; max-height: calc(75vh - 150px); min-height: calc(75vh - 150px); overflow-y: auto !important; min-width: 100%; padding: 28px 42px; box-shadow: inset 0px 0px 96px rgba(0,0,0,0.2); } div.confirmBox:not(.closed) { z-index: 805 !important; content: ''; position: fixed; top: 0px; left: 0px; margin: 0px 0px 0px 0px; padding: 220px 64px 70px 64px; width: 100vw; height: 100vh; max-height: 100vh; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; background-color: rgba(255,255,255,1) !important; border-radius: 0px; border: 4px solid white; } body.accessible div.confirmBox:not(.closed) { justify-content: flex-end; } div.confirmBox:not(.closed) { background-repeat: no-repeat; background-size: 128px; background-position: 58px 54px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgb(240,240,240)' %3E%3Cpath d='M480-479Zm0 345q-115-36-191.5-142T212-516v-208l268-100 268 100v217.18q0 4.18-.34 8.82H720v-207l-240-89-240 89v189q0 121 68 220t172 132v30Zm200 2v-120H560v-28h120v-120h28v120h120v28H708v120h-28ZM445-386h70l-22-122q17-5 28.5-19.64T533-560q0-21.86-15.6-37.43Q501.81-613 479.9-613q-21.9 0-37.4 15.57T427-560q0 17.72 11.5 32.36T467-508l-22 122Z'/%3E%3C/svg%3E"); } div.confirmBox.unconfirmed:not(.closed) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgb(220,220,220)'%3E%3Cpath d='M480-479Zm0 345q-115-36-191.5-142T212-516v-208l268-100 268 100v217.18q0 4.18-.34 8.82H720v-207l-240-89-240 89v189q0 121 68 220t172 132v30Zm200 2v-120H560v-28h120v-120h28v120h120v28H708v120h-28ZM445-386h70l-22-122q17-5 28.5-19.64T533-560q0-21.86-15.6-37.43Q501.81-613 479.9-613q-21.9 0-37.4 15.57T427-560q0 17.72 11.5 32.36T467-508l-22 122Z'/%3E%3C/svg%3E"); } div.confirmBox:not(.closed) > button.confClose { z-index: 50000 !important; } header { z-index: 806; } label.productBox.expand input:checked ~ .checkmark.additem::after { border-radius: 12px; } div.upsellItem > div.upsellItemDescriptionBox { min-height: 192px; } div.confirmBox { display: flex; position: fixed; z-index: 50000; background: darkgray; box-sizing: border-box; padding: 10vh 7vw 2vh 7vw; width: 75vw; min-height: 60vh; max-height: 80vh; margin-top: 8vh; left: 12.5%; flex-direction: column; align-items: stretch; justify-content: flex-start; border-radius: 8px; background-color: white; box-shadow: 0px 0px 0px 50vw rgba(0,0,0,0.7); background-repeat: no-repeat; background-size: 9vh; background-position: center 1vh; } div.confirmBox.unconfirmed { background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24\' fill=\'red\' viewBox=\'0 -960 960 960\' width=\'24\'%3E%3Cpath d=\'M480-100.771q-129.769-35.384-214.884-152.768Q180.001-370.924 180.001-516v-230.153L480-858.46l299.999 112.307V-516q0 76.153-24.962 147.73-24.961 71.576-73.961 131.191L555.384-362.771q-16.461 11.385-35.807 17.077-19.346 5.693-39.577 5.693-57.749 0-98.874-41.125-41.125-41.125-41.125-98.874 0-57.749 41.125-98.874 41.125-41.125 98.874-41.125 57.749 0 98.874 41.125 41.125 41.125 41.125 98.874 0 20.254-5.5 39.127t-15.731 35.949l74.616 74.617q21.539-42.154 34.077-88.5Q720-465.154 720-516v-189l-240-89.615L240-705v189q0 121 68 220t172 132q26-8 49.5-20.5T576-214l40.614 42.922q-31.461 24.308-64.768 41.807-33.308 17.5-71.846 28.5ZM480-400q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400Zm4.923-77.769Z\'/%3E%3C/svg%3E"); } div.confirmBox.closed.unconfirmed { border-color:indianred; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='indianred'%3E%3Cpath d='M531.77-531.46q3.46-6.46 5.46-13.66 2-7.19 2-14.88 0-24.54-17.35-41.88-17.34-17.35-41.88-17.35-7.69 0-14.88 2-7.2 2-13.66 5.46l80.31 80.31Zm189.92 190.38-30.77-31.23q13.54-32 21.31-69.96Q720-480.23 720-516v-189l-240-89.23-153.69 57.31-31.23-31.23L480-836.92l280 104.61V-516q0 41-8.81 84.08-8.81 43.07-29.5 90.84ZM792-111.38 660.46-242.92q-35.69 42.84-82.58 74.73Q531-136.31 480-121.54q-125.92-37.31-202.96-149.11Q200-382.46 200-516v-187.38l-85.54-85.54 28.31-28.31 677.54 677.54L792-111.38Zm-339.69-339.7Zm27.77-132.3ZM480-164q42.69-13.31 85.08-44.46 42.38-31.16 67.07-62.77L505.69-397.69l3.08 17.69h-69.54l13.08-71.08L240-663.38V-516q0 121 68 220t172 132Z'/%3E%3C/svg%3E"); } div.confirmBox.closed:not(.unconfirmed) { box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25); border-radius: 50%; width: 68px; height: 68px; max-height: 68px; min-height: 68px; padding: 0px 0px; opacity:0.3; top: 78px; left: 54px; margin: 0px; right: auto; background-size: 54px; background-position: 2px 2px; background-color: white; border-color: seagreen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='seagreen'%3E%3Cpath d='M480-479Zm0 345q-115-36-191.5-142T212-516v-208l268-100 268 100v217.18q0 4.18-.34 8.82H720v-207l-240-89-240 89v189q0 121 68 220t172 132v30Zm200 2v-120H560v-28h120v-120h28v120h120v28H708v120h-28ZM445-386h70l-22-122q17-5 28.5-19.64T533-560q0-21.86-15.6-37.43Q501.81-613 479.9-613q-21.9 0-37.4 15.57T427-560q0 17.72 11.5 32.36T467-508l-22 122Z'/%3E%3C/svg%3E"); border-width: 4px; border-style: solid; } div.confirmBox > button.confClose { display: inline-flex; box-sizing: border-box; padding: 28px 90px; line-height: 1; font-size: 3rem; font-weight: 200; justify-content: center; align-content: center; align-items: center; margin: 25px 4px 20px auto; width: auto; max-width: 100%; border: 0px; border-radius: 8px; background-color: seagreen; color: white; box-shadow: 0px 0px 7px 0px black; } div.confirmBox.unconfirmed:not(.closed) > button.confClose { background: #ddd; box-shadow: 0px 0px 2px 0px; pointer-events: none !important; } div.confirmBox.unconfirmed > button.confClose:focus, div.confirmBox.unconfirmed > button.confClose:hover, div.confirmBox.unconfirmed > button.confClose:active { background: red; } div.confirmBox.closed:not(.unconfirmed) > button.confClose { margin: 0px 0px; background-color: transparent; box-shadow: none; width: 100%; height: 100%; background: transparent; border-radius: 50%; color: transparent; font-size: 0px; } div.confirmBox > label.inputBox.checkboxed { width: 100%; align-items: flex-start; justify-content: flex-start; justify-items: flex-start; border-bottom: 24px solid rgba(0,0,0,0); border-radius: 0px; margin: 8px 0px 8px 0px; } div.confirmBox.closed:not(.unconfirmed) > label.inputBox.checkboxed { display:none; } div.confirmBox > label.inputBox.checkboxed input.checkbox, div.confirmBox > label.inputBox.checkboxed input.checkbox.focus { background-color: white !important; box-shadow: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48'%3E%3Cpath d='M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Z'/%3E%3C/svg%3E") !important; color: rgba(0,0,0,0) !important; max-width: 74px !important; min-width: 74px !important; width: 74px !important; max-height: 74px !important; min-height: 74px !important; height: 74px !important; padding: 0px 0px 0px 0px !important; float: right !important; background-size: 100px !important; background-position: center !important; background-repeat: no-repeat !important; box-sizing: border-box !important; opacity:0.7; } div.confirmBox > label.inputBox.checkboxed input.checkbox.active, div.confirmBox > label.inputBox.checkboxed input.checkbox.active.focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='seagreen' viewBox='0 -960 960 960' width='48'%3E%3Cpath d='m419-321 289-289-43-43-246 246-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm0-600v600-600Z'/%3E%3C/svg%3E") !important; opacity:1; } div.confirmBox > p:first-child { display: inline-block; box-sizing: border-box; padding: 24px; text-align: center; font-size: 1.25rem; line-height: 1.5; width: 100%; border-bottom: solid 2px; } div.confirmBox > label.inputBox.checkboxed > span { font-size: 1.33em; padding-right: 6px; padding-left: 100px; padding-top: 8px; padding-bottom: 8px; justify-content: flex-start; font-weight: 300; flex-direction: row; align-content: flex-start; align-items: flex-start; line-height: 1.45; min-height: 90px; border-radius: 0px !important; } div.confirmBox > label.inputBox.checkboxed > span > b:first-child { display: inline-block; box-sizing: border-box; padding: 2px 12px 4px 0px; font-family: monospace; font-size: 22px; } div.confirmBox > label.inputBox.checkboxed > span > div.preformated { padding: 0px; font-size: 0.925em; line-height: 1.35; } div.confirmBox > label.inputBox.checkboxed > span > div.preformated span { padding: 0px 0px; line-height: 1.35; } div.confirmBox > label.inputBox.checkboxed > input.checkbox { } div.confirmBox > label.inputBox.checkboxed > input.checkbox.active { } div.confirmBox.closed:not(.unconfirmed) > label.inputBox.checkboxed > span, div.confirmBox.closed:not(.unconfirmed) > p:first-child, div.confirmBox.closed:not(.unconfirmed) > p, div.confirmBox.closed:not(.unconfirmed) > label.inputBox.checkboxed > span > b:first-child, div.confirmBox.closed:not(.unconfirmed) > label.inputBox.checkboxed > span > div.preformated, div.confirmBox.closed:not(.unconfirmed) > label.inputBox.checkboxed > span > div.preformated span { display:none; } /* Upsell Page Style */ p.infotext.upsell { display: inline-flex; flex-direction: column; box-sizing: border-box; font-size: 1.1rem; font-weight: 300; line-height: 1.5; padding-top: 13px; color: #555; } p.infotext.upsell > small { display: inline-flex; flex-direction: column; box-sizing: border-box; color: darkseagreen; font-style: normal; font-weight: 300; padding-bottom: 12px; padding-top: 0px; text-decoration: none; line-height: 1.5; font-size: 1.25rem; margin: 0px; } p.infotext.upsell > i { display: inline-flex; flex-direction: column; box-sizing: border-box; font-size: 1rem; color: darkseagreen; font-style: normal; font-weight: 400; padding-left: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='darkseagreen' width='48'%3E%3Cpath d='M14.35 43.95q-1.5 0-2.55-1.05-1.05-1.05-1.05-2.55 0-1.5 1.05-2.55 1.05-1.05 2.55-1.05 1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55-1.05 1.05-2.55 1.05Zm20 0q-1.5 0-2.55-1.05-1.05-1.05-1.05-2.55 0-1.5 1.05-2.55 1.05-1.05 2.55-1.05 1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55-1.05 1.05-2.55 1.05Zm-22.6-33 5.5 11.4h14.4l6.25-11.4Zm-1.5-3H39.7q1.15 0 1.75 1.05.6 1.05 0 2.1L34.7 23.25q-.55.95-1.425 1.525t-1.925.575H16.2l-2.8 5.2h24.55v3h-24.1q-2.1 0-3.025-1.4-.925-1.4.025-3.15l3.2-5.9L6.45 7h-3.9V4H8.4Zm7 14.4h14.4Z'/%3E%3C/svg%3E"); background-size: 20px; background-repeat: no-repeat; background-position: 4px center; } p.infotext.upsell > b { display: inline-flex; flex-direction: column; box-sizing: border-box; font-weight: 300; padding-top: 12px; border-top: 1px solid lightgray; margin-top: 22px; margin-left: -5%; padding-left: 3px; padding-top: 32px; color: crimson; font-size: 1.3rem; padding-bottom: 4px; } div.upsellItem { display: inline-flex; min-width: 90%; max-width: 90%; position: relative; box-sizing: border-box; flex-direction: row; background-color: white; border-radius: 5px; margin: 0px 0px 16px 5%; max-height: 240px; min-height: 220px; padding: 24px 12px 24px 20px; overflow: hidden; align-content: stretch; justify-content: space-between; box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.05); } div.upsellItem > div { display: inline-flex; flex-direction: row; box-sizing: border-box; position: relative; overflow: hidden; align-items: flex-start; } div.upsellItem > div.upsellItemDescriptionBox { max-width: calc(100% - 276px); min-width: calc(100% - 276px); } div.upsellItem > div.upsellItemSelectors { max-width: 260px; min-width: 260px; } div.upsellItem > div.upsellItemSelectors { flex-direction: column; align-items: center; justify-content: flex-start; margin-top: -4px; box-sizing: border-box; padding: 8px; /* border-left: 1px solid gainsboro; */ border-radius: 0px; } div.upsellItem > div.upsellItemDescriptionBox > span { display: inline-flex; box-sizing: border-box; margin: 0px; } div.upsellItem > div.upsellItemDescriptionBox > span.upsellText { padding-left: 24px; padding-right: 12px; flex-direction: column; font-size: 1.1rem; line-height: 1.3; box-sizing: border-box; margin: 0px 0px; min-width: 62%; max-width: 67% !important; position: relative; } div.upsellItem > div.upsellItemDescriptionBox > span.upsellLabel { min-height: 140px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 96 960 960' fill='rgb(240,240,240)' width='48'%3E%3Cpath d='M196 936q-16 0-28.5-9.5T151 902L38 495q-4-15 5.5-27T69 456h200l185-270q5-6 11-9.5t14-3.5q8 0 14 3.5t11 9.5l184 270h205q15 0 24.5 12t5.5 27L809 902q-4 15-16.5 24.5T764 936H196Zm10-60h548l101-360H106l100 360Zm274-120q25 0 42.5-17.5T540 696q0-25-17.5-42.5T480 636q-25 0-42.5 17.5T420 696q0 25 17.5 42.5T480 756ZM342 456h273L479 256 342 456ZM206 876h548-548Z'/%3E%3C/svg%3E"); background-size: 68px; background-repeat: no-repeat; background-position: 78px 45px; min-width: 33%; max-width: 33%; overflow: hidden; position: relative; display: inline-flex; align-items: center; flex-grow: 1; flex-shrink: 1; background-color: darkgrey; border-radius: 5px; } div.upsellItem > div.upsellItemDescriptionBox > span.upsellLabel > img { display: inline-flex; position: relative; max-height: -webkit-fill-available; max-width: 100%; } div.upsellItem > div.upsellItemDescriptionBox > span.upsellLabel > b { display: inline-flex; position: absolute; box-sizing: border-box; padding: 5px 12px; flex-direction: column; justify-content: center; transform: rotate(-45deg); background-color: darkorange; color: white; text-align: center; max-width: 175px; min-width: 175px; line-height: 1; font-size: 1.5rem; left: -45px; top: 15px; box-shadow: 0px 1px 4px 0px black; } div.upsellItem > div.upsellItemDescriptionBox > span.upsellLabel > b > i { display: inline-flex; position: relative; font-size: 0.5rem; font-weight: 400; min-width: 100%; box-sizing: border-box; padding: 6px 0px 0px 0px; justify-content: center; text-align: center; } div.upsellItem > div.upsellItemDescriptionBox > span.upsellText > b { font-size: 1.58rem; color: #555; display: inline-flex; min-width: 100%; box-sizing: border-box; padding: 0px 0px; margin: 0px 0px; line-height: 1.2; letter-spacing: -0.5px; font-weight: 400; max-width: 100%; word-break: break-word; min-height: 38px; /* 38 */ max-height: 71px; /* 38 */ overflow: hidden; } div.upsellItem > div.upsellItemDescriptionBox > span.upsellText > p { display: inline-flex; position: relative; box-sizing: border-box; padding: 12px 2px 12px 6px; font-size: 1.1rem; color: #888; word-break: break-word; letter-spacing: 0px; margin: 0px 0px; flex-direction: column; min-height: 120px; max-height: 158px; overflow-y: auto; border-top: 2px dotted gainsboro; white-space: break-spaces; max-width: 100%; } div.upsellItem > div.upsellItemDescriptionBox > span.upsellText > p > small { display: inline-flex; position: relative; box-sizing: border-box; padding: 5px 0px 5px 5px; font-size: 1rem; color: seagreen; word-break: break-word; letter-spacing: 0px; margin: 0px 0px; border: 1px solid green; border-radius: 7px; min-width: 20%; max-width: 35%; text-align: center; justify-content: center; margin-top: 11px; } div.upsellItem > div.upsellItemSelectors > span { display: inline-flex; position: relative; min-width: 100%; align-content: center; justify-content: flex-end; min-height: 50px; box-sizing: border-box; margin: 0px 0px; align-items: flex-start; } div.upsellItem > div.upsellItemSelectors > span.logic { box-sizing: border-box; padding: 4px 8px 0px 8px; margin: 0px 0px 10px 0px; font-weight: 200; color: gainsboro; letter-spacing: -0.5px; font-size: 20px; align-content: flex-start; min-height: 48px; max-height: 48px; display: inline-flex; flex-direction: row; justify-content: space-evenly; overflow: hidden; text-align: left; line-break: anywhere; align-items: baseline; line-height: 1.5; } div.upsellItem > div.upsellItemSelectors > span.logic.active { color: seagreen; font-weight: 400; font-size: 1.5rem; border: 2px solid; border-radius: 6px; max-width: 236px; /* word-wrap: break-word; */ } div.upsellItem > div.upsellItemSelectors > span.thisSelector { } div.upsellItem > div.upsellItemSelectors > span.thisSelector > input, div.upsellItem > div.upsellItemSelectors > span.thisSelector > button { display: inline-flex; box-sizing: border-box; margin: 0px 8px; line-height: 1; padding: 8px 8px; font-size: 2rem; border-radius: 7px; border: 0px; justify-items: center; align-content: center; background-color: seagreen; text-align: center; min-height: 62px; min-width: 62px; opacity: 0.9; } div.upsellItem > div.upsellItemSelectors > span.thisSelector:not(.selected) > button.down { background-color: gainsboro; } div.upsellItem > div.upsellItemSelectors > span.thisSelector.selected > button { background-color: seagreen; } div.upsellItem > div.upsellItemSelectors > span.thisSelector.selected > button:active { background-color: darkslategray; opacity: 1; } div.upsellItem > div.upsellItemSelectors > span.thisSelector > input { border: 3px solid rgba(255,0,128,1); border-color: white; background-color: white; font-weight: 800; font-size: 2rem; min-width: 85px; width: auto; padding: 0px 0px !important; max-width: 85px; pointer-events: none !important; display: none; } div.upsellItem > div.upsellItemSelectors > span.thisSelector > button { text-align: center; justify-content: center; align-items: center; font-family: monospace; padding: 0px 0px; color: white; cursor: pointer; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); z-index: 2; min-height: 72px; max-height: 72px; width: 47%; margin: 0px 1.5%; background-size: 72px; background-position: center; background-repeat: no-repeat; } div.upsellItem > div.upsellItemSelectors > span.thisSelector > button.up { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'%3E%3Cpath d='M460-460H240v-40h220v-220h40v220h220v40H500v220h-40v-220Z'/%3E%3C/svg%3E"); } div.upsellItem > div.upsellItemSelectors > span.thisSelector > button.down { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'%3E%3Cpath d='M240-460v-40h480v40H240Z'/%3E%3C/svg%3E"); } div.upsellItem > div.upsellItemSelectors > span.summe { padding: 9px 14px 0px; color: #ddd; font-size: 1.2rem; } div.upsellItem > div.upsellItemSelectors > span.summe > b { display: inline-flex; box-sizing: border-box; margin-right: 5px; color: #bbb; } div.upsellItem > div.upsellItemSelectors > span.summe > b.active { color: black; font-size: 1.75rem; font-weight: 400; padding: 0px 7px 1px 7px; box-sizing: border-box; background: white; } /* black Background ! */ main > form > div#billingRequest.actionpopup { display: flex; position: fixed; top: 0px; left: 0px; background: rgba(0,0,0,0.75); min-height: 100vh; max-height: 100vh; height: 100vh; margin: 0 0; box-sizing: border-box; min-width: 100%; max-width: 100%; width: 100%; padding: 24px; justify-content: center; justify-content: space-evenly; justify-items: center; z-index: 9999; padding-top: 70px; padding-bottom: 48px !important; align-items: flex-start; } main > form > div#billingRequest.actionpopup > span { display: inline-flex; max-width: 100%; min-width: 80vw; box-sizing: border-box; min-height: 480px; max-height: 80vh; padding: 64px 110px; background: white; border-radius: 9px; box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.8); flex-direction: column; justify-content: flex-start; align-content: stretch; } main > form > div#billingRequest.actionpopup > span > h2 { display: inline-flex; min-width: 100%; max-width: 100%; font-size: 2rem; margin: 0px 0px; padding: 0px 0px 12px 0px; box-sizing: border-box; } main > form > div#billingRequest.actionpopup > span > label.inputBox { display: inline-block; float: left; position: relative; width: 100%; box-sizing: border-box; padding: 0px; margin-top: 4px; } main > form > div#billingRequest.actionpopup > span > label.inputBox > input { display: inline-flex; box-sizing: border-box; max-width: 100%; margin: 12px 0px 12px 0px; padding: 12px 12px 12px 140px; line-height: 1; font-size: 2rem !important; border: 3px solid gray; border-radius: 3px; background-color: white; background-repeat: no-repeat; background-size: 120px; background-position: 12px center; min-height: 78px; align-content: baseline; } main > form > div#billingRequest.actionpopup > span > label.inputBox > input#useThisMail { padding-left: 78px !important; background-size: 48px !important; } main > form > div#billingRequest.actionpopup > span > label.inputBox > button.inputDeletor { display: inline-flex; position: absolute; z-index: 12; width: 32px; height: 48px; background-color: transparent; border: 0px; border-radius: 0px 5px 5px 0px; box-sizing: border-box; padding: 0px; margin: 0px; opacity: 0.8; background-size: 24px; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='indianred' height='48' viewBox='0 -960 960 960' width='48'%3E%3Cpath d='M261-120q-24.75 0-42.375-17.625T201-180v-570h-41v-60h188v-30h264v30h188v60h-41v570q0 24-18 42t-42 18H261Zm438-630H261v570h438v-570ZM367-266h60v-399h-60v399Zm166 0h60v-399h-60v399ZM261-750v570-570Z'/%3E%3C/svg%3E"); transform: scale(1.5); bottom: 27px; right: 16px; } main > form > div#billingRequest.actionpopup > span > p { display: inline-flex; box-sizing: border-box; font-size: 1.75rem; padding: 4px 0px 0px 5px; flex-direction: column; justify-content: flex-start; font-weight: 200 !important; align-content: flex-start; } main > form > div#billingRequest.actionpopup > span > p > b { font-size: 2.25rem; font-weight: 200; } div.whiteBox.flexed { display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; margin: 18vh auto 58px 12vw; background: rgba(246,245,244,0.95); } div.whiteBox.flexed > h2 { display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; text-align: center; justify-items:center; width:100%; } div.whiteBox.flexed > p { text-align: center; } div.whiteBox.flexed > h2 > b { font-weight: 400 !important } div.whiteBox.flexed > label.inputBox { margin-top: 16px; margin-bottom: 16px; } form.onpage2 div.whiteBox input::placeholder { color: #bbb; font-weight: 300; } form.onpage2 div.whiteBox p#thisSpecialText { text-align: center; display: inline-flex; position: relative; margin: 20px 0% -40px 0% !important; padding: 20px 24px 28px 24px; box-sizing: border-box; min-width: 100%; max-width: 100%; flex-direction: column; font-size: 1.5rem; align-items: center; background-color: transparent; color: black; margin-top: -18px; order: 10; border-radius: 0px; border-top: 2px solid; } form.onpage2 div.whiteBox b#loadAlternButton { color: red !important; box-sizing: border-box; display: inline-flex; float: none; margin-top: 32px !important; margin-bottom: 52px !important; justify-content: center; font-size: 1.5rem; border: 0px solid; max-width: 100%; min-width: 100%; justify-self: center; padding: 17px 21px 17px 21px; border-radius: 10px; background: white !important; font-weight: 400 !important; box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.2) !important; } form.onpage2 div.whiteBox label.allCheckinNumbers { width: 100% !important; margin-top: 0px !important; padding-top: 0px !important; margin-bottom: -40px; } form.onpage2 div.whiteBox label.allCheckinNumbers.inputBox.large > button.inputDeletor { bottom: 23px; right: 11px; background-size: 40px; height: 68px; width: 48px; background-color: gainsboro; } form.onpage2 div.whiteBox label input.resnumber { border: 6px solid #555; font-size: 2.15rem; text-align: center; letter-spacing: 1px; margin: 5px 0px 12px 0px; color: black; font-weight: bold; background-color: ghostwhite; font-family: monospace; padding-right: 50px; padding-left: 2px; min-height: 80px; } form.onpage2 div.whiteBox label span.beforeresnumber { color:darkcyan; font-size:1.67rem; text-align: center } form.onpage2 div.whiteBox label span.beforeresnumber > small { color:#777; font-size:1.4rem; letter-spacing: 2px; } form.onpage2 div.whiteBox p.resnrhint { color: rgba(72,72,72,1.00); font-size: 1.1rem; font-weight: 400 !important; margin-top: -20px; line-height: 1.4; margin-bottom: 16px; text-align: center; width: 100%; display: inline-block; position: relative; box-sizing: border-box; padding: 0px 12px; } form.onpage2 div.whiteBox div.fullline { padding:1px 1px; box-sizing: border-box; min-width: 100%; margin: 4px 0px; display: inline-block; } div#virtualKeyboard.visible.checkinnummer { position: absolute; bottom: auto; top: 43.5vh; width: 90vw; max-width: 90vw; min-height: 3vh; left: 5vw; background-color: gray !important; box-shadow: 0px 0px 16px 0px black; border-radius: 12px; } div#virtualKeyboard.visible.checkinnummer.onstay { min-height: 18.5vh; padding-top: 32px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard { position: relative; padding: 0px 0% 1px 0%; width: 100%; margin: 0; display: inline-block; float: left; clear: both; box-sizing: border-box; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardHeader { right: 17px; top: -67px; float: right; margin: -9px -1px 0px 0px; position: absolute; border-radius: 32px; background-size:64px; background-color: rgba(255,0,128,1.00); box-shadow: 0px 0px 24px 0px black; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardHeader { top: 175px; display: inline-flex; position: absolute; right: auto; width: 240px; height: 90px; border-radius: 12px; left: 50%; margin-left: -120px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8); background-color: rgba(255,0,128,1); background-image: none !important; content: 'OK'; color: white; font-size: 3rem !important; text-align: center; line-height: 1; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardHeader:after { display: inline-block; position: absolute; left: 0px; right: 0px; box-sizing: border-box; width: 100%; height: 90px; background-color: transparent; content: 'OK'; color: white; font-size: 3rem !important; text-align: center; line-height: 1; padding: 18px 0px 10px 0px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardSmallLetter { display: none !important; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter { display: inline-flex !important; min-width: 100%; max-width: 100%; box-sizing: border-box; padding: 26px 16px 6px 16px; justify-content: space-between; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardSmallLetter div.button, div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button { display:none; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button.button_small.num, div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button.button_del.button_functional, div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button.button_small.upper, div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button.button_space.button_functional { display: inline-block; min-width: 7%; font-size: 2.5em !important; box-shadow: 0px 0px 12px 0px black; min-height:70px; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button.button_small.num, div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button.button_del.button_functional, div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button.button_small.upper, div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button.button_space.button_functional { min-width: 6.25%; font-size: 2.25em !important; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button.button_space.button_functional { width: 100% !important; margin: 10px 0px; display:none !important; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button.button_space.button_functional { display:none !important; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button.button_small.upper { font-weight: 400 !important; color: rgba(47,47,47,1.00); width: 8% !important; margin: 1% 0.5%; display: none !important; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(1) { } /* ! */ div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(2) { } /* / */ div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(3) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(4) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(5) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(6) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(7) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(8) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(9) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(10) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(11) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(12) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(13) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(14) { margin-bottom:24px; background-size: 140px !important; } /* Del */ div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(15) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(16) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(17) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(18) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(19) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(20) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(21) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(22) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(23) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(24) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(25) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(26) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(27) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(28) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(29) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(30) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(31) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(32) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(33) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(34) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(35) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(36) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(37) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(38) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(39) { margin-bottom:24px !important; margin-left: 12% !important; } /* Y */ div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(40) { margin-bottom:24px !important; } /* X */ div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(41) { margin-bottom:24px !important; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(42) { margin-bottom:24px !important; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(43) { margin-bottom:24px !important; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(44) { margin-bottom:24px !important; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(45) { margin-bottom:24px !important; margin-right:12% !important; } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(46) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(47) { } div#virtualKeyboard.visible.checkinnummer > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(48) { } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(3) { margin-bottom:24px; margin-left: 80px !important; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(4) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(5) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(6) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(7) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(8) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(9) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(10) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(11) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(12) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(13) { margin-bottom:24px; } div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(14) { margin-bottom:24px; background-size: 140px !important; } /* Del */ div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(41) { margin-bottom:24px !important; position:absolute; top:32px; left:32px; max-width:40px; } /* X */ div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(15), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(16), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(17), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(18), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(19), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(20), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(21), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(22), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(23), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(24), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(25), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(26), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(27), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(28), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(29), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(30), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(31), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(32), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(33), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(34), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(35), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(36), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(37), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(38), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(39), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(40), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(42), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(43), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(44), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(45), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(46), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(47), div#virtualKeyboard.visible.checkinnummer.onstay > div#keyboard > div#keyboardCapitalLetter div.button:nth-child(48) { display:none !important } /* dropdownCard kc action1 */ /* dropdownCard kc action2 */ /* dropdownCard kc action3 */