/* Theme Variables */
:root {
  --primary-color: #ffffff;
  --accent-color: #00837b;
  --link-color: #00837b;
  --primary-border-color: #FCFCFC;
  --secondary-border-color: #F0F0F0;
  --content-border-color: #FAFCFD;
  --text-color: #555A5A;
  --text-secondary-color: #AAAFB9;
  --progress-bar-color: #00837B;
  --black: #000;
  --border-radius: 0.25rem;
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --font-family: "Open Sans", sans-serif;
  --header-footer-margin: 3rem;
  --toast-header-color: #dc3545;
  --breakpoints-xs: 0;
  --breakpoints-sm: 576px;
  --breakpoints-md: 768px;
  --breakpoints-lg: 992px;
  --breakpoints-xl: 1200px;
  --breakpoints-xxl: 1400px;
  --button-background-color: #00837b;
  --button-border-color: #FCFCFC;
  --button-border-radius: 3px;
  --theme-color-success: #28a745;
  --theme-color-info: #17a2b8;
  --theme-color-warning: #ffc107;
  --text-font-size-x-large: 4rem;
  --text-font-size-large: 3rem;
  --text-font-size-medium: 1.5rem;
  --text-font-size-small: 0.8rem;
  --text-font-weight-heavy: 800;
  --text-font-weight-bold: 700;
  --text-font-weight-moderate: 500;
  --text-font-weight-normal: 300;
  --text-font-weight-low: 100;
}

/* Global Styles */
html,
body {
  height: 100%;
  color: var(--text-color);
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header Styles */
.header {
  background-color: var(--primary-color);
  padding: 10px 15px;
  border-bottom: 2px solid var(--primary-border-color); /* Add white border line to header */
  display: flex;
  align-items: center;
  position: sticky; /* Make header sticky */
  top: 0; /* Stick to the top */
  z-index: 1000; /* Ensure it stays above other content */
  box-shadow: var(--box-shadow); /* Add shadow to header */
}

.header .header-title {
  display: flex;
  align-items: center;
}

.header .header-title img {
  max-height: 50px;
  margin-right: 10px;
}

.header .header-title h1 {
  font-size: var(--text-font-size-medium);
  color: var(--text-color);
  margin: 0;
}

/* Main Content Styles */
.main-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  background-color: white;
  margin: 40px auto 20px auto;
  max-width: 800px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius); /* Rounded edges */
}

.errorpage {
  background: url(errorpage.png) center center no-repeat;
  width: 100%;
  max-width: 960px;
  height: 480px;
  position: relative;
}

.errorcontent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.answer {
  font-size: 14px;
  color: #7d7d7d;
}

.answer a {
  color: #6daf3d;
}

.answer a:hover {
  font-weight: bold;
  color: #2895d5;
}

/* Footer Styles */
.footer {
  background-color: #555B5A;
  color: #fff;
  min-height: 65px;
  display: flex;
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  padding: 0 15px;
  box-sizing: border-box;
  flex-wrap: wrap; /* Allow wrapping for smaller screens */
  text-align: center; /* Center text within the footer */
  border-radius: 0 0 var(--border-radius) var(--border-radius); /* Rounded bottom edges */
  position: sticky; /* Make footer sticky */
  bottom: 0; /* Stick to the bottom */
  z-index: 1000; /* Ensure it stays above other content */
}

.footer img {
  max-height: 40px; /* Adjust height as needed */
  margin-right: 10px; /* Space between logo and text */
}

.footer .terms-and-conditions {
  margin-left: 10px; /* Space between logo and text */
}

@media screen and (max-width: var(--breakpoints-lg)) {
  .footer {
    flex-direction: column;
    padding: 1rem;
    min-height: auto; /* Adjust height for smaller screens */
  }

  .footer img {
    margin-right: 0; /* Remove margin for small screens */
    margin-bottom: 10px; /* Add space below the image */
  }

  .footer .terms-and-conditions {
    margin-left: 0; /* Remove margin for small screens */
  }
}