﻿body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal Description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.checkbox input[type="checkbox"] {
    margin-left: 0;
}

/* The cap above is per input, which leaves an addon stranded at the far edge of its group.
   Cap the group instead so the field and its suffix read as one control. */
.input-group {
    max-width: 440px;
}

.input-group .form-control {
    max-width: none;
}

a {
    cursor: pointer;
}

/* Set Background Color of header */
.navbar-inverse {
    background-color: #023256;    
}

/* Header buttons text color */
.navbar-inverse .navbar-nav > li > a {
    color: #4CB3CF;
}
.navbar-inverse .navbar-brand {
    color: #4CB3CF;
}

input.datepicker {
    max-width: 110px;
}

.report-results {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 50px auto;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.report-data {
    display: block;
    overflow: scroll;
    max-height: 300px;
}

.report-results thead {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    text-align: left;
    padding: 2px;
    background: linear-gradient(#646f7f, #4a5564);
}
.report-results th:first-child {
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}
.report-results th:last-child {
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}
.report-results td>span.red-font {
    color: red;
}
.report-results tbody tr td {
    font-weight: 400;
    color: #5f6062;
    font-size: 13px;
    border-bottom: 1px solid #e0e0e0;
}
.report-results tbody tr:nth-child(even) {
    background: #f0f3f5;
}
.report-results tbody tr:last-child td {
    border-bottom: none;
}
.report-results tbody tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}
.report-results tbody tr:last-child td:last-child {
    border-bottom-right-radius: 5px;
}
.report-results tbody tr:hover td {
    font-weight: bold;
    color: black;
    background: #FAF6C4;
    cursor: default;
}
.report-results tbody tr:hover td>span.red-font {
    color: red;
}
.report-results tbody tr.grand-total td {
    font-weight: bold;
    font-size: 15px;
    border-top: 2px solid black;
}
    
.store-list {
    border: 1px solid #bbb;
    border-collapse: separate;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    overflow-y: scroll;
    max-height: 200px;
}
.store-list td {
    padding: 0 10px;
}
.store-list label {
    font-weight: normal;
    margin-bottom: 0;
}

fieldset.report-fieldset {
    border: 1px groove #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 20px;
    float: left;
    width: 40%;
    min-width: 200px;
}
fieldset.report-fieldset legend {
    padding: 0px 5px;
    width: auto;
    border-bottom: none;
    text-align: center;
}
fieldset.report-fieldset a {
    margin-bottom: 5px;
    width: 100%;
}

.column-selection {
    height: 500px;
    margin-bottom: 10px;
}
.column-selection-sortable {
    border: 1px solid #aaa;
    width: 150px;
    height: 100%;
    list-style-type: none;
    margin-right: 10px;
    padding: 5px 0px 0px 5px;
    overflow-y: scroll;
}
.column-selection-sortable li {
    width: 100%;
    cursor: pointer;
}
.column-selection-sortable li:hover {
    background: lightgrey;
}
p#custom-report-saved {
    text-align: left;
    font-weight: bold;
}
input#custom-report-run,
input#custom-report-save {
    margin: 0 15px 0 0;
}
div#filterGroup {
    border: 1px solid #e0e0e0;
    padding: 5px 5px 5px 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
}

.tooltiplabel { 
    display: inline-block;
    border-bottom: 1px dotted black;
    cursor: pointer;
    color: black;
    margin-left: 2px;
}
.tooltiplabel .tooltiptext {
    visibility: hidden;
    background-color: white;
    text-align: left;
    width: 205px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px dotted black;
    padding: 5px;
    position: absolute;
    z-index: 1;
}
.tooltiplabel:hover .tooltiptext {
    visibility: visible;
}

.loading-modal {
    display:    none;
    position:   absolute;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('/images/loading.gif') 
                50% 50% 
                no-repeat;
}
div.report-form {
    position: relative;
}
div.report-form.loading .loading-modal { 
    display: block;
}
div.row.report-form.loading .loading-modal {
    margin-top: 15px;
}
/* Google's sign-in button, per their branding guidance: white button, grey border,
   Roboto-ish label, logo at 18px with 8px padding either side. */
.google-signin {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    color: #3c4043;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.google-signin:hover,
.google-signin:focus {
    background-color: #f8f9fa;
    border-color: #d2e3fc;
    color: #3c4043;
    text-decoration: none;
}

.google-signin-logo {
    width: 18px;
    height: 18px;
    flex: none;
}

/* Role capability list on the user screen */
.role-capabilities {
    margin-top: 10px;
}

.role-capabilities li {
    line-height: 22px;
}

.cap-icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
}

.cap-yes { fill: #3c763d; }
.cap-no { fill: #a94442; }
.role-capabilities li.cap-denied { color: #999; }
