@charset "UTF-8";
/* CSS Document */
.cnmbodyblock{
    margin:8px 1%;
    text-align:center;
    font-family:ibm_plex_sansregular,  sans-serif; 
    font-size:10pt;
    position:relative;
}
.bodybold{
     font-family:ibm_plex_sansbold,  sans-serif; 
}
.cnmpageheader{
    font-family:latolight,  sans-serif; 
    font-size:18pt;
    margin-top:1em;
}
.cnmpagesubheader{
    font-family:latolight,  sans-serif; 
    font-size:12pt;
}
.ranger_chartcontainer{
    margin-top:0.8em;
    text-align:center; 
    z-index:800;
    font-size:10pt;
}
.download_button{
    visibility:hidden;
    border-radius:8px;
    
    font-size:12pt;
    background-color:#E9DBD1;
    padding:2px 8px;
    cursor:pointer;
}

.optionIndent{
    margin-left:18px;
    text-indent: -18px;
}
.colour_sample{
    padding:2px 14px;
    border:solid 1px #222222;
    font-size:8pt;
    background-color:RGB(10,10,10);
}
.textfiledisp{
    display:inline-block;
    font-size:11pt;
    line-height:14pt;
    height:56pt;
    width:100%;
    overflow:scroll;
    border:solid 1px #333333;
}
.selectMargin{
   width:24px;
    text-align:right;
}
#processing_info{
    visibility:hidden;
    font-size:14pt;
    margin-top:8px;
    color:#C81215;
}
#equal_break_block{
    position:relative; 
    text-align:center;
    margin-top:12px ;
    border-top:solid 1px #252525;
    border-bottom:solid 1px #252525;
    background-color:#CCD6DC;
}
   
#mods_blocklr{
    
    display:inline-block;
    width:96%;
    padding-top:1em;
}

#left_mods_block{
    display:inline-block;
    width:49%;
    vertical-align:top;
    
}
#right_mods_block{
    display:inline-block;
    width:49%;
    vertical-align:top;
    padding-top:2em;
    
}
.left_small_block{
    display:inline-block;
    vertical-align:top;
    text-align:center;
    width:48%;
    
    
}
.right_small_block{
    padding-left:16px;
    display:inline-block;
    vertical-align:top;
    text-align:left;
    width:48%;
}
.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;
    
    
}

.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;
}
#paintResult{
    background-color:#FED88E;
    padding:4px 8px;
    border-radius:8px;
    color:#0F0477;
    font-size:14pt;
    visibility:hidden;
    
}
.font_slider_box{
    width:32px;
    text-align:right;
}
.app_description_title{
    font-family:ibm_plex_sanssemibold,  sans-serif;
    text-decoration:none;
}
.text_readability_textarea{
    font-family:Verdana, sans-serif;
    font-size:16pt;
    text-align:center;
    border:solid 1px #99aabb;
    margin-top:8px;
}
.cookieNotice{
     position:relative; 
    border-top:solid #779977 1px; 
    border-bottom:solid #779977 1px; 
    padding-top:6px; 
    text-align:center; 
}
#monospaced{
    margin-top:8px;
    border-top:solid 1px #432432;
    padding-top:12px;
    position:relative;
    visibility:hidden;
}
.monobutton{
    background-color:#D2D4DF;
    padding:4px 8px;
    border-radius:8px;
    color:#0F0477;
    font-size:10pt;
    visibility:hidden;
}
/* *************************************** min-width 320 ****************/
@media screen and (min-width: 320px) {
  
.cnmpageheader{
    font-size: calc(18pt + 6 * ((100vw - 320px) / 680));
    }
    .cnmpagesubheader{
    font-size: calc(12pt + 6 * ((100vw - 320px) / 680));
    }
    
    
}
/* *************************************** min-width 1000 ****************/
@media screen and (min-width: 1000px) {
    .cnmbodyblock{
        margin: 24px 1%;
    }
    .cnmpageheader{
        font-size:32pt;
    }
    .cnmpagesubheader{
    font-size:22pt;
    }
    #equal_break_block{
        margin-left:20%;
        margin-right:20%;
    }
    .app_description{
        margin-left:20%;
        margin-right:20%;
    }
    #mods_blocklr{
         margin-left:2%;
        margin-right:2%;
    }
    .display_canvas{
        width:50vw; 
        height:37.5vw;
    }
    
}