/*
    MMM         MMMMMMMMMM   MMMMMMMMMMMMMMM   MMMMMMMMMMMMMMM      dMMP  MMMMMMMMMM
    MMM         MMMMMMMMMM   MMMMMMMMMMMMMMM   MMMMMMMMMMMMMMM     dMMP   MMMMMMMMMM
    MMM         MMM    MMM   MMM   MMM   MMM         MMM   MMM    dMMP    MMM    MMM
    MMM         MMM    MMM   MMM   MMM   MMM   MMM   MMM   MMM   dMMP     MMM    MMM
    MMM         MMM    MMM   MMM   MMM   MMM   MMM   MMM   MMM  CMMK      MMM    MMM
    MMM         MMM    MMM   MMM   MMM   MMM   MMM   MMM   MMM   YMMb     MMM    MMM
    MMM         MMM    MMM   MMM   MMM   MMM   MMM   MMM   MMM    YMMb    MMM    MMM
    MMMMMMMMM   MMMMMMMMMM   MMM   MMM   MMM   MMM   MMM   MMM     YMMb   MMMMMMMMMM
    MMMMMMMMM   MMMMMMMMMM   MMM   MMM   MMM   MMM   MMM   MMM      YMMb  MMMMMMMMMM
*/

/******************************************************************************
 * Box model
 ******************************************************************************/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
/******************************************************************************
 * Fonts
 * Playfair Display / Noto Serif / Crimson Text / Neuton / Rasa
 * Lato / Roboto
 * Download Google Webfonts: https://gwfh.mranftl.com/fonts
 ******************************************************************************/

/* noto-serif-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/noto-serif-v22-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/noto-serif-v22-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-serif-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/noto-serif-v22-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-serif-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/noto-serif-v22-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/lato-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6rem;
  margin:0;
  overflow-y: scroll;
  background: #fff;
}

h1, h2, h3, h4, h5 {
  font-family: 'Noto Serif', serif;
  font-style: normal;
  font-weight: 400;
}
h1 {
  font-size:2.3rem;
  line-height:3.4rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}
h2 {
  font-size:1.6rem;
  line-height:2.4rem;
  letter-spacing:-0.04rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}
h3 {
  font-size: 1.3rem;
  line-height: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
h4 {
  font-size: 1rem;
  line-height:1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: bold;
}

a {
  color: inherit;
}
a:focus,
*:focus {
    outline: none;
}

sup {
  vertical-align: top;
  position: relative;
  font-size:0.7em;
  top: -0.3em;
  font-style: italic;
}
sub {
  vertical-align: baseline;
  position: relative;
  font-size:0.7em;
  top: 0.3em;
  font-style: italic;
}

/******************************************************************************
 * Layout
 ******************************************************************************/
.container {
  padding-top:1px;
  position:relative;
  height:100vh;
}
.main {
  position:relative;
  padding-bottom:150px;
  height:100%;
}
.menu {
  position: fixed;
  bottom:0;
  width:100%;
  background:#000;
  z-index:100;
}
.content {
  width:880px;
  margin:0 auto;
  max-width:100%;
  padding:0 20px;
}
/******************************************************************************
 * Layers
 ******************************************************************************/
#index {
  display:none;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}
#participants {
  display:none;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}
#scanner {
  display:none;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}
#options {
  display:none;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}


/******************************************************************************
 * Menu
 ******************************************************************************/
.menu ul {
  margin:0;
  padding:0 0 20px 0;
  list-style: none;
  text-align:center;
}
.menu li {
  display:inline-block;
}
.menu a {
  display:block;
  color:#666;
  font-size: 36px;
  line-height:68px;
  text-transform: uppercase;
  text-decoration:none;
  padding:0 10px;
}
.menu li.active a {
  color:#fff;
}

/******************************************************************************
 * Content
 ******************************************************************************/
.message {
  text-align: center;
}

/******************************************************************************
 * Liste
 ******************************************************************************/
.liste {
  width: 100%;
  max-width: 840px;
  margin:0 auto;
  empty-cells: show;
  border-collapse: collapse;
}
.liste tr {
  /*width: 100%;*/
}
.liste td.present {
  color:#fdb42b;
  color:#000000;
  color:#2c1fcc;
}
.liste td.present {
  color:#fdb42b;
  color:#000000;
  color:#2c1fcc;
}
div.scanned {
    background:#2c1fcc;
    font-size:12px;
    width:25px;
    line-height:25px;
    border-radius:50%;
    color:#fff;
    text-align:center;
    margin-bottom:5px;
}
div.scanned0 {
    background:#ddd;
    color:#000;
}
div.scanned100 {
    background:#dd1f2c;
    color:#fff;
}
div.quota {
    background:#ddd;
    font-size:12px;
    width:25px;
    line-height:25px;
    border-radius:50%;
    color:#000;
    text-align:center;
    margin-top:5px;
}
.liste td {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding:5px 5px;
}
.liste td:first-child {
  width:40px;
  padding-left: 20px;
  padding-right:2px;
  text-align:right;
}
/*
.liste td:nth-child(2) {
  width:25px;
  padding-left:2px;
  text-align:left;
}
*/
.liste td:last-child {
  width:45px;
  padding-right: 20px;
  text-align:right;
}

.restaurants td:first-child {
  width:40px;
  padding-left: 20px;
  padding-right:10px;
  text-align:right;
}
.liste tr.disabled td {
    background:#eee;
    color:#999;
}
.liste tr.disabled td .scanned,
.liste tr.disabled td .quota {
    background:#ddd !important;
    color:#999 !important;
}
.liste .date {
    font-size:12px;
    float:right;
}
/******************************************************************************
 * Form
 ******************************************************************************/
form {
  position:relative;
}
.field {
  margin-bottom:20px;
}
input[type=text] {
  display:block;
  width: 100%;
  line-height:40px;
  padding: 0 10px 0 10px;
  border: 1px solid #ccc;
  font-size:16px;
}
input[type=submit] {
  line-height:40px;
  padding: 0 20px;
  border: 1px solid #000;
  background: #000;
  color:#fff;
  font-size:16px;
}
.error label {
  color: #c00;
}
.error input[type=text] {
  border:1px solid #c00;
  color: #c00;
  background: #fee;
}
.error-hint {
  color: #c00;
  font-size:14px;
  font-style:italic;
}


/******************************************************************************
 * Search
 ******************************************************************************/
form.search {
  position:relative;
  text-align:center;
  margin:20px 0;
}
form.search input[type=text] {
  display:block;
  width: 100%;
  line-height:40px;
  padding: 0 80px 0 20px;
  border: 1px solid #ccc;
  background:#eee;
  text-transform: uppercase;
  font-size:16px;
}
form.search button {
  display:block;
  position:absolute;
  top:0;
  right:0;
  line-height:40px;
  padding: 0 20px;
  width:60px;
  border: 1px solid #000;
  background: #000;
  color:#fff;
  font-size:16px;
}
hr {
  border: none;
  border-top:1px solid #ccc;
  margin:20px 0;
}

/******************************************************************************
 * stats
 ******************************************************************************/
.stats {
  width: 100%;
  max-width: 840px;
  margin:0 auto;
  empty-cells: show;
  border-collapse: collapse;
}
.stats tr {
  /*width: 100%;*/
}
.stats td, .stats th {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding:5px 5px;
  width:85px;
  text-align: right;
}
.stats td:first-child, .stats th:first-child {
  padding-left: 20px;
  text-align:left;
  width:auto;
}
.stats td:last-child, .stats th:last-child {
  padding-right: 20px;
}
.stats .active td {
    background-color: #ccc;
}

/******************************************************************************
 * Clear Floated Elements
 * http://sonspring.com/journal/clearing-floats
 ******************************************************************************/
.clear {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  width: 0;
  height: 0;
}

/*******************************************************************************
 * http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified
 * slightly enhanced, universal clearfix hack
 *******************************************************************************/
.clearfix:after {
  font-size: 0;
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: '.';
}

.clearfix {
  display: inline-block;
}

/* start commented backslash hack \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* close commented backslash hack */