/* Copyright (c) Microsoft Corporation.
Licensed under the MIT license. */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3d74ff;
  height: 50px;
  width: 100%;
  padding: 0 20px; /* Added padding to align content properly */
}

header > p {
  color: #ffffff;
  font: bold 1.6em "segoe ui", arial, sans-serif;
  margin: 0; /* Reset margin */
  padding: 0; /* Reset padding */
}

body {
  margin: 0px;
}

main {
  padding: 0%;
  margin-top: -45px;
  margin-bottom: -15px;
  height: 100%;
  width: 100%;
}

section#text-container > div > p {
  font: 1.2em "segoe ui", arial, sans-serif;
}

section#report-container {
  height: calc(0.5625 * 85vw); /* 16:9 aspect ratio */
  min-height: 200px; /* Set a minimum height */
  max-height: 800vh; /* Set a maximum height relative to the viewport height */
  overflow: hidden;
  width: 100%;
}

@media only screen and (max-width: 575px) {
  section#report-container {
    height: calc(0.5625 * 100vw); /* 16:9 aspect ratio */
    width: 100%;
  }
}

footer > p {
  font: 1em "segoe ui", arial, sans-serif;
}

iframe {
  border: none;
}

#logoutButton {
  padding: 5px 20px;
  border: 2px solid white;
  background-color: transparent;
  color: white;
  border-radius: 25px;
  cursor: pointer;
}

#logoutButton:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#permission-message {
  display: none; /* Initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(1, 26, 94);
  color: white;
  font-family: "Arial", sans-serif;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.message-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.message-content img {
  margin-bottom: 100px; /* Space between the image and the text */
  width: 250px;
  align-self: auto;
}

#permission-message .logoutButton {
  display: block;
  margin: 20px auto 0; /* Center the button and add top margin */
  padding: 10px 20px;
  border: 2px solid white;
  background-color: transparent;
  color: white;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.5em; /* Adjust font size to be smaller than the message text */
}

#permission-message .logoutButton:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-info {
  background-color: green; /* green background */
  color: white;
  font-size: 12px;
  font-style: italic;
  padding-left: 15px;
  text-align: left;
}

#user-status {
  background-color: #3d74ff; /* Light blue background */
  color: rgb(250, 250, 250); /* Gray text */
  padding: 10px;
  font-size: 12px;
  text-align: center;
  margin: 20px 0; /* Space above and below */
  width: 100%; /* Ensure it spans the full width */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  white-space: pre;
}

#report-container,
#users {
  width: 100%;
}