@charset "UTF-8";

/* CSS Document */
.trbodyblock{
    margin:0 1vw;
    text-align:center;
    font-family:ibm_plex_sansregular,  sans-serif; 
    font-size:10pt;
    position:relative;
}
.trpageheader{
    font-family:latolight,  sans-serif; 
    font-size:18pt;
    margin-top:1em;
}
.trpagesubheader{
    font-family:latolight,  sans-serif; 
    font-size:12pt;
}

.colour_picker_box{
    background-color:transparent;
    font-size:10pt;
    line-height:15pt;
    text-align:center;
    font-family:  ibm_plex_sansregular, sans-serif;
	
    
    
    color:#003600;
    border:solid black 1px;
    position:absolute;
    display:none;
    z-index:999;
    width:240px;
    height:240px;
    
    
}


.text_readability_margindesc {
	
	
	text-align:center;
	
	margin-top:2em;
	font-family: inria_serifregular, serif;
	font-size: 12pt; 
    
    line-height:16pt;
    color:#003600;
    


}


.hrefintext{
    text-decoration:none;
    color:rgb(121,162,159);
    font-family:inria_seriflight_italic, serif;
    
    font-size:110%;
}




.colour_names_panel{
	font-family:verdana,helvetica, sans-serif; 
	font-style:italic; 
	font-weight:normal; 
	background-color:#ffffff;
	color:#666666; 
	font-size:10pt;
	line-height: 13.5pt; 
	text-align:center; 
	
}
.colour_name{
    font-style:normal;
    font-weight:bold;
}
textarea.text_readability_textarea{
	
	
	text-align:center;
	font-family:verdana,helvetica, sans-serif; 
	font-style:normal; 
	font-weight:normal; 
	font-size:10pt;
	position:relative;
	width:100%;
	height:242px;;
	
	
	border: solid #5E5E5E 1px;
	
}
.text_readability_results_container{
	margin:16px auto;
	padding:8px 8px 24px 8px;
	background-color:white;
	border:solid 1px #757575;
	position:relative;
    width:400px;
}



.text_readability_resultline{
	text-align:center;
	font-size:12px;
	line-height:17px;
	
}
.text_readability_resultline_most{
	margin-bottom:3px;	
}
.text_readability_resultline_last{
	margin-bottom:0px;	
}
.text_readability_result_foot{
	
	
	font-size:10px;
    line-height:14px;
	padding-top:6px;
    text-align:center;
	

	
}
.text_readability_result{
	font-weight:bold;
	font-size:14px;
	
}



#greyscale_options_container{
    line-height:18px;
}

#textarea_container{
    position:relative;
    display:inline-block;
    width:400px;
    margin:0;
    vertical-align:top;
}
.colourpick_container{
    position:relative;
    display:inline-block;
    width:440px;
    margin:0;
    font-family:ibm_plex_sansregular,  sans-serif; 
    font-size:12px;
    line-height:16px;
    text-align:center;
    vertical-align:top;
    
}

#font_size_slider_box{
    width:30px;
}

.readability_cols_head{
    
    font-size:12pt;
    padding-bottom:12px;
}
.textread_chartcontainer{
	position:relative;
	width:794px;
	height:4px;
	
	margin:2px 8px;
		
}
.textread_chartcontainer_top{
    
    border-bottom:solid #777777 1px;
}
.textread_chartcontainer_bottom{
    
    border-top:solid #777777 1px;
    float:right;
    clear:both;
}
.textread_chart_column{
	position:relative;
	margin-left:0px;
	float:left;
	width:3px;
	height:4px;
	padding-left:0px;
	padding-right:0px;
	padding-bottom:0px;
	
}


.textread_font_dropdown_container{
    position:relative;
    line-height:18px;
    text-align:center;
}

.textread_font_button{
    padding:4px 10px;
    border-radius:12px;
    background-color:#B0D4CF;
    font-size:12pt;
    margin:auto;
    
}
.brightness_barchart_container{
	position:relative;
	float:right;
	width:60px;
	padding:4px ;
    border:solid 1px #999999;
	background-color: #C1C1C1;
	
}
.brightness_barchart_bar_container{
	position:relative;
	float:left;
	
	width:10px;
}
.brightness_barchart_bar{
	border:solid 1px #636363;
	font-size:2px;
	line-height:2px;
	position:relative;
	float:left;
	width:9px;
}
.calc_formula_container{
	padding-bottom:8px;
	border-bottom:solid  #779977 1px;
	
	
}
.brightness_weighting_box{
	position:relative;
	float:left;
	width:152px;;
	text-align:left;
	padding-left:24px;
	border-right:solid 1px #696969;
}
.brightness_weighting_item{
	padding-top:4px;
	padding-bottom:2px;	
	font-weight:700;
	font-size:10px;
}
.formula_type_container{
	position:relative;
	float:left;
	text-align:center;
	padding-left:22px;
	
}
.brightness_formula_box{
	position:relative;
	float:left;
	padding:4px 8px 0px 8px;	
	font-weight:700;
	font-size:10px;
}
.text_readability_keytable_1{
	padding:4px;
	font-weight:bold;
	text-align:left;
	vertical-align:top;
	
	
}
.text_readability_keytable_2{
	padding-top:4px;
	padding-left:4px;
	vertical-align:top;
	text-align:left;
	border-bottom:solid 1px #565656;
}
.text_readability_upper_line{
	border-top:	solid 1px #565656;
}
.webHex_box{
    width:5.5em;
}
.dateupdatedtext{
    font-family:Lato, sans-serif;
    font-weight:300;
	text-align:center;
	font-size:12pt;
    font-style:italic;
    
	margin-top:16px;
	position:relative;
}
.app_description{
    font-family:inria_serifregular,  serif;

    font-size:12pt;
    line-height:17pt;
    text-align:left;
}
.descriptionarrow{
    color:#214097;
    text-decoration:none;
    font-size:130%;
    
}
.app_description_content{
    display:none;
}
.app_description_title{
    font-family:ibm_plex_sanssemibold,  sans-serif;
    text-decoration:none;
}

/* *************************************** min-width 320 ****************/
@media screen and (min-width: 320px) {
  
.trpageheader{
    font-size: calc(18pt + 6 * ((100vw - 320px) / 680));
    }
    .trpagesubheader{
    font-size: calc(12pt + 6 * ((100vw - 320px) / 680));
    }
    
    
}
/* *************************************** min-width 1000 ****************/
@media screen and (min-width: 1000px) {
    
    
    .trpageheader{
        font-size:32pt;
    }
    .trpagesubheader{
    font-size:22pt;
    }
    
    .text_readability_margindesc {
        margin-left:20%;
        margin-right:20%;
    
    }
    #textarea_container{
       width:20vw; 
    }
    
}