/* CSS for variables in page_experimento.html */

.variables.grid {
    /* css_grid */

    padding: 1em;

}

.child.var { 

    border-width: 2px;
    border-style: solid;

    padding: 0.25em;
    width: 40px;

    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;

    text-align: center;

 }

.child.var.k,
.selector.box.grid .btn.k
 { 
    border-color: #fefefe; 
    background-color: gray; 
    color: #ddd; 
}

.child.var.na,
.selector.box.grid .btn.na { 
    border-color: #fefefe; 
    background-color: silver; 
    color: #333; 
}

.child.var.cl,
.selector.box.grid .btn.cl { 
    border-color: #fefefe; 
    background-color: rgb(227, 246, 189); 
    color: #333; 
}

.selector.box.grid {

    background-color: aliceblue;

}

.selector.box.grid .btn {

    padding: 1em;

    font-weight: bold;

}

.selector.box.grid .btn .child {

    text-align: center;

}

.box.k {

    display: grid;

}

.box.na {

    display: none;

}

.box.cl {

    display: none;

}

.legend {

    font-weight: bold;

    text-align: center;

}

.equation.legend {

    color: aliceblue;

    font-size: 20pt;

}

.ion.legend,
.slider.legend {

    color: #333;
    background-color: aliceblue;

}

.ion.legend {

    font-size: 14pt;

}

.slider.legend {

    font-size: 10pt;

    padding: 0 5em 0 3em;

}