body {
  font-family: sans-serif;
  margin: 0;
  
  height: 100vh;
  padding: 0;
  width: 100vw;
}

/* For splash screen */
.splashScreenDiv {
    position: fixed;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
}

.splashDiv {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 8px;
	border: 1px solid black;
	width: 90vw;
}


/* Make content area fill the entire browser window */
html,
.fullscreen {
  /* display: flex; */
  height: 100vh;
  margin: 0;
  padding: 0;
  width: 100vw;
}

/* Center the content in the browser window */
.container {
  padding: 1vw;
  margin: auto;
}

.title {
  font-size: 3rem;
}

/*.nav {
  background-color: #eee;
  color: #000;
  padding: 3px;
  position: sticky;
  top: 0;
}*/

.header {
  display: flex;
  background-color: #eee;
  color: #000;
  padding: 1vw;
  position: sticky;
  top: 0;
  align-items: flex-end;
}

.header form {
  margin: 0px;
  padding: 0px;
}

.header span, .header input, .header i {
  display: flex;
  float: left;
}

.headerLogo {
  display: flex;
  float: left;
  margin: 0px;
}

.headerLogo::before {
	background-image: url("../image/app/comuo-250.png");
	background-repeat: no-repeat;
	background-size: 250px;
	display: inline-block;
    height: 36px;
    width: 250px;
	margin-right: 2vw;
    margin-left: 1vw;
	margin-top: 0.1vh;
	margin-bottom: 0.1vh;
	content: "";
}


/*
.headerLogo::before {
	display: inline-block;
	float: left;
	content: url("../image/app/comuo-200.png");
}*/

footer {
  background-color: #eee;
  color: #000;
  padding: 0px;
  bottom: 0;

  display: block;
  width: 100vw;
  position: fixed;
  /* sticky; */
}

  /*#roundedButton {
	  position: fixed;
	  bottom: 100px;
	  right: 50px;
  }*/


footer td {
	text-align: center;
}

.footerButton {
	height: 48px;
	padding-left: 5px;
	padding-right: 5px;
	border-left: 2px solid black;
	border-right: 2px solid black;
	/*background-color: green;*/
}

.footerUnselectedButton {
	height: 48px;
	padding-left: 7px;
	padding-right: 7px;
	/*opacity: 0.3;*/
}


/*
.cardBox {
  vertical-align: middle;
  text-align: left;
  border-radius: 8px;
  background: #73AD21;
  padding: 60px;
  padding-top: auto;
  padding-bottom: auto;
  margin-left: 10px;
  margin-right: 10px;
  display: inline;
  border: 2px solid #000;
}

.cardBox img canvas {
  vertical-align: middle;
  text-align: center;
  padding: 20px;
  margin: auto;
  width: 80px;
}
*/
/*.cardListContainer {*/
.cardList {
  text-align: center;
 // display: flex;
 // justify-content: space-around;
}

.cardBox {
  display: inline-block;
 // float: left;
  border-radius: 8px;
  background: #EEEEEE;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 40px;
  padding-right: 40px;
  margin: 10px;
  border: 2px solid #000;
}

.cardBox img canvas {
  padding: 0px;
  margin: 0px;
  width: 120px;
  max-width: 120px;
}

.emptyCardBox {
  display: inline-block;
 // float: left;
  border-radius: 8px;
 //background: #73AD21;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 42px;
  padding-right: 43px;
  margin: 10px;
}

.minicardBox {
  display: inline-block;

  vertical-align: middle;
  text-align: left;
  border-radius: 3px;
  background: #73ADFF;
  padding: 0px 20px 0px 20px;
  margin-left: 25px;
  margin-right: 15px;
  border: 1px solid #000;
}

.minicardBox img {
  vertical-align: middle;
  text-align: center;
  padding: 0px;
  margin: 0px;
  width: 40px;
}


/*select#gender option[value="Leclerc"]   { background-image:url("https://www.e.leclerc/favicon.ico");   }
select#gender option[value="Cora"] { background-image:url("https://wws.cora.fr/favicon.ico"); }
select#gender option[value="Ikea"] { background-image:url("https://www.ikea.com/favicon.ico"); }
*/

.profileContainer {
  position: relative;
}

.profileContainer img {
  /*width: 100%;*/
}

.profileContainer .profileStatus {
  position: absolute;
  top: 10%;
  left: 55%;
  width: 100%;
  height: 100%;
  background-image: url("../image/app/grayLightIcon.svg");
  background-repeat: no-repeat;
  background-size: 8px;
}

.profileContainer .connectivityStatus {
  position: absolute;
  top: 60%;
  left: 52%;
  width: 100%;
  height: 100%;
  background-image: url("../image/button/white.svg");
  background-repeat: no-repeat;
  background-size: 12px;
}

button.html5-qrcode-element, select.html5-qrcode-element, button.scanapp-button {
    appearance: none;
    background-color: #FAFBFC;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    box-sizing: border-box;
    color: #24292E;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    list-style: none;
    padding: 6px 16px;
    position: relative;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: break-word;
    margin-bottom: 5px;
}

.selectedButton {
	padding-left: 5px;
	padding-right: 5px;
	border-left: 2px solid black;
	border-right: 2px solid black;
}

.unselectedButton {
	padding-left: 7px;
	padding-right: 7px;
	/*border-radius: 50%;
	opacity: 0.3;*/
}