/***********************************************************
This file is used to style the Roast Card Website.
  - index.html
******************************************************************/


:root {
  --coffee: #6f4e37; /*Base color, Representing essance and warmth of coffee*/

  --burgundy: #8b0000; /*Highlight and Accents, Adds sophistication elegance*/

  --cream: #f5e6ca; /*backgrounds and text, contrast for comfort and balance*/

  --cream-shaded: #d4c5a8;

  --gold: #d4af37; /*buttons or other important elements,  add a touch of luxury and warmth*/

  --espresso: #2c1e12; /*text and darker accents, provides contrast and elegance.*/
  
  --displayFont: 'Playfair Display', serif;

  --scriptFont: 'pacifico', cursive;

  --contemporaryFont: 'Signika Negative', sans-serif;

  --formalFont: 'Times New Roman', Times, serif;
}

/* Reset some default styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: var(--coffee);
}

::-webkit-scrollbar-thumb {
  background-color: var(--espresso);
  border-radius: 5px;
}

/*****************************************************************
  - Generic Page Styles
******************************************************************/
body {
    font-family: Arial, sans-serif;
    background-color: var(--cream);
    overflow-x: hidden; /* Disable horizontal scroll */
}
h3 {
  color: var(--espresso);
}
/*****************************************************************
  - Header Section
******************************************************************/
.title-desc {
  color: var(--coffee);
  font-family: var(--scriptFont);
}
.title-container {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;
}

header {
    background-color: var(--coffee);
    color: white;
    transition: transform 0.5s ease-in-out; /**IMPORTANT - removes header on-click, JS event attached**/
}

.header-container {
  display:flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}
.header-text h1 {
  margin: 0; /* Remove default margins to ensure consistent spacing */
}

.header-text h4 {
  margin: 0; /* Remove default margins to ensure consistent spacing */
  font-style: italic; /* Apply italic font style */
  color: var(--gold);
}

.header-img, .header-img img {
max-height: 100px;
max-width: 100px;
}
.header-text {
  display: flex;
  flex-direction: column;
  color: var(--cream);
  font-family: var(--scriptFont);
}
.header-text h1 {
  margin-bottom: 10px;
  letter-spacing: 5px;
  font-family: var(--displayFont);
}
.hide-header {
  transform: translateY(-100%);
}
/*****************************************************************
  - Nav / Menu Bar
******************************************************************/

.menubar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--coffee);
  color: white;
}
.menubar-logo {
  display:flex;
  align-items: center;
  gap: 15px;
  color: var(--cream);
}
.menubar-logo img {
  max-height: 50px;
  max-width: 50px;
  }
  .menubar-logo h2 {
    font-family: var(--displayFont);
  }

.menu, .menu a {
  display: flex;
  align-items: center;
  gap: 24px;

  text-decoration: none;
  color: var(--burgundy);
}
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.move-content {
  margin-top: 80px; /* Adjust the Location of the content to account for the header */
}
.menu-button {
  background-color: var(--coffee);
  color: var(--cream);
  border: none;
  text-decoration: none;
  font-size: 18px;
  cursor: pointer;
}
.menu-button:hover {
  color: var(--gold);
}


/*****************************************************************
  - Main Content Area
    - Elements Bar
    - Border Elements
    - Start Container
    - Canvas Container
******************************************************************/

main {
  color: var(--coffee);
  background-color: var(--cream);
}
.content-container {
  display: flex;
  justify-content: flex-end;
  
}
.element-bar {
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  position: fixed;


  left: 0;
  top: 74px;
  padding-bottom: 125px;
  
  min-width: 15%;
  max-width: 20%;

  height: 100%;

  background-color: var(--cream);
  border-right: 1px solid var(--burgundy);
  box-shadow: 4px 0px 10px 0px var(--coffee);

  z-index: 1;
}


.canvas-area {
  display: flex;
  justify-content: center;

  width: 100%;
  min-height: 450px;

  padding-left: 10px;
  padding-right: 10px;
  }
.resizable-container {
  display: flex;
  position: relative;

  padding: 30px;

  z-index: 0;
}
.border {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 20px solid transparent; /* Adjust border width */
  border-image: url('../img/stamp.png') 30 round; /* Adjust image path and slicing */
  z-index: 0;
}
.start-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  max-width: 600px;

  background-color: var(--cream);

  z-index: 1;
}
.start-title {
  text-align: center;
  width: 90%;
  color: var(--espresso);
}
.start-text {
  text-align: left;
  width: 90%;
  color: var(--coffee);
  font-family: var(--contemporaryFont);
}
.subtext {
  font-size: 14px;
  font-family: var(--scriptFont);
  color: var(--espresso);
  text-align: center;
}
.start-button-container {
  display: flex;
  justify-content: center;
  gap: 25px;
  color: var(--coffee);
  font-family: var(--formalFont);
}

.canvas-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  width: 100%;
  height: 100%;
  
  background-color: var(--cream);
  transition: background-color 0.3s;
  z-index: 1;

}

/*****************************************************************
  - Footer Section
******************************************************************/

.footer-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  position: fixed;
  bottom: 0;
  left: 0;

  background-color: var(--coffee);
  
  width: 100%;
  height: 50px;
  z-index: 1;
}
.footer-about {
  color: var(--cream);
  font-size: 15px;
  padding-left: 24px;
  padding-right: 24px;

}
.footer-about:hover {
  color: var(--gold);
}

/*****************************************************************
  - Element Styles Section
******************************************************************/

.origin-element {
  display: flex;
  justify-content: center;
  align-items: center;

  max-width: 100%;
  height: 50px;
  margin: 5px;

  border: 1px solid var(--espresso);
  border-radius: 5px;

  background-color: var(--burgundy);
  color: var(--cream);
}
.origin-element:hover {
  background-color: var(--espresso);
  color: var(--gold);
  
}

.canvas-element {
  display: flex;
  justify-content: center;
  align-items: center;

  min-width: 50px;

  position: absolute;
  top: 30px;
  left: 30px;
}

.element-header {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 36px;

  border-top-right-radius: 5px;
  border-top-left-radius: 5px;

  background-color: var(--burgundy);
}
.element-header h3 {
  color : var(--cream);
}

.element-content {
  width: 100%;
}
.element-content p {
  font-family: var(--scriptFont);
}
.element-title {
  color: var(--cream);
}
.mainElementContainer {
  display: none;
  flex-direction: column;
  width: 100%;

  overflow-y: auto;
  overflow-x: hidden;
}

.canvas-element.title-element {
  color: var(--espresso);
  padding: 5px;
  text-align: center;
}
.canvas-element.date-element {
  color: var(--coffee);
  padding: 5px;
}

.canvas-element.note-element {
  flex-direction: column;
  width: 300px;
  }

.log-table {
  height: 100%;
  table-layout: fixed;
}
.log-table th,
.log-table td,
.log-table tr,
.modal-log-table th,
.modal-log-table td,
.modal-log-table tr {
  text-align: center;
  padding: 5px;
  border: 1px solid var(--espresso);
  color: var(--cream);

  min-width: 75px;
  height: 32px;
}
.log-table td,
.modal-log-table td {
color: var(--espresso);
}
.note-line {
  background-color:  var(--cream);
  height: 25px;
  border-bottom: 1px dotted var(--espresso); 

  min-width: 150px;
}
.element-line {
  background-color: var(--cream);
  border-bottom: 1px solid var(--espresso);

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 5px;
  min-width: 250px;
}

/*****************************************************************
  - DropZone Styles
******************************************************************/
  .drop-active-noDrop{
    background-color: rgba(255, 102, 102, 0.400);
  }
  
  .drop-active-canDrop {
    background-color: rgba(68, 238, 68, 0.400);

  }

/*****************************************************************
  - Modals
******************************************************************/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}
.modal.active {
  display: flex;
}

/* Modal Content/Box */
.modal-content {
  display: flex;
  flex-direction: column;

  background-color: var(--coffee);
  
  border-radius: 5px;
  box-shadow: #000000 0px 0px 10px 0px;

  min-width: 50%; /* Could be more or less, depending on screen size */
  max-width: 80%;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 10px;
  background-color: var(--espresso);
  border-radius: 5px;
}
.modal-header h3 {
  font-family: var(--contemporaryFont);
  color: var(--gold);
}
.modal-header p {
  font-family: var(--contemporaryFont);
  color: var(--cream);
}
.modal-body {
  display: flex;
  flex-direction: column;
  justify-content: center;

  height: 100%;
  max-height: 60vh;

  padding: 10px;
  margin: 10px;
  
  background-color: var(--cream);
  color: var(--coffee);

  border: 1px solid var(--espresso);
  border-radius: 5px;
  box-shadow: 4px 0px 10px 0px var(--espresso);
}

.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
.selectionContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.modal-title-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10%;
}

.modal-footer {
  display: flex;
  justify-content: flex-start;

  height: 100%;

  padding: 10px;
  margin: 10px;
  
  background-color: var(--cream);
  color: var(--coffee);

  border: 1px solid var(--espresso);
  border-radius: 5px;
  box-shadow: 4px 0px 10px 0px var(--espresso);
}
.form-option {
  display: flex;
  gap: 10px;

  padding: 10px;

  width: 100%;

}

.button-container {
  display: flex;
  justify-content: space-between;
  width: 50%;
}
.spacer {
  width: 25%;
} 
.img-container {
width: 25%;
}
/* The modal footer buttons */
.modal-buttons {
  background-color: var(--burgundy);
  border: none;
  color: var(--cream);
  padding: 0px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;

  border-radius: 5px;

}
.modal-buttons:hover {
  background-color: var(--espresso);
  color: var(--gold);
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.selection-content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
.selection-line {
  background-color: var(--cream);
  border-bottom: 1px solid var(--espresso);

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 5px;
  min-width: 200px;
  width: 100%;
}
/*****************************************************************
  - Buttons
******************************************************************/
  .new-card-button {
    background-color: var(--burgundy);
    border: none;
    border-radius: 5px;
    color: var(--cream);
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    width: 50%;
  }  
  .new-card-button:hover {
    background-color: var(--espresso);
    color: var(--gold);
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .plus-munis-bttn {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .plus-button, .minus-button {
    display: inline-block;
    background-color: var(--burgundy);
    color: var(--cream);

    border: none;
    border-radius: 30%;

    padding: 5px 10px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    
  }
  .plus-button:hover, .minus-button:hover {
    background-color: var(--espresso);
    color: var(--gold);
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .delete-button {
    cursor: pointer;
  }
  .delete-button:hover {
    content: url("../img/delete-dark.png");
  }


  .show-element-bar {
    display: flex;
  }


/*****************************************************************
  - Input Element Styles
******************************************************************/

  .input-box {
    min-height: 36px;
    background-color: var(--cream);
    color: var(--espresso);
    border: 0px solid var(--burgundy);
    border-bottom: 4px solid var(--coffee);
    margin: 5px;
    font-size: 18px;
    width: 100%;
  }
  .input-box::placeholder {
    color: var(--coffee);
  }
  .input-box option {
    background-color: var(--cream);
    color: var(--espresso);
  }
  .input-label{
    color: var(--burgundy);
    padding: 5px;
  }
  input[type=text] {
    width: 100%;
    height: 100%;
  }
 th input[type=text] {
    background-color: var(--coffee);
    color: var(--cream);
  
    width: 100%;
    padding: 0px 10px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
  }
  td input[type=text] {
    background-color: transparent;
    color: var(--espresso);
    font-family: var(--scriptFont);
    border: none;
  }
  td input[type=text]:active,
  td input[type=text]:focus {
    background-color: var(--cream-shaded);
    color: var(--espresso);
    font-family: var(--scriptFont);
    border: none;
  }
  input[type=date] {
    background-color: var(--cream);
    color: var(--espresso);
    font-size: 18px;
    box-sizing: border-box;
    border: none;
  }
  input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: var(--espresso);
    display: inline-block;
    vertical-align: middle;
 
  }
  input[type="radio"]:checked {
    background-color: var(--burgundy);
  }
  input[type="radio"]:hover {
    background-color: var(--gold);
  }
  pre {
    font-size: 18px;
    font-family: var(--scriptFont);
    color: var(--espresso);
    position: relative;
    border-bottom: 1px dotted;
}

/*****************************************************************

******************************************************************/

  .log-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 60vh;
    padding: 10px;
    overflow: auto;
    }
  .log {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .log-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .plus-munis-bttn {
    display: flex;
    justify-content: center;
  }
  .plus-munis-bttn p {
    padding-right: 10px;
  }

  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  th {
    background-color: var(--coffee);
    color: white
  }
  
  tr:nth-child(even) {
    background-color: var(--cream);
  }
  tr:nth-child(odd) {
    background-color:  beige;
  }
.component {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.hamburger {
  display: none;
}
.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--cream);
}

.widgetHamburger {
  display: none;
}

.canvas-width {
  width: 85%;
}

.mobile-button-container{
  display: none;
}

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip img {
  width: 40px;
  height: 40px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: var(--coffee);
  color: var(--cream);
  text-align: left;
  border-radius: 6px;
  padding: 10px;

  /* Position the tooltip */
  position: absolute;
  top: -5px;
  right: 105%; 
  z-index: 1;

  width: 40vw;
  max-width: 400px;
}
.tooltip .tooltiptext h3 {
  color: var(--cream);
}
.tooltip .tooltiptext p {
font-size: 14px;
font-family: var(--contemporaryFont);
color: var(--cream);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}





/* ----------------------------HELP MODAL-------------------------------- */
.helpmenu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.growShrink {
  animation-name: growShrink;
  animation-duration: 2s;
  animation-iteration-count: 3;
}

@keyframes growShrink {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.2) rotate(-20deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.helpmenu img {
  width: 40px;
  height: 40px;
}
.helpmodal {
  position: fixed;
  left: -100%;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  width: 60%;

  padding: 10px;

  background-color: var(--coffee);

  border-radius: 5px;

  transition: 0.3s;
  box-shadow: 4px 0px 10px 0px var(--espresso);
  z-index: 2;

  overflow-y: auto;
  max-height: 80vh;
}
.helpmodal.active {
  left: 20%;
}
.toolsmodal {
  display: flex;
  flex-direction: column;
  gap: 10px;

  width: 98%;
  max-width: 1000px;
  max-height: 98%;

  padding: 10px;

  background-color: var(--coffee);

  border-radius: 5px;

  transition: 0.3s;
  box-shadow: 4px 0px 10px 0px var(--espresso);
  z-index: 2;

  overflow-y: auto;
  
}
.toolsmodal.active {
  display: flex;
}


.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.help-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: var(--espresso);
  border-radius: 5px;

}
.help-title h3 {
  text-align: center;
  font-family: var(--contemporaryFont);
  color: var(--gold);
}
.help-title p {
  text-align: center;
  font-family: var(--contemporaryFont);
  color: var(--cream);
}
.help-text{
  margin-left: auto;
}
.closeHelp {
  margin-left: auto;
}
.closeHelp {
  cursor: pointer;

  color: var(--cream);
  font-size: larger;
  font-weight: bolder;

  padding-right: 10px;
}
.help-card {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 50%;
  height: 100%;
  padding: 10px;
  
  background-color: var(--cream);
  color: var(--coffee);

  border: 1px solid var(--espresso);
  border-radius: 5px;
  box-shadow: 4px 0px 10px 0px var(--espresso);
}
.help-card img {
  max-width: 100%;
  max-height: 300px;
}
.help-card-title {
  padding: 10px;
  color: var(--burgundy);
}
.help-card-content{
  display: flex;
  gap: 10px;

  text-align: left;
}
.help-card-desc {
  width: 100%;
  height: 100%;
}
.help-card-desc ul {
  list-style: none;
  padding: 0px;
}
.help-card-desc li {
  margin-bottom: 10px;
  margin-left: 18px;
}
.sample-desc {
  font-size: 14px;
  font-family: var(--scriptFont);
  color: var(--espresso);
  text-align: center;

  padding-top: 5px;
}
.help-mobile {
  display: none;
}
.cardTitleFont {
  font-family: var(--displayFont);
  color: var(--coffee);
}
.cardDescFont {
  font-family: var(--contemporaryFont);
  color: var(--espresso);
  font-size: small;
}
.cardDescFont li {
list-style-type: disc;
}

.tool-card-title {
  padding: 10px;
  color: var(--cream);
  background-color: var(--burgundy);
}
#roastChartButton {
  cursor: pointer;
}
.data-table {
  width: 100%;
}
.card-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 50%;
}
#chart-container {
  width: 100%;  /* adjust as needed */
  height: 100%; /* adjust as needed */  
}
/*********************************************************************
  -  Generic Styles
**********************************************************************/

.fade-out {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.fade-in {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}
.draggable {
  touch-action: none;
  user-select: none;
}
.centerContent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;

  height: 100%;
}
.column {
  flex-direction: column;
}
.row {
  flex-direction: row;
}
.flexcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.hide {
  display: none;
}
.cursor-pointer {
  cursor: pointer;
}
.text-center {
  text-align: center;
}
.gap5{
  gap: 5px;
}
.gap25 {
  gap: 25px;
}
.fullwidth {
  width: 100%;
}
.justify-end {
  justify-content: flex-end;
}

/*********************************************************************
  - media queries
**********************************************************************/
@media screen and (max-width: 1100px) {

  /* Generic Page Styles */
  .canvas-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    background-color: var(--cream);
    transition: background-color 0.3s;
    z-index: 1;
  }

  .canvas-width {
    width: 100%;
  }

  .footer-about {
    font-size: 10px;
  }
  .header-text h1{
    font-size: 24px;
  }
  .header-text h4{
    font-size: 12px;
  }
  .start-title {
    font-size: 12px;
  }
  .start-text {
    font-size: 12px;
  }

  .mobile-button-container{
    display: flex;
    justify-content: center;
  }
  .mobile-button-container.active{
    justify-content: flex-end;
    padding-right: 25px;
  }
  .new-card-button {
    font-size: small;
    }

/* Main Menu Hamburger Menu */
  .hamburger {
    display: block;
    cursor: pointer;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

.menu {
  position: fixed;
  left: -100%;
  top: 73px;
  flex-direction: column;
  gap: 10px;

  width: 80%;

  padding: 10px;

  background-color: var(--cream);
  border-bottom: 1px solid var(--burgundy);
  border-right: 1px solid var(--burgundy);

  border-bottom-right-radius: 5px;
  text-align: center;
  transition: 0.3s;
  box-shadow: 4px 0px 10px 0px var(--coffee);
}
.menu.active {
  left: 0;
}
.menu-item {
  width: 80%;
  padding: 10px;
  background-color: var(--burgundy);
  color: var(--cream);

  border: 1px solid var(--espresso);
  border-radius: 5px;
}
.menu-item:active {
  background-color: var(--espresso);
  color: var(--gold);
}
.menu-button {
  width: 100%;
  height: 100%;
  background-color: var(--burgundy);
  color: var(--cream);
}
.menu-button:active {
  background-color: var(--espresso);
  color: var(--gold);
}

/* Element Bar Hamburger Menu*/
.element-bar {
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  position: fixed;

  left: -100%;
  
  top: 74px;
  padding-bottom: 125px;
  
  min-width: 40%;
  max-width: 80%;

  height: 100%;

  background-color: var(--cream);
  border-right: 1px solid var(--burgundy);
  box-shadow: 4px 0px 10px 0px var(--coffee);
}
.element-bar.active {
  left: 0;
}
.hide-element-bar {
  display: none;
}

/* Element Bar Hamburger Icon*/
.widgetHamburger{
  justify-content: center;
  align-items: center;
  gap: 25px;

  background-color: var(--burgundy);
  border-radius: 5px;
  box-shadow: 4px 0px 8px 0px var(--coffee);

  width: 30%;

  margin-top: 10px;
  position: relative;
  top: 75px;
}
.widgetHamburgerText {
  color: var(--cream);
}
.showWidgetHamburger {
  display: flex;
  cursor: pointer;
}
.widgetHamburgerIcon {
  display: flex;
  gap: 5px;
}
.widgetBar {
  display: block;
  width: 3px;
  height: 25px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--cream);
}

.widgetHamburger .widgetBar:nth-child(1) {
  transform: translateX(8px) rotate(90deg);
}
.widgetHamburger.active .widgetBar:nth-child(1) {
opacity: 0;}
.widgetHamburger.active .widgetBar:nth-child(2) {
  transform: rotate(90deg);
}

/* Cards*/
.card-container{
  flex-direction: column;
}
.help-card {
  width: 100%;
  height: 100%;
}
.card-cell {
  width: 100%;
}

/* Modals */
.modal-content {
  width: 98%;
  max-width: 98%;
}
.modal-body {
  flex-direction: column;
}
.helpmodal {
  width: 90%;
}
.helpmodal.active {
  left: 5%;
}
.help-mobile {
  display: block;
}
.help-desktop {
  display: none;
}
.selection-content {
  max-height: 150px;
}
/* Tooltip Styles */
.tooltip .tooltiptext {
  min-width: 225px;
  width: 60vw;
  top: -50px;
}
.tooltip .tooltiptext p {
font-size: 12px;
}

.tooltip img {
  width: 30px;
  height: 30px;
}

/* Element Styles */

.log-table {
  width: 100%;
}

.canvas-element {
  width: 88%;
  position: static;
}
.canvas-element.title-element {
  width: auto;
} 
.canvas-element.date-element {
  width: auto;
}
.canvas-element.note-element {
  width: 88%;
}

}
@media print {
  body {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
  }
}