/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

/*Device breakpoints for bootstrap 4*/
/*device-sm: 576px;
    device-md: 768px;
    device-lg: 992px;
    device-xl: 1200px;
    device-xxl: 1590px;*/
/*******/

:root {
    --black: #444;
    --blue: #34668f;
    --lightblue: #C5D4E1;
    --red: #C3232A;
    --gray: #BCBCBC;
    --darkgray: #747474;
    --font-xxs: 12px;
    --font-xs: 0.889em;
    --font-sm: 1em;
    --font-md: 1.149em;
    --font-lg: 1.320em;
    --font-xl: 1.515em;
    --font-xxl: 1.741em;
}

html {
    height: 100%;
    font-size: 100%;
}

body {
    color: var(--black);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 100%;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    height: 100%;
}

.row {
    margin-top: 15px;
    margin-bottom: 15px;
}

.nested-row {
    margin-right: auto;
    margin-left: auto;
}

.nested-col {
    padding-right: initial;
    padding-left: initial;
}

/*Header*/
header {
    background-color: var(--blue);
}

header .row {
    margin-top: 5px;
    margin-bottom: 5px;
}

.logo {
    width: 50px;
}

.title {
    color: white;
    font-size: var(--font-lg);
    font-weight: bold;    
}

    .title i {
        vertical-align: middle;
        margin-right: 0.25em;
    }
/*******/

a {
    color: var(--blue);
    text-decoration: none;
}

    a:hover, a:focus {
        text-decoration: underline;
    }

    a:active {
        opacity: 0.8;
    }

.bold {
    font-weight: bold;
}

/*Buttons*/
.btn {
    border: none;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 3px var(--gray);
    box-shadow: 2px 2px 3px var(--gray);
    margin: 0.25em;
    padding: 0.35em 0.5em;
}

    .btn:active {
        -webkit-box-shadow: inset 0px 0px 3px var(--gray);
        box-shadow: inset 0px 0px 3px var(--gray);
    }

    .btn:hover {
        opacity: 0.9;
    }

.btn-primary {
    background-color: var(--blue);
    color: white;
}

.btn-secondary {
    background-color: var(--lightblue);
    color: var(--black);
}
/*******/

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.content {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

#cppo {
    min-height: 800px;
}

    @media only screen and (min-width: 768px){
        #cppo {
            min-height: 650px;
        }
    }

footer {
    background-color: var(--black);
    color: white;
    font-size: var(--font-xxs);
}

    footer a {
        color: white;
    }

/*Forms*/
input, select, textarea {
    border: 1px solid var(--gray);
    border-radius: 3px;
    margin: 0.25em;
    padding: 0.25em 0.5em;
    max-width: 100%;
}

label {
    color: var(--darkgray);
    display: block;
    font-size: var(--font-xs);
    margin-bottom: 0.25em;
}

.label-num {
    font-size: var(--font-xs);
    font-weight: bold;
    margin-right: 0.25em;
}

textarea {
    width: 100%;
}
/*******/

h1, h2, h3, h4 {
    color: var(--blue);
}

/*JP List*/
.jplist-panel > *, .jplist-pagination > * {
    display: inline-block;
}

.jplist-panel i {
    padding: 0;
}

.jplist-pagination button {
    background-color: transparent;
    border: none;
    line-height: 1em;
    margin: 0 0 0 2px;
    padding: 0.5em;
}

    .jplist-pagination button:not(.jplist-selected):hover {
        color: var(--blue);
        text-decoration: underline;
    }

.jplist-pagination .jplist-selected {
    color: var(--blue);
    font-weight: bold;
}

.jplist-disabled {
    display: none;
}

.pagination {
    display: inline-block;
}

.pagination {
    margin-right: 2em;
}

.text-filter-box {
    cursor: default;
}

    .text-filter-box input::-ms-clear {
        display: none;
    }
/*******/

/*Line Items*/
.lineitems > .row {
    border-bottom: 1px solid var(--gray);
}

    .lineitems > .row > div {
        margin-bottom: 0.5em;
    }

    .lineitems .col-12 {
        padding-right: 10px;
        padding-left: 10px;
    }

    .lineitems img {
        margin-right: 10px;
        width: 100px;
    }

.lineitem-info > div {
    margin-right: 0.25em;
    vertical-align: top;
}

    @media only screen and (min-width: 576px) {
        .lineitem-info > div {
            margin-right: 0.5em;
        }
    }

    .lineitem-info .chkUpdate {
        margin: 0;
    }

    .lineitem-info label {
        text-align: center;
    }

.line-num {
    margin-right: 0.5em;
    vertical-align: top;
}
/************/

.p0 {
    padding: 0;
}

.text-center {
    text-align: center;
}

.text-xs {
    font-size: var(--font-xs);
}

.text-md {
    font-size: var(--font-md);
}

.text-right {
    text-align: right;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    margin-bottom: 0.335em;
}

/*Scroll to top button*/
#top-button {
    display: inline-block;
    position: fixed;
    bottom: 30px;
    right: 30px;
    -webkit-transition: opacity .5s, visibility .5s;
    -o-transition: opacity .5s, visibility .5s;
    transition: opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

    #top-button i {
        background-color: white;
        border-radius: 50%;
        color: var(--darkgray);
        font-size: 2em;
    }

    #top-button:hover {
        cursor: pointer;
    }

    #top-button.show {
        opacity: 0.8;
        visibility: visible;
    }
/********/