body{font-size:18px;}

.f-btgN {font-family: ubuntu; word-spacing: -3px;}

.btgN {width:50%;} 
.playNow {width:0;}
.btgF, .btgM {width:50%;}  

.h31, .h32 {
    font-weight: 400; 
    font-family: ubuntu;  
    font-size: 150%;
    margin: 20px 0 20px 0;
    color: #476CDA;
    text-align: center;
}

.pnar {font-size: 110%; line-height: 140%; margin-top:20px; margin-left:10%; margin-right: 10%;}

.showMessage{  
    font-weight: bold; color: #444; 
    text-align: center;  
	padding: 12px 0px;
	background-color: #ffff4d;
	width: 100%; 
}

.btn:link, 
.btn:visited,
input[type=submit] {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 200px;
    transition: background-color 0.2s, border 0.2s, color 0.2s; 
}
.btn-full:link, 
.btn-full:visited, 
input[type=submit] {
    background-color: #00e600;
    color: #111;
    border: 1px solid #00e600; 
    margin-right: 15px;
}

.btn:hover, .btn:active,
input[type=submit]:hover, input[type=submit]:active {
    background-color: #00b300;
    color: #fff;
}

.btn-full:hover, btn-full:active,
input[type=submit]:hover, input[type=submit]:active {
    border: 1px solid #00b300; 
}

.naro {
    line-height: 140%;
    width: 40%;
    /*color: #0f6600;*/
    margin-left: 30%; /* half of 30 to move the p to center */   
}

.section-go {
	background-color: #fff;
	padding: 7px 0px 20px 0px;
}

.section-checks {
	background-color: #fff;
	padding: 0px 0px 20px 0px;
}

.boxy {
	margin: 0 auto;
	width: 40%;
}

.boxy3 {
	/* margin: 0 auto;
	width: 100%; 
    background: white;
    text-align: center;
    */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* If you also want to center vertically */ 
}


.boxy-low {	margin: 0 auto;
	width: 40%; 
}
.boxy-low2 {	
	width:100%; margin-left: 40%; margin-bottom: 12px; margin-top: 20px;
    /*background-color: pink;*/
}
.boxy-clear{ clear:both;}

.section-diffs {
	background-color: #f2f2f2; /*f2f2f2  eeffe6*/
    padding: 0px 0px 12px 0px;
}


.noms {
	float: left;
	padding: 7px 20px 0 0;
	font-size: 110%;
	color:#444;
	margin-top: 10px;
}

.noms2 {
	float: left;
	padding: 3px 20px 0 0;
	color:#333;
	margin-top: 10px;
}
.points {
    padding-left: 24px;
    text-align: right; vertical-align: top;
    padding-bottom: 20px;
	color: #777;
}
/* the brackets specifies the input type. Otherwise, the checkbox and submit button 
would also be 100% wide...yuck */
input[type=text] {
    width: 100%;
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

*:focus {outline: none;} 

.reqd {
    margin: 20px auto 0px auto;
	background-color: pink; 
    padding: 12px; 
    text-align:center;
	width: 50%;

}
.c {
    font-size: 90%;
}


.aslinko {
	/* same as nar */
	margin: 24px 0 10px 0;
    line-height: 140%;
    width: 40%;
    margin-left: 30%; /* half of 30 to move the p to center */   
}

.aslinko a:link, .aslinko a:visited {
    text-decoration: none;
    border:0;
    color: #ff6600;
    transition: color 0.2s;
}

.aslinko a:hover, .aslinko a:active {color: #0066ff;}


/* ========= include Pentatuech =================================*/
.indent {margin-left: 30px; font-style: italic;}

.help {border-bottom: 1px dotted black;}

.help .tooltiptext {
  margin-left: 5px;  
  width: 120px;
  background-color: yellow; /*363636*/
  color: #000; /*fff*/
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  border: 1px solid #777;
  font-size: 90%;
  position: absolute;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  
}

.help:hover .tooltiptext {visibility: visible; opacity: 1;}


.newpent {position: relative; display: inline; top: 24px; left: -50px; 
	color: #006600; font-weight: 700; font-size: 90%; background-color: yellow; }
    
.fixnew {margin-top: -16px}

.hr1 {position: relative; border: 1px solid green;  width: 130%;}
	
hr {color: #ddd;}

.ot {float: left; margin-left: 10%;}
.nt {float: right; margin-right: 10%;}



.fl-foot a:link, .fl-foot a:visited {
    text-decoration: none;
    border:0;
    color: #bfbfbf;
    transition: color 0.2s;
}
.fl-foot a:hover, .fl-foot a:active {color: #e9e9e9;}



/* ----------------- FLEX --------------------------------- */
.flname {display: flex; flex-direction: column; align-items: center; }
.fl1 {display: flex;}
.fl-foot-row {display: flex; justify-content: space-between; margin-bottom: 24px;}
.fl-foot {text-align: center; width: 100%;}
.fl-c {display: flex;  justify-content: center; font-size: 90%; color: #888;}
.choosebooks { /*container*/
    display: flex; 
}