/* Simple CSS Reset */
html {
  box-sizing: border-box;
  font-size: 62.5%; /* This sets the font size to 10px, making 'rem' units easier to manage */
  font-family: "Segoe UI";
}

*,
*::before,
*::after {
  box-sizing: inherit; /* Inherit box-sizing from html to ensure consistency across the website */
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default paddings */
  border: 0; /* Remove default borders */
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI";
  line-height: 1.6; /* Default line height */
  color: #333; /* Default text color */
}

ul,
ol {
  list-style: none; /* Remove default list styles */
}

a {
  text-decoration: none; /* Remove default text decoration for links */
  color: inherit; /* Link color inherits from parent */
}

img {
  max-width: 100%; /* Make images responsive */
  height: auto; /* Maintain aspect ratio */
}

/* end staging and reset */

body {
  background-color: #2469b3;
}

h1,
h2 {
  page-break-after: avoid;
}

h1,
h2,
p,
table,
tr,
td,
th {
  page-break-inside: avoid;
}

/* Allow page breaks after certain elements */
h1,
h2 {
  page-break-after: avoid;
}

th,
td {
  padding: 2px;
  border: 1px solid #ddd;
}

tr,
td,
th {
  page-break-inside: avoid;
  font-size: 12px;
}

button {
  padding: 8px 15px;
  color: whitesmoke;
  border: 1px solid whitesmoke;
  font-size: 1.8rem;
  border-radius: 5px;
  background-color: #3ba70d;
}

button:hover {
  cursor: pointer;
  box-shadow: 0 0 0 1px white;
}

input,
select {
  color: whitesmoke;
  padding: 10px 0 10px 5px;
  border-radius: 5px;
  border: 1px solid whitesmoke;
  font-size: 1.8rem;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

select:hover {
  cursor: pointer;
  box-shadow: 0 0 0 1px white;
}

header {
  width: 100%;
  height: 10vh;
  background-color: #143d6a;
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 3;
}

.header-main {
      width: 7%;
    color : #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    padding-left: 40px;
}

#timer {
  font-size: 1.4rem;
}

#pageTitle {
  font-size: 1.6rem;
}

.headLogo {
  background-color: #ffffff;
  width: 15%;
  min-width: 25rem;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.headLogo img {
  padding: 20px 35px;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
}

.logoDiamond {
  width: 3rem;
  height: 3rem;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 1;
}

.container {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.sideMenu {
  width: 15%;
  min-width: 25rem;
  height: 90vh;
  background-color: #2e79ca;
  border-right: 3px solid #1c5b91;
  border-bottom: 3px solid #1c5b91;
  z-index: 10;
  left: 0;
  bottom: 0;
  position: fixed;
  transition: left 0.9s ease;
  box-sizing: content-box;
}

.slideTab {
  width: 40px;
  height: 85px;
  background-color: #2e79ca;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -43px;
  border-right: 3px solid #1c5b91;
  border-bottom: 3px solid #1c5b91;
  border-top: 3px solid #1c5b91;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.circle {
  position: absolute;
  top: 50%; /* Vertical center */
  right: -38px;
  width: 34px; /* Circle size */
  height: 34px;
  background-color: #d9d9d9; /* Example color */
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 0.9s ease; /* Smooth rotation effect */
}

.circle::after {
  content: "";
  position: absolute;
  left: 45%;
  top: 50%;
  border: 10px solid transparent;
  border-right-color: black; /* Triangle color */
  border-left: 0;
  transform: translate(-50%, -50%);
}

.open .sideMenu {
  left: -15.1% !important; /* Slide out */
}

/* Styling for when the circle is rotated */
.rotated .circle {
  transform: translateY(-50%) rotate(180deg); /* Rotate 180 degrees */
}

.page h1 {
  font-size: 14px;
}

#hamburger-menu {
  cursor: pointer;
  padding-right: 15px;
}

.page span {
  font-size: 12px;
}

#hamburger-menu .bar1,
#hamburger-menu .bar2,
#hamburger-menu .bar3 {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

/* Animation styles */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

#menu-box {
  position: fixed;
  right: 0;
  top: 10vh;
  width: 250px;
  max-height: 0;
  background-color: #2e79ca;
  overflow: hidden;
  transition: max-height 0.9s ease;
  display: flex;
  flex-direction: column;
  font-size: 1.8rem;
  color: #ffffff;
  z-index: 99;
}

#menu-box p {
  padding: 30px 20px;
  font-size: 1.6rem;
  color: #ffffff;
  text-align: center;
}

#contentBody {
  width: 85%;
  /*height: 100vh;*/
  margin-top: 10vh;
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  transition: width 0.9s ease-in-out;
}

#loginForm {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 20px;
  top: 25vh;
  border-style: solid;
  border-width: 4px;
  border-color: #d3d3d3 #696969 #696969 #d3d3d3;
  border-radius: 10px;
  background-color: #143d6a;
  padding: 50px;
  align-items: center;
}

#loginForm input {
  text-align: center;
  width: 60%;
  background-color: #4c95e3;
}

#loginForm input:first-child {
  margin-top: 80px;
}

#errorBox {
  color: red;
  font-size: 1.6rem;
}

.formHeader {
  color: #ffffff;
  font-size: 2.2rem;
}

.dropLink {
  padding: 10px;
}

.highcharts-root {
  font-size: 1.6rem !important;
}

#menuContent {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menuContent input,
#menuContent select {
  background-color: #2469b3;
  width: 70%;
  margin: 5px;
}

#menuContent select option:disabled {
  color: #dedede;
}

#menuContent select:hover {
  cursor: pointer;
  box-shadow: 0 0 0 1px white;
}

#menuContent input::placeholder {
  color: whitesmoke;
}

#menuContent label {
  font-size: 1.8rem;
  color: white;
}

#menuContent button {
  margin: 5px;
  width: 70%;
}

#menuContent form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.separator {
  background-color: #5da6f5;
  height: 2px;
  width: 75%;
  margin: 10px;
}

#menuContent form .resButt {
  background-color: #ce0f0f;
}

#menuContent form div > * {
  padding: 10px 15px;
  border-radius: 5px;
  width: 95%;
}

#menuContent form h4 {
  font-size: 1.5rem;
}

#menuContent ul {
  width: 90%;
}

#menuContent ul li {
  margin-top: 20px;
  width: 100%;
}

#menuContent ul li a {
  background-color: #2469b3;
  border: 1px solid #5da6f5;
  display: block;
  width: 100%;
  padding: 8px 15px;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 2rem;
  color: whitesmoke;
}

#menuContent ul li .active-submenu {
  border: 2px solid whitesmoke;
  background-color: #3ba70d;
}

#menuContent ul li .active-submenu:hover {
  box-shadow: none;
}

#menuContent ul li a:hover {
  cursor: pointer;
  box-shadow: 0 0 0 1px white;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-top: 25px;
}

.pagination a,
.pagination span,
.entries-info {
  margin: 0 5px;
  padding: 5px 10px;
  text-decoration: none;
  color: #fff;
  font-size: 1.6rem;
  border: 2px solid transparent; /* Adjust color as needed */
}

.pagination a:hover,
.pagination .current-page {
  background-color: #1100ff; /* Adjust color as needed */
  border-color: #666; /* Adjust color as needed */
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}

.pagination-prev,
.pagination-next {
  font-weight: bold;
}

.countWrap {
  width: 100%;
  text-align: center;
}

.page {
  width: 90%;
  max-width: 90%;
  height: auto;
  margin: 20px auto;
  padding: 5px;
  box-sizing: border-box;
  position: relative;
  background-color: #fff;
  page-break-after: always;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
  overflow: visible;
}

/* Content wrapper to overlay on the aspect ratio box */
.page-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
}

/* Loading screen styles */
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* Full viewport height */
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-content p {
  margin-top: 20px;
  font-size: 1.2em;
}

.page-content {
  padding: 20px;
  box-sizing: border-box;
}

/* Screen styles */
#printArea {
  display: none;
}

.page-header,
.page-footer {
  /*flex-shrink: 0;  Prevents shrinking */
  width: 100%;
}

.page-header {
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ddd;
}

.page-header div {
  display: flex;
  justify-content: space-between;
}

.page-content {
  /*flex-grow: 1;  Allows content to grow and take up available space */
  padding: 5px;
  box-sizing: border-box;
}

.page {
  overflow: hidden;
}

.all-agency-types-title {
  margin-top: 5px;
  font-size: 16px;
}

.single-agency-type {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.single-agency-header {
  text-align: center;
  width: 100%;
  font-size: 24px;
  margin-bottom: 20px;
}

.total-events-label {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
}

.battalion-list {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.battalion-list li {
  font-size: 16px;
  margin-bottom: 5px;
}

.battalion-list p {
  font-weight: bold;
  margin-top: 10px;
}

#reportMeasurementArea,
#reportMeasurementArea *,
#reportMeasurementArea *::before,
#reportMeasurementArea *::after {
  transform: none !important;
  transform-origin: initial !important;
  zoom: 1 !important; /* Reset any zoom applied */
  font-size: initial !important; /* Reset font size */
  box-sizing: content-box !important;
}

/* reportStyles.css */

/* Container for all-agency-types */
.all-agency-types {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Label container */
.label-container {
  padding: 10px;
  width: 100%;
}

/* Title label */
.label-title {
  text-align: center;
  font-size: 16px;
  margin-bottom: 15px;
}

/* Agency label */
.agency-label {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 5px 0;
  font-size: 14px;
}

/* Total label */
.total-label {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  padding: 10px 0;
  font-size: 16px;
}

/* Empty data container */
.all-agency-types.empty {
  text-align: center;
  font-size: 16px;
  color: #666;
}

/* Chart error message */
.chart-error {
  color: red;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}

.incident-type-chart {
  width: 100%;
  padding: 10px; /* Fixed padding, adjust as needed */
  box-sizing: border-box;
}

.agency-label,
.incident-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.total-label {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-top: 10px;
}

.label-title {
  margin-bottom: 10px;
}

.chart-error {
  color: red;
  font-size: 14px;
  text-align: center;
}

button.highcharts-a11y-proxy-element {
  display: none;
}

.spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: auto;
}

.double-bounce1,
.double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2s infinite ease-in-out;
}

.double-bounce2 {
  animation-delay: -1s;
}

@keyframes sk-bounce {
  0%,
  100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

.battalion-label,
.entry-label {
  display: flex;
  justify-content: space-between;
}

.tool-row {
  width: 100%;
  padding: 45px;
  display: flex;
  gap: 30px;
  font-size: 18px;
}

.report-status {
  width : 74%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: 100px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
}

.report-status.hidden {
  display: none;
}

.progress-bar-bg {
  width: 250px;
  position: relative;
  height: 14px;
  background-color: #ccc;
  overflow: visible; /* changed from hidden */
  border-radius: 7px;
}

.progress-bar-fill {
  height: 100%;
  background-color: #3b82f6; /* ENS blue or customize */
  width: 0%;
  transition: width 0.3s ease;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

#progressIcon {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%); /* centers vertically */
  width: 24px;
  height: 24px;
  transition: left 0.2s ease;
  pointer-events: none;
}

progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 5px;
}
progress::-webkit-progress-value {
  background-color: #2a9fd6; /* ENS blue or use brand primary */
  border-radius: 5px;
}