/*
referenced in
	\scripts\imacs-live\instructors\5.8\htm\imacs-live.00.htm
	pico /media/imacs/filedata/cestatic/htm/ce-instructor.htm /media/imacs/filedata/cestatic/htm/ce-student.htm
*/

div.calculator { border-radius: 0.5em; background:#cde1f5; border: 1px solid blue; padding: 0.5em; box-shadow: 8px 8px 8px rgba(0,0,0,0.5); z-index: 300;}
div.calculator.component { box-shadow: 2px 2px 2px rgba(0,0,0,0.5); z-index:100; }
div.tools-list div.calculator { padding: 0; background: #fff; }
div.calculator table { border-collapse: collapse; }
div.calculator table tr { vertical-align: middle; }
div.calculator table td > div { text-align: center; min-width: 3em; min-height: 3em; border-radius: 0.5em; margin: 0.25em; background: blue; color: white; line-height: 3em; }
div.calculator table td > div.big-key { min-height: 10em; line-height: 10em;}
div.calculator span { outline: none; }
div.calculator table td > div:not(.display) { cursor: pointer; }
div.calculator table td > div.pressed { background: lightblue; color: #000; }
div.calculator table td > div.missing { background: lightgray; color: lightgray; }
div.calculator table tr td > div.display { /*display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-end; */ background: #fff ; border:3px solid blue; }
div.calculator table tr td > div.display div.top { font-family: 'Varela Round','Open sans',Verdana,Geneva,Arial,Helvetica,sans-serif; padding-top:0.5em; line-height: 1; color: #222; font-size: 0.75em; text-align:right; width: 98%;}
div.calculator table tr td > div.display div.bottom { font-family: 'Varela Round','Open sans',Verdana,Geneva,Arial,Helvetica,sans-serif; line-height: 1; color: blue; text-align:right; font-size: 2.4em; width: 98%;}
div.calculator div.calc-info { border-top:1px solid #000; text-align:center; font-family: 'Varela Round','Open sans',Verdana,Geneva,Arial,Helvetica,sans-serif;}
div.calculator div.calc-info div.calc-sofar { max-width:14em; display:flex;justify-content:center; align-items:center; flex-wrap:wrap;}
div.calculator div.calc-solution { position:absolute; font-size:21px; display:flex; flex-wrap:wrap; visibility: hidden;}
div.calculator div.calc-solution > span.goal { color:darkgoldenrod; text-shadow: 2px 2px 2px rgba(255,255,0,0.9);}
div.calculator div.calc-solution > div.key,div.calculator div.calc-info div.calc-sofar > div { display:inline-block;background:blue;text-align:center;min-width:1.5em;min-height:1.25em;border-radius:0.25em;margin:0.1em;color:white;}
div.calculator div.calc-info div.calc-other > * { margin: 0 0.1em 0 0.1em; }
div.calculator div.calc-info > div { margin-top:8px;}