/* reset default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: url(img/med-bg.jpg);
  background-size: 100% auto;
  font-family: Georgia, serif;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

#site-full {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  /* Hide vertical scrollbar */
}

#site-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;
  background: url(img/lys-bg.jpg);
  background-size: 100% auto;
  z-index: 100;
}

#site-bottom {
  flex: 1 1 auto;
  overflow-y: hidden;
  position: absolute; /* Use absolute positioning within a relative container */
  top: 160px; /* Height of #site-top */
  bottom: 20px; /* Height of footer */
  left: 0;
  right: 0;
  /* Ensures #site-bottom fills the space between #site-top and footer */
}


footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 20px;
  background-color: #464646;
  color: #fff;
  z-index: 1000;
}

.footer-content {
  width: 100%;
  margin: 0 auto;
  padding: 2px;
}

.footer-content p {
  text-align: center;
}

/* header styles */
#header {
  position: relative;  
  margin: 0px;
}

.image-container {
  position: relative;
  display: inline-block;
}

#logo {
  position: fixed;
  top: 5px;
  left: 5px;
  width: 75px;
  height: 75px;
  opacity: 0.8;
}

#titre {
  width: 100%; /* Take full width to allow centering of content */
  text-align: center;
  margin: 0 auto; /* Center the div itself if it does not have a width of 100% */
}

#perso {
  width: 100%; /* Take full width to allow centering of content */
  max-width: 100%; /* Ensure it does not exceed the parent width */
  color: white;
}

#characterClassClassAndLevel {
  color: white;
  text-shadow: 1px 1px 2px #000000; /* Black shadow */
  font-family: 'MedievalSharp';
  font-size: 36px;

}


.save-btn-right {
  position: absolute;
  right: 5px; /* Align to the right with 5px margin */
  top: 5px; /* Align to the top with 5px margin if needed */
}



#imageContainer {
  position: absolute;  
  top: 5px;
  left: 65px;
}

/* character picture */

#imgContainer {
  width: 130px;
  height: 130px;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border-radius: 75%; /* Keeps the container round */
  box-shadow: 4px 8px 8px rgba(255, 255, 255, 0.5); /* Adds a drop shadow */
}


#preview {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover; /* this scales and crops the image to fill its container */
  border-radius: 50%; /* this makes the image round */
}

/* common styles for h1, h2, h3 */
h1,
h2,
h3,
h4 {
  color: #444444;
  margin: 0;
  font-weight: normal;
}

/* specific styles for h1 */
h1 {
  font-size: 48px;
  font-family: 'MedievalSharp';
  padding-top: 10px;
  color: white;
  text-shadow: 1px 1px 2px #000000; /* Black shadow */

}

/* specific styles for h2 */
h2 {
  font-size: 19px;
  font-weight: bold;
  font-family: 'MedievalSharp';
  text-align: center;
}

/* specific styles for h3 */
h3 {
  font-size: 22px;
}

h4 {
  font-size: 18px;
}

label {
  font-size: 12px;
}

p {
  font-size: 14px;
  text-align: left;
}

.dice-buttonContainer {
  margin: 10px; /* Add this line to create vertical space between rows of buttons */
  flex: 1 0 auto;
}

.button {
  display: block;
  padding: 5px 10px;
  background-color: #c6995d;
  border: none;
  border-radius: 10px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  text-align: center;
  min-width: 100px;
}

.button.button_over:hover {
  background-color: #686868 !important;
}

/* specific styles for d4 */
#d4 {
  background-color: #ff9933;
}

/* specific styles for d6 */
#d6 {
  background-color: #cc3300;
}

/* specific styles for d8 */
#d8 {
  background-color: #9933cc;
}

/* specific styles for d10 */
#d10 {
  background-color: #669999;
}

/* specific styles for d12 */
#d12 {
  background-color: #666699;
}

/* specific styles for d20 */
#d20 {
  background-color: #0099cc;
}

/* modifier styles */

#modifier select {
  font-size: 24px;
  padding: 5px;
  border-radius: 5px;
}

.dice-select {
  font-size: 24px;
  padding: 5px;
  border-radius: 5px;
}

#reset_button {
  background-color: #c6995d;
}

#labelContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

/* Style the tab buttons */
.tab button {
  background-color: #ddd;
  color: #222;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  transition: 0.3s;
}

/* Change background color of the active tab button */
.tab button.active {
  background-color: #ccc;

}

/* Style the tab content */
.tabContent {
  display: none;
  padding-top: 5px;
  border: none;
  border-top: none;
}

/* Show the active tab content */
.tabContent.show {
  display: flex;
}

/* Style the tab content */
.tabContentCS {
  display: none;
  padding: 6px 2px;
  border: none;
  border-top: none;
}

/* Show the active tab content GL XXXXXX*/
.tabContentCS.show {
  display: flex;
}

.side-border {
  border-left: 3px solid #2e2e2e;
  border-right: 3px solid #2e2e2e;
  border-top: 3px solid #2e2e2e;
}

/* make tab button look like dice button */
#dice-tab {
  background-color: #007bff;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}

.tab button:nth-child(1) {
  background-color: #2e2e2e;
}

.tab button:nth-child(2) {
  background-color: #2e2e2e;
}

.tab button {
  font-size: 20px;
  color: white;
  width: 50%;
  border: none;
  outline: none;
  padding: 14px 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tab button.active {
  background-color: #9F3E31;
}

.tab {
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  margin-left: 5px;
  margin-right: 5px;
}

.tablinks {
  width: 50%;
  text-align: center;
  font-family: 'MedievalSharp';
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tablinksCS {
  max-width: 12.5%;
  text-align: center;
  font-family: 'MedievalSharp';
  font-size: 14px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 3px solid #2e2e2e !important;
}

.tabCS button {
  font-size: 20px;
  color: white;
  width: 50%;
  border: none;
  outline: none;
  padding: 14px 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  background-color: #969696;
}

.tabCS button.active {
  background-color: #9F3E31;
  

}

.tabCS button:not(.active) {
  background-color: #969696  !important;
  margin-top: 10px;
}

.tabCS {
  position: fixed; /* Fixes the position on the page */
  top: 100px; /* Adjust this value based on the actual height of .tabCS */
  left: 0;
  right: 0;

  display: flex;
  justify-content: center; /* Centers the items horizontally */
  flex-wrap: nowrap; /* Keeps items in a single line */
  width: 100%; /* Full width of its parent */
  margin: 0 auto; /* Center the element within the given width */

  z-index: 101; /* Ensure it's above #site-top (which has z-index: 100) */
  height: 63px; /* Set this to the height of .tabCS */
}



#dice-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

#main-content {
  flex: 1;
}

.toast {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: rgb(94, 255, 0);
  padding: 10px;
  border-radius: 10px;
  font-family: monospace;
  min-width: 100px;
  white-space: nowrap;
  z-index: 1000;
  display: none;
}

.toast button.close-toast {
  border: none;
  background: transparent;
  font-family: monospace;
  font-size: 16px;
  padding: 0;
  margin-left: 10px;
}

#character-buttonContainer {
  padding-top: 5px;
  margin: 0 auto;
  margin-bottom: 25px;
  /* center the div horizontally */
  display: flex;
  justify-content: right;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
}

#resetPopup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

#warningPopup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.popup {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.popup-content .button {
  display: inline-block;
  margin: 15px;
}

.flexCharacter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.meta-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-top: 0px;
  align-items: flex-start;
}

.meta-section-no-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding-top: 0px;

}

.section, 
.section-flex-row, 
.section-short, 
.level_, 
.spell-border, 
.subsection, 
.subsection-flex-item, 
.subsection3, 
.subsection4, 
.subsection6,
.success-container,
.failed-container,
.imgContainer   {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #cccccc;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Adds a drop shadow */
}

.subsection, .subsection3, .subsection-flex-item,.subsection6, .subsection4 {
  background: rgba(0, 0, 0, 0.1);
}


.section-short {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  margin-top: 0px;
  margin-bottom: 10px;
  padding: 5px;
  flex: 1;
  max-height: calc(100vh - 460px);
  overflow-y: auto; /* Add scrollbar for content overflow */
}

.section-short-left {
  margin-left: 0px;
  margin-right: 5px;
}

.section-short-right {
  margin-right: 0px;
  margin-left: 5px;
}

.section {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  margin: 2px;
  padding: 2px;
  flex: 1;
  max-height: calc(100vh - 190px);
  overflow-y: auto; /* Add scrollbar for content overflow */
}

.subsection {
  border-radius: 15px;
  margin: 2px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 105px;
  position: relative;
}

.parent-container{
  display: flex;
  flex-direction: row; /* Or 'row', depending on your layout */
  align-items: flex-start; /* Aligns children to the start of the cross axis */
}

.section-flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 5px;
  width: 100%;
  overflow-y: auto; /* Allows scrolling if content exceeds max height */
}

.section-flex-row-no-style {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  overflow-y: auto; /* Allows scrolling if content exceeds max height */
}



.subsection-flex-item {
  border-radius: 15px;
  margin: 2px;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%; /* Minimum width of each subsection */
  flex: 1; /* Adjust as needed, or use specific widths */
  
}

.subsection2 {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}

.subsection5 {
  flex-grow: 2;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 5px;
  box-sizing: border-box;
}

.subsection3 {
  border-radius: 5px;
  margin: 3px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  position: relative;
}

.flex-start-behavior {
  align-items: flex-start;
}


.input-select,
.input-text {
  min-height: 22px;
  font-size: 16px;
  padding: 2px 6px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  margin-bottom: 0px;
  margin-top: 0px;
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0.2s;
}

.w50 {
  width:55px;
  font-size:11px;
}


.input-text:focus {
  background-color: #fff;
  outline: none;
}

.input-select2 {
  width: 100%;
}

.shield {
  height: 60px;
  width: 60px;
  border: 5px solid #eee;
  border-radius: 50% 50% 50% 50% / 12% 12% 88% 88%;
  background-color: #B51D05;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: bold;
  text-align: center !important;
  line-height: 1.2;
  padding: 0;user-select: none;
  /* prevent text selection */
  cursor: pointer;
  /* change cursor to pointer */
  position: relative;
  /* add position property for pseudo element */
  overflow: hidden;
  /* hide overflowing elements */
  transition: all 0.2s ease-out;
  /* add transition for smooth hover effect */
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
  /* add box-shadow */
}

.shield:hover {
  background-color: #bd2c00;
  /* change background color on hover */
  border-color: #424242;
  /* change border color on hover */
  color: #ebebeb;
  /* change text color on hover */
  transform: scale(1.1);
  /* add scaling on hover */
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  /* add box-shadow on hover */
}

.roundButton {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background-color: #B51D05;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: bold;
  text-align: center !important;
  line-height: 1.2;
  padding: 0;
  margin: 5px;
  border: 2px solid #cccccc;
  user-select: none;
  /* prevent text selection */
  cursor: pointer;
  /* change cursor to pointer */
  position: relative;
  /* add position property for pseudo element */
  overflow: hidden;
  /* hide overflowing elements */
  transition: all 0.2s ease-out;
  /* add transition for smooth hover effect */
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
  /* add box-shadow */
  width: 2.5em;
  height: 2.5em;
}

.roundButton:hover {
  background-color: #bd2c00;
  /* change background color on hover */
  border-color: #424242;
  /* change border color on hover */
  color: #ebebeb;
  /* change text color on hover */
  transform: scale(1.1);
  /* add scaling on hover */
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  /* add box-shadow on hover */
}

#strengthSaveValue,
#strengthBonusScore {
  background-color: #126259;
}

#dexteritySaveValue,
#dexterityBonusScore {
  background-color: #c58150;
}

#constitutionSaveValue,
#constitutionBonusScore {
  background-color: #808080;
}

#intelligenceSaveValue,
#intelligenceBonusScore {
  background-color: #B51D05;
}

#wisdomSaveValue,
#wisdomBonusScore {
  background-color: #31A376;
}

#charismaSaveValue,
#charismaBonusScore {
  background-color: #603a23;
}

#strength {
  background: rgba(18, 98, 89, 0.5); /* Converted from #126259 */
}

#dexterity {
  background: rgba(197, 129, 80, 0.5); /* Converted from #c58150 */
}

#constitution {
  background: rgba(128, 128, 128, 0.5); /* Converted from #808080 */
}

#intelligence {
  background: rgba(151, 25, 5, 0.5); /* Converted from #B51D05 */
}

#wisdom {
  background: rgba(49, 163, 118, 0.5); /* Converted from #31A376 */
}

#charisma {
  background: rgba(96, 58, 35, 0.5); /* Converted from #603a23 */
}


.skillCheckBoxes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.skillCheckBoxes input[type="checkbox"] {
  display: block;
}

.skillCheckBoxes label {
  display: inline-block;
  margin-right: 5px;
}

#skills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0px;
  align-content: start;
}

#savingThrows {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 0px;
  
}

#abilities {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 0px;
  }

#skills>h2 {
  grid-column: 1 / -1;
}

.subsection .skillCheckBoxes {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.subsection .skillCheckBoxes label {
  margin-left: 5px;
}

#character-zone {
  float: right;
}

#character-buttonContainer button {
  display: inline-block;
}

#character-buttonContainer {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
}

/* skill buttons colors */

#acrobaticsBonusValue.roundButton {
  background-color: #c58150;
  color: white;
}

#animalHandlingBonusValue.roundButton {
  background-color: #31A376;
  color: white;
}

#arcanaBonusValue.roundButton {
  background-color: #B51D05;
  color: white;
}

#athleticsBonusValue.roundButton {
  background-color: #126259;
  color: white;
}

#deceptionBonusValue.roundButton {
  background-color: #603a23;
  color: white;
}

#historyBonusValue.roundButton {
  background-color: #B51D05;
  color: white;
}

#insightBonusValue.roundButton {
  background-color: #31A376;
  color: white;
}

#intimidationBonusValue.roundButton {
  background-color: #603a23;
  color: white;
}

#investigationBonusValue.roundButton {
  background-color: #B51D05;
  color: white;
}

#medicineBonusValue.roundButton {
  background-color: #31A376;
  color: white;
}

#natureBonusValue.roundButton {
  background-color: #B51D05;
  color: white;
}

#perceptionBonusValue.roundButton {
  background-color: #31A376;
  color: white;
}

#performanceBonusValue.roundButton {
  background-color: #603a23;
  color: white;
}

#persuasionBonusValue.roundButton {
  background-color: #603a23;
  color: white;
}

#religionBonusValue.roundButton {
  background-color: #B51D05;
  color: white;
}

#sleightOfHandBonusValue.roundButton {
  background-color: #c58150;
  color: white;
}

#stealthBonusValue.roundButton {
  background-color: #c58150;
  color: white;
}

#survivalBonusValue.roundButton {
  background-color: #31A376;
  color: white;
}

#acrobaticsSkill {
  background-color: rgba(197, 129, 80, 0.5); /* Dexterity color */
}

#animalHandlingSkill {
  background-color: rgba(49, 163, 118, 0.5); /* Wisdom color */
}

#arcanaSkill {
  background-color: rgba(151, 25, 5, 0.5); /* Intelligence color */
}

#athleticsSkill {
  background-color: rgba(18, 98, 89, 0.5); /* Strength color */
}

#deceptionSkill {
  background-color: rgba(96, 58, 35, 0.5); /* Charisma color */
}

#historySkill {
  background-color: rgba(151, 25, 5, 0.5); /* Intelligence color */
}

#insightSkill {
  background-color: rgba(49, 163, 118, 0.5); /* Wisdom color */
}

#intimidationSkill {
  background-color: rgba(96, 58, 35, 0.5); /* Charisma color */
}

#investigationSkill {
  background-color: rgba(151, 25, 5, 0.5); /* Intelligence color */
}

#medicineSkill {
  background-color: rgba(49, 163, 118, 0.5); /* Wisdom color */
}

#natureSkill {
  background-color: rgba(151, 25, 5, 0.5); /* Intelligence color */
}

#perceptionSkill {
  background-color: rgba(49, 163, 118, 0.5); /* Wisdom color */
}

#performanceSkill {
  background-color: rgba(96, 58, 35, 0.5); /* Charisma color */
}

#persuasionSkill {
  background-color: rgba(96, 58, 35, 0.5); /* Charisma color */
}

#religionSkill {
  background-color: rgba(151, 25, 5, 0.5); /* Intelligence color */
}

#sleightOfHandSkill {
  background-color: rgba(197, 129, 80, 0.5); /* Dexterity color */
}

#stealthSkill {
  background-color: rgba(197, 129, 80, 0.5); /* Dexterity color */
}

#survivalSkill {
  background-color: rgba(49, 163, 118, 0.5); /* Wisdom color */
}


.hit-points-inputs {
  display: flex;
  align-items: center;
}

/* saving against death */

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;

}

.grid-header {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  margin-top: 3px;
}

.grid-content {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  grid-gap: 15px;
  /* Add this line to create space between grid elements */

}

.success-container,
.failed-container {
  display: flex;
  justify-content: center;
  border-radius: 5px;
  width: 100%;
  margin: 3px;
  padding: 5px;

}

.checkbox-death-saving-throws {
  margin: 0 5px;
}

.blue-button {
  background-color: #31A376 !important;
}

.red-button {
  background-color: #B51D05 !important;
}

.small-button {
  font-size: 20px;
  padding: 5px 5px;
  width: 80%;
}

.small-button:hover {
  background-color: grey !important;
}

/* Animate d20 3D */
#d20Container {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 500px;
  transform: translate(-50%, -50%);
  overflow: visible;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}

#d20Container.hidden {
  display: none;
}

.result-text {
  text-align: center;
  font-size: 24px;
  color: white;
}

.result-death-save {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Add this */
  justify-content: center;
  /* Add this */
}

.dead-or-alive {
  font-size: 24px;
  /* Adjust the size to your preference */
  font-weight: bold;
  color: white;
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
  font-size: 24px;
  background-color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.dice-canvas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

#diceWrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.rounded-canvas {
  border-radius: 10px;
  /* Adjust this value to change the roundness of the corners */
}

.hidden {
  display: none;
}

.dark-red-button {
  background-color: #B51D05;
}

.dark-yellow-button {
  background-color: #c58150;
}

.dark-green-button {
  background-color: #32876C;
}

.toggle-button {
  background-color: #00BCD4;
}

.toggle-button-non {
  background-color: #c64b22;
}

.toggle-button-oui {
  background-color: green;
}

.toggle-button:hover {
  background-color: #555;
}

.buttons-advantage {
  display: flex;
  flex-direction: row;
  width: 50%;
}

.advantage-buttons {
  font-size: 16px;
  padding: 3px 3px;
}

.activated-button {
  background-color: #603a23;
  border-radius: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  min-width: 100px;
}

.speed-container {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.speed-input-wrapper {
  display: flex;
  flex-direction: column;
}

.main-hit-points {
  display: flex;
  gap: 4px;
}

.hit-points-input-wrapper {
  display: flex;
  flex-direction: column;
}

.input-actualHitPoints, .input-maxHitPoints {
  border: 2px solid #32876C; /* Blue border */
  padding: 10px;
  font-size: 24px;
  background-color: #eef4ff; /* Light blue background */
}

.spell-actual, .spell-max, .resource-actual, .resource-max {
  border: 2px solid #32876C; /* Blue border */
  padding: 4px;
  font-size: 22px;
  background-color: #eef4ff; /* Light blue background */
}

/* Styling for toggling button */
#toggleExtraFields {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border: 1px solid #cccccc;
  cursor: pointer;
}

.button-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

#diceContainerSplash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subsection-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  /* Adjust the gap between the sections as needed */
  justify-content: space-around;
}

.center-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  /* Adjust this value to change the spacing between the buttons */
}

#statusBar {
  height: 14px;
  line-height: 14px;
  color:white;
  text-shadow: 1px 1px 2px #000000; /* Black shadow */

  

}

.status-icon {
  font-size: 24px;
  /* Adjust this value to your desired size */
}

.ability-adjustments {
  display: flex;
  flex-direction: row;
}

.ability-adjustment {
  display: flex;
  flex-direction: column;
  margin-right: 1rem;
  width:100%;
  /* Add some space between the two columns */
}

.other-adjustments-label {
  display: block;
}

.other-adjustments {
  display: flex;
  flex-direction: row;
  gap: 4px;
  margin-top: 0.5rem;
  width:100%;
}

.armor-container {
  display: none;
  flex-direction: row;
}

.armor-wrapper {
  display: flex;
  flex-direction: column;
}

.shield-container {
  display: none;
  flex-direction: row;
}

.shield-wrapper {
  display: flex;
  flex-direction: column;
}

.shield-description {
  margin-top: 4px;
  margin-bottom: 8px;
}

#menu {
  position: absolute;
  left: 5px; /* Align to the right with 5px margin */
  top: 5px; /* Align to the top with 5px margin if needed */
  cursor: pointer;
  z-index:20000;
}

.iconify {
  font-size: 24px;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 1));

}

.supersizeme {
  font-size: 48px;
  color: white;
  text-shadow: 1px 1px 2px #000000; /* Black shadow */

}

.menu-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: rgba(249, 249, 249, 0.95);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 8px;
  z-index: 1;
  border-radius: 4px;
  width: 180px;
}

.menu-content .menu-item {
  margin-bottom: 5px;
  padding: 5px 0;
  cursor: pointer;
  position: relative;
  line-height: 1.5;
}

.menu-content .menu-item:hover {
  background-color: #ddd;
}

.menu-content .submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: rgba(249, 249, 249, 0.95);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 8px;
  z-index: 1;
  border-radius: 4px;
  width: 180px;
}

.menu-content .submenu div {
  padding: 5px 0;
}

.menu-content .submenu div:hover {
  background-color: #ccc;
}

.menu-item:hover .submenu {
  display: block;
}

.container {
  display: flex;
  gap: 4px;
  
}

.container2 {
  display: flex;
  height: 100%;
  gap: 4px;
}

.container3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
}

.container3 .input-group {
  flex: 1;
  min-width: calc(50% - 10px);
}

.container4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.container4 .input-group {
  flex: 1;
}

.container4 .input-group:first-child {
  margin-right: 10px;
  flex-grow: 2;
}

.container6 {
  display: flex;
  justify-content:flex-start;
  width: 90%;
}

.container5 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.attack-name-wrapper {
  flex: 1;
}

.attack-name-input {
  width: 100%;
}

.fixed-size-wrapper {
  flex: 0 0 auto;
}

.rectangleButton {
  display: inline-grid;
  place-items: center;
  background-color: #B51D05;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  padding: 5px;
  margin: 8px;
  border: 1px solid #FFFFFF;
  user-select: none;
  /* prevent text selection */
  cursor: pointer;
  /* change cursor to pointer */
  position: relative;
  /* add position property for pseudo element */
  overflow: hidden;
  /* hide overflowing elements */
  transition: all 0.2s ease-out;
  /* add transition for smooth hover effect */
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
  /* add box-shadow */
  border-radius: 0.3em;
  /* add rounded corners */
  max-width: 100px;
}

.rectangleButton:hover {
  background-color: #FF5722;
  /* change background color on hover */
  border-color: #424242;
  /* change border color on hover */
  color: #424242;
  /* change text color on hover */
  transform: scale(1.1);
  /* add scaling on hover */
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  /* add box-shadow on hover */
}

.arrow-icon {
  display: inline-block;
  font-size: 12px;
  margin-left: 0.5em;
  cursor: pointer;
}

.arrow-icon.arrow-up .iconify {
  transform: rotate(180deg);
}

.add-button {
  background-color: #32876C;
  /* Green background */
  border: none;
  /* Remove border */
  color: white;
  /* White text */
  padding: 4px 4px;
  /* Padding around text */
  text-align: center;
  /* Centered text */
  text-decoration: none;
  /* Remove underline */
  display: inline-block;
  /* Display as inline-block */
  font-size: 12px;
  /* Set font size */
  margin: 4px 2px;
  /* Add some margin */
  cursor: pointer;
  /* Cursor changes to a hand when hovering */
  border-radius: 4px;
  /* Rounded corners */
  height: 30px;
  /* Set explicit height */

}

.add-button:hover {
  background-color: #11845E;
  /* Change background color on hover */
}

.remove-button {
  background-color: #60182A;
  /* Red background */
  border: none;
  /* Remove border */
  color: white;
  /* White text */
  padding: 2px;
  /* Padding around icon */
  text-align: center;
  /* Centered text */
  text-decoration: none;
  /* Remove underline */
  display: inline-block;
  /* Display as inline-block */
  font-size: 12px;
  /* Set font size */
  margin: 2px;
  /* Add some margin */
  cursor: pointer;
  /* Cursor changes to a hand when hovering */
  border-radius: 5px;
  /* Rounded corners */
  height: 28px;
  /* Set explicit height */
  width: 28px;
  /* Set explicit width */
  position: absolute;
  /* Position the button */
  right: 5px;
  /* Align to top */
  bottom: 5px;
  /* Align to right */
  z-index: 1;
  /* Make sure it is on top of other elements */
}

.remove-button:hover {
  background-color: #7e0101;
  /* Change background color on hover */
}

/* toggle switch */

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, ".SFNSText-Regular", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
}

.toggle {
  cursor: pointer;
  display: inline-block;
}

.toggle-switch {
  display: inline-block;
  background: #ccc;
  border-radius: 16px;
  width: 58px;
  height: 32px;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
}

.toggle-switch:before,
.toggle-switch:after {
  content: "";
}

.toggle-switch:before {
  display: block;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  width: 24px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: left 0.25s;
}

.toggle:hover .toggle-switch:before {
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.toggle-checkbox:checked+.toggle-switch {
  background: #126259;
}

.toggle-checkbox:checked+.toggle-switch:before {
  left: 30px;
}

.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}

.toggle-label {
  margin-left: 5px;
  position: relative;
  top: 2px;
}

/* end of toggle*/

.input-group {
  display: flex;
  flex-direction: column;
  width:100% !important;
}

.input-group-90 {
  display: flex;
  flex-direction: column;
  width:90% !important;
}

.toggle-group {
  display: flex;
  gap: 4px;
}

.resource-input-group {
  flex: 1;
  max-width: 100px; /* Adjust this value according to your desired width */
}

.resource-toggle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 2;
  max-width: 250px; /* Adjust this value according to your desired width */
}

.status-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.textarea-container {
  display: inline-block;
  width: 100%;
}
.input-textarea {
  width: 100%;
  min-height: 6em;
  resize: both;
  font-size: 14px;
  display:none;
}

.input-textarea3 {
  width: 100%;
  min-height: 6em;
  resize: both;
  font-size: 16px;
  display:none;
}

.input-textarea2 {
  width: 100%;
  min-height: 6em;
  resize: both;
  font-size: 14px;
  display:flex;
}

.subsection4 {
  border-radius: 5px;
  margin: 3px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  flex: 1;
  position: relative;
}

.money-inputs-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px;
  margin-right: 55px;

}

.money-input-wrapper {
  display: flex;
  justify-content: space-between;
}

.row {
  display: flex;
  align-items: center;
}

.token-input {
  border-radius: 50%;
  padding: 0;
}

.section-max-width {
  max-width: 20% !important;
}

.attack-wrapper-1 {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.attack-wrapper-2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.full-width-button {
  width: 100%;
}

#armorClassDetail {
  display: none;
}

.section-50-fixed-centered {
  flex: 0 0 50%;
  min-width: 50% !important;
  max-width: 50%;
  box-sizing: border-box;
  padding-right: 1rem;
}

.section-20-fixed {
  flex: 0 0 20%;
  min-width: 20% !important;
  max-width: 20%;
  box-sizing: border-box;
  padding-right: 1rem;
}

.section-10-fixed {
  flex: 0 0 10%;
  min-width: 10% !important;
  max-width: 10%;
  box-sizing: border-box;
  padding-right: 1rem;
}

.section-15-fixed {
  flex: 0 0 15%;
  min-width: 15% !important;
  max-width: 15%;
  box-sizing: border-box;
  padding-right: 1rem;
}

.section-20 {
  flex: 1 1 20%;
  min-width: 20% !important;
  max-width: 20%;
  box-sizing: border-box;
  padding-right: 1rem;
}

.section-10 {
  flex: 1 1 10%;
  min-width: 10% !important;
  max-width: 10%;
  box-sizing: border-box;
  padding-right: 1rem;
}

/* Ensures that middle-column takes up remaining width */
#middle-column {
  display: flex;
  flex: 1 1 58%;
  min-width: 58% !important;
  flex-direction: column; /* Adjusts the direction of the flex items */
  padding: 5px;
}

.section-wrap {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.spell-section {
  display: flex;
  flex-wrap: wrap;
}

.level_ {
  width: 32%;
  box-sizing: border-box;
  border-radius: 15px;
  margin: 5px;
  padding: 5px;
}

.spell-border {
  border-radius: 15px;
  margin: 5px;
  padding: 5px;
}

.subsection6 {
  border-radius: 5px;
  margin: 3px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: normal;
  position: relative;
  overflow-wrap: break-word;
  max-width: 100%;
  flex-shrink: 1;

}

.level-controls {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.fullscreen-popup {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.fullscreen-popup-content {
  width: 30%;
  background-color: #ffffff;
  opacity: 0.8;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fullscreen-popup-content .button-container {
  margin-top: 15px;
  padding:30px;
}


.color-container {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 1px;
  border: 1px solid darkgray;
  z-index: 999;
  width: 128px;
  flex-wrap: wrap;
}

.color-square {
  width: 30px;
  height: 15px;
  display: inline-block;
  border: 1x solid darkgray;
  margin: 0 1px 1px 0;
}

.transparent-square {
  width: 124px;
  height: 15px;
  display: inline-block;
  border: 1px solid darkgray;
  background-color: transparent;
  margin-top: 1px;
}

.color-picker-icon {
  font-size: 16px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}


.spellAbilityA {
    background: rgb(197, 129, 80,0.5);
}
.spellAbilityB {
  background: rgb(18, 98, 89,0.5);
}

.spellFiltres {
  background: rgb(96, 58, 35 ,0.5);
}

.maitrise-label {
  font-size: 12px;
  padding:0px 0px 0px 0px;
}


/* ***********The entire scrollbar************ */
::-webkit-scrollbar {
  width: 6px; /* width of the entire scrollbar */
}

/* The track (progress bar) of the scrollbar NOT covered by the handle */
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.25); /* color of the tracking area */
  border-radius: 10px;
  border:1px solid #cccccc; /* creates padding around scroll thumb */
}

/* The handle (grip) of the scrollbar */
::-webkit-scrollbar-thumb {
  background: #888; /* color of the scroll thumb */
  border-radius: 6px; /* roundness of the scroll thumb */
  border: 2px solid #f1f1f1; /* creates padding around scroll thumb */
}

/* The handle (grip) of the scrollbar when it's active or being clicked */
::-webkit-scrollbar-thumb:active {
  background: #555; /* color of the scroll thumb when active */
}

/* ***********FIRE************ */
.fire-shadow {
  /* Basic styling */
  text-align: center;
  
  /* Animated shadow */
  box-shadow: 0 0 50px rgba(255, 165, 0, 0.75);
  animation: flicker 1s infinite alternate;
}

@keyframes flicker {
  0%, 100% {
    box-shadow: 0 0 30px rgba(255, 165, 0, 0.75);
  }
  50% {
    box-shadow: 0 0 50px rgba(255, 140, 0, 0.75), 0 0 30px rgba(255, 0, 0, 0.75);
  }
}


/*  *****EXPLOSION***** */
.exploding {
  position: absolute;
  background: none !important; /* Removed background image */

  animation: explode 4s forwards; /* Increased duration to 4 seconds */
}

@keyframes explode {
  to {
      transform: translate(-50vw, -50vh) scale(0) rotate(360deg); /* Added rotation */
      opacity: 0;
  }
}