@charset "utf-8";


.modal {
   position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 500px;
    max-width: 80%;
	max-height: 90%;
	overflow-y: auto;
}


.modal.active{
        transform: translate(-50%, -50%) scale(1);
}
.modal-header{
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid black;
    
}
.modal-header .title{
    font-size: 1.25rem;
    font-weight: bold;
}
.modal-header .close-button{
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    font-size: 1.25rem;
    font-weight: bold;
}
.modal-body{
   
    font-size: 2rem;
	
	display: grid;
  	grid-template-columns: auto auto;
  	padding: 10px;
	max-height: 90%;
	overflow-y: auto;

    
}
.modal-body-left{


}
.modal-body-right{


}
.share-button{
    cursor: pointer;
	
    background-color: #FFD700;
    
    font-size: 1.25rem;
    font-weight: bold;
	
	margin: auto;
	height: auto;
	text-align: center;
	horizontal-align: middle;
	min-height: 60px;
	
	border-radius: 20%;
  box-shadow: 0 5px #999;
}


.share-button:active {

  background-color: #AD9200;
  box-shadow: 0 3px #666;
  transform: translateY(3px);
}

.modalInstructions-body{
    padding: 10px 15px;
    font-size: 1rem;
    
}
.modalLeaderboard-head{
    padding: 10px 15px;
    font-size: 1.5rem;
   
}
.modalLeaderboard-body{
    padding: 10px 15px;
    font-size: 1rem;
   
}
table {
	table-layout: fixed;
	width: 100%;
	border: 1px solid;
	border-collapse: collapse;
}
td {
	width: 100%;
	text-align: center;
border: 1px solid;
}
th {
	width: 100%;
	text-align: center;
	border: 1px solid;
}
tr:nth-child(even){background-color: #f2f2f2;}
.thrank {
	width: 20%;
	text-align: center;
}
.thuser {
	width: 60%;
	text-align: center;
}
.thscore {
	width: 20%;
	text-align: center;
}
.tdrank {
	width: 20%;
	text-align: center;
}
.tduser {
	width: 60%;
	text-align: left;
}
.tdscore {
	width: 20%;
	text-align: right;
}

.shareClass{
    width: 95%;
	max-width:400px;
	height: auto;
	
	text-align: center;
	horizontal-align: middle;
	margin: auto;
	padding: 2%;
	
    
}


#overlay{
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    pointer-events: none;
}

#overlay.active{
    opacity: 1;
    pointer-events: all;
}