@import url('https://fonts.googleapis.com/css2?family=Elsie:wght@400;900&display=swap');

html, body {
scroll-behavior: smooth;
font-family: 'Open Sans', sans-serif;
height: auto;
margin:0;
transition: height 1s;
width:100%;
}
.container {
position: relative;
display: block;
text-align: center;
padding: 3em 0;
margin-left: auto;
margin-right: auto;
width: 97%;
}
input {
text-align: center;
}
.step1Container {
text-align:center;
position: relative;
background: #ffffff;
box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, .05);
border-top-right-radius: 1em;
border-top-left-radius: 1em;
padding: 1em 0 0 0;
margin-right:auto;
margin-left:auto;
margin-bottom: 0;
max-width: 650px;
}
.address {
font-size: .85em;
color: #000000;
font-weight: 500;
padding: 0;
}
.notice  {
font-size: 1em;
color: #000000;
font-weight: 600;
padding: 0 0 .5em 0;
margin-right: auto;
margin-left: auto;
width: 100%;
}
.blocked, .notAvailable  {
font-size: 1em;
color: #000000;
font-weight: 600;
padding: 0 0 .5em 0;
margin-right: auto;
margin-left: auto;
width: calc(100% - 20px);
}
.maxReserve {
text-align: justify;
font-size: .85em;
color: #000000;
font-weight: 600;
padding: 0 1em .5em 1em;
margin-right: auto;
margin-left: auto;
max-width: 550px;
}
.confirmedMessage, .closedMessage {
font-size: 1em;
color: #000000;
font-weight: 600;
padding: 0 0 .5em 0;
margin-right: auto;
margin-left: auto;
max-width: 500px;
}
.notAvailable {
display: none;
padding: .5em 0 .5em 0;
}
.confirmedMessage, .closedMessage {
display: none;
}
.seatListings {
padding: 0 1em 1em 1em;
}
.eventContainer {
text-transform: capitalize;
}
.step2Container {
display: none;
text-align:center;
position: relative;
background: #ffffff;
box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, .05);
padding: 0 0 1em 0;
margin-right:auto;
margin-left:auto;
margin-bottom: 0;
clear: both;
max-width: 650px;
width:100%;
}
.step3Container {
display: none;
text-align:center;
position: relative;
background: #ffffff;
box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, .05);
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
padding-top: 1em;
margin-bottom: 4em;
margin-right:auto;
margin-left:auto;
max-width: 650px;
}
#step3Form {
padding: 1em;
}
.heading {
color: #000000;
font-weight: 500;
margin-top: 1em;
margin-bottom: .25em;
}
.restaurant {
font-family: 'Elsie', serif;
font-size: 2em;
color: rgba(0, 0, 0, .75);
font-weight: 600;
letter-spacing: 0px;
padding: 0;
}
.rewardsButton {
text-align:center;
display: block;
font-size: .85em;
border-top: 3px solid #636363;
border-bottom: 3px solid #636363;
border-right: 0px;
border-left: 0px;
background-image: linear-gradient(to right, rgba(206, 189, 167, .7), rgba(247, 241, 226, 1), rgba(206, 189, 167, .7));
background-color: #ffffff;
border-radius: 4px;
cursor:pointer;
padding: .25em 1em;
margin-top: .35em;
margin-bottom: .25em;
margin-right: auto;
margin-left: auto;
transition: color 0.25s ease-in-out, 
background 0.25s ease-in-out;
}
.rewardsButton:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
/*.rewardsButton {
position: absolute;
left: 8%;
top: 3em;
background: none;
border:none;
cursor:pointer;
transition: color 0.25s ease-in-out, 
background 0.25s ease-in-out;
height: 100px;
width: 60px;
}*/
/*#toplogo {
position: absolute;
left: 0%;
top:0;
max-width: 60px;
}*/
#toplogo {
display:block;
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
max-width: 60px;
}
#toplogo:hover {
-webkit-filter: saturate(200%);
}
.rewardsLogo {
cursor: pointer;
}
input:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
#step1Form {

}
#date,  #phone, .selectButton {
text-align: center;
display: inline-block;
font-size: .85em;
color: #ffffff;
border-radius: 3px;
border:1px solid #ffffff;
background: #636363;
/*box-shadow: inset 0px 0px 15px 2px rgba( 255, 255, 255, .6), 0px 0px 3px 1px rgba(255, 255, 255, 0);*/
line-height: 2em;
cursor: pointer;
outline: 3px solid #636363;
padding: .16em 0em .16em 0em;
margin: .35em;
width: calc(50% - 3em);
}

#date::placeholder {
color: #ffffff  !important;
opacity: 1;
}
#phone::placeholder {
color: #ffffff  !important;
opacity: 1;
}
.selectButton::placeholder {
color: #ffffff  !important;
}
input#phone:focus::placeholder {
color: rgba(255, 255, 255, 1)  !important;
}
select:focus,  #date:focus,  #phone:focus, .selectButton:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
select {
position: relative;
text-align: center;
text-align-last: center;
display: inline-block;
font-size: .85em;
color:#ffffff;
border:1px solid #ffffff;
border-radius: 3px;
box-sizing: border-box;
background: #636363;
outline: 3px solid #636363;
/*box-shadow: inset 0px 0px 15px 3px rgba( 255, 255, 255, .8), 0px 0px 3px 1px rgba(255, 255, 255, .2);*/
padding: .5em 0em .5em 0em;
margin: .35em;
height: 2.45em;
width: 21em;
z-index: 1;
}


.rewardsPopup {
text-align: center;
margin-top: 5em;
margin-left: auto;
margin-right: auto;
width:100%;
max-width: 350px;
}
#rewardsModal {
display: none;
position: fixed;
z-index: 1;
padding-top: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background: url(images/MR-pattern.jpg);
}
.rewardsModalContent {
position: relative;
background: transparent;
margin: auto;
max-width: 350px;
padding-bottom: 1em;
}
.rewardsModalContent img {
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, .3);
box-shadow: 0 10px 15px 0 rgba(0,0,0, .075), 0 5px 15px 0 rgba(0,0,0, .075);
animation: fadein 4s;
}
@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}
.logo {
display: block;
margin-right: auto;
margin-left: auto;
width: 200px;
padding-top: .5em;
padding-bottom: 1em;
}
.close {
position: absolute;
top: 20%;
left: 50%;
text-align:center;
display: block;
background: rgba(0, 0, 0, 1);
color: white;
border:none;
border-radius:4px;
cursor:pointer;
padding: .35em 1em .25em 1em;
transform: translate(-50%, -50%);
animation: fadein 4s;
}
.close:hover {
background: rgba(0, 0, 0, .65);
}
.rewardsLogo {
position: absolute;
right: 5%;
margin-top: -2.5em;
width: 75px;
}
.rewardsLogo:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
.rewardsInfo {
position: absolute;
top: 60%;
left: 0;
width: 100%;
text-align: center;
animation: fadein 4s;
}
.message {
color: #000000;
font-size: 1.15em;
font-weight: 600;
padding: 1em 0 0 0;
}
.seatMessage {
font-size: .85em;
color: #000000;
margin-top: .5em;
margin-bottom: .5em;
}
.noSeatMessage {
padding-top: 1em;
padding-bottom: 1em;
font-style: italic;
}
.times {
position: relative;
text-align:center;
display: table;
padding: 0;
margin-right: auto;
margin-left: auto;
clear: both;
}
.timeButton {
position: relative;
display: inline-block;
font-size: .85em;
background: #636363;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
padding: .5em 1em;
margin: 0.25em;
width: calc(130px - 1em);
}
.eventButton {
position: relative;
display: inline-block;
font-size: .85em;
background: #636363;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
padding: .5em 1em;
margin: 0.25em;
width: calc(230px - 1em);
}
.timeButton:focus, .eventButton:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
.info {
text-align: justify;
padding: 0 1.5em;
margin-bottom: 1em;
}
input.cardInput {
width: 175px;
}
input.expInput {
width: 100px;
}
.contactRow, .creditCardRow {
text-align: center;
clear: both;
}
.creditCardRow {
display: none;
}
.contactInput, #city {
font-size: 1em;
background: rgba(0, 0, 0, .05);
border: 0px solid rgba(0, 0, 0, .2);
padding: .25em;
margin: .25em 1.15em;
float: left;
line-height: 1.75em;
outline: none;
width: calc(50% - 2.85em);
text-align: center;
}
input#firstName, Input#lastName {
text-transform: capitalize;
}
.contactInput::placeholder, #city::placeholder {
color: rgba(0, 0, 0, 1) !important;
line-height: 2em;
}
.contactInput:focus::placeholder {
color:#ffffff !important;
}
.contactInput:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
.options {
color: #000000;
padding-top: 1em;
padding-bottom: 1em;
clear: both;
}
input[type="checkbox" i] {
background-color: initial;
cursor: default;
appearance: auto;
box-sizing: border-box;
margin: 3px 0px 3px 0px;
padding: initial;
border: initial;
vertical-align: bottom;
}
#customerRequests {
text-align: left; 
font-family: 'Open Sans', sans-serif;
font-size: 1em;
background: transparent;
border: 1px solid rgba(0, 0, 0, .2);
box-sizing: border-box;
outline: none;
min-height: 4em;
margin-bottom: 1em;
max-width: 580px;
width: 100%;
}
#customerRequests::placeholder {
color: #000000;
padding: 1em;
text-align: center;
}
#customerRequests:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
#customerRequests:focus::placeholder, .contactInput:focus::placeholder,  #city:focus::placeholder {
color:#ffffff !important;
}
.terms {
display: block;
text-align: justify;
font-size: .75em;
color: rgba(0, 0, 0, .8);
font-weight: 600;
padding: 1.5em 1.5em 0 1.5em;
margin-top: 1em;
margin-right: auto;
margin-left: auto;
max-width: 580px;
}
.signUpContainer {
text-align: left;
padding-top: 0.75em;
margin-left: 1em;
max-width: 80%;
}
label {
font-size: .8em;
font-weight: 600;
margin-right: 4px;
}
input#signUp {
margin-right: 4px;
}
.learn {

}
.confirmMessage {
font-size: 1.15em;
font-weight: 400;
padding: 1.15em;
margin-left: auto;
margin-right: auto;
max-width: 450px;
}
.action {
padding-bottom: 1em;
}
a.link  {
text-decoration: none;
color: #8b058d;
font-weight: 600;
}

a.link:hover {
color: #aa06ac;
}
.cancelButton {
text-align:center;
display: inline-block;
font-size: 1em;
color: white;
background: #636363;
border: none;
border-radius:4px;
cursor:pointer;
padding: .5em 1em;
margin: .25em 0 2em 0;;
}
.confirmButton {
text-align:center;
display: inline-block;
font-size: 1em;
background: #636363;
color: white;
border:none;
border-radius:4px;
cursor:pointer;
padding: .5em 1em;
margin-bottom: 2em;
}
.confirmButton:focus {
color:#ffffff !important;
background-image: none;
outline: 3px dotted #a307fc;
background: #d004fc !important;
}
#city {
display: none;
outline: none;
width: 200px;
text-align: center;
}
@media screen and (max-width: 1050px) {
.container {
padding: .5em 0;
}
}
@media screen and (max-width: 736px) {
.notice, .blocked, .notAvailable, .confirmedMessage, .closedMessage {
width: calc(100% - 100px);
}
}
@media screen and (max-width: 650px) {

#date, #phone, .selectButton {
line-height: 2.5em;
width: calc(47% - 1em);
}
#customerRequests {
max-width: 510px;
}
select {
height: 2.7em;
width: calc(47% - 1em);
}
}
@media screen and (max-width: 600px) {

#toplogo {
max-width: 75px;
}
}
@media screen and (max-width: 550px) {

.restaurant {
font-size: 1.5em;
}
#toplogo {
max-width: 60px;
}
.seatListings {
padding: 0 0 1em 0;
}
.notice  {
font-size: .85em;
}
.contactInput {
position: relative;
display: inline-block;
font-size: 1em;
padding: .25em;
margin-top: 0;
margin-bottom: .5em;
margin-left: auto;
margin-right: auto;
float: none;
line-height: 1.75em;
outline: none;
width: calc(100% - .5em);
text-align: center;
}
#date, #phone, .selectButton {
font-size: .8em;
}
.confirmedMessage, .maxReserve, .closedMessage {
font-size: .85em;
}
.selectButton {
margin-top: 0.5em;
}

.rewardsPopup {
max-width: 325px;
}
}
@media screen and (max-width: 480px) {


.confirmMessage {
font-size: 1em;
font-weight: 400;
padding: .85em;
max-width: 450px;
}
.blocked {
font-size: .85em;
width: calc(100% - 30px);
}
#date, #phone, .selectButton {
font-size: 1em;
line-height: 2.3em;
width: 95%;
max-width: 100%;
}
select {
font-size: 1em;
height: 2.8em;
width: 95%;
max-width: 100%;
}
.maxReserve {
font-size: .8em;
word-spacing: -1px;
}
.timeButton {
width: calc(120px - 1em);
}
}
@media screen and (max-width: 440px) {

.signUpContainer {
max-width: 225px;
}
.timeButton {
width: calc(110px - 1em);
}
}
@media screen and (max-width: 400px) {

.selectButton {
margin-top: 0.25em;
}
}