*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Fix mobile Safari increase font-size on landscape mode */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu, summary {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
box-sizing: border-box;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
box-sizing: border-box;
}
/* Remove details summary webkit styles */
::-webkit-details-marker {
display: none;
}
body {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-variation-settings: "slnt" 0;
color: rgb(107 114 128);
}
main {
margin: auto;
width: 100%;
max-width: 320px;
color: #181A17;
}
h1 {
font-size: 24px;
margin: 40px 0 20px 0;
font-weight: 600;
}
footer {
position: fixed;
width: 100%;
background: white;
bottom: 0;
left: 0;
padding: 10px 0 20px 0;
border-top: 1px solid rgb(226 232 240);
-webkit-box-shadow: 0px -4px 18px 11px rgba(0, 0, 0, 0.11);
box-shadow: 0px -4px 18px 11px rgba(0, 0, 0, 0.11);
color: #000000;
}
footer div.book {
margin: auto;
width: 100%;
max-width: 320px;
height: 120px;
padding-top: 10px;
}
footer div.book small {
font-size: 12px;
display: inline-block;
margin-top: 10px;
}
strong {
font-weight: 600;
}
footer form {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
footer button {
appearance: none;
backface-visibility: hidden;
background-color: #27ae60;
border-radius: 8px;
border-style: none;
cursor: pointer;
display: inline-block;
color: #fff;
font-size: 16px;
font-weight: 600;
letter-spacing: normal;
line-height: 1.5;
outline: none;
overflow: hidden;
padding: 13px 20px;
position: relative;
text-align: center;
text-decoration: none;
transform: translate3d(0, 0, 0);
transition: all .3s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: top;
white-space: nowrap;
}
footer button:disabled {
background: rgb(229 231 235);
color: rgb(107 114 128);
}
footer input {
border-radius: 10px;
border: 1px solid rgb(229 231 235);
padding: 14px;
font-size: 14px;
display: inline-block;
margin-right: 5px;
outline: none;
}
section.numbers {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
padding-bottom: 200px;
}
section.numbers div.tile {
width: 100px;
height: 100px;
padding: 10px;
flex-grow: 0;
flex-shrink: 0;
margin-top: 10px;
border: 1px solid rgb(226 232 240);
border-radius: 5px;
color: rgb(156 163 175);
font-size: 12px;
position: relative;
}
section.numbers div.tile small {
font-size: 12px;
position: absolute;
left: 10px;
top: 10px;
}
section.numbers div.tile span {
position: absolute;
bottom: 10px;
left: 10px;
border-radius: 8px;
display: inline-block;
padding: 3px 5px;
/*border: 1px solid rgb(77 124 15);*/
background: #E0EFE6;
color: #125E1E;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 80px;
overflow: hidden;
}
section.numbers div.booked {
background: rgb(248 250 252);
font-size: 14px;
}
section.numbers div.selected {
/*background: rgb(217 249 157);*/
border: 2px solid rgb(77 124 15);
font-weight: 900 !important;
font-style: normal;
color: rgb(77 124 15);
}