styles.css

/* MAIN BODY settings */
body
{
    border: 0px;
    margin: 0px;
    padding: 0px;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    font-family: "Times New Roman", serif;
}

p {
    font-family: "Times New Roman", serif;
}


/* BUTTON settings */
button 
{
  font-family: "Times New Roman", serif;
}

/* NAV BAR settings */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #000000;
  height: 100%; 
  position: fixed;
  overflow: auto; 
}

li a {
  display: block;
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #ddd;
  color: black;
}

/* To use ACTIVE status on nav bar, add class = "active" to link */
.active {
  background-color: #8B008B;
  color: white;
}


/* HEADER IMAGE settings */
.header-imm {
  background-image: url("./imm-header.jpg");
  height: 150px;
  width: 100%;
  left: 200px;
  position: fixed;
  background-position: center;
  border: 2px solid #191970; 
}



/* HOMEPAGE settings */
.outside {
  position: fixed;
  bottom: 50px;
}

.home {
  display: none;
  position: absolute;
  top: 200px;
  left: 250px;
  right: 400px;
  height: 600px;
  padding: 20px;
  border: 3px solid #c71585;
  border-radius: 20px;
  font-family: "Times New Roman", serif;
  z-index: 7;
  overflow-y:auto;

}

.homepage {
  position: absolute;
  top: 200px;
  left: 250px;
  right: 400px;
  height: 600px;
  padding: 20px;
  border: 3px solid #c71585;
  border-radius: 20px;
  font-family: "Times New Roman", serif;
  z-index: 7;
  overflow-y:auto;
}


.agree {
  display: none;
  background-color: white; 
  position: absolute;
  margin: 0 auto;
  width: 80%;
  top: 200px;
  left: 250px;
  padding: 10px;
  border: 3px solid #c71585;
  border-radius: 20px;
  text-align: center;
  font-family: "Times New Roman", serif;
  z-index: 9;
}

/* Set a style for the add data button */
.agree .btn {
  background-color: #dc143c;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 50%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* TABLE settings */
.homepage .table-flow{
  position: absolute;
  left: 50px;
  border: 3px solid #c71585;
  z-index: 8;
}

.table-flow tr:nth-child(even) {
  background-color: #f1f1f1;
}


/* TOP */
/* LEFT ALIGNED FORMS */
/* Button to open input forms (add donor, add comp, add member) */
.open-button-l {
  background-color: #8b008b;
  color: white;
  padding: 16px 20px;
  border: none;
  position: absolute;
  top: 200px;
  left: 250px;
  width: 150px;
  height: 150px;
  border: 3px solid #4b0082;
  border-radius: 20px;
  font-size: 18px;
  font-family: "Times New Roman", serif;
}

/* Popup form to add data, hidden by default */
.form-popup-l {
  display: none;
  position: absolute;
  top: 200px;
  left: 250px;
  border: 3px solid #8b008b;
  z-index: 9;
  border-radius: 20px;
}

/* The form container when visible */
.form-container-l {
  max-width: 250px;
  padding: 10px;
  background-color: white;
  border-radius: 20px;
}

/* Full-width input fields */
.form-container-l input[type=text] {
  width: 90%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container-l input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the add data button */
.form-container-l .btn {
  background-color: #4b0082;
  color: white;
  padding: 16px 20px;
  border: none;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container-l .cancel {
  background-color: #ddd;
}

/* Add hover effects to buttons */
.form-container-l .btn:hover, .open-button:hover {
  opacity: 1;
}


/* CENTER ALIGNED FORMS (previously top right, thus descrepancy in naming) */
/* Button to open input forms (add assay, edit member) */
.open-button-r {
  background-color: #c71585;
  color: white;
  padding: 16px 20px;
  border: none;
  position: absolute;
  top: 200px;
  left: 600px;
  width: 150px;
  height: 150px;
  border: 3px solid #dc143c;
  border-radius: 20px;
  font-size: 18px;
  font-family: "Times New Roman", serif;

}

/* Button to open top stacked input forms (add marker) */
.open-button-rtop {
  background-color: #c71585;
  color: white;
  padding: 16px 20px;
  border: none;
  position: absolute;
  top: 200px;
  left: 600px;
  width: 150px;
  height: 70px;
  border: 3px solid #dc143c;
  border-radius: 20px;
  font-size: 14px;
  font-family: "Times New Roman", serif;
}

/* Button to open bottom stacked input forms (add flow panel) */
.open-button-rbottom {
  background-color: #c71585;
  color: white;
  padding: 16px 20px;
  border: none;
  position: absolute;
  top: 275px;
  left: 600px;
  width: 150px;
  height: 70px;
  border: 3px solid #dc143c;
  border-radius: 20px;
  font-size: 14px;
  font-family: "Times New Roman", serif;
}

/* Popup form to add data, hidden by default */
.form-popup-r {
  display: none;
  position: absolute;
  top: 200px;
  left: 600px;
  border: 3px solid #c71585;
  z-index: 9;
  border-radius: 20px;
}

/* The form container when visible */
.form-container-r {
  max-width: 250px;
  padding: 10px;
  background-color: white;
  border-radius: 20px;
}

/* Full-width input fields */
.form-container-r input[type=text] {
  width: 90%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container-r input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the add data button */
.form-container-r .btn {
  background-color: #dc143c;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container-r .cancel {
  background-color: #ddd;
}

/* Add hover effects to buttons */
.form-container-r .btn:hover, .open-button:hover {
  opacity: 1;
}


/* RIGHT ALIGNED FORMS (previously bottom center, thus descrepancy in naming) */
/* Button to open input forms (add flow files) */
.open-button-c {
  background-color: #87ceeb;
  color: white;
  padding: 16px 20px;
  border: none;
  position: absolute;
  top: 200px;
  left: 900px;
  width: 150px;
  height: 150px;
  border: 3px solid #6a5acd;
  border-radius: 20px;
  font-size: 18px;
  font-family: "Times New Roman", serif;
}


/* Popup form to add data, hidden by default */
.form-popup-c {
  display: none;
  position: absolute;
  top: 200px;
  left: 900px;
  border: 3px solid #87ceeb;
  z-index: 9;
  border-radius: 20px;
}

/* The form container when visible */
.form-container-c {
  max-width: 250px;
  padding: 10px;
  background-color: white;
  border-radius: 20px;
}

/* Full-width input fields */
.form-container-c input[type=text] {
  width: 90%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container-c input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the add data button */
.form-container-c .btn {
  background-color: #6a5acd;
  color: white;
  padding: 16px 20px;
  border: none;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container-c .cancel {
  background-color: #ddd;
}

/* Add hover effects to buttons */
.form-container-c .btn:hover, .open-button:hover {
  opacity: 1;
}

/* FAR RIGHT ALIGNED FORMS */
/* Button to open input forms (add flow files) */
.open-button-rr {
  background-color: #483d8b;
  color: white;
  padding: 16px 20px;
  border: none;
  position: absolute;
  top: 200px;
  left: 1200px;
  width: 150px;
  height: 150px;
  border: 3px solid #191970;
  border-radius: 20px;
  font-size: 18px;
  font-family: "Times New Roman", serif;
}


/* Popup form to add data, hidden by default */
.form-popup-rr {
  display: none;
  position: absolute;
  top: 200px;
  left: 1200px;
  border: 3px solid #483d8b;
  z-index: 9;
  border-radius: 20px;
}

/* The form container when visible */
.form-container-rr {
  max-width: 250px;
  padding: 10px;
  background-color: white;
  border-radius: 20px;
}

/* Full-width input fields */
.form-container-rr input[type=text] {
  width: 90%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container-rr input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the add data button */
.form-container-rr .btn {
  background-color: #191970;
  color: white;
  padding: 16px 20px;
  border: none;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container-rr .cancel {
  background-color: #ddd;
}

/* Add hover effects to buttons */
.form-container-rr .btn:hover, .open-button:hover {
  opacity: 1;
}



/* BOTTOM */
/* LEFT ALIGNED FORMS */
/* Button to open input forms (edit donor, edit comp) */
.open-button-lb {
  background-color: #8b008b;
  color: white;
  padding: 16px 20px;
  border: none;
  position: absolute;
  top: 500px;
  left: 250px;
  width: 150px;
  height: 150px;
  border: 3px solid #4b0082;
  border-radius: 20px;
  font-size: 18px;
  font-family: "Times New Roman", serif;
}

/* Popup form to add data, hidden by default */
.form-popup-lb {
  display: none;
  position: absolute;
  top: 500px;
  left: 250px;
  border: 3px solid #8b008b;
  z-index: 9;
  border-radius: 20px;
}

/* The form container when visible */
.form-container-lb {
  max-width: 250px;
  padding: 10px;
  background-color: white;
  border-radius: 20px;
}

/* Full-width input fields */
.form-container-lb input[type=text] {
  width: 90%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container-lb input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the add data button */
.form-container-lb .btn {
  background-color: #4b0082;
  color: white;
  padding: 16px 20px;
  border: none;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container-lb .cancel {
  background-color: #ddd;
}

/* Add hover effects to buttons */
.form-container-lb .btn:hover, .open-button:hover {
  opacity: 1;
}


/* CENTER ALIGNED FORMS (previously top right, thus descrepancy in naming) */
/* Button to open input forms (edit assay, edit fluor/panel) */
.open-button-rb {
  background-color: #c71585;
  color: white;
  padding: 16px 20px;
  border: none;
  position: absolute;
  top: 500px;
  left: 600px;
  width: 150px;
  height: 150px;
  border: 3px solid #dc143c;
  border-radius: 20px;
  font-size: 18px;
  font-family: "Times New Roman", serif;

}

/* Button to open top stacked input forms (add marker) */
.open-button-rtopb {
  background-color: #c71585;
  color: white;
  padding: 16px 20px;
  border: none;
  position: absolute;
  top: 500px;
  left: 600px;
  width: 150px;
  height: 70px;
  border: 3px solid #dc143c;
  border-radius: 20px;
  font-size: 14px;
  font-family: "Times New Roman", serif;
}

/* Button to open bottom stacked input forms (add flow panel) */
.open-button-rbottomb {
  background-color: #c71585;
  color: white;
  padding: 16px 20px;
  border: none;
  position: absolute;
  top: 575px;
  left: 600px;
  width: 150px;
  height: 70px;
  border: 3px solid #dc143c;
  border-radius: 20px;
  font-size: 14px;
  font-family: "Times New Roman", serif;
}

/* Popup form to add data, hidden by default */
.form-popup-rb {
  display: none;
  position: absolute;
  top: 500px;
  left: 600px;
  border: 3px solid #c71585;
  z-index: 9;
  border-radius: 20px;
}

/* The form container when visible */
.form-container-rb {
  max-width: 250px;
  padding: 10px;
  background-color: white;
  border-radius: 20px;
}

/* Full-width input fields */
.form-container-rb input[type=text] {
  width: 90%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container-rb input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the add data button */
.form-container-rb .btn {
  background-color: #dc143c;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container-rb .cancel {
  background-color: #ddd;
}

/* Add hover effects to buttons */
.form-container-rb .btn:hover, .open-button:hover {
  opacity: 1;
}


/* RIGHT ALIGNED FORMS (previously bottom center, thus descrepancy in naming) */
/* Button to open input forms (add flow files) */
.open-button-cb {
  background-color: #87ceeb;
  color: white;
  padding: 16px 20px;
  border: none;
  position: absolute;
  top: 500px;
  left: 900px;
  width: 150px;
  height: 150px;
  border: 3px solid #6a5acd;
  border-radius: 20px;
  font-size: 18px;
  font-family: "Times New Roman", serif;
}


/* Popup form to add data, hidden by default */
.form-popup-cb {
  display: none;
  position: absolute;
  top: 500px;
  left: 900px;
  border: 3px solid #87ceeb;
  z-index: 9;
  border-radius: 20px;
}

/* The form container when visible */
.form-container-cb {
  max-width: 250px;
  padding: 10px;
  background-color: white;
  border-radius: 20px;
}

/* Full-width input fields */
.form-container-cb input[type=text] {
  width: 90%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container-cb input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the add data button */
.form-container-cb .btn {
  background-color: #6a5acd;
  color: white;
  padding: 16px 20px;
  border: none;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container-cb .cancel {
  background-color: #ddd;
}

/* Add hover effects to buttons */
.form-container-cb .btn:hover, .open-button:hover {
  opacity: 1;
}



/* Signature */
.bottomsig {
  bottom: 20px;
  right: 20px;
  position: fixed;
  color:#dcdcdc
}