* {
	margin: 0;
	padding: 0;
}

#container {
  position: absolute;
	width: 100%;/*## fill page*/
	height: 100%;/*## fill page*/
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
  overflow: hidden;/*## no scrollbars*/
}

#overlay {
  pointer-events: none;
  position: absolute;/*## in the same place; overlaid*/
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: 20;/*## text is over canvas*/
}

#phasebar {
  position: absolute;/*## in the same place; overlaid*/
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: 40;/*## text is over canvas*/
}

.popup {
  visibility: visible;
  width: 100%;
  z-index: 60;/*## text is over canvas*/
}

.modal-title-bar {
    display: flex;
    align-items: center;
    position: relative;
    font-family: Helvetica, serif;
    color:white;
    margin-bottom: 10px;
}

.share-text {
    position: absolute;
    font-size:28px;
    left: 50%;
    transform: translateX(-50%);
}

#qrCloseButton {
    margin-left: auto;
    z-index: 1;
    display: flex;
}

#qrCloseButton {
  background: transparent;
  border: none;
  border-radius: 50%;
}

#qrCloseButton:hover, #qrCloseButton:active {
  background: #f9f9f985;
}


/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/* Modal Content */
.modal-content {
  background-color:#0E6BA2;
  margin: auto;
  padding: 20px 10px 15px;
  border: none;
  width: fit-content;
  border-radius: 10px;
  display: grid;
}

.qrqr {
  margin: 10px;
}

/* The Modal (background) */
.modal {
  position: relative;
  display: none; /* Hidden by default */
  z-index: 90; /* Sit on top */
  align-items: center;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
/* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#canvas {
  position: absolute;/*## in the same place; overlaid*/
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
  z-index: 10;/*## text is over canvas*/
  overflow: hidden;/*## no scrollbars*/
}

.btn-left {
  margin-right: 8px;
  background-color: #2196F3;
  color: white;
  padding: 2px;
  font-size: 16px;
  border: none;
  outline: none;
}

.btn-left-more {
  margin-right: 1px;  
  background-color: #2196F3;
  color: white;
  padding: 2px;
  font-size: 16px;
  border: none;
  border-right: 2px;  
  outline: none;
}

.btn-center {
  flex-grow : 100;
  background-color: #2196F3;
  color: white;
  padding: 2px;
  font-size: 16px;
  border: none;
  outline: none;
}

.btn-right {
  margin-left: 8px;
  background-color: #2196F3;
  color: white;
  padding: 2px;
  font-size: 16px;
  border: none;
  outline: none;
}

.btn-right-more {
  margin-left: 1px;
  background-color: #2196F3;
  color: white;
  padding: 2px;
  font-size: 16px;
  border: none;
  border-left: 2px;  
  outline: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content-right {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content-left {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content-right a {
  color: black;
  padding: 12px 16px;
  font-family: sans-serif;
  text-decoration: none;
  display: block;
}

.dropdown-content-left a {
  color: black;
  padding: 12px 16px;
  font-family: sans-serif;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content-left a:hover {background-color: #ddd}
.dropdown-content-right a:hover {background-color: #ddd}

/* Show the dropdown menu on hover */
.dropdown:hover	.dropdown-content-left {
  display: block;
}
.dropdown:hover .dropdown-content-right {
  display: block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */
.btn:hover, .dropdown:hover .btn  {
  background-color: #0b7dda;
}