/* These are used as templates for things such as main menu, load and save game menus */

#mainMenuTitle {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
}

#loadMenuTitle {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
}

#saveMenuTitle {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
}


#mainMenuTitleLive {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    white-space: nowrap;
}

#loadMenuTitleLive {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    white-space: nowrap;
}

#saveMenuTitleLive {
    position: absolute;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    white-space: nowrap;

}

#sampleLoadGames {
    position: absolute;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.4);
    /*max-height: 400px;
    max-width: 450px; */
}

#sampleLoadGamesLive {
    position: absolute;
    display: block;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.4);
    /*max-height: 400px;
    max-width: 450px;  */
}

#save-game-name {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    height: 30px;
    width: 175px;
}

#save-game-nameLive {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    height: 30px;
    width: 175px;
}

#saveButton {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
}

#deleteButton {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
}

#saveButtonLive {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
}

#deleteButtonLive {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
}

.craftButton {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
}

.limeGreenButton {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    background-color: #b0b0b0;
    width: 150px;
    height: 30px;
    border: 2px solid #8be055;
    color: #8be055;
    border-radius: 50px; /* This gives the oval shape */
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.4);
}

.limeGreenButton:hover {
    background-color: #8be055;
    color: #b0b0b0;
}

.skyBlueButton {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    background-color: #9a9a9a;
    width: 150px;
    height: 30px;
    border: 2px solid #5bc0eb;
    color: #5bc0eb;
    border-radius: 50px; /* This gives the oval shape */
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.4);
}

.skyBlueButton:hover {
    background-color: #5bc0eb;
    color: #b0b0b0;
}

.limeGreenButtonSmall {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    background-color: #b0b0b0;
    width: 55px;
    height: 30px;
    border: 2px solid #8be055;
    color: #8be055;
    border-radius: 5px; /* This gives the oval shape */
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.4);
}

.limeGreenButtonSmall:hover {
    background-color: #8be055;
    color: #b0b0b0;
}

.limeGreenButtonCrafting {
    text-align: center;
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    background-color: #2c2c2e;
    width: 55px;
    height: 30px;
    border: 2px solid #8be055;
    color: #8be055;
    border-radius: 5px;  This gives the oval shape */
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.4);
}

.limeGreenButtonCrafting:hover {
    background-color: #3a3a3c;
}

.skyBlueButtonCrafting {
    text-align: center;
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    background-color: #2c2c2e;
    width: 55px;
    height: 30px;
    border: 2px solid #5bc0eb;
    color: #5bc0eb;
    border-radius: 5px; /* This gives the oval shape */
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.4);
}

.skyBlueButtonCrafting:hover {
    background-color: #3a3a3c;
}

.coralRedButtonCrafting {
    text-align: center;
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    background-color: #2c2c2e;
    width: 55px;
    height: 30px;
    border: 2px solid #f87666;
    color: #f87666;
    border-radius: 5px; /* This gives the oval shape */
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.4);
}

.coralRedButtonCrafting:hover {
    background-color: #3a3a3c;
}

button.limeGreenButtonSmall[disabled] {
    background-color: #b0c7d4; /* or any other color that signifies a disabled state */
    cursor: not-allowed;
}

.skyBlueButtonSmall {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    background-color: #9a9a9a;
    width: 55px;
    height: 30px;
    border: 2px solid #5bc0eb;
    color: #5bc0eb;
    border-radius: 5px; /* This gives the oval shape */
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.4);
}

.skyBlueButtonSmall:hover {
    background-color: #5bc0eb;
    color: #b0b0b0;
}

button.skyBlueButtonSmall[disabled] {
    background-color: #b0c7d4; /* or any other color that signifies a disabled state */
    cursor: not-allowed;
}


/* templates for load games */
.sample-load-lime-green {
    position: absolute;
    display: flex;
    border: 2px solid #8be055;

}

.sample-load-sky-blue {
    position: absolute;
    display: flex;
    border: 2px solid #5bc0eb;
}

.sample-load-row  {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: #9a9a9a;
}

.sample-load-row img.sample-load-preview {
    width: 128px; /* adjust based on your needs */
    height: 72px; /* adjust based on your needs */
    margin-right: 10px;
}

.sample-load-row-live  {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: #9a9a9a;
}

.sample-load-row-live img.load-preview-live {
    width: 250px;
    height: 120px;
    margin-right: 10px;
}

.sample-load-row span {
    margin-right: 10px; /* space between spans */
}

.sample-load-row.alternate {
    background-color: #b0b0b0; /* example light gray for zebra striping */
}


/* used for the live game */
.load-lime-green {
    position: absolute;
    display: flex;
    border: 2px solid #8be055;

}

.load-sky-blue {
    position: absolute;
    display: flex;
    border: 2px solid #5bc0eb;
}

.load-row  {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: #9a9a9a;
}

.load-row img.load-preview {
    width: 100px; /* adjust based on your needs */
    height: 50px; /* adjust based on your needs */
    margin-right: 10px;
}

.load-row span {
    margin-right: 10px; /* space between spans */
}


.load-row.alternate {
    background-color: #b0b0b0; /* example light gray for zebra striping */
}


.load-row-live  {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    background-color: #9a9a9a;
}

.load-row-live img {
    flex-shrink: 0; /* This ensures the image doesn't shrink */
}

.load-row-live .load-name-live {
    flex-basis: 50%; /* Starts at half the available space */
    flex-grow: 2;   /* Allows it to grow more than the date */
    flex-shrink: 1; /* Allows it to shrink if needed */
    overflow: hidden; /* Ensures text doesn't overflow */
}

.load-row-live.alternate {
    background-color: #b0b0b0; /* example light gray for zebra striping */
}

.load-row-live {
    transition: background-color 0.3s; /* smooth transition for hover effect */
    cursor: pointer; /* change the cursor to a hand to indicate interactivity */
}

.load-row-live:hover {
    background-color: rgba(0, 0, 0, 0.1); /* light gray background on hover */
}

.close-lime-green {
  position: absolute;
  width: 30px;
  height: 30px;
  color: #8be055;
  float: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.close-sky-blue {
  position: absolute;
  width: 30px;
  height: 30px;
  color: #5bc0eb;
  float: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.close-coral-red {
  position: absolute;
  width: 30px;
  height: 30px;
  color: #f87666;
  float: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.baseButtonTemplate {
    position: absolute;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;     /* align vertical */
    cursor: pointer;
    transition: background-color 0.3s;

}

.baseButtonTemplate:hover {
}