/*
need internet: removed:
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

it has inner links, still outside
 */ 
/*
@import url('./src/vendor/fonts/roboto-mono.txt?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('./src/vendor/fonts/roboto-condenced.txt?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
*/

/*
@font-face {
  font-family: 'Roboto';
  src: url('./src/vendor/roboto-font/Roboto/static/Roboto-Regular.ttf') format('truetype');
}
*/

:root {
    /* constants */
    --color-main : #202936;
    --color-white : #ffffff;
    --color-medium-grey : #626D7E;
    --color-light-grey : #C5CAD4;
    --color-pale-blue: #F4F6F9;
    --color-stone-blue: #8091A8;
    --color-light: white;
    --border-radius: 20px;
    --border-color: #AFAFAF;
    --exegesisBackgroundColor : 'white';
    --FOCUS_COLOR : #888888;
    --FOCUS_OFF_COLOR : #888888;
    --SHUTTLE_COLOR : rgba(150, 175, 200); 
    --SHUTTLE_COLOR_FAINT : rgba(150, 175, 200, 0.4);
    --SHUTTLE_BG_COLOR : rgba(245, 245, 255); 
    --helpBoxOpacity : 1; /* todo: was fconf.appDecor.helpBox_opacity0 ? 0 : 1; but why? */

    --font-serif : 'Times New Roman', serif;
    --font-sans : 'Arial', sans-serif;
    --font-mono : 'Roboto Mono', monospace;
    --font-condensed : 'Roboto Condensed', sans-serif;

    --default-font: var(--font-sans);
    --homepage-font: var(--font-serif);
    --text-tab-font: var(--font-serif);
    --video-tab-font: var(--font-sans);
    --data-numerical-font: var(--font-mono);

    /* variables; these default values may be changed by dispatch-css.js module */
    --main_horizontal_dividor_width_px : 21px;
    --doDisplayPageTopNavigatMenu : flex; 
    --LEFT_SIDE_MENU_WIDTH : 40px; /* from contents\conf\conf.js */
    --LEFT_SIDE_MENU_OFFSET_X: 20px;
    --logic_phaseChildWidth : 1;
    --aspectionChildWidth : 1;
    --leftTopLeafLength : 1;
}

html, body { 
    border      : none;
    font-size   : 15px; /*this defines what 1rem is */
    background-color : var(--color-light);
    width       : 100%;
    height      : 100vh;
    overflow    : hidden;
    padding     : 0;
    margin      : 0;      
}

body {
    color: var(--color-medium-grey);
    font-family: var(--default-font);
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    /* font-size: 100%;
    font: inherit; */
    vertical-align: baseline;
    line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

h1, h2, h3, h4, h5, h6{
    color: var(--color-main);
    font-weight: 200;
    font-family: var(--default-font);
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 24px;
}

a {
    text-decoration: none;
}

p {
    font-size: 1rem;
    line-height: 1.75;
}

/* home page::user-guide-paragraphs */
.how-to__cell p {
    line-height: 1.2;
}

b {
    font-weight : bold;
}

/*================================*/
/* //|| position flow             */
/*================================*/

.bsl-approot {
    position    : relative;
    width       : 100%;
    margin      : 0;
    padding     : 0;
    /* todo patch, just to hide accidental misfits, but there
       must be no misfits
    */
    /* ?? todo why needed for shift-up-bug-making-hidden? */
    overflow    : hidden;
 }

.bsl-sim-superscene {
    position    : relative;
    display     : inline-block;
    float       : left;
    box-sizing  : border-box;
    padding     : 0;
    margin      : 0;
    overflow    : visible;
}

.bsl-text-widget {
    position        : relative; /* does not help ... no difference */
    float           : left;
    padding         : 10px;
    padding-left    : 5px;
    padding-right   : 20px;
    margin          : 0;
    overflow-y      : auto;
    overflow-x      : hidden; /*patch for css-opacity-transition*/
    background-color: white;
}

/* fixes media by making margins dynamically in-line */
.bsl-simscene {
    position    : relative;
    clear       : both; /* clears against media-top-controls */
    left        : var(--main_horizontal_dividor_width_px);
    overflow    : visible;
    padding     : 0;
    margin      : 0;
    box-sizing  : border-box;
}

/* browser-controlled height ends here: next components
   may take absolute positioning
*/
.bsl--svgscene {
    position    : absolute;
    left        : 0;
    top         : 0;
    box-sizing  : border-box;
}

.bsl-legend-root {
    position    : absolute;
}


/*================================*/
/* //|| media pane                */
/*================================*/

.bsl-simscene {
    text-align  : center;
    font-family : var(--default-font);
}

.bsl--svgscene {
    opacity     : 1;
    z-index     : 10;
}


/* todm non-consistent style set, must be dynamic by box-tester as for other parts */
/* This corresponds with MOBILE_MEDIA_QUERY_WIDTH_THRESHOLD : 790 as defined in contents/conf/conf.js */
@media screen and (max-width: 790px) {
    /*================================*/
    /* //|| position flow             */
    /*================================*/
    html, body { 
        height      : auto;
        /* for case to make visible absolute overflow over auto-page */
        overflow-y  : auto;
    }
    .bsl-text-widget {
        width           : 94%;
        margin-right    : 3%;
        margin-left     : 2%;
        margin-bottom   : 20px;
    }
    .bsl-sim-superscene {
        width       : 94%;
        margin-left : 3%;
        margin-right: 3%;
        float       : none;
    }
    .bsl-simscene {
        /* no "width and left" for d8d dividor in mobile */
        width   : 100%;
        left    : 0px;
    }
    .bsl--svgscene,
    .bsl-legend-root {
        position : relative;
        width    : 100%;
    }
}

@media only screen and (max-width:720px){
    .btn--how-to{
        display: none !important; /* tod? */
    } 
}


/************************************************
    //\\\\ originally from site.css.js
************************************************/

body .show-picture-credit {
    display : none;
} 
              
body.contents .show-picture-credit {
    display : block;
}               

.bsl-bg-image {
    position : absolute;
    width   : 100%;
    left    : 0;
    top     : 0;
    z-index : 9;
}

table.essay-normal {
    display         : inline-block;
    text-align      : left;
    border-collapse : collapse;
    border          : 1px solid black;
}

table.essay-normal td {
    padding : 5px;
    border  : 1px solid black;
}

table.essay-columns td {
    padding : 5px;
    border  : 1px solid grey;
    border-top : none;
    border-bottom : none;
}

table.essay-no-border {
    border-collapse : collapse;
    display         : inline-block;
    text-align      : left;
    border          : none;
}

table.essay-no-border td {
    padding         : 5px;
    border          : none;
}

table.essay-minimal-td td {
    padding         : 0px 0px 0px 10px;
    border          : none;
}

table.matrix-determinant {
    border          : none;
    border-left     : 2px solid #626D7E;
    border-right    : 2px solid #626D7E;
}

table.matrix-determinant td {
    text-align      : center;
    border-collapse : collapse;
    border          : none;
    padding         : 0px;
}

/* @import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,800,900"); */


/* fixes for bully css-reset-tool */
sub {
    vertical-align: sub;
    font-size: smaller;
}

/* fixes for bully css-reset-tool */
sup {
    vertical-align: super;
    font-size: smaller;
}

/******************************************/
/* //|| page primary sections             */
/******************************************/

/* vital */
/*
.bsl-menu-filler { 
    height: ${fconf.attach_menu_to_essaion_root ? 65 : 90}px;
}
*/

/* //=======================================
// //\\ visib
//=======================================
//svg display
//display-inline-and-block-on-svg-elements
//https://stackoverflow.com/questions/41437423/difference-between- */
/* idea:
    .display-block {
        display : block;
    }
*/
/* setting specifity prevaling "hidee-feature" cssClass */
div.bsl-approot svg.bsl--svgscene .undisplay,
.display-none {
    display : none;
}

/* enables original-figure-picture disappearance */
/* at version 1112, restored by client request */
/* todm: .in-study must be lemma-wise flag, not image-wise */
.bsl-bg-image.in-study {
    opacity:0;
    transition: opacity 1s ease;
}

/*================================*/
/* //|| bsl--svgscene                */
/*      .bsl--svgscene === svg       */
/*================================*/
/* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
/* this really solved firefox problem of "shadow-dragging-object"
    the problem tested and logged in 
    83-current-svg-firefox-problems.zip
    as of June 12, 2019 ( a year later we don't see this problem in FF )
    circle.movable { user-select: none; .... 
*/
.highlight-text-disabled,
.menu-teaf,
.master-pagination-btn,
.bsl--svgscene text {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}
/*================================*/
/* ||// bsl--svgscene             */
/* ||// media pane                */
/*================================*/

#bsl-resizable-handle {
    display: flex;
    align-items: center;
    left: 0px;
    top: 0;
    margin: 0 8px;
    position: absolute;
    height: 100%;
    cursor: grab; /* overrides dynamic overlay */
    background-color: #cccccc;
}

.brc-slider-draggee.dividor:hover:after {
    background-color: transparent;
}        
/*---------------------------*/
/* \\// horizontal resizer   */ 
/*---------------------------*/

/*========================================*/
/* //|| mobile                            */
/*========================================*/
/* todm non-consistent style set, must be dynamic by box-tester as for other parts */
/* value corresponds to MOBILE_MEDIA_QUERY_WIDTH_THRESHOLD : 70; in contents/conf/conf.js */
@media screen and (max-width: 790px) {
    
    #bsl-resizable-handle {
        display: none;
    }
}

/*========================================*/
/* ||// mobile                            */
/*========================================*/


/* //========================================
// //\\ main-legend                       
//      the only reason for "flex"
//      it make table narrow ...
//      otherwise, margin may solves all
//======================================== */

.bsl-legend-root {
    box-sizing   : border-box;
    text-align   : center;
}

.main-legend {
    table-layout : auto;
    box-sizing   : border-box;
    margin-left  : 15px;
    margin-right : 15px;
}

.main-legend td {
    text-align:center;
}
.main-legend td.monospace {
    font-family : var(--data-numerical-font);
}

.main-legend.hidden {
    display:none;
}

/*todm: should be automated */
.logic_phase--claim .main-legend.proof,
.logic_phase--corollary .main-legend.proof {
    display:none;
}
/* visibility per model-mode */
.logic_phase--corollary .main-legend.claim,
.logic_phase--proof .main-legend.claim {
    display:none;
}
/* visibility per model-mode */
.logic_phase--claim .main-legend.corollary,
.logic_phase--proof .main-legend.corollary,
.main-legend.corollary_2, .main-legend.corollary_3 {
    display:none;
}

.main-legend td {
    padding:1px;
    /* for dev mode: border: 1px solid black; */
}


/*====================================*/
/* //\\ table formatter               */
/*====================================*/
.main-legend td {
    text-align:left;
}
.main-legend td.table-caption {
    padding-bottom:4px;
    text-align:center !important;
    font-weight:bold;
}
.main-legend td.align-to-right,
.main-legend tr td:first-child {
    text-align:right;
}
.main-legend td:first-child, .proof td:nth-child(4), .corollary td:nth-child(4) {/* bc labels aren't given their own class */
    min-width: 7em !important;
    text-align:right;
}
.main-legend td.value {
    font-family: var(--data-numerical-font);
    width: 5rem;
    padding-left: 1rem !important;
    height: 1rem; /* so vertical spacing stays constant when value is "at limit" */
}
.main-legend .eq-sign {
    text-align:center;
}  
.main-legend .limit {
    font-family: var(--font-condensed);
}  


/*------------*/
/* //\\ mix   */
/*------------*/
.main-legend.claim,
.main-legend.proof {
    border-collapse: separate;
    border-spacing: 10px 0px;
}

.claim.row1,
.corollary.row1,
.proof.row1 {
    opacity:0;
}
/*------------*/
/* \\// mix   */
/*------------*/

/*====================================*/
/* \\// table formatter               */
/*====================================*/

.main-legend td {
    font-size:14px;
}

@media (max-width: 900px) {
    .main-legend td {
        font-size:11px;
    }
}

@media (max-width: 850px) {
    .main-legend td {
        font-size:10px;
    }
}

@media (max-width: 800px) {
    .main-legend td {
        font-size:13px;
    }
}

@media (max-width: 600px) {
    .main-legend {
        position:static;
        width:100%;
    }
}

/* //==================================
// //\\ model help
//================================== */

.model-help {
    cursor: pointer;
    opacity:1;
}
.video-help-button {
    cursor: pointer;
    opacity:0.2;
}
.video-help-button:hover,
.model-help:hover {
    opacity:1;
}

/* todo: this was only added conditionally, why? if( fconf.appDecor.helpBox_opacity0 ) */
/* but also, it should be pointer, why set to auto at all? */
/* .video-help-button,
.model-help {
    cursor: auto;
} */

/* //==================================
// \\// model help
//==================================


//==================================
// //\\ video
//================================== */

.bsl-showreel-video-wrap {
    position:relative;
    margin-bottom:10px;
    background-color:transparent; /*#DDDDDD;*/
    left        :50%;
    transform   :translate(-50%,0%);
}

.bsl-showreel-video,
.bsl-showreel-video-iframe{
    position:absolute;
    width:96%;
    height:96%;
    left:50%;
    top:50%;
    transform   :translate(-50%,-50%);
    background-color:#DDDDDD;
}

.bsl-close-html-button {
    position:absolute;
    width:20px;
    height:20px;
    border-radius:15px;
    right:-20px;
    top:10px;
    padding-top:5px;
    padding-left:9px;
    color:white;
    font-size:16px;
    font-weight:bold;
    background-color:rgba(0,0,0,1);
    cursor:pointer;
    opacity:1;
    z-index:1000;
}

/* //==================================
// //\\ video icon
//================================== */

.video-icon-img-container > img {
    position:relative;
    /* version 1685: because of not perfect design,
       the jerk of caption happens when this number
       is greater than 18px
    */
    width:18px;
    top:1px;
}
.video-list-popup .video-icon-img-container > img {
    top:2px;
    vertical-align:middle;
}

/* //==================================
// \\// video icon
//================================== */

.hidden {
    visibility : hidden;
};

a:link{
    color:var(--color-main);
}

a:visited{
    color:var(--color-main);    
}

/*====================================*/
/* \\// main-legend                   */
/*====================================*/
/* // \\// css /////////////////////////////////////////

///default lemma svg settings,
///to be overridedn by lemma-css-policy

// (remember, in-line attributes are still suppressed)
// or inline-css,

// this fixes some pages, but probably makes default
// color dependent on browser
//            xxxxstroke          : black;
//            xxxxfill            : black;
//
///todm: should be in sapp module, not "full app" module, */
/* todo: why wasn't this just appended to ret? */
/* globalCss.update( ` */
        .bsl-simscene svg text {
            font-size       : 12px;
            font-style      : normal;
            stroke-width    : 0.1;
            font-family     : var(--default-font);
            stroke          : black;
            fill            : black;
        }
    /* `,
    'svg-text-special'
); */

.top-media-controls {
    position : relative;
}

/*--------------------------------------
    //\\\\ master pagination button
    margin-bottom is perplexing, why
    disbalance between home, left, current buttons?
  -------------------------------------*/

.master-pagination-btn {
    display:inline-block;
    position:relative;
    transform: none;
    box-shadow: 0 0px 4px 0 rgba(32, 41, 54, 0.2);
    box-sizing: border-box;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    cursor: pointer;
    white-space : nowrap;
    font-family: var(--text-tab-font);
    text-align:center;
    height: 29px;
    margin: 0px 16px 0 16px;
    padding: 6px 8px 2px 8px;
    transition: all .2s ease;
    z-index: 1002;
}

.left-home-button {
    font-size:15px;
}

.master-pagination-btn img {
    opacity : 0.5;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align:middle;
}

.master-pagination-btn.left img {
    margin-left: 2px;
}

.master-pagination-btn.left img,
.master-pagination-btn.right img {
    width: 7px;
}

/* //\\\\ effect of outstanding button in top menu */
.master-pagination-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0px 12px 0 rgba(32, 41, 54, 0.2);
    transition: all .2s ease;
}

.master-pagination-btn.current-lemma:hover,
.master-pagination-btn.current-lemma {
    transform: scale(1.0);
    box-shadow       : 0 0px 8px 0 var(--SHUTTLE_COLOR_FAINT);
    border           : 3px solid var(--SHUTTLE_COLOR);
    padding          : 4px 8px 3px 8px;
    margin-top       : 6px;
    transform        : translate( 0px, 1px );
}
/* \\\\// effect of outstanding button in top menu */

.master-pagination-btn.non-displayed {
    display:none;
}

.middle-subnav-bar {
    display : inline-block;
    margin:auto;
}

/* hides return-to-lemma-button if user has landed to dumb front-page */
.appid-home-pane .return-to-lemma-button {
    display:none;
}
.return-to-lemma-button {
    display:inline-block;
}

.return-to-lemma-button,
.home-button {
    margin-left         : 30px;
    font-weight         : normal;
    z-index             : 1000000006;
    font-family: var(--default-font);
}

.home-button {
    width               : 120px;
    margin-top          : 6px;
    color               : var(--color-medium-grey);
    background-color    : white;
}

.return-to-lemma-button {
    width               : 190px;
    color               : white;
    background-color    : #303946;
}

.return-to-lemma-button:hover {
    color               : white;
    background-color    : #606986;
}


/*---------------------------------------------
    //\\\\ Hover over the diagram to interact
  --------------------------------------------*/

.help-box {
    float           : left;
    margin-top      : 8px;
    color           : var(--color-medium-grey);
    font-size       : 12px;
    padding         : 0 16px;
    border-radius   : var(--border-radius);
    display         : flex;
    align-items     : center;
    opacity         : var(--helpBoxOpacity);
}

.help-box img {
    margin-right: 8px;
}


/*---------------------------------------------
    //\\\\ study-lab buttons
  --------------------------------------------*/
.bsl-approot.studylab  .capture-button,
.bsl-approot.studylab  .change-model-data-button,
.bsl-approot.studylab  .change-tools-button {
    display : flex;
}

.capture-button,
.change-model-data-button,
.change-tools-button {
    display : none;
}

.studylab-button,
.capture-button,
.change-model-data-button,
.change-tools-button {
    float:right;
    margin-top:12px;
    margin-right:5px;
    color: var(--color-medium-grey);
    font-size: 12px;
    padding: 0 16px;
    border-radius: var(--border-radius);
    border : 1px solid grey;
    align-items: center;
    cursor:pointer;
}

.studylab-button img,
.capture-button img,
.change-model-data-button img,
.change-tools-button img {
    margin-right: 8px;
}

.studylab-button:hover,
.capture-button:hover,
.change-model-data-button:hover,
.change-tools-button:hover {
    border : 1px solid black;
    color : black;
}


/*********************************************/
.todo-this-fails-for-fancy-handlers {
}

.tp-thickness, .tp-media_scale {
    display : none;
}

.rgtools .tp-thickness, .rgtools .tp-media_scale {
    display : block;
}
/*********************************************/

.content-list {
  border:2px solid #dddddd;
  border-radius:25px;
  padding:15px 20px 20px 0px;
  cursor: default;
}

.content-list>div {
   height:400px;
   padding-right:10px;
   overflow: auto;
}

.content-list .lemma-item-title {
    display : inline-block;
    padding : 4px 8px 4px 1px;
    border-radius : 10px;
    border : 1px solid #cccccc;
    background-color : white;
}

.content-list .lemma-item-title.go-to-front-page {
    padding-left : 6px;
    padding-bottom : 4px;
    cursor: pointer;
}

.content-list .lemma-item-title:hover {
    transform : scale(1.1);
    color : #ffffff;
    background-color : #999999;
}

.home-button.master-pagination-btn:hover {
    transform : scale(1.0);
}


/*---------------------------------------------
    //\\\\ from css_4_hidden8frag8active8delayed()
    todo: these used cssp js var for "bsl", ensure it is never changes
  --------------------------------------------*/

  /* ///generic "tohidden" */
.bsl-approot .tohidden {
    visibility: hidden;
}

/* ///generic hidden and visible fragments in content:
//  this works by toggling css-class in application code like:
//      sDomN.essaionsRoot$.removeClass( 'active-left' );
//      sDomN.essaionsRoot$.addClass( 'active-right' );
//      apparenlty these marks are from the same set:
//          'active-right', .active-static, ...
//          they are a part of do-feedback-from-diagram-model-to-Book-text, */
.bsl-text-widget .exeg-frag {
    display : none;
}

.bsl-text-widget .active-static {
    display : inline;
}

/* ///?hidden? delayed anchor */
.bsl-text-widget .delayed-far,
.bsl-text-widget .delayed-anchor {
    display : none;
}

.bsl-text-widget svg text {
    font-family : MJXc-TeX-math-I, MJXc-TeX-math-Ix, MJXc-TeX-math-Iw;
}


/*---------------------------------------------
    From src/vendor/bsl/gui/local-content-trigger
    styles book refs at bottom of text area
  --------------------------------------------*/

div.trigger-option {
    cursor : pointer;     
    display : inline-block;
    white-space : normal; 
    font-family: var(--default-font);
}
img.isopen,
img.isclosed {
    width : 20px;
    height  : 20px;
    cursor : pointer;  
}
.isopen div.trigger-content {
    display:block;
}
.isclosed div.trigger-content {
    display:none;
}
.isopen img.isopen,
.isclosed img.isclosed {
    display:inline;
}
.isclosed img.isopen,
.isopen img.isclosed {
    display:none;
}
.trigger-content {
    background-color:#efefef;
    margin-left:20px;
    padding:5px;
} 
/************************************************
    //\\\\ css lemma module = nav-bar-and-drawer
************************************************/

.page-top-nav-bar {
    background:     transparent;
    display:        var(--doDisplayPageTopNavigatMenu);
    align-items:    flex-start;
    width:          100%;
    padding-top:    20px;
    padding-bottom: 20px;
    top:            0px;
    z-index:        1010;
}

.page-top-nav-bar ul {
    padding: 0.5rem 2rem;
}


/************************************************
    //\\\\ css lemma module = checkbox
************************************************/

.checkbox-wrap input[type="checkbox"] {
    opacity: 0;
    display: none; 
}      

/* //\\\\ this block creates nice fancy checkboxes in data-legend */    

.checkbox-wrap label::before {
    background-color: var(--color-pale-blue);
    border: 2px solid var(--color-light-grey);
    border-radius: 2px;
    content: "";
    cursor: pointer;
    display: inline-block;
    height: 14px;
    width: 14px; 
}

/* this thing apparently makes these corner-like-rotated-borders
    simulating a check-mark */
.checkbox-wrap label::after {
    content: "";
    display: inline-block;
    height: 4px;
    width: 8px;
    border-left: 2px solid var(--color-white); /* short part of checkmark */
    border-bottom: 2px solid var(--color-white); /* long part of checkmark */
    transform: rotate(-45deg); 
}

.checkbox-wrap label {
    position: relative; 
}

.checkbox-wrap label::after {
    position: absolute; 
}

/*Checkmark*/
.checkbox-wrap label::after {
    left: 4px;
    top: 0px; 
}

/*Hide the checkmark by default*/
.checkbox-wrap input[type="checkbox"] + label::after {
    content: none; 
}

/*Unhide the checkmark on the checked state*/
.checkbox-wrap input[type="checkbox"]:checked + label::after {
    content: ""; 
}

/*Make check box color change on the checked state*/
.checkbox-wrap input[type="checkbox"]:checked + label::before {
    background-color: var(--color-main);
    border: 2px solid var(--color-main); 
}

/*Adding focus styles on the checkbox*/
.checkbox-wrap input[type="checkbox"]:focus + label::before {
    outline: #3b99fc auto 5px; 
}


/************************************************
    //\\\\ css lemma module = tabs
************************************************/

/*~~~~~~~~~~~~~~~~~~~~
Exegesis-tabs.
Styles for the mobile tabs
~~~~~~~~~~~~~~~~~~~~*/

/* area-tab is invisible in desktop */
.tabs .tab-areadesk {
    display:none;
}

@media (max-width: 800px) {
    /* area-tab is visible in mobile */
    .tabs .tab-areadesk {
        display:inline-block;
    }
}

.tab-section {
    width: calc(100%);
    order:2;
    height:40px;
    padding:0;
    grid-area: tabs;
}

.tab-section.desc__text{
    padding-bottom: 128px;
}

.tab-section__header{
    display:none;
}

.desc-tab {
    background-color: var(--color-white);
    padding: 16px;
    display: none;
    height: 100%;
    margin-bottom: 0;
    overflow: scroll;        
}

.tabs {
    position: relative;
    background-color: #fff;
    border-bottom:1px solid var(--color-light-grey);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tabs:after {
    content: ' ';
    display: table;
    clear: both;
}

.tabs__tab {
    float: left;
    text-align: center;
}

.tabs__tab:first-child.active ~ .tabs__indicator{
    left: 0;
}

.tabs__indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 1px;
    background-color: var(--color-main);
    transition: left .32s;
}

/*------------------------*/
/* //\\ adjusts for media */
/*------------------------*/
.tabs__tab {
    width: 50%;
}
.tabs__tab:nth-child(2).active ~ .tabs__indicator {
    left: 0%;
}
.tabs__tab:nth-child(3).active ~ .tabs__indicator {
    left: 50%;
}
.tabs__indicator {
    width: 50%;
}
@media (max-width: 800px) {
    .tabs__tab {
        width: 33.333%;
    }
    .tabs__tab:nth-child(2).active ~ .tabs__indicator {
        left: 33.333%;
    }
    .tabs__tab:nth-child(3).active ~ .tabs__indicator {
        left: calc(33.333% * 2);
    }
    .tabs__indicator {
        width: 33.333%;
    }
}
/*------------------------*/
/* \\// adjusts for media */
/*------------------------*/

.Tab > a {
    /* //display: block; */
    padding: 10px 12px;
    text-decoration: none;
    color: var(--color-light-grey);
    transition: color .15s;
}

.Tab.active > a {
    color: var(--color-main);
}

.Tab:hover > a {
    color: rgba(var(--color-main), .8);
}


/************************************************
    //\\\\ css lemma module = essaion-pane
************************************************/

/* original text */
.original-text {
    display     : none;
    color       : var(--color-medium-grey);
    line-height : 1.3;
}

.english {
    font-family : var(--text-tab-font);
    font-size : 18px;
    background-color: #FCF6EC;
    margin-top: 1rem;
    box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.3);
}

.video {
    font-family : var(--video-tab-font);
    font-size : 17px;
}

/*  this takes higher specifity to override generic display:none property:
    all the troubles it takes is to make text unfading up slowly
    div.leftside-menuholder
*/
div.original-text.chosen {
    /* inline-block (vs block) makes left-menu floating nicer */
    display : inline-block;
}

.leftside-menuholder .original-text {
    box-sizing      :border-box;
    width           :calc(100% - (var(--LEFT_SIDE_MENU_WIDTH) + 10px));
    padding         :20px;
    vertical-align  :top;
}

div.leftside-menuholder div.original-text {
    opacity:0;
}

div.leftside-menuholder div.original-text.chosen {
    position:relative;
    opacity:1;
    /* todm make this happen: */
    transition :opacity 1s ease-in-out;
}

.original-text h2, .original-text h1 {
    margin  :0;
    font-weight:200;
    color: var(--color-main);
}

.captured-reference {
    cursor : pointer;
    color : #555555;
    background-color : #dddddd;
}

.captured-reference:hover {
    color : #000000;
}

/* //subessay-toggler
//it shifts itself from the left menu by own margin 20px;
//but essaying text shifts itself by of a parent padding 20px;
//this is why "+50px" here: */

.subessay-menu-container {
    width           : calc(100% - (var(--LEFT_SIDE_MENU_WIDTH) + 50px));
    margin-top      : 13px;
    padding         : 5px;
    margin-left     : 20px;
    border-radius   : 10px;
    border          : 1px solid #aaaaaa;
    background-color: #fefefe;
}

.subessay-menu-container {
    display         : none;
}

.subessay-menu-container.chosen {
    display         : inline-block;
}

.subessay-toggler {
    display         : inline-block;
    padding         : 3px 8px;
    margin-bottom   : 2px;
    border-radius   : 10px;
    cursor          : pointer;
}

.subessay-toggler {
    color           : #888888;
    background-color: white;
}

.subessay-toggler.subexeg-toggler-chosen,
.subessay-toggler.user-untouched:hover,
.subessay-toggler:hover {
    color           : #444444;
    background-color: #cccccc;
}

.subessay-toggler.user-untouched {
    color           : #888888;
    background-color: white;
}

/* ///from "essaion-pane.css.js"
///relates to activity-scenario,
///keeps some divs hidden until user clicks on activity,
///
///.subessay-had-user-clicked is a state of subessay,
///
///problem is that at least one activity is defined by default,
///which is non-permitted for some tutorials,
/// */

.user-clicked-sensitive {
    display : none;
}

.subessay-had-user-clicked .user-clicked-sensitive {
    display : inline-block;
}


/************************************************
    //\\\\ css lemma module = menu-on-left
************************************************/

/* aspection rotator to vertical direction */
.left-side-menu-rotator {
    position    :relative;
    left        :var(--LEFT_SIDE_MENU_OFFSET_X);
    float       :left;
    width       :var(--LEFT_SIDE_MENU_WIDTH);
    height      :300px;
    transform   :rotate(90deg);
    box-sizing  :border-box;
    transform-origin: 0px 0px;
}
    
    
/*******************************************/
/* top-level geometrical sub-containers    */
/*******************************************/
/* geometrically contains all button-shapes and decorations */
/* logic_phase and aspection */
.menu-teaf {
    position        :relative;
    display         :inline-block;
    padding         :0;
    margin          :0;
}
.menu-teaf {
    vertical-align  :top;
    white-space     :nowrap;
}

/*
    // //|| toggles study teafs visibility
    .bsl-approot .studylab.menu-teaf {
        display         :none;
    }
    .bsl-approot.studylab .studylab.menu-teaf {
        display         :inline-block;
    }
    // ||// toggles study teafs visibility
*/

/* aspection */
.menu-teaf.aspect {
    width       : calc(var(--leftTopLeafLength) * 1px);
}

/* logic_phase */
.menu-teaf.logic_phase {
    width       : calc(100% - var(--LEFT_SIDE_MENU_WIDTH));
}

/* //-------------------------------
// //\\ common decorations
//      padding-top :0px; does fix Chrome, but distorts FireFox
//      FireFox needs 1px; todm what is the problem?
//-------------------------------  */

.menu-teaf .litem {
    position        :absolute;
    box-sizing      :border-box;
    height          :20px;
    padding-top     :0px;
    border-radius   :10px;
    border          :1px solid transparent;
    border-color    :transparent;
    margin          :0;
    cursor          :pointer;
    opacity         :1;
    z-index         :30;
}

.menu-teaf.logic_phase .litem {
    width           :calc(var(--logic_phaseChildWidth) * 1%);
}

.menu-teaf.aspect .litem {
    width           :calc(var(--aspectionChildWidth) * 1%);
}

.menu-teaf .litem.shuttle {
    box-shadow       : 0 0px 10px 0 var(--SHUTTLE_COLOR_FAINT);
    border           : 3px solid var(--SHUTTLE_COLOR);
    background-color : var(--SHUTTLE_BG_COLOR);
    z-index          : 20;
}

.menu-teaf .decorated.litem {
    border          :1px solid var(--FOCUS_OFF_COLOR);
    z-index         :10;
}


/* //-------------------------------
// //\\ fluid part = li-item
//------------------------------- */

.litem .caption {
    position        :relative;
    background-color:transparent;
    width           :98%;
    font-size       :80%;
    font-weight     :bold;
    padding-right   :0;
    font-family     :var(--default-font);

    /* todm: this is hell-complex, but works making 
        caption vertically-centered in the radio-slot */
    top             :50%;
    transform       :translate(0%, -50%);
    text-align      :center;
    color           :var(--FOCUS_OFF_COLOR);
}

/* //|| item is focused */
.menu-teaf .litem.chosen .caption,
.menu-teaf .litem:hover .caption {
    color :var(--FOCUS_COLOR);
}

.menu-teaf .decorated.hovered {
    border:1px solid var(--FOCUS_COLOR);
    box-shadow: 0 0px 14px 0 rgba(32, 41, 54, 0.6);
}

/* //-----------------------------
// //\\ animated-decorations
//----------------------------- */

/* //|| toggles studylab     */
.bsl-approot.studylab .menu-teaf .litem.studylab,
.bsl-approot.studylab .menu-teaf .litem.studylab {
    display         :inline-block;
}
.bsl-approot .menu-teaf .litem.studylab,
.bsl-approot .menu-teaf .litem.studylab {
    display : none;
}

/* //===========================
// //\\ shuttle 
//=========================== */

.menu-teaf .litem .caption {
    transition :color 0.3s ease-in-out;
}


/*====================================================== 
//\\\\ home page generics
======================================================*/

.hp-section-wrap {
    width: calc(100vw - 80px);
    margin: auto;
}

.bsl-home-pane {
    position        : absolute;
    width           : 100%;
    height          : 100vh;
    top             : 0;
    left            : 0;
    transition      : left 1s ease;
    background-color: var(--color-main);
    overflow-x      : hidden;
    overflow-y      : scroll;
    z-index         : 1000000005;
}

.bsl-home-pane.is-hidden {
    left : -130%;
}

.non-displayed {
    display : none;
}

.bsl-home-pane h1, .bsl-home-pane h2 {
    color: var(--color-white);
}

.bsl-home-pane h2 {
    font-size: 28px;
    margin-bottom: 24px;
}

.bsl-home-pane ol,
.bsl-home-pane ul {
    list-style: none;
}


/*====================================================== 
//\\\\ home-page header
======================================================*/

header {
    position:relative;  
    grid-area: header;
    padding: 0 0;    
    margin-top: 5vh !important;
    margin-bottom: 4vh !important;
} 

header.default {
    min-height: 610px;    
}

@media only screen and (min-width: 1100px) {
    header.extramat-showing {
        min-height: 720px; 
    }
}


/*====================================================== 
//\\\\ front-page master caption and read first button
======================================================*/

.landing-text {
    padding-top: 0px;
    position: relative;
    width: 100%;
}


/*====================================================== 
//\\\\ front-page master caption
======================================================*/

.landing-title {
    font-family: var(--homepage-font);
    font-weight: 300;
    font-size: 6vw;
    color: var(--color-white);
    letter-spacing: 1.32px;
    line-height: 9vw;
    margin-bottom: 16px;
    margin-left: 150px;
    grid-area: title; 
}

.landing-title span {
    font-style: italic; 
}

@media only screen and (min-width: 1000px) {
    .landing-title {
        font-size: 58px;
        line-height: 78px;
    }
}

.landing-subtitle {
    font-family: var(--homepage-font);
    font-size: 25px;
    color: var(--color-white);
    letter-spacing: 1.32px;
    line-height: 36px;
    padding-bottom: 3vh;
    grid-area: title; 
}

.landing-subtitle span {
    font-style: italic; 
}

.landing-subtitle a {
    color: var(--color-white);
    text-decoration: underline;
}

.sub-title {
    font-family: var(--homepage-font);
    font-size: 19px;
    color: var(--color-white);
    letter-spacing: 1.32px;
    line-height: 32px;
    grid-area: title; 
}

.sub-title span {
    font-style: italic; 
}

.sub-title a {
    color: var(--color-white);
    text-decoration: underline;
}


/*====================================================== 
\\\\// front-page master caption and read first button
======================================================*/

.newton-img {
    position: absolute;
    top: 0px;
    right: auto;
    left: 30px;
    height: 156px;
    z-index: -1;
    right: 96px; 
}


/*====================================================== 
//\\\\ table of contents
good: transform : scale(1.1, 1.0);
======================================================*/

.landing-table-of-contents {
    position: relative;
    grid-area: lemmas;
    padding: 0;
    padding-top: 80px;
}

@media only screen and (min-width: 1100px) {
    .landing-table-of-contents {
        position: absolute;
        width: 40%;
        top: 7vh;
        right: 0;
        padding-top: 0;
    }
    .landing-table-of-contents #model-list { /* heading */
        display: none;
    }
    .bonusTOC {
        top: 0 !important;
    }
}

.landing-table-of-contents .content-book-title,
.landing-table-of-contents ul a {
    color: white;
    font-size: 17px;
    line-height:1.1;
    font-family: var(--text-tab-font);
    transition: all .1s;
}

.landing-table-of-contents .content-book-title {
    font-size: 19px;
}

.landing-table-of-contents .content-book-title {
    padding-top: 15px;
    padding-bottom: 10px;
}

.landing-table-of-contents ul .table-tag {
    font-family: var(--text-tab-font);
    font-size: 14px;
    font-weight: 300; 
}

.landing-table-of-contents .column {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

.landing-table-of-contents .lemma-item-title {
    display: inline-block;
    padding : 4px 10px 2px 1px;
    border-radius : 10px;
    border : 1px solid transparent;
}

.landing-table-of-contents li .chosen.lemma-item-title,
.landing-table-of-contents .lemma-item-title:hover {
    background-color : #506677;
    border : 1px solid #cccccc;
}
.landing-table-of-contents ul a {
    padding-bottom : 0px;
}


/*====================================================== 
//\\\\ how to
======================================================*/

.how-to {
    padding: 5vh 0;
    text-align: center;
    background: #E9E2DA;
    grid-area: howTo; 
    font-family: var(--default-font);
}

.how-to h2 {
    color: var(--color-main) !important;
    text-align: left; }
    .how-to-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 52px; 
}

.how-to__cell {
    p {
        font-size: 20px;
    }
    padding: 0 14px; 
}

.how-to__cell__image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    margin-top: 16px;
    margin-bottom: 66px; 
    img {
        max-width: 100%;
        height: auto;
    }
}

.how-to__cell h4 {
    font-size: 24px;
    color: var(--color-main) !important; 
}


/*====================================================== 
//\\\\ home page plain text sections
======================================================*/

.hp-text-section {
    color: var(--color-white);
    font-family: var(--default-font);
    margin-top: 128px; 
}

.about__text {
    width: 100%;
    margin-right: 10%; 
}

.about__text p {
    font-size: 18px;
    line-height: 1.5; 
}

.about__text h2 {
    margin-bottom: 12px;
    color: var(--color-white); 
}

.about__author {
    width: 100%;
    margin-top:20px;
    color: var(--color-white);
}

.hp-text-section-body {
    padding: 8px;
    font-size: 18px; 
}

.hp-small-text-section-body {
    padding: 8px;
}

.dd-label {
    font-family: var(--default-font);
    color: rgba(255, 255, 255, 0.6);
}

.dd-label a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline; 
}

.dd-label a:hover {
    color: white; 
}

/* todm ... not very clear why we need this patch, but it is vital;
    possibly a precedence thing;
.hp-text-section is a vital specifity thing;
*/
.hp-text-section .dd-label a {
    color: rgba(255, 255, 255, 0.7);
}
.hp-text-section .dd-label a:hover {
    color: white;
}


/*====================================================== 
//\\\\ options
======================================================*/
.options {
    color: var(--color-white);
    font-family: var(--default-font);
    margin-top: 128px;
}

.option__text {
    font-size: 18px; 
}

/*====================================================== 
//\\\\ feedback
======================================================*/

.feedback {
    font-size: 20px;
    width: 100%;
    margin-top:20px;
    color: var(--color-white);
}

.feedback-label {
    font-family: var(--default-font);
    color: rgba(255, 255, 255, 0.6);
}

.feedback-label a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline; 
}

.feedback-label a:hover {
    color: white; 
}


@keyframes mousemove {
    0% {
        transform: translateY(0px);
        opacity: 0; 
    }
    25% {
        opacity: 1; 
    }
    100% {
        transform: translateY(200px);
        opacity: 0; 
    } 
}

/*~~~~~~~~~~~~~~~~~~~~
Media Queries
~~~~~~~~~~~~~~~~~~~~*/

@media only screen and (max-width: 720px) {
    .how-to-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 12px;
        grid-row-gap: 20px; 
    }
    .about {
        flex-direction: column; 
    }
    .about .about__text {
        width: 100%; 
    }
    .about .about__author {
        width: 100%;
        text-align: left; 
    }
}
/* the same as bsl-media */
#illus {
    width: 100%;
}

/* apparently about draggable point on graph */
.movable {
    cursor: pointer;
}

/* sub data-legend html-element,
    display:inline-block; is vital for position,
*/
#areadesk {
    display:inline-block;
    margin-top : 20px;
    width : 230px;
    z-index : 1000;
}

/*---------------------*/
/* ||\\ area-legend l2 */
/*---------------------*/
.desc--claim {
    margin-top: 24px;
    margin-bottom: 64px; 
}

.desc--proof {
    margin-top: 24px;
}

.desc--proof.hidden,
.desc--claim.hidden {
    display:none;
}

@media only screen and (max-width: 800px) {
    #areadesk.hidden {
        display:none;
    }
}

.desc__header {
    margin-bottom: 12px;
    text-align:center;
    align-items: center;
}

.desc__header-title {
    font-family: var(--default-font);
    font-size: 16px;
    font-weight: bold;
    margin: 0px;
}

.desc--areas {
    position: absolute;
    bottom: 0px; 
}

.desc--areas h2 {
    font-family: var(--default-font);
    font-size: 1rem; 
}

.areas__checkboxes {
    font-family: var(--default-font);
    font-size: 1rem; 
}

.areas__checkboxes-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px; 
}

.areas__checkboxes .checkbox {
    margin-right: 12px; 
}

/*---------------------*/
/* ||// area-legend l2 */
/*---------------------*/
/*~~~~~~~~~~~~~~~~~~~~
Styles for the model slider range
~~~~~~~~~~~~~~~~~~~~*/
.slider-group {
    height: 24px;
    padding-top : 10px;
    z-index : 100;
}
  
input[type=range] {
    -webkit-appearance: none;
    /* Hides the slider so that custom slider can be made */
    width: 100%;
    /* Specific width is required for Firefox. */
    background: transparent;
    /* Otherwise white in Chrome */
    height: 0px !important; 
}
  
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; 
}
  
input[type=range]:focus {
    outline: none;
    /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ 
}
  
input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    -moz-appearance: none;
    height: 0px !important;
    /* Hides the slider so custom styles can be added */
    background: transparent;
    border-color: transparent;
    color: transparent; 
}
  
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 2px solid var(--color-main);
    height: 12px;
    width: 12px;
    border-radius: 40px;
    background: var(--color-white);
    cursor: pointer;
    margin-top: -5px;
    /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
}
  
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
    border: 2px solid var(--color-main);
    height: 8px;
    width: 8px;
    border-radius: 40px;
    background: var(--color-white);
    cursor: pointer; 
}
  
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
    border: 2px solid var(--color-main);
    height: 12px;
    width: 12px;
    border-radius: 40px;
    background: var(--color-white);
    cursor: pointer; 
}
  
input[type=range] {
    width: 40%;
    height: 2px;
    cursor: pointer;
    background: var(--color-main);
    border-radius: 1.3px;
    margin: 0 auto; 
}
  
input[type=range]::-webkit-slider-runnable-track {
    width: 40%;
    height: 2px;
    cursor: pointer;
    background: var(--color-main);
    border-radius: 1.3px;
    margin: 0 auto; 
}
  
input[type=range]:focus::-webkit-slider-runnable-track {
    background: var(--color-main); 
}
  
input[type=range]::-moz-range-track {
    width: 90%;
    height: 2px;
    cursor: pointer;
    background: var(--color-main);
    border-radius: 1.3px;
    margin: 0 auto; 
}
  
input[type=range]::-ms-track {
    width: 40%;
    height: 2px;
    cursor: pointer;
    background: var(--color-main);
    border-radius: 1.3px;
    color: transparent;
    margin: 0 auto; 
}
  
input[type=range]::-ms-fill-lower {
    width: 40%;
    height: 0px;
    cursor: pointer;
    background: var(--color-main);
    border-radius: 1.3px;
    margin: 0 auto; 
}
  
input[type=range]:focus::-ms-fill-lower {
    background: var(--color-main); 
}
  
input[type=range]::-ms-fill-upper {
    width: 40%;
    height: 0px;
    cursor: pointer;
    background: var(--color-main);
    border-radius: 1.3px;
    margin: 0 auto; 
}
  
input[type=range]:focus::-ms-fill-upper {
    background: var(--color-main); 
}
  
.slider {
    width: 40%; 
}
  
#mySlider {
    z-index: 1;
    margin-bottom: 8px;
}
  
.slider-label {
    text-align: center;
    display: inline-block;
    margin: 0 auto; 
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* model.css                      */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.rect {
    stroke-width: 1;
    /* fill-opacity: 0.15; */
    stroke-opacity: 1; 
}
  
.figure {
    stroke: var(--color-main);
    fill: var(--color-main);
    color: var(--color-main);
    /*r:2.4;*/ 
}
  
.outline, .outline-cls {
    fill: transparent;
    stroke-width: 2; 
}  
  
.flex {
    display: flex !important; 
}
  
.circumscribed {
    stroke: var(--color-main);
    fill: transparent;
    color: var(--color-main); 
}  
  
/* apparently for letter-labels for lemma 2 */
.circumscribed.label {
    fill: var(--color-main);
}
  
.inscribed {
    stroke: var(--color-main);
    fill: transparent;
    color: var(--color-main); 
}

.inscribed.label {
    fill: var(--color-main); 
}
  
.label {
    stroke-width: .6; 
}
  
.number {
    text-align: right;
    font-family: var(--data-numerical-font);
    font-size: 16px;
    min-width: 48px;
    width: 100%;
    max-width: 64px;
    margin-right: 8px; 
}
  
svg text {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: var(--default-font);
}
  
.slider {
    width: 80%; 
}  
  
#widest-visib-toggler-wrap {  /* row in legend line for widthes rectangle */
    display: flex;
}

#lemma2.bsl-approot #widest-visib-toggler-wrap,
.bsl-approot.logic_phase--claim #widest-visib-toggler-wrap,
.widest-rectangular.invisible,
.bsl-approot.logic_phase--claim .widest-rectangular {
    display:none;
}
  
/* legend */
.areas .highlighted {
    font-weight :bold;
}  
  
/* //\\ subapplication (lemma 2, 3 specific) fix;
        removes hidden rects from topic engine
*/
.inscribed.rect.tofill.topicid-inscribed-rectangles[visibility="hidden"],
.circumscribed.rect.tofill.topicid-circumscribed-rectangles[visibility="hidden"] {
    visibility:hidden;
}
/* \\//  subapplication (lemma 2, 3 specific) fix; */