@charset "UTF-8";
/* CSS Document */
.mstsbodyblock{
    margin:8px 1%;
    text-align:center;
    font-family:ibm_plex_sansregular,  sans-serif; 
    font-size:10pt;
    position:relative;
}
.mstspageheader{
    font-family:latolight,  sans-serif; 
    font-size:18pt;
    margin-top:1em;
}
.mstspagesubheader{
    font-family:latolight,  sans-serif; 
    font-size:12pt;
}

   
#mods_blocklr{
    
    display:inline-block;
    width:96%;
    padding-top:1em;
}

#right_mods_block{
    display:inline-block;
    width:95%;
    vertical-align:top;
    padding-bottom:1em;
    
}
#left_mods_block{
    display:inline-block;
    width:95%;
    vertical-align:top;
    padding-top:2em;
    
}
.colourItemInput{
    width:6em;
    border-style:none;
}
.revertSymbolsStyle{
    margin-left:0.3em;
    font-weight:bold; 
    colour:#4686c2; 
    text-decoration:none;
}
.display_canvas{
    border:solid 1px #626262; 
    width:95vw; 
    height:71.25vw;
}

.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;
    
    
}
.textPanel{
    border:solid #172717 1px; 
    position:relative;
    
    overflow:hidden;
    margin-top:1em;
    text-align:justify;
}
#textpanelExpand{
    margin-left:80vw; 
    text-decoration:none;
    cursor:pointer;
    
}
.wpicon{
    text-decoration:none;
    color:black;
    font-weight:bold;
    padding:0.1em 0.5em;
    border:solid #273727 1px;
    border-radius:6px;
    cursor:pointer;
    background-color:#ffffff;
}
#text_readability_base_panel{
    display:inline-block;
    position:relative;
    font-family:Verdana, sans-serif;
    font-size:16px;
    
}
.textread_font_container{
    white-space:nowrap;
    font-family:verdana,helvetica, sans-serif; 
	font-style:normal; 
	font-weight:normal; 
	font-size:12pt;
    line-height:16pt;
	color:#666666; 
}
.textread_font_dropdown{
	width:200px;
	border-right:none; 
	margin-right:0px;
	
	
}

.textread_font_dropdown_container{
    position:relative;
    line-height:18px;
}
.textread_font_dropdown_container a{
    text-decoration:none;
}
.textread_font_dropdown_instructions{
	font-size:10px;
	color:#84080A;
	visibility:hidden;	
	position:relative;
	
}
.text_font_dropdown_arrow{
	border-top:solid 2px #666666;
	border-right:solid 1px #AAAAAA;
	border-bottom:solid 1px #AAAAAA; 
	padding-top:2px; 
	padding-bottom:1px; 
	margin-left:0px;
	
	
	
}

.app_description{
    font-family:ibm_plex_sansregular,  sans-serif;

    font-size:11pt;
    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) {
  
.mstspageheader{
    font-size: calc(18pt + 6 * ((100vw - 320px) / 680));
    }
    .mtspagesubheader{
    font-size: calc(12pt + 6 * ((100vw - 320px) / 680));
    }
    
    
}
/* *************************************** min-width 1000 ****************/
@media screen and (min-width: 1000px) {
    .mstsbodyblock{
        margin: 24px 1%;
    }
    .mstspageheader{
        font-size:32pt;
    }
    .mstspagesubheader{
    font-size:22pt;
    }
   
    .app_description{
        margin-left:20%;
        margin-right:20%;
        line-height:16pt;
    }
    #mods_blocklr{
         margin-left:2%;
        margin-right:2%;
    }
    #left_mods_block{
     width:30vw;   
    }
    #right_mods_block{
     width:30vw;   
    }
    .display_canvas{
        width:50vw; 
        height:37.5vw;
    }
    
}