html {
        height:100% !important; /*This is required for the pagewide flexbox to plop the footer at the bottom.*/
}
*, ::after, ::before {
        box-sizing: border-box;
}
main {
        margin-bottom:40px;
}
* {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 400;
        line-height: 1.6;
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
        display: block;
}
.list-inline, .list-unstyled {
        list-style: none;
        padding-left: 0;
}

a {
        background-color: transparent;
        color: #2771bb;
        text-decoration: none;
}
img, svg {
        vertical-align: middle;
    border-style: none;
}
/*#base-navbar {
        display:grid; This'll make the search bar be constrained to the current nav bar.
}*/
.flex-container-small {
    justify-content: space-between;
    display:flex;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
    flex-direction: column;
}
.container-large {
    /*justify-content: space-between;*/
    display: block;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
    max-width: 1140px;
}
body {
        color: #111;
        font-family: Arial, Helvetica, sans-serif;
        font-size: .9rem;
        font-weight: 400;
        line-height: 1.6;
        text-align: left;
        margin:0px !important;
        display:flex !important;
        flex-direction: column !important;
        justify-content:space-between;
        height: 100% !important;
        overflow-y:scroll;
}

header {
        background: rgba(0,0,0,.05);
        border-bottom: 1px solid rgba(0,0,0,.125);
        margin-bottom: 18px;
}
#uio-header {
    background-color: black;
    position:static;
    display:block;
        width:100%;
    height:30.4px;
}
header img {
        height: 12.4px;
        margin: 8px 0 10px;
}
header #header_bottom {
        display: flex;
        flex-direction: column-reverse;
        min-height: 110px;
}

/*Dropdown menu for search key*/
.searchFieldKey {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23343a40' d='M2 0 0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") right .75rem center/8px 10px no-repeat;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        color: #495057;
        font-size: .9rem;
        height: calc(1.6em + .75rem + 2px);
        line-height: 1.6;
        padding: .375rem 1.75rem .375rem .75rem;
        vertical-align: middle;
}
/*Input bar for search form*/
.search_input {
        background-clip: padding-box;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        color: #495057;
        font-size: .9rem;
        height: calc(1.6em + .75rem + 2px);
        line-height: 1.6;
        padding: .375rem .75rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.flex-shrink-0 {
        flex-shrink: 0 !important;
}
.flex-shrink-1 {
        flex-shrink: 1 !important;
}
.flex-grow-1 {
        flex-grow: 1 !important;
}
.flex-grow-2 {
        flex-grow: 2 !important;
}
.flex-container {
        display:flex !important;
        flex-wrap: wrap;
}
.break {
        flex-basis: 100%;
        height: 4px;
}
footer {
        align-self: flex-end;
        background-color: #000;
        color: #fff;
        font-size: 90%;
        margin-top: auto;
        padding: 1rem 0;
        width:100%;
}
footer a {
        color:#bbb;
}
footer div div {
        flex: 1 1 auto;
        margin-left: 10px;
        margin-right: 10px;
}
footer img {
        height: 90px;
        width: 90px;
        margin-right:33px;
}

.btn {
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: .25rem;
        color: #111;
        display: inline-block;
        font-size: .9rem;
        font-weight: 400;
        line-height: 1.6;
        padding: .375rem .75rem;
        text-align: center;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        vertical-align: middle;
}
.btn-primary {
        background-color: #2771bb;
        border-color: #2771bb;
        color: #fff;
}
.btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
        color: #fff;
}

#datatable {
        clear: both;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        max-width: none !important;
        border-collapse: separate !important;
        border-spacing: 0;
}
td {
        border: 1px solid #dee2e6;
        padding: .75rem;
        vertical-align:middle;
}
th {
        border-top: 1px solid #dee2e6;
        border-left: 1px solid #dee2e6;
        border-right: 1px solid #dee2e6;
        padding: .75rem;
}
.align-middle {
        text-align: center !important;
        vertical-align: middle !important;
}
#datatable-head {
        border-bottom: 2px solid black !important;
        background-color: rgb(240, 240, 240);
}
.italic {
        font-style:italic;
}
.bold {
        font-weight:bold;
}