p { font-family: sans-serif; }

h1 { font-family: sans-serif; }

h2 { font-family: sans-serif; }

* {
  box-sizing: border-box;
}

#myInput {
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: rgb(255, 143, 246);
  color: white;
  transform: rotateY(180deg);
}

/* Create a sticky/fixed navbar */
#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 90px 10px; /* Large padding which will shrink on scroll (using JS) */
  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
  position: fixed; /* Sticky/fixed navbar */
  width: 100%;
  top: 0; /* At the top */
  z-index: 99;
}

/* Style the navbar links */
#navbar a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo */
#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}

/* Links on mouse-over */
#navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link */
#navbar a.active {
  background-color: dodgerblue;
  color: white;
}

/* Display some links to the right */
#navbar-right {
  float: right;
}

/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
@media screen and (max-width: 580px) {
  #navbar {
    padding: 20px 10px !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
}

/* Strike-through */
.strikethrough {
  text-decoration: line-through;
}

/* Rounded picture for profile */
.rounded-image {
  border-radius: 50%;
            overflow: hidden;
            width: 100%; /* Set the desired width */
            height: 100%; /* Set the desired height */
}

.rounded-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Rounded picture for profile (navbar) */
.profile-picture {
  border-radius: 50%;
  overflow: hidden;
  /*width: 50px; /* Set the desired width */
  height: 100%; /* Set the desired height */
}

/* three boxes per row */
.one-third-box {
  width: 30%;  /* Set the width of each card to 30% to fit three cards in a row */
  margin: 1%;  /* Add margin for spacing between cards */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  float: left;  /* Float the cards to make them appear in a row */
  border: 1px solid #ddd; /* Add a border for visual separation */
  padding: 15px; /* Add padding for space inside the card */
}

/* Header Style */
/* Style 9
   ----------------------------- */
.nine h1 {
  text-align:center; font-size:50px; text-transform:uppercase; color:#222; letter-spacing:1px;
  font-family:"Playfair Display", serif; font-weight:400;
}
.nine h1 span {
  margin-top: 5px;
    font-size:15px; color:#444; word-spacing:1px; font-weight:normal; letter-spacing:2px;
    text-transform: uppercase; font-family:"Raleway", sans-serif; font-weight:500;

    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 27px 0;
    grid-gap: 20px;
    align-items: center;
}

.nine h1 span:after,.nine h1 span:before {
    content: " ";
    display: block;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    height: 5px;
  background-color:#f8f8f8;
}

/* material design icons styler */
/* font size */
.material-icons-round.md-20 { font-size: 20px; }
.material-icons-round.md-24 { font-size: 24px; }
.material-icons-round.md-28 { font-size: 28px; }
.material-icons-round.md-32 { font-size: 32px; }
.material-icons-round.md-36 { font-size: 36px; }
.material-icons-round.md-40 { font-size: 40px; }
.material-icons-round.md-44 { font-size: 44px; }
.material-icons-round.md-48 { font-size: 48px; }
.material-icons-outlined.md-32 { font-size: 32px; }
.material-icons-outlined.md-48 { font-size: 48px; }
.material-icons-outlined.md-80 { font-size: 80px; }


/* colors */
.material-icons-round.is-green { color: forestgreen }  
.material-icons-round.is-red { color: red; }  
.material-icons-round.is-blue { color: rgb(25, 0, 255); }
.material-icons-round.is-amber { color: rgb(255, 174, 0); }
.material-icons-round.is-grey { color: rgb(99, 99, 99); }
.material-icons-round.is-approved { color: #0EDC53; }
.material-icons-round.is-pending { color: #E78E06; }
.material-icons-round.is-primary { color: hsl(171, 100%, 41%) }
.material-icons-outlined.is-amber { color: rgb(255, 174, 0); }
.material-icons-outlined.is-primary { color: hsl(171, 100%, 41%) }
.material-icons-outlined.is-danger { color: hsl(348, 100%, 61%) }

/* Centered Box hovering */
.centered-box {
  top: 50%;
  left: 50%;
  border-radius: 20px; /* Adjust the value to control the roundness of the edges */
  transform: translate(-50%, -50%);
  background-color: #fff; /* Set your preferred background color */
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add a box shadow for better visibility */
  z-index: 9999; /* Set a high z-index to make it appear above other elements */
  position: fixed; /* Add position: relative to allow absolute positioning of child elements */
  display: inline-block; /* Set to inline-block to only take as much width as needed */
  max-height: 80vh; /* Set a maximum height (80% of the viewport height) */
  max-width: 80vw; /* Set a maximum width (80% of the viewport width) */
  overflow: auto; /* Allow vertical and horizontal scrolling if needed */
}


/* Add padding to table cells */
.centered-box table {
  width: 100%;
  border-collapse: collapse;
}

.centered-box table th,
.centered-box table td {
  padding: 10px; /* Adjust the padding as needed */
  border: 1px solid #ddd; /* Optional: Add border for cell separation */
  text-align: left; /* Optional: Adjust text alignment */
}

/* close icon within box */
.close-icon {
  cursor: pointer;
  font-size: 20px;
  color: #333; /* Close icon color */
  position: absolute;
  top: 10px;
  right: 10px;
}

/* overlay over whole viewport */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Dark overlay color */
  z-index: 9998; /* Set a z-index lower than the centered box */
}

/* hidden: display none  */
.hidden {
  display: none;
}