/* @import url('fonts.googleapis.com/css2?family=Roboto&display=swap'); */
@import url('font-face.css');
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin: 10px 0;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 30px;  
}
h3 {
    font-size: 24px;  
}
h4 {
    font-size: 20px;  
}
h5 {
    font-size: 16px;  
}
h6 {
    font-size: 14px;  
}


table {
  /* Optional: Helps with layout control when dealing with long content */
  /* table-layout: fixed;  */
  width: 100%; /* or a fixed pixel value */
  border-collapse: collapse; /* Optional: for better border styling */
  background-color: white;
}

th.value, td.value {
  border: 1px solid black;
  padding: 8px;
  /* Key properties for wrapping long, unbroken words */
  overflow-wrap: normal; /* The standard property */
  word-wrap: break-word; /* Fallback for older browsers */
}


.table-container {
  overflow-x: auto; /* Adds a horizontal scrollbar if needed */
  width: 100%;      /* Ensures the container respects the parent width */
}

.form-frame {
    font-size: 20px;
    border: 3px groove black; /* Red dashed border */
    border-width: 1px;
    background-color: white;
    padding: 15px; /* Adds space between the border and the form content */
    margin: 20px; /* Adds space around the form itself */
    border-radius: 10px; /* Optional: adds rounded corners */
    margin-left: auto; /* Centers the form horizontally */
    margin-right: auto; /* Centers the form horizontally */
    max-width: 400px; /* Optional: limits the maximum width of the form */
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.card-frame {
    font-size: 20px;
    border: 3px groove black; /* Red dashed border */
    border-width: 1px;
    background-color: white;
    padding: 15px; /* Adds space between the border and the form content */
    /* margin: 20px; /* Adds space around the form itself */
    border-radius: 10px; /* Optional: adds rounded corners */
    /* margin-left: auto; /* Centers the form horizontally */
    /* margin-right: auto; /* Centers the form horizontally */
    max-width: 400px; /* Optional: limits the maximum width of the form */
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

img.view-password-icon {
    width: 20px; /* Set the width of the icon */
    height: 20px; /* Set the height of the icon */
    cursor: pointer; /* Change cursor to pointer on hover */
    vertical-align: middle; /* Aligns the icon vertically with the input field */
    margin-left: 5px; /* Adds some space between the input field and the icon */
}
img.view-password-icon:hover {
    opacity: 0.7; /* Optional: adds a hover effect */
}

.my-button {
  background-color: #a92857; /* Maroon background */
  border: none;             /* Remove default border */
  color: white;           /* White text color */
  margin: 8px;             /* Space around the button */
  padding: 15px 32px;       /* Spacing inside the button */
  height: 50px;             /* Fixed height */
  text-align: center;       /* Center the text */
  text-decoration: none;    /* Remove underline (if it were a link styled as a button) */
  display: inline-block;    /* Allows for proper margin/padding/width */
  font-size: 16px;          /* Increase font size */
  cursor: pointer;          /* Change cursor to a hand pointer on hover */
  border-radius: 8px;       /* Rounded corners */
  transition: background-color 0.3s; /* Smooth transition for hover effect */
  /* box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); */
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
/* Add an interactive hover effect */
.my-button:hover {
  background-color: #003399; /* Darker green when hovering */
}

.my-small-button {
  background-color: #a92857; /* Maroon background */
  border: none;             /* Remove default border */
  color: white;           /* White text color */
  margin: 8px;              /* Space around the button */
  padding: 5px;            /* Spacing inside the button */
  height: 26px;             /* Fixed height */
  text-align: center;       /* Center the text */
  text-decoration: none;    /* Remove underline (if it were a link styled as a button) */
  display: inline-block;    /* Allows for proper margin/padding/width */
  font-size: 14px;          /* Increase font size */
  cursor: pointer;          /* Change cursor to a hand pointer on hover */
  border-radius: 8px;       /* Rounded corners */
  transition: background-color 0.3s; /* Smooth transition for hover effect */
  /* box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); */
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
/* Add an interactive hover effect */
.my-small-button:hover {
  background-color: #003399; /* Darker green when hovering */
}




/* Styles to control the progress bars */
.progress-container {
  width: 100%;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 20px;
}

.progress-bar {
  width: 0%;
  height: 30px;
  background-color: #4caf50;
  text-align: center;
  line-height: 30px;
  color: white;
  border-radius: 5px;
}




ul.flashes {
    list-style-type: none; /* Remove default list styling */
    padding: 0;            /* Remove default padding */
    margin: 0;             /* Remove default margin */
}
/* ------ python flask flash messages ------ */
/* jinja2 flash to div error message*/
div.ERROR {
    height: 25px;
    max-height:25px;
    color: red;
    font-size: 16px;
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: center; 
} 

/* jinja2 flash to div warning message */
div.WARNING {
    height: 25px;
    max-height:25px;
    display: inline-block;
    color: orange;
    font-size: 16px;
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: center; 
}

/* jinja2 flash to div success message */
div.SUCCESS {
    height: 25px;
    max-height:25px;
    color: green;
    font-size: 16px;
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: center; 
}

/* jinja2 flash to div information message */
div.INFO {
    height: 25px;
    max-height:25px;
    color: black;
    font-size: 16px;
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: center; 
}

/* Base styles for the sidebar on larger screens */
.sidebar {
  padding: 5px 20px 0px 0px;  
  width: 200px; /* Use relative units like % or vw for more flexibility */
  background-color: #f3f3f3;
  position: fixed; /* Fixes the sidebar position */
  height: 100%;
  overflow: auto; /* Adds scrollbar if content exceeds height */
}
.sidebar a {
  display: block; /* Makes links stack vertically */
  color: #252a57;
  padding: 16px;
  text-decoration: none;
  border-radius: 12px;
  /* box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; */
  /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; */
  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
  box-shadow: rgba(44, 42, 42, 0.6) 0px 3px 8px;
}
.sidebar a.active {
  background-color: #a4a4a4;
  color: white;
}
.sidebar a:hover:not(.active) {
  border-radius: 12px;
  background-color: #555;
  color: white;
}











/* Styles for the main content area */
.content {
    margin-left: 50x; /* Matches the sidebar width */
    padding: 1px 26px;
    /* height : 1000px; /* For demonstration purposes */
    background-color: #f0f0f0;
}
.content h1 {
    text-align: center;
}
.content h2 {
    text-align: center;
}



/* Media Query: Changes the layout when screen width is 700px or less */
/* This is for phone held sideways */
@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%; /* Full width on mobile */
    height: auto;
    position: relative; /* Becomes part of the normal document flow */
  }
  .sidebar a {
    /* float: left;  Makes links display side-by-side in the top bar */
    padding: 15px;
  }
  .content {
    background-color: #e2d6c9;
    float: left;
    margin-left: 0; /* Content takes up full width below the top bar */
  }
}
/* this is for phone held normally */
@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center; /* Center-align links on very small screens */
    float: none; /* Stack links vertically */
    }
 
  .content {
    background-color: #eedac2;
    margin-left: 0; /* Content takes up full width below the top bar */
  }
}