table, th, td {border: 1px solid black;}
p{margin: 5px 0;}
ul{margin: 0;}
.screenshot, .sampleData, .error, .methodError{position: relative; margin-top: 3px;}
.screenshot, .screenshot figure, .methodError{display: inline-block;}
.screenshot, .sampleData span{background-color: lightblue; margin-left: 1em;}
.error span, .methodError, .methodError .screenshot, .sampleData.error span{background-color: orange;}
.screenshot figure, .methodError .error, .sampleData span {display:inline-block; margin:0 10px;border: 1px solid darkblue; border-radius: 4px; padding: 0 5px;cursor:pointer;}
.extractable-text{display:none;}
/*Make the split dynamic*/
/*.modal{position:fixed; background-color: rgba(0,0,0,0.25);width: 100%; height: 100%; margin:0;left:0; top:0;}*/
.modal{position:fixed; background-color: rgba(0,0,0,0.25);width: 50%; height: 100%; margin:0;left:50%; top:0;}
.modal.dormant{display:none;}

.modal-horizontal-center{position: relative; height:100%; display: flex; flex-direction: column;}

.modal-content-positioner{overflow: auto; flex-grow: 1; flex-shrink: 1;}

.modal-content > *{background-color: lightgray; margin:0;}

.modal-header{background-color: darkgrey; display: flex;}

.modal-header > *{display: inline-block;}
.modal-header > div{position: relative; padding: 5px; }
.modal-header > div > span{position: absolute; top: 0; left: 0; width: 5000px;}
.modal-header button{border-radius: 12px; padding: 5px 15px; border: none; margin: 5px 5px;}

body.has-modal{height: 100vh; width: 50%;/*overflow-y: hidden;*/}
span.tab{width: 20px;display:inline-block;}