div, header, footer {
/*   border: solid 1px; */
}

#footer, #menu_title, #sides_title {
  font-family: Arial, Helvetica, san-serif;
  font-weight: bolder;
}

body {
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, san-serif;
  /*height: 100vh;*/
  margin: 0px;
  /*background-color: #00ae00;*/
  background-color: #C2E0D1;
/* background-color: #FFCC00; */
/* background-color: #FFD633; */
}

a {
  color: #1F5C3D;
  text-decoration: none;
  font-family: serif;
}

a:hover {
  color: #523370;
}

h1 {
  text-align: center;
  font-family: dancing_script_otregular;
  color: #523370;
  font-size: 2.8em;
}

#menu, #sides {
  flex: 0 1 auto;
  text-align: center;
}

#container, #container2 {
  display: flex;
  /*height: 100%;*/
  flex-direction: column;
  flex: 1;
}

#menu, #sides {
  /*flex: 0 0 8em;*/
}

#main {
  display: flex;
  flex-direction: column;
  /*width: 100%;*/
  flex: 1;
/*   opacity: .75; */
}

#recipe {
  /*height: 100%;*/
/*   background-color: #e8ffe8; */
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  flex: 1;
/* background-color: #FFF0B2; */
  padding: 1em;
/*   background-color: ffffff; */
  background: rgba(255, 255, 255, 0.75);
}

#menu_title, #sides_title, #footer {
  /*color: #e8ffe8;*/
  font-size: 1.5em;
  color: #523370;
}

#title, #footer {
  text-align: center;
}

#footer {
  font-size: .7em;
}

#menu {
}


#breadcrumbs {
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: .3em;
  padding-bottom: .5em;
  background-color: #297A52;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em;
}

#breadcrumbs a.BreadCrumb {
  color: #ffd633;
  font-size: 0.85em;
  font-weight: 600;
  text-decoration: none;
}

#breadcrumbs a.BreadCrumb:hover {
  color: #ffffff;
  text-decoration: underline;
}

#breadcrumbs span.BreadCrumb {
  color: #ffffff;
  font-size: 0.85em;
  font-weight: bold;
}

.crumbDiv {
  height: 1.1em;
  width: auto;
  vertical-align: middle;
  position: relative;
  top: 0.1em;
}

#ingredients {
  padding-left: 0;
  margin-left: 0;
}

#ingredients li {
  list-style: none;
  padding-left: 2.5em;
  position: relative;
}

#ingredients li::before {
  content: "";
  position: absolute;
  left: -0.35em;
  top: 0.35em;
  height: 1.1em;
  width: 3.25em;
  background: url('/gatorgreen.svg') no-repeat left center;
  background-size: auto 1.1em;
}

#gator_right, #gator_left {
  /*width: 20%;
  max-height: 100px;
  max-width: 115px;*/
  /*width: 4.5em;*/
}

#gator_left {
  position: absolute;
  left: 0em;
  top: 0em;
  width: 12em;
  z-index: -1;
}

@media screen and (max-width:599px) {
  #gator_left {
    opacity: 0.2;
    width: 7em;
  }

  #gator_right {
    width: 11em;
    bottom: -1.5em;
    opacity: 0.1;
  }

  #title {
    position: relative;
    margin-bottom: 0.25em;
    padding-top: 0.15em;
  }

  #cajunbytes {
    font-size: 2.25em;
    line-height: 1.05;
    text-shadow: 0 0 0.35em rgba(255, 255, 255, 0.85);
  }

  #menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15em 0.35em;
    max-width: 100%;
    padding: 0 0.25em 0.35em;
    box-sizing: border-box;
  }

  #menu a {
    padding: 0.15em 0.5em;
    font-size: 0.9em;
  }

  #main {
    margin-left: 0;
    margin-right: 0;
  }

  #recipe {
    padding: 0.75em;
  }

  #breadcrumbs {
    padding-top: 0.2em;
    padding-bottom: 0.35em;
  }

  #footer {
    margin-top: 0.25em;
    padding: 0.25em 0;
  }

  #sides_title {
    margin-top: 0.5em;
  }

  .recipe-title-row h1 {
    font-size: clamp(3.32em, 15.6vw, 3.9em);
    line-height: 1.08;
  }

  body {
    overflow-x: clip;
  }
}

#gator_right {
  transform: scaleX(-1);
  position: fixed;
  right: 0em;
  bottom: -3.5em;
  width: 30em;
  z-index: -1;
  opacity: .25;
}

#cajunbytes {
  font-family: dancing_script_otregular;
  /*color: #e8ffe8;*/
  /*color: #1F5C3D; */
  color: #523370;
}
  
@font-face {
  font-family: 'dancing_script_otregular';
  src: url('/dancingscript-regular-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
  
#menu a,
#sides a,
#sides .sides-empty {
  display: inline;
  text-align: center;
  padding: 0.175em 1em;
  color: #1f5c3d;
  font-family: serif;
  font-weight: normal;
}

#menu a:hover,
#menu a:focus-visible,
#sides a:hover,
#sides a:focus-visible {
  color: #523370;
}

#menu a:active,
#sides a:active {
  color: #523370;
}

#menu a {
  white-space: nowrap;
}

#sides a {
  white-space: nowrap;
}

#menu_title {
  display: none;
  font-family: dancing_script_otregular;
}

#sides_title {
  display: block;
  font-family: dancing_script_otregular;
  text-align: center;
  margin: 0.75em 0 0.35em;
}

#sides .sides-empty {
  display: block;
  margin: 0;
}

#sides .sides-end-rule {
  border: none;
  border-top: 1px solid rgba(41, 122, 82, 0.35);
  margin: 0.5em 1em 0;
}
  
/*  #menu, #sides {
    flex: 1 0 auto;
  }*/
  
/*   #container {
    flex-direction: column;
  }*/
  
#main {
  width: inherit;
  margin-left: .3em;
  margin-right: .3em;
}

#cajunbytes {
  font-size: 3em;
}

#gator_right {
  /*display: none;*/
}

#recipe_info, #makes_info {
  display: flex;
}

#recipe_cat, #submitted {
  flex: 1;
}

#submitted {
  text-align: right;
}

#time_titles {
  padding-right: .25em;
}

#recipe_category_title, #submitted_by_title {
  font-size: .7em;
}

#recipe_category, #submitted_by {
  font-size: 1.0625em;
}

#makes_info {
  padding-top: .5em;
  font-style: italic;
}

#makes_title {
  padding-right: .25em;
}

.cb-button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.auth-actions a,
.edit-link a,
.recipe-edit-action a,
.recipe-title-print,
.auth-footer a,
.pending-notice-actions button {
  background: #297a52;
  color: #ffd633;
  border: 2px solid #523370;
  border-radius: 0.5em;
  padding: 0.45em 1.25em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 0.95em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-sizing: border-box;
  line-height: 1.3;
}

.cb-button:hover,
button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
.auth-actions a:hover,
.edit-link a:hover,
.recipe-edit-action a:hover,
.recipe-title-print:hover,
.auth-footer a:hover,
.pending-notice-actions button:hover:not(:disabled) {
  background: #523370;
  color: #ffffff;
}

button:disabled,
input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button.danger-button {
  background: #8b2222;
  color: #ffd633;
  border-color: #523370;
}

button.danger-button:hover:not(:disabled) {
  background: #523370;
  color: #ffffff;
}

.themedTable button {
  padding: 0.3em 0.75em;
  font-size: 0.85em;
}

.auth-heading {
  font-size: 1.5em;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 1em;
  color: #523370;
}

.auth-form {
  display: grid;
  gap: 0.75em;
  max-width: 28em;
  margin: 0 auto 1em;
}

.auth-form label {
  display: grid;
  gap: 0.25em;
}

.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auth-actions {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  margin-top: 0.5em;
}

.turnstile-widget {
  margin: 0.25em 0 0.5em;
}

.auth-footer {
  text-align: center;
}

.auth-message {
  margin: 1em auto;
  max-width: 28em;
  text-align: center;
  color: #523370;
}

.auth-cancel {
  align-self: center;
}

.errorMessage {
  color: #c00;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
}

.successMessage {
  color: #1f5c3d;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
}

.pending-notice {
  background: #fff8dc;
  border: 1px solid #d4a017;
  color: #000;
  margin: 0.75em 0;
  padding: 0.75em 1em;
  text-align: center;
}

.pending-notice-actions {
  margin: 0.75em 0 0;
}

.profile-section {
  margin-bottom: 2em;
}

.profile-section h2 {
  font-size: 1.1em;
  margin-bottom: 0.75em;
}

.recipe-form textarea {
  width: 100%;
  font-family: inherit;
}

.duration-fields {
  border: 1px solid #ccc;
  padding: 0.5em 1em;
  margin: 0;
}

.duration-row {
  display: flex;
  gap: 1em;
}

.fraction-row {
  display: flex;
  gap: 1em;
}

.themedTable {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

.themedTable th,
.themedTable td {
  border: 1px solid #ccc;
  padding: 0.35em 0.5em;
  text-align: left;
}

.themedTable .oddline {
  background: #f5f5f5;
}

.themedTable .evenline {
  background: #fff;
}

.category-table-container {
  width: 100%;
  overflow-x: auto;
  margin: 1em 0;
  border: 1px solid #ccc;
}

.category-table {
  width: 100%;
  min-width: 16em;
}

.category-table-title {
  background: #f5f5f5;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: left;
  padding: 0.35em 0.5em;
  border-bottom: 1px solid #ccc;
}

.category-table-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.category-table-cell {
  box-sizing: border-box;
  display: block;
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0.35em 0.5em;
  border-bottom: 1px solid #ccc;
  text-align: left;
}

.category-table-grid > *:nth-child(odd) {
  background: #fff;
}

.category-table-grid > *:nth-child(even) {
  background: #f5f5f5;
}

.category-table-grid > a.category-table-cell:hover {
  background: #eef5ea;
}

.category-table-spacer {
  display: none;
}

@media screen and (min-width: 36em) {
  .category-table-cell:not(.category-table-spacer-3col) {
    flex: 0 0 50%;
    max-width: 50%;
    border-right: 1px solid #ccc;
  }

  .category-table-spacer-2col {
    display: block;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .category-table-grid > *:nth-child(2n) {
    border-right: none;
  }

  .category-table-grid > *:nth-child(4n+1),
  .category-table-grid > *:nth-child(4n+2) {
    background: #fff;
  }

  .category-table-grid > *:nth-child(4n+3),
  .category-table-grid > *:nth-child(4n+4) {
    background: #f5f5f5;
  }
}

@media screen and (min-width: 54em) {
  .category-table-cell:not(.category-table-spacer-2col) {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  .category-table-spacer-2col {
    display: none;
  }

  .category-table-spacer-3col {
    display: block;
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  .category-table-grid > *:nth-child(2n) {
    border-right: 1px solid #ccc;
  }

  .category-table-grid > *:nth-child(3n) {
    border-right: none;
  }

  .category-table-grid > *:nth-child(4n+1),
  .category-table-grid > *:nth-child(4n+2),
  .category-table-grid > *:nth-child(4n+3),
  .category-table-grid > *:nth-child(4n+4) {
    background: #fff;
  }

  .category-table-grid > *:nth-child(6n+1),
  .category-table-grid > *:nth-child(6n+2),
  .category-table-grid > *:nth-child(6n+3) {
    background: #fff;
  }

  .category-table-grid > *:nth-child(6n+4),
  .category-table-grid > *:nth-child(6n+5),
  .category-table-grid > *:nth-child(6n+6) {
    background: #f5f5f5;
  }
}

.sides-checklist {
  display: grid;
  gap: 0.35em;
  margin-bottom: 1em;
}

.side-option {
  display: block;
}

.edit-link {
  margin: 0.5em 0 1em;
}

.recipe-title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 0.75em;
  margin: 1em 0;
}

.recipe-title-row h1 {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin: 0;
  text-align: center;
  font-size: clamp(2.08em, 6.5vw, 3.64em);
  line-height: 1.15;
  max-width: 100%;
}

.recipe-title-print {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  white-space: nowrap;
}

.recipe-edit-action {
  margin: 0 0 1em;
}

.combobox {
  display: grid;
  gap: 0.25em;
  position: relative;
}

.combobox-control {
  position: relative;
}

.combobox-input {
  width: 100%;
  box-sizing: border-box;
}

.combobox-control:focus-within .combobox-input {
  border-color: #523370;
  outline: none;
}

.combobox-control:focus-within .combobox-list {
  border-color: #523370;
}

.combobox-list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 12em;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
  background: #fff;
  border: 1px solid #999;
  border-top: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.combobox-list li {
  display: block;
  padding: 0.4em 0.6em;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.combobox-list li:last-child {
  border-bottom: none;
}

.combobox-list li:hover,
.combobox-list li:focus {
  background: #eef5ea;
  color: #1f5c3d;
}

.ingredient-add-panel {
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid #ccc;
}

.above, .below {
  font-size: 70%;
}

.above {
  vertical-align: 0.7ex;
}

.below {
  vertical-align: -0.3ex;
}

@media screen and (min-width:600px) {
  #title {
    margin-top: 1em;
    margin-bottom: 2em;
  }
  
  #container {
    flex-flow: column;
  }
  
  #container2 {
    flex-flow: row;
  }

  #menu_title {
    display: initial;
  }

  #menu a {
    display: block;
    text-align: left;
    padding-top: 0.275em;
    padding-bottom: 0.275em;
    white-space: normal;
  }

  #menu {
    display: block;
    flex-wrap: unset;
    padding: 0;
    flex: 0 0 8em;
    align-self: flex-start;
  }
  #main {
    flex: 1 auto;
      margin-left: 0;
  }
  #gator_right {
/*     display: initial; */
  }

  #cajunbytes {
    font-size: 5.5em;
  }
  #gator_right, #gator_left {
    /*width: 20%;
    max-height: 100px;
    max-width: 115px;*/
  /*   width: 6.5em; */
  }  
}

@media screen and (max-width:799px) {
  #sides {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  #sides a,
  #sides .sides-empty {
    display: inline;
    text-align: center;
    padding: 0.175em 1em;
    white-space: nowrap;
  }

  #sides_title {
    display: block;
    text-align: center;
    margin: 0.75em 0 0.35em;
  }

  #sides .sides-end-rule {
    display: block;
  }
}

@media screen and (min-width:800px) {
  #container {
    flex-flow: row;
  }
  #sides {
    flex: 0 0 10em;
    align-self: flex-start;
    padding-left: 0.65em;
    box-sizing: border-box;
  }
  #sides_title {
    display: block;
    text-align: left;
    margin: 0 0 0.35em;
  }
  #sides a,
  #sides .sides-empty {
    display: block;
    text-align: left;
    padding-top: 0.275em;
    padding-bottom: 0.275em;
    white-space: normal;
  }

  #sides .sides-end-rule {
    display: none;
  }

  #main {
      margin-right: 0;
  }
}