/* Config */
/* mixins */
/* Styles */
html, body {
  height: 100%;
}

.textcontainer {
    display:block;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:75%;
    top:5%;
    height:90%;
    overflow-y:auto;
    scrollbar-width:thin;
  color:#eee;
  background-color:rgba(0,0,0,0.9);
  border: 1px black solid;
  box-shadow:inset 0 0 0 1px #3c3c3c;
  margin-top:3px;
  margin-bottom:3px;
  padding-left:12px;
  font-size:16px;
  font-family: "CandideCondensedRegular", serif;
  z-index:5;
  }
  span.Red{
    color:#f73337;
  }
  td, tr, th{
    			  border:1px solid #333;
    			  
    			  padding:0.5%;
    			}
    			
    			h4{text-align:center;text-decoration:underline; font-weight: bold;}
    			
    			h2{
    			  padding-top:1%;
    			 padding-bottom:1%;
    			 text-decoration:underline; 
    			 text-align:center;
  text-shadow: -1px -1px 0 #3c3c3c, 1px -1px 0 #3c3c3c, -1px 1px 0 #3c3c3c, 1px 1px 0 #3c3c3c;
    			}
    table{
      width:99%;
      margin-bottom:1%;
      margin-left:auto;margin-right:auto;
    }
    .speaker {
    	min-width:15%;
    	text-align:right;
    	font-weight: bold;
    }
    
    ..chapterTree {width:80%;margin-left:auto;margin-right:auto;text-align:center;}
    
    .pagination{
		text-shadow:none;
		border-collapse:collapse; 
		border: 1px transparent; 
		width:76%;
		margin-top:2%;
		margin-bottom:2%;
    position:relative;
    margin-left:auto;
    margin-right:auto;
  color:#eee;
  background-color:rgba(0,0,0,0.9);
  border: 1px black solid;
  box-shadow:inset 0 0 0 1px #3c3c3c;
  margin-top:3px;
  margin-bottom:3px;
  padding-left:12px;
  font-size:16px;
  font-family: "CandideCondensedRegular", serif;
  z-index:5;
  top:5%;
		}
		.pagination-bar{text-align:center;width:33.3%;}
    .fa-arrow-left{
    padding-right:0.5em;
    color:#3c3c3c;
    }
    
     .fa-arrow-right{
    padding-left:0.5em;
    color:#3c3c3c;
     }
    
    th {font-style: italic;font-weight: normal;text-align:center}

.fa-home{
  transform:scale(1.5);
}

.home {
height: fit-content;
  width: fit-content;
  position: absolute;
  left: 0;
  z-index: 5;
  top: 0;
  overflow: hidden;
}

.home a {
  color: rgba(190,190,190, 0.6);
  padding: 16px;
  text-decoration: none;
  display: block;
  position:relative;
  font-size:17px;
}

/* Change color on hover */
.home a:hover {
  color: white;
}

@font-face {
	font-family: "CandideCondensedRegular";
	src: url("/ui/Candide-CondensedMedium.ttf");
}

.candide-condensed-regular {
	font-family: "CandideCondensedRegular", serif;
	font-weight: 400;
	font-style: normal;
}

.characterselect{
  top:5%;
  left:5%;
  width:20%;
  height:90%;
  position:absolute;
  display:block;
  overflow-y:auto;
  scrollbar-width: thin;
}

.characterselect button{
  display:block;
  text-align:left;
  width:100%;
  height:32px;
  color:white;
  background-color:rgba(0,0,0,0.7);
  border: 1px black solid;
  box-shadow:inset 0 0 0 1px #3c3c3c;
  margin-top:3px;
  margin-bottom:3px;
  padding-left:12px;
  font-size:14px;
  font-family: "CandideCondensedRegular", serif;
  text-shadow: -1px -1px 0 #3c3c3c, 1px -1px 0 #3c3c3c, -1px 1px 0 #3c3c3c, 1px 1px 0 #3c3c3c;
}

.characterselect button:hover, .characterselect button:active, .characterselect button:focus{
  background-color:#5c005d;
  border: 1px #5c005d solid;
  box-shadow:inset 0 0 0 1px #5c005d;
}

/* Style the tab content */
.tabcontent {
  top:5%;
  left:24%;
  width:15%;
  height:90%;
  margin-left:37px;
  position:absolute;
  display:none;
  z-index:2;
  overflow-y:auto;
  scrollbar-width: thin;
}

.tabcontent button{
  display:block;
  text-align:left;
  width:100%;
  height:32px;
  color:white;
  background-color:rgba(60,60,60,0.7);
  border: none;
  margin-top:3px;
  margin-bottom:3px;
  padding-left:12px;
  font-size:14px;
  font-family: "CandideCondensedRegular", serif;
  text-shadow: -1px -1px 0 #3c3c3c, 1px -1px 0 #3c3c3c, -1px 1px 0 #3c3c3c, 1px 1px 0 #3c3c3c;
}

.tabcontent button:hover, .tabcontent button:active{
  background-color:#5c005d;
}

/* Clear floats after the tab */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* The Modal (background) */
.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  top:5%;
  left: 42%;
  width: 54vw; /* Full width */
  height: 90vh; /* Full height */
  background-size: cover;
  background-image:url('/ui/x2/bg.png');
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  text-align:center;
}

model-viewer{
  width:54vw;
  height:90vh;
  --progress-bar-color: #5aa4de;
}

.controls {
	font-family: "CandideCondensedRegular", serif;
	font-size:14px;
  max-width: 10em;
position: absolute;
display: flex;
flex-direction: column;
bottom: 40px;
left: 1rem;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
/* max-height: 14rem; */
overflow: auto;
}

.controls button{
  
	font-family: "CandideCondensedRegular", serif;
}
.glass {
background: rgba(255, 255, 255, 0.37);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(8px) contrast(0.89) saturate(1.27);
-webkit-backdrop-filter: blur(8px) contrast(0.89) saturate(1.27);
border: 1px solid rgba(255, 255, 255, 0.4);
padding: 0.5rem;
border-radius: 0.5rem;
}