@charset "utf-8";
body{background-image: url("images/sp_home-1.jpg"); background-repeat: no-repeat; background-size: cover; height:100vh; width:100vw; padding: 30px; margin: 0; box-sizing: border-box; font-family: roc-grotesk, sans-serif; font-weight: 600; font-style: normal; color:#FFF; font-size:18px; line-height: 1.2;}
body:before, body:after{content:""; position:absolute; background-repeat: no-repeat; background-size: contain; z-index: -1;}
body:before{background-image: url("images/top-right.svg"); top:0; right:0; width: 30%;  height: 50%; background-position: top right}
body:after{background-image: url("images/bot-left.svg"); bottom:0; left:0; width: 25%;  height: 50%; background-position: bottom left}
header{text-align:right}

footer{position: absolute;  bottom: 30px;  display: grid;  grid-template-columns: 1fr 1fr 1fr;  width: calc(100% - 60px);  grid-gap: 30px;}
#clock #date-time{margin:0}
#clock span{font-size:48px; display:block}
#logo{display: flex; align-items: center; justify-content: center}
#privacy{display: flex;  align-items: end;  justify-content: end;}
.content{height: calc(100vh - 200px); display: flex; flex-direction: column; text-align: center; align-items: center;  justify-content: center;}

h1,h2,h3{text-transform: uppercase; margin: 0; line-height: 1}
h1{font-size:80px}
h2{font-size:32px}
.button, input[type="submit"]{border:none; background-color:#FF7A71; color:#fff; text-transform: uppercase; padding: 12px 60px; border-radius: 30px; font-family: roc-grotesk, sans-serif; font-weight:600; font-size: 18px; cursor: pointer; transition: 0.3s all ease-out; text-decoration: none; display: inline-block;}
/* .button:hover, input[type="submit"]:hover{transform: scale(1.1)} */
.scanner .camera{background-color:#000; width: 300px; margin: 0px auto;  border-radius: 15px; padding: 0; box-sizing: border-box; position: relative;}
.scanner .camera-inner{ background-color: transparent; position: absolute; top: 15px; left: 15px; bottom: 15px; right: 15px;}
.scanner .camera-inner:before{content:""; position:absolute; background-image: url("images/camera-corners.png"); background-size: contain; width: 100%;  height: 100%;  left: 0;  opacity: 1;  z-index: 2; background-repeat: no-repeat;}
#camera, #qr-shaded-region, video{border-radius: 15px;}
video{transform: scaleX(-1);}
#cameras > div{margin-bottom:20px;}

/* .courts table{border-spacing: 10px 0; margin-top:60px}
.courts td{background-color: #FFF;  border-radius: 30px; padding: 15px; color: #707070; font-size: 50px; line-height: 0}
.courts .button{font-size: 14px;  display: flex;  padding: 22px 10px;  align-items: center;  justify-content: center;}
.courts td[rowspan="2"] .button{height:74px; border-radius: 15px}
.courts th[scope=col]:not(.blank) {color:#FF7A71; text-transform: uppercase; text-align: left; background-color: #FFF; border-radius:30px 30px 0 0; padding: 20px 15px 10px 15px;}
.courts tr:nth-child(2) td{border-radius:0 0 30px 30px}
.courts th[scope=row] {text-align: left; width: 140px;} */

.manual-checkin .content{align-items: initial;justify-content: start; padding-top: 60px;}
.manual-checkin h2{text-align: left}
.manual-checkin .location{text-align: left; font-size: 32px; margin-top: 0; background-image: url("images/location.svg"); background-repeat: no-repeat; background-position: center left; padding-left: 30px;  background-size: 20px; margin-bottom: 0px;}
.manual-checkin .courtno{text-align: left; margin-bottom: 40px; font-size: 22px; margin-top: 0; padding-left: 30px; text-transform: uppercase;}
.manual-checkin form{width:350px; margin: 0px auto; text-align: left}
.manual-checkin form label{text-transform:uppercase; font-size:16px; margin-bottom: 5px;  display: block;}
.manual-checkin form input::-webkit-outer-spin-button, .manual-checkin form input::-webkit-inner-spin-button {-webkit-appearance: none;  margin: 0}
.manual-checkin form input[type=number] {-moz-appearance: textfield}
.manual-checkin form input[type=number], .manual-checkin form input[type=email] {border-radius:30px; padding: 15px;  width: 100%; box-sizing: border-box; border:3px solid transparent; opacity: 0.7; transition: 0.3s all ease-out}
.manual-checkin form input:focus{outline: none; border:3px solid #3aa5de; opacity: 1}
.manual-checkin form .form-element{margin-bottom:15px}
.manual-checkin form p{text-align:center; font-size:24px; margin: 10px 0;}
.manual-checkin form input[type="submit"]{opacity:1; width:100%}


#language select{ -webkit-appearance: none; background-color: transparent;  border: none;  color: #fff; font-family: roc-grotesk, sans-serif; font-weight: 600; font-size:18px;  padding-left: 30px; background-position: center left; background-size:20px; background-repeat: no-repeat;}
#language option{color:#000; font-size:18px}

#language select:has(option[value="EN"]:checked) {background-image: url("images/flag-gb.svg")}
#language select:has(option[value="FR"]:checked) {background-image: url("images/flag-fr.svg")}
#language select:has(option[value="DE"]:checked) {background-image: url("images/flag-de.svg")}
#language select:has(option[value="ES"]:checked) {background-image: url("images/flag-es.svg")}
#language select:has(option[value="IT"]:checked) {background-image: url("images/flag-it.svg")}

#privacy .button{background-color:transparent; padding:0; background-image: url("images/doublearrow.svg");  background-repeat: no-repeat;  background-size: 15px 15px;  padding-left: 25px;  background-position: center left;  color: #fff;  text-decoration: none; text-transform: none}
#privacyDialog{max-width: 80%; max-height: 80%; font-size: 14px;  font-weight: 400; position: relative; outline: none; padding: 40px;  box-sizing: border-box;}
#privacyDialog::backdrop{background-color: rgba(252, 138, 138, 0.8);}
.dialog-close{position: fixed; top: calc(10% - 20px);  right: calc(10% - 20px);  padding: 0;  height: 40px;  width: 40px; display: flex;  align-items: center;  justify-content: center;}

h2.name{text-align: center; font-size: 50px; }
h2.fail{text-align: center; font-size: 36px; margin-bottom: 20px}
h3.confirmed{margin-top: 30px;  margin-bottom: 40px; font-size: 36px;}
h3.confirmed span{display:block; font-size: 24px;}
a.next-player, a.reenter{margin: 0px auto; min-width: 230px;}
.tickbox label{display: grid !important;  grid-template-columns: 30px auto;  margin-top: 15px;  grid-gap: 10px;  text-transform: none !important;  align-items: start;}
input[type="checkbox"]{appearance: none; -webkit-appearance: none;  display: flex;  align-content: center;  justify-content: center;}
input[type="checkbox"] {display: grid;  place-content: center;}
input[type="checkbox"]::before { content: "";  width: 20px; height:20px; background-color: #FF7A71; border:2px solid #FFF; border-radius: 5px}
input[type="checkbox"]:checked::before {background-image:url("images/tick.svg"); background-size: 16px;  background-repeat: no-repeat;  background-position: center;}
input[type="checkbox"]:focus{border:none !important}
input[type="submit"]:disabled{opacity: 0.8 !important;}

.courts.flex{display:flex; flex-wrap: wrap; gap: 15px; margin-top: 20px; /*overflow-y: auto; height: 300px;*/}
.courts.flex .court{background-color: #FFF;  border-radius: 26px; padding: 10px; color: #707070; line-height: 0; min-width: 220px;  flex-grow: 1; box-sizing: border-box; }
.courts .court-no{color: #ff7a71;}
.courts .court-time{margin-bottom:15px; margin-top:15px; color: #ff7a71;}


.courts.table{background-color: #F8FAF3; padding:20px; border-radius:20px; margin-top: 15px;}
.courts.table table{border-collapse: collapse;}
.courts.table table th{color:#00405D; text-align: left}
.courts.table table td{ border-right: 1px dotted #00405d;  padding: 5px; height:55px; }
.courts.table table tr td:last-of-type{border-right: none;}
.courts.table table td .button{font-size:13px; display: block;}
.courts.table .times th{text-align:right; font-size: 14px; padding-right: 5px; position: relative; height:20px}
.courts.table .times th span{position: absolute;  right: -30px;  top: 0;  width: 60px;  text-align: center;}
.courts.table .times th:last-of-type span{right:0; text-align: right}
.courts.table .button{padding:12px;}
.courts.table .button span{display: block;}
.courts.table .button.start{border-top-left-radius: 0; border-bottom-left-radius: 0}
.courts.table .button.end{border-top-right-radius: 0; border-bottom-right-radius: 0}
/* .courts.table .button:hover{transform: scale(1.03)} */
.home{width: 25px;  height: 28px;  position: absolute;}

#checking_step_0 select {
    color:#00405D;
    font-size:20px;
    font-weight:bold;
    padding:12px 40px;
    border-radius:32px;
    margin:20px;
    text-transform:uppercase;
    appearance: none;

    background-image: url('data:image/svg+xml;utf8,%3Csvg%20color%3D%22%2300405D%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6%209L12%2015L18%209%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
    /*
        background-image: url('data:image/svg+xml;utf8,<svg color="#00405D" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
    */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
}
#home_location {
    background-image: url(./images/location.svg);
    font-size: 18px;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}