/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #fff7ed;
}

/* Added */
body {
  font-family: "Libre Franklin", sans-serif;
  background-color: #fff7ed;
}

.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
}

h1,h2,h3,h4,h5 {
  font-family: "Permanent Marker", cursive;
}

.navbar {
  background-color: #fff7ed !important;;
}

/* Below specifies the the colors for general tables*/
.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: #dcd1d3; 
 }
 .table-striped>tbody>tr:nth-child(even)>td, 
.table-striped>tbody>tr:nth-child(even)>th {
   background-color: #fff7ed; 
 }

 /* Sets the size of the notification dropdown menu. It also allows wrapping of the words. In practice, it will wrap once
 it reaches the minimum size, instead of wrapping to avoid the max-width. The current max-width seems ignored. But these 
 settings work on desktop and mobile  */
 .dropdown-menu {
  max-width: 80vw;    /* 80% of the viewport width */
  min-width: 300px;
  overflow-x: auto;  /* horizontal scrollbar if needed */
  width: auto;
}
.dropdown-menu .dropdown-item {
  white-space: normal; 
  word-break: normal; 
}