div.output {
    overflow : visible;
}

table.portrait.output {
    margin-top: 1em;
}


div.portrait.output {
    margin-left: 5vw;
    margin-right: 5vw;
}
    

table.portrait.output tr.outputHeader.output th {
    min-width: 15vw;
}

table.portrait.output tr.output td.output {
    min-width: 60vw;
}

div.landscape.output table.output tbody tr.outputHeader th.output {
    min-width: 5vw;
}

div.landscape.output table.output tbody tr.output td {
    padding-right: 2vw;
}

div.landscape.output {
    margin-left: 5vw;
    margin-right: 5vw;
}

table.input {
    margin-left: 5vw;
}

div.input-buttons {
    margin-left: 5vw;
    margin-top: 2vh;
}

.hidden {
    display: none;
}



/* For crosstab tables */
th.output.columnheading {
    min-width: 8vw;
}
th.output.rowheading {
    min-width: 12vw;
}


/* When a checkbox is checked, add a deeppink border 
   Can work with conjection with onchange()
   <input type="checkbox" onchange="this.className='modified';">
*/
input:checked.modified {
    border: none;
    outline: 2px solid deeppink;
}
/* When a checkbox is unchecked, add a deeppink border 
   Can work with conjection with onchange()
   <input type="checkbox" onchange="this.className='modified';">
*/
input:not(:checked).modified {
    border: none;
    outline: 2px solid deeppink;
}


/* Dart / Light Theme related styles 
*/

.center {
    text-align: center;
}

.btn-primary {
    --bs-btn-bg: #305a70;
}

.disabled {cursor: not-allowed;}

table.index {
    width: 40vw; 
    margin-left:30vw;
}
      
@media (prefers-color-scheme: light) {
    span#light { display: inherit; }
    span#dark { display: none;}
}

@media (prefers-color-scheme: dark) {
    span#light { display: none; }
    span#dark { display: inherit;}
}

/******************************************************************************************************* 
To compress the height of vertical bread crumbs to match that in bootstrap.css:4192 as shown below:

        @media (min-width: 992px) {
            .navbar-expand-lg .navbar-nav {
                flex-direction: row;
            }
        }
*******************************************************************************************************/
@media (max-width: 992px) {
    .nav-link {
        padding: 0 0;
    }
}