body 
{
    font-family: sans-serif;
    /*background: rgb();*/
    padding-left: 7.5%;
    padding-right: 7.5%;
}

table, th, td
{
    border: 1px solid;
    border-collapse: collapse;
}

table
{
    width: 100%;
    margin: auto;
}

th, td
{
    text-align: center;
}

button
{
    height: 35px;
    width: 120px;
    background-color: silver;
}

button:hover
{
    background-color: dimgrey;
    color: white;
}

/*Sidebar*/
.sidebar
{
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 6%; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding: 1.5%;
    color: white;
}

.sidebar button
{
    width: 100%;
    height: 50px;
    font-size: 20px;
    display: block;
}

.main 
{
    margin-left: 160px; /* Same as the width of the sidebar */
    padding: 0px 10px;
}
  
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) 
{
    .sidebar {padding-top: 15px;}
    .sidebar button {font-size: 12px;}
}

/*Accordions*/
.accordion 
{
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel 
{
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}


/*Other*/
.center
{
    text-align: center;
}

/*Statblock display*/
.parchment 
{
    position: absolute;
    display: flex;
    width: 50%;
    /*min-height: calc((1vw + 1vh) * 75);*/
    height: inherit;
    /* center page with absolute position */
    top: 7%; left: 50%; transform: translate(-50%, 0);
    margin: 2em 0;
    padding: 4em;
    box-shadow: 2px 3px 20px black, 0 0 60px #8a4d0f inset;
    background: #fffef0;
    filter: url(#wavy2);
    /*https://stackoverflow.com/questions/14585101/old-paper-background-texture-with-just-css*/
}

.line
{
    width: 100%;
    border-bottom: 3px solid rgb(134, 0, 0);
    position: relative;
    /*https://stackoverflow.com/questions/32819543/draw-a-line-in-a-div*/

    color: rgb(134, 0, 0);
    font-family: serif;
}

.statblockInput input, select, textarea
{
    color: rgb(134, 0, 0);
    font-family: serif;
    font-size: 15px;
    background: none;
    border: none;
}

.statblockInput .large
{
    font-size: 30px;
}

.statblockInput td, tr, table 
{
    font-size: 15px;
    /*float: center;*/
}


#saveStatblock
{
    border-radius: 12px;
}

/*tooltip*/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


.diceRoller
{
    height: auto;
    width: auto;
    background-color: transparent;
    border: rgb(134, 0, 0);
}

.diceRoller:hover
{
    background-color: rgb(134, 0, 0);
}