body {
    
    padding: 20px;
    padding-left: 12px;
    padding-right: 12px;
    background: url('../Images/wood_old.jpg') no-repeat;  
    
    background-size: cover;
    min-height: 100vh;
}

/* Set padding to keep content from hitting the edges */


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
    text-align: center;
    font-family: CupAndTalon;    
}


input[disabled="disabled"] {
    
    background-color: #808080;
    
}

@font-face {
  font-family: 'DnDGlyphs';
  src:  url('fonts/DnDGlyphs.eot?2sjye9');
  src:  url('fonts/DnDGlyphs.eot?2sjye9#iefix') format('embedded-opentype'),
    url('fonts/DnDGlyphs.ttf?2sjye9') format('truetype'),
    url('fonts/DnDGlyphs.woff?2sjye9') format('woff'),
    url('fonts/DnDGlyphs.svg?2sjye9#DnDGlyphs') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="dnd-"], [class*=" dnd-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'DnDGlyphs' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  color: white;
  line-height: 1;    
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dnd-brand:before {
  content: "\e900";
  color: crimson;
}
.dnd-d20:before {
  content: "\e901";
}
.dnd-scroll:before {
  content: "\e902";
}


/* hr {
    border: 0;
    clear:both;
    display:block;
    width: 96%;               
    background-color:black;
    height: 1px;
  } */
hr.stylized { 
    height: 15px; 
    border-style: solid; 
    border-color: black; 
    border-width: 1px 0 0 0; 
    border-radius: 20px;
    width: 92%;
    padding-bottom: 0;    
} 
hr.stylized::before { 
    display: block; 
    content: ""; 
    height: 15px; 
    margin-top: -16px; 
    border-style: solid; 
    border-color: black; 
    border-width: 0 0 1px 0; 
    border-radius: 20px;    
}  
@font-face {
  font-family: 'CupAndTalon';
  src:  url('fonts/Cup and Talon.ttf');  
  font-weight: normal;
  font-style: normal;
}
h1,h2,h3,h4,h5,h6{
    font-family: CupAndTalon;
}
@font-face {
  font-family: 'dice';
  src:  url('fonts/dice.eot?h5qjfy');
  src:  url('fonts/dice.eot?h5qjfy#iefix') format('embedded-opentype'),
    url('fonts/dice.ttf?h5qjfy') format('truetype'),
    url('fonts/dice.woff?h5qjfy') format('woff'),
    url('fonts/dice.svg?h5qjfy#dice') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="dice-"], [class*=" dice-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'dice' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dice-d20:before {
  content: "\e900";
}
.dice-d12:before {
  content: "\e901";
}
.dice-d100:before {
  content: "\e902";
}
.dice-d10:before {
  content: "\e903";
}
.dice-d8:before {
  content: "\e904";
}
.dice-d4:before {
  content: "\e905";
}
.dice-d6:before {
  content: "\e906";
}
.parch-image{
    background-image: url('../Images/vintage-parchment.jpg');
    background-repeat: no-repeat;
    background-color: #cccccc;
    font-size: 3em;
    align-content: center;
    height: auto;
    padding: 40px;
    clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);     
}
#log-wrapper {
    overflow:auto;
    max-height: 420px;
    height: 420px;
}
#rolls-container {
    overflow: auto;
    max-height: 370px;
    height: 370px;
}
#rolls-wrapper {    
    text-align: left;
    padding-left: 20%;
}
#buttonRow-wrapper {
    position: relative;
    padding-bottom: 5px;
}
#button-row {
    text-align: right;
}

.btn-outline-success{
    background:rgba(34, 83, 34, 0.55);
}
.btn-outline-danger{
    background:rgba(217,83,79,0.55);
}
.btn-outline-dark{
    font-family: CupAndTalon;
    background-color: rgba(36, 34, 34, 0.55);
    color: lightgray;
}
.btn-outline-primary {
    background: rgba(10,45,127, 0.55);
    color: lightgray;
}

.table-borderless{
    margin: 0 auto;
    width: 95% !important;
    text-align: center;
}
 #roll-log-panel{
   /*  height: 275px;
    max-height: 275px; */
    max-height: 554px;
    height: 554px;
    font-family: CupAndTalon;
    font-size: 1.1rem;
    
} 

#roll-target{
    
    list-style-type: none;
    padding: 0;
    font-family: CupAndTalon;    
    font-size: 1.4rem;
}

#pills-tabContent{
    
    padding-left: 15px;
}
#pills-rolls {
    height: 450px;
    max-height: 450px;
}
.nav-pills .roll-pill .nav-link:not(.active) 
{
    background-color: transparent;
    color: black;
    border: solid 1px black;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.nav-pills .roll-pill .nav-link:not(.active):hover{
    background-color: rgba(36, 34, 34, 0.4);
    color: lightgray;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    cursor: pointer;
}

.nav-pills .log-pill .nav-link:not(.active) 
{
    background-color: transparent;
    color: black;
    border: solid 1px black;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.nav-pills .log-pill .nav-link:not(.active):hover{
    background-color: rgba(36, 34, 34, 0.4);
    color: lightgray;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    cursor: pointer;
}
/* active pills */
.nav-pills .roll-pill .nav-link {
    background-color: transparent;
    color: black;    
    border: solid 1px black;
    border-bottom: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.nav-pills .roll-pill .nav-link:hover{
    cursor: not-allowed;
}
.nav-pills .log-pill .nav-link {
    background-color: transparent;
    color: black;    
    border: solid 1px black;
    border-bottom: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    
}
.nav-pills .log-pill .nav-link:hover{
    cursor: not-allowed;
}