/* Colors */
:root {
--primary: #132348;
--primary-dark: color-mix(in srgb, var(--primary), #000 25%);
--primary-darker: color-mix(in srgb, var(--primary), #000 60%);
--primary-medium: color-mix(in srgb, var(--primary), #000 10%);
--primary-light: color-mix(in srgb, var(--primary), #fff 25%);
--primary-lighter: color-mix(in srgb, var(--primary), #fff 50%);
--primary-lightest: color-mix(in srgb, var(--primary), #fff 75%);
--warning: #934f4f;
--highlight: #cedfee;
--positive: #bee8af;
--grey: #efefef;
--grey-modal: #e7e7e7;
--grey-light: color-mix(in srgb, var(--grey), #fff 50%);
--grey-dark: color-mix(in srgb, var(--grey), #000 20%);
--grey-darker: color-mix(in srgb, var(--grey), #000 40%);
}




.box {background-color: var(--grey); padding:1em;}

summary {max-width: fit-content;}
pre {white-space: pre-wrap; overflow-wrap: break-word;}

button:disabled {cursor: not-allowed; opacity: 0.7;}

.io-textarea {height:400px; border-radius: .2em;}
.io-textarea:focus {outline: 2px solid var(--primary);}
.io-textarea:disabled {background:#d2d2d2; color:#717171;}

textarea, .io-output {height:400px; font-size:.85em; padding:.5em}
.io-output {background-color:white; border-radius: .2em;  overflow-y:auto; resize: vertical; border: 1px solid #ddd; box-sizing: border-box; line-height: 140%; cursor: text;}
.io-output-div.line-break {white-space:pre-line;}
.output ol li, .output ul li, .input ol li, .input ul li {margin-bottom:0.4em;}

.output {position:relative;}
.output-info {position:absolute; top:0; right:0; text-align:right; opacity:0.7; font-size:0.7em;}