@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 */
  
  -webkit-appearance: none;    /* Hide arrows in Chrome, Safari */
  appearance: none;            /* Modern browsers fallback */
  -moz-appearance: textfield !important;  /* Hide arrows in Firefox */
}

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: #6082B6;
    color: #fff;
    padding: 6px;
    font-size: 1.4 em;
    text-align: Center;
    border-bottom: 1px solid #1434A4;
  font-family: 'helvetica';
}
/* Table Rows */
tr{
  border-right: 10px solid #6082B6;
}
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: #0047AB; /* Rich green color */
    color: #FFF; /* White text */
    padding: 2px 10px; /* Padding for the button */
    border: 2px solid #CCCCFF; /* 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: #0000DD ; /*#a07e4c Lighter brown on hover */
    border-color: #CCCCFF; /* 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: #0000DD; /* #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 {
   
    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: #0047AB;
  color: #fff;
  text-align: left;
  border-radius: 10px;
  border-color: #CCCCFF;
  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: #0047AB; 
    color: #fff; 
    padding: 2px 10px; 
    border: 2px solid #ccccff; 
    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: #0000DD; 
    border-color: #c47f3b;
}
.dropdown:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.dropdown option {
    background-color: #0047AB; /* Same rich brown as select */
    color: #fff; /* 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: #0047AB;
  color: #fff;
  text-align: left;
  border-radius: 10px;
  border-color: #CCCCFF;
  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;
}