/* Fonts */
/* FROM THE FINAL DESIGN DOCUMENT:
For the header, I will use: https://fonts.google.com/specimen/Arvo 
For the title of the page, I will use: https://fonts.google.com/specimen/Lexend 
For the sub-headings, I will use: https://fonts.google.com/specimen/Montserrat
For the normal text, I will use: https://fonts.google.com/noto/specimen/Noto+Sans
For the h3 text, I will use: https://fonts.google.com/specimen/Gantari
*/
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Gantari:ital,wght@0,100..900;1,100..900&family=Lexend:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* GENERAL SETTINGS */

/* Ensures that footer stays at bottom
even if the page is too short */
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* Reduced width for main content */
section {
  margin-left: 20vw !important;
  margin-right: 20vw !important;
}

/* GENERAL STYLING */
/* Adding fonts */
/* the "GrantMatcher" text on the navigation bar */
#navbar-brand {
  font-family: "Arvo", serif;
  font-style: normal;
}

/* page title */
h1 {
  font-family: "Lexend", sans-serif;
  font-size: 28px !important;
  font-optical-sizing: auto;
  padding-top: 15px; /* adds spacing between nav-bar and the title */
  font-style: normal;
}

/* subheadings */
h2 {
  font-size: 24px !important;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-transform: uppercase; /* make it all uppercase */
}

h3 {
  font-size: 20px !important;
  font-family: "Gantari", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

h4 {
  font-size: 18px !important;
  font-family: "Gantari", sans-serif;
}

/* normal text */
* {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

p {
  margin-bottom: 5px !important;
}

/* button styles */
.buttonStyle {
  text-decoration: none;
  cursor: pointer;
  /* makes the button raised (affordances) */
  border: 3px solid black;
  padding: 0.25em 0.50em;
  box-shadow: 1px 1px 0px 0px black, 2px 2px 0px 0px black, 3px 3px 0px 0px black;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.buttonStyle:active {
  box-shadow: 0px 0px 0px 0px black;
  top: 3px;
  left: 3px;
}

.pink {
  background-color: #e02063;
  color: white;
}

.blue {
  background-color: #3eaae3;
  color: black;
}

/* divider styles */
hr {
  height: 0.5px !important;
  opacity: 0.9 !important;
}

.vl {
  border-left: 4px solid black;
  height: 15px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 20px;
}

/* Making a better blockquote (with an actual quote on it) */
blockquote {
  position: relative;
  margin: 0.5em;
  padding: 0.5em 2em 0.5em 3em;
}

blockquote:before {
  font-family: Georgia, serif;
  position: absolute;
  font-size: 6em;
  line-height: 1;
  top:0;
  left:0;
  content: "\201C";
}

blockquote footer {
  padding: 0 2em 0 0;
  text-align: right;
  font-size: 1.4em;
}

blockquote cite:before {
  content: "\2013"
}

/* MEDIA ADAPTIVITY - IMPORTANT FOR RESPONSITIVITY */

/* add more horizontal padding when the screen is large */
@media (min-width: 768px) {
  button {
    padding: 0.25em 1em;
  }
}

/* Make the content fill up the whole screen if the screen itself is small */
@media (max-width: 700px) {
  section {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
}

/* horizontal alignment should collapse when the screen is too small */
@media (max-width: 880px) {
  .together {
    display: block !important;
    align-items: normal !important;
  }

  /* ensures that there is space between the elements */
  .together > * {
    margin-bottom: 15px;
  }
}

/* horizontal alignment should collapse when the screen is too small (especially for
date inputs, which take up a lot of space in the modals */
@media (max-width: 1350px) {
  .datetogether {
    display: block !important;
    align-items: normal !important;
  }
}


/* Reduce the size of the gap between columns that are horizontally aligned when the screen is small */
@media (max-width: 900px) {
  .together {
    gap: 5% !important;
  }
}

/* Expand the blocks in the landing page when the screen is small */
@media (max-width: 550px) {
  .landingRight {
    width: 100% !important;
  }

  .landingLeft {
    width: 100% !important;
  }
}

/* Expand the modal when the screen is small */
@media (max-width: 780px) {
  .modal-body {
    width: 90% !important;
  }
}

/* IMPORTANT CLASSES */
/* Landing Page */
.landingLeft {
  float: left;
  width: 70%;
  border: 2px solid black;
  padding: 10px;
}

.landingRight {
  float: right;
  width: 70%;
  border: 2px solid black;
  padding: 10px;
}

/* On one line */
.together {
  display: flex;
  gap: 10%;
  align-items: center;
}

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

/* Sticky Header */
.navbar {
  /* make sure its always at the top */
  background-color: #272727 !important;
  color: white !important;
  position: sticky !important;
  top: 0;

  /* make sure it doesn't go under other elements */
  z-index: 9999; 
}

/* navbar links transition from visible to hidden */
#navbarNav {
  transition: visibility 0s, opacity 0.5s ease-out;
}

/* navbar links transition from hidden to visible */
#navbarNav.hidden {
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
}

/* navbar brand is big when scrolled up */
.bigBrand {
  font-size: 30px !important;
}

/* navbar brand is small when scrolled down */
.smallBrand {
  font-size: 20px !important;
}

/* navbar brand transition size */
#navbar-brand {
  transition: font-size 1s;
}

/* Tables */
.pagination-controls {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

/* CUSTOM FORM ELEMENTS */
/* Selectors */
.listbox {
  display: inline-grid;
  width: 100% !important;
}

.listboxdiv {
  padding: 0 !important;
  height: 200px;
  overflow-y: scroll;
  border: 2px solid black;
}

.listboxul {
  padding: 0 !important;
}

.listboxligray {
  list-style-type: none;
  background: white;
  padding-left: 10px;
}

.listboxliwhite {
  list-style-type: none;
  background: rgb(190, 190, 190);
  padding-left: 10px;
}

.listboxinput {
  display: flex; 
  width: 100%;
}

.listboxtextdiv {
  flex-grow: 4;
}

.listboxsubmitdiv {
  flex-grow: 1;
}

.listboxtext {
  width: 100% !important;
  height: 100% !important;
}

.listboxsubmit {
  width: 100% !important;
}

/* Cluster Selector */
.clusterselector {
  width: 100% !important;
}

.unselected {
  position: relative;
  float: left !important;
  /* For media responsivity */
  width: 100% !important;
}

.selected {
  position: relative;
  float: right !important;
  /* For media responsivity */
  width: 100% !important;
}

.unselectedClusterButton {
  background-color: #3eaae3;
  /* Media responsivity */
  margin: 10px;
}

.selectedClusterButton {
  background-color: #e02063;
  margin: 10px;
}

/* ensure the text is readable by adding a padding */
.unselectedClusters, .selectedClusters {
  padding: 10px  !important;
}

/* sorting dropdown always floats right */
.clustersort, .tablesort {
  float: right;
}

.tableicons {
  float: left;
}

/* allows x-scroll */
.scrollTableContainer {
  overflow-x: auto;
  width: 100%;
  display: block;
}

/* Customer Radio Button */
input[type=radio] {
  height: 1.1rem;
  width: 1.1rem;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  background-color: #e2bfcb; 
  border: 3px solid #FFF;
  box-shadow: 0 0 0 1px #d25782;
  transition: border 0.4s, background-color 0.5s;
  grid-template-columns: 1em auto;
  
}

input[type=radio]:hover {
  background-color: #fe528e;
  border: 3px solid #fe528e;
  box-shadow: 0 0 0 1px #e02063;
}

input[type=radio]:checked {
  background: #e02063;
  border: 3px solid white;
  box-shadow: 0 0 0 1px #e02063;
}

/* Text fields */
input[type=text], input[type=password] {
  width: 100%;
}

/* Checkbox */
input[type=checkbox] {
  height: 1.2em;
  width: 1.2em;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid black;
  display: inline-block;
  transform: translateY(0.2em);
  background-color: white;
  transition: background-color 0.4s, box-shadow 0.4s;
}

input[type=checkbox]:hover {
  background-color: #ea9ab6;
}

input[type=checkbox]:checked {
  border-color: rgb(0, 0, 0);
  background-color: #e02063;
  box-shadow: inset 0 0 0 2px white;
}

/* ACCORDION */
.accordion {
  width: 100%;
}

.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

/* MODAL */
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

/* Modal Content/Box */
.modal-body {
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  padding: 20px;
  width: 60%;
  max-height: 60vh;
  overflow-y: scroll;
}

/* The Close Button */
.close {
  position: absolute;
  color: #aaa;
  right: 15px;
  top: 15px;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
