html, body, #viewer {
  margin: 0;
  width: 100vw;
  height: 100vh;
  max-width:100%;  /* added */
  font-family: sans-serif;
}

input[type=text],input[type=password] {
  width: 80%;
  max-width: 400px;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

input[type=button], input[type=submit], input[type=reset] {
  background-color: #2300b0;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

#overlay {
  margin: 1em auto;
  border: 0px solid white;
  border-radius: 8px;
  padding: 1em;
  position: absolute;
  width: 90%;
  color: #024457;
  font-family: Arial;
  font: 62.5%/1.4 Arial, Helvetica, sans-serif;
  z-index: 1001;
  background: none;
  font-size: 0.9em;
}

#overlay .close {
  position: absolute;
  top: -13px;
  right: -13px;
  width: 40px;
  height: 40px;
  content: "";
  background-color: white;
  border: solid lightgrey 1px;
  border-radius: 50%;
}
#overlay .close:before {
  position: absolute;
  border-radius: 50%;
  content: "";
  border: solid white 2px;
  width: 36px;
  height: 36px;
  top: 0px;
  left: 0px;
}
#overlay .close:after {
  position: absolute;
  content: "X";
  font-family: "Tahoma Bold","Calibri Bold","Arial Black","Arial Bold",helvetica,"Lucida Sans","Trebuchet MS",sans-serif;
  font-weight: bold;
  font-size: 1.9em;
  color: white;
  top: 0px;
  left: -1px;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  line-height: 38px;
}

#overlay .close.green:before {
  background-color: #77A325;
  background: linear-gradient(to bottom, #BACE08 0%, #77A325 100%);
}

#overlay .myimg {
  width: 45px;
  height: 45px;
  position: absolute;
  right: -15px;
  top: 30px;
  background-repeat: no-repeat;
}

#overlay .myimg.blue {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpEOTc4QjQ0RkM3QUJFMDExOEQyMUFFRDVCMjU1NkNDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowRkZFOUYwQkIxRjgxMUUwQjEyQkU1QjBGQjY0RDI4RCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowRkZFOUYwQUIxRjgxMUUwQjEyQkU1QjBGQjY0RDI4RCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDRUI2QkIxNzJBQURFMDExQTBFQjlGQzNFNEM0NEQzNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEOTc4QjQ0RkM3QUJFMDExOEQyMUFFRDVCMjU1NkNDNyIvPiA8L3JkZjpEZXNjcmlwdGlv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);
}

#share {
  margin: 1em auto;
  border: 0px solid white;
  border-radius: 8px;
  padding: 1em;
  position: absolute;
  width: 10%;
  color: #024457;
  font-family: Arial;
  font: 62.5%/1.4 Arial, Helvetica, sans-serif;
  z-index: 1001;
  background: none;
  font-size: 0.9em;
}

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 45px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 32px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 35px;
  width: 35px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 2px;
  width: 15px;
  height: 20px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

input[type=text], select {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}