@import
url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap'); 
/*input stuff */
input[type="number"] {
  width: 20px;
  height: 16px;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 8px;
  box-shadow: inset -3px -3px 6px rgba(0, 0, 0, 0.2), 
              inset 3px 3px 6px rgba(255, 255, 255, 0.5);
  font-size: 14px;
  color: #000000;
  text-align: center;
  pointer-events: none;  /* Disable interaction */
  -moz-appearance: textfield !important;  /* Hide arrows in Firefox */
  -webkit-appearance: none;    /* Hide arrows in Chrome, Safari */
  appearance: none;            /* Modern browsers fallback */
}

input[type="number"]::placeholder {
  color: #8b6f4d;
  opacity: 1; 
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Hide arrows in WebKit browsers */
  margin: 0;
}

input[type="number"]::-moz-focus-outer {
  border: none; /* Prevent Firefox focus outline */
}

input[type="number"]:focus {
  outline: none;
  border-color: #764a3b;
}
/*list stuff */
.listOnly{
font-size: medium;
font-family: helvetica;
display: none;
}

.ltpLable{
  font-size: small;
}

/* Table Container */
.table-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f4f1e3;
  border: 2px solid #8b5e3c;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-family: 'helvetica';
}
.ui-table-priority-1{
width: 40%;
}
.ui-table-priority-4{
width: 5%;
}
.ui-table-priority-3{
width: 5%;
}

p {
font-family: 'helvetica';
font-size: medium;
}
p2 {
font-family: 'helvetica';
font-size: large;
}
p3 {
font-family: 'helvetica';
font-size: small;
color: #FFDD00;
 font-weight: bold;
}
h2{
margin-bottom:1px;
}
/* Table Header */
table {
  width: 100%;
  table-layout: fixed;

  border-collapse: collapse;
display: block;

-webkit-tap-highlight-color: transparent;
}
th {
  background-color: #E49B0F;
  color: #fff;
  padding: 6px;
  font-size: 1.4 em;
  text-align: Center;
  border-bottom: 1px solid #5e3921aa;
font-family: 'helvetica';
}
/* Table Rows */
tr{
border-right: 10px solid #E49B0F;
}
tr:nth-child(even) {
  background-color: #ece4d8;
}

tr:nth-child(odd) {
  background-color: #e0d5c1;
}

/* Table Cells */
td {
  padding: 10px;
  border-bottom: 1px solid
    #8b5e3c;
  color: #3b2f2c;
  font-size: 1em;
  font-style: bold;
font-family: 'helvetica';
}

/* Hover Effect */
tr:hover {
  background-color: #d1b89f;
  cursor: pointer;
}

/* Decorative Borders */
td{
  border-left: 1px solid #8b5e3c;
  border-right: 1px solid #8b5e3c;
}
td:first-child, th:first-child {
  border-left: none;
}

td:last-child, th:last-child {
  border-right: none;
}

/* Fonts and Extras */

body {
  background-color: #eae0cc;
  font-family: "MedievalSharp", bold;
font-size: Small;
margin-bottom: 30px;
  padding-top: 0;
  margin-top: 0;
}

.fantasy-button {
  background-color: #FFD700; /* Rich green color */
  color: #222222; /* White text */
  padding: 2px 10px; /* Padding for the button */
  border: 2px solid #FFFAA0; /* Darker border for contrast */
  border-radius: 10px; /* Rounded edges */
  font-family: 'MedievalSharp', cursive; /* Medieval-style font */
  font-size: 1.2em; /* Slightly larger text */
  text-transform: uppercase; /* All caps for a medieval feel */
   text-shadow: 1px 1px 1px #3b2f2c; 
  
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); /* Button shadow */
  transition: all ease 0.1s; /* Smooth transition on hover */
  cursor: pointer; /* Pointer cursor on hover */
}

/* Hover Effect */
.fantasy-button:hover {
  background-color: #FFD700 ; /*#a07e4c Lighter brown on hover */
   /* Brighter border on hover */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7); /* Enhanced shadow on hover */
}

/* Active Effect */
.fantasy-button:active {
  background-color: #E1C16E; /* #7a4d2a Darker brown when clicked */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); /* Reduced shadow */
  transform: translateY(2px); /* Slight push-down effect */
}

/* Disabled Button */
.fantasy-button:disabled {
 border-color: #c47f3b;
  cursor: not-allowed; /* Change cursor to show it's disabled */
  box-shadow: none; /* Remove shadow */
}
/*---------- This is where popup stuff begins */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}

/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 180px;
background-color: #5e3921FF;
color: #fff;
text-align: left;
border-radius: 10px;
border-color: #c47f3b;
border-style: solid;
padding: 10px 10px 10px 10px;
position: absolute;

z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -40px;
}


/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn .4s;
animation: fadeIn .4s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}


/*DROPDOWN STUFF*/
.dropdown {
  background-color: #FFD700; 
  color: #000; 
  padding: 2px 10px; 
  border: 2px solid #fffaa0; 
  border-radius: 10px; 
  font-size: 1em; 
  font-family: 'Ariel';
  cursor: pointer; 
  appearance: none; 
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease; 
}
.dropdown:hover {
  background-color: #FFD700; 
  border-color: #c47f3b;
}
.dropdown:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.dropdown option {
  background-color: #FFD700; /* Same rich brown as select */
  color: #000; /* White text */
  font-family: 'Ariel', bold;
  padding: 10px;
  border: none;
}


.ltp{
float: none;
}



.topnav {
  font-family: 'MedievalSharp';
  background-color: #2e1a13;
  overflow: hidden;
  text-align: center;
  padding: 10px 0;
  border-bottom: 3px solid #764a3b;
}

.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 5px 10px;
  font-size: 18px;
  
  border-style: solid;
  border-width: 0px;
  border-radius: 20px;
  border-color: #202020;
  cursor: pointer;
  transform: scale(1.1);
}

.topnav a:hover {
  color: #f2f2f2;
  text-align: center;
  padding: 5px 10px;
  font-size: 18px;
  
  border-style: solid;
  border-width: 0px;
  border-radius: 20px;
  border-color: #202020;
  cursor: pointer;
  transform: scale(1.1);
}

.topnav a.Bard {
  background-color: #0047AB;
  color: White;
}
.topnav a.Druid {
  background-color: #83441a;
  color: White;
}
.topnav a.Healer {
  background-color: #ac0404;
  color: White;
}
.topnav a.Wizard {
  background-color: #FFD700;
  color: black;
  
}


a:link { 
text-decoration: none; 
} 
a:visited { 
text-decoration: none; 
} 
a:hover { 
text-decoration: none; 
} 
a:active { 
text-decoration: none; 
}

.toast {
  display: none;
  position: fixed;
  bottom: 60px;
  left: 20px;
  width: 180px;
  background-color: #5e3921FF;
  color: #fff;
  text-align: left;
  border-radius: 10px;
  border-color: #c47f3b;
  border-style: solid;
  padding: 10px 10px 10px 10px;
  font-family: ariel;
  font-size: large;
}
.toast.show {
  display: block;
  opacity: 1;
}
.toast {
	opacity: 1;
	animation-name: fadeOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-duration: 3s;
}

@keyframes fadeOpacity {
	100% {
		opacity: 1;
	}
  20% {
		opacity: 1;
	}
	0% {
		opacity: 0;
	}
}

footer {
  font-family: 'MedievalSharp';
  background-color: #2e1a13;
  overflow: hidden;
  text-align: left;
  padding: 3px 3px 3px 3px;
  border-top: 3px solid #764a3b;
  font-size: large;
  color: #ffffff;
  
  position: fixed;
  bottom: 0;
  left: 8px;
  right: 8px;
}