/*
 * Simple CSS stylesheet for a navigation bar and flash messages.
 * details for included elements
 */

.sidebar h3 {
  margin-top: 35px;
  margin-bottom:  0px;
}

.header h1 {
  display: block;
  position: absolute;
  margin:0;
  right: 15px;
  top: 16px;
  color: #f7f7f7;
}
.header ul.nav {
  padding-inline-start: 0px;
  margin-bottom: 0;
}
ul.nav li {
  display: inline;
}
button.nav-link-button,
ul.nav li a {
  padding: 10px 15px 10px;
  color: #f7f7f7;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
}
ul.nav li.right {
  float: right;
}

.flash_notice, .flash_alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.flash_notice {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #468847;
}
.flash_alert {
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #b94a48;
}

div.field_with_errors {
  display: inline;
  background-color: transparent;
  padding: 0px;
}

span.error_message {
  color: red;
}

table {
  border-collapse: collapse;
  background-color: white;
}
th, td {
  border: 1px solid gray;
  vertical-align: top;
  padding: 3px;
}
th {
  font-weight:bold;
  background-color: #dddddd;
}
td {
  background-color: white;
}
table.sheer,
table.sheer th,
table.sheer td  {
  background: transparent;
  border:  none;
  padding:  0px 5px 0px 5px;
  margin:  0px;
}
.align_right {
  text-align: right;
}
.inline,
.inline div {
  display: inline;
}

table {
  margin: 10px 0px;
}

p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.catalog_title {
  text-align: center;
  margin: 0;
}

span.info {
  color: #666666;
  font-style: italic;
}

div.actions {
  margin: 0.5em 0;
}

div.inline_block_children > form,
div.inline_block_children > a {
  padding: 10px;
  display:inline-block;
}

table.fields {
  margin: 2px;
}

table.fields th,
table.fields td {
  font-weight:normal;
  padding: 0px 4px;
}

table.preview tr.header_line td {
  background-color: #dddddd;
  color: #777777;
}

table.preview span.column_name,
table.preview span.column_usage {
  white-space:nowrap;
}

table.preview span.column_usage {
  font-weight: normal;
  font-style: italic;
}

fieldset {
  position: relative;
}

div.left_controls,
div.right_controls {
  width: 250px;
  float:left;
}
.async_status {
  font-weight: bold;
  padding-left: 3px;
  padding-right: 3px;
}
.async_status.queued {
  background-color: #ffff00;
  /*color: yellow;*/
}
.async_status.working {
  background-color: #ffcc00;
}
.async_status.done {
  background-color: #33FF66;
}
.async_status.canceled {
  background-color: #3399ff;
}
.async_status.failed {
  background-color: #ff3333;
}

.filter_display_options {
  margin-right: 15px;
}

div.inline_form_container,
div.inline_form_container form,
div.inline_form_container div {
  display: inline;
}

/* login form alignment */
form.new_user label {
  float: left;
  display: block;
  width: 125px;
}

input.danger_zone_button {
  width: 200px;
}

input[type=submit]:hover,
input[type=submit]:focus {
  color: #666666;
  border-width: 0px 1px 1px 0px;
  margin:       1px 1px 1px 0px;
}
input[type=submit] {
  background-color: #e7e7e7;
  padding: 2px 1em;
  border-radius: 4px;
  color: #333333;
  border-color: white gray gray white;
  border-width: 1px 2px 2px 0px;
  margin:       0px 0px 0px 0px;
}

/* import_file_transfer_source_file can be long */
#import_file_transfer_source_file {
  width: 250px;
}

label.mapping_label {
  width: 150px;
  display: inline-block;
}

/* app settings column widths and form elements
    to lineup up with table columns */
table.app_settings th,
table.catalog_app_settings th {
  width: 150px;
}
table.app_settings th.wide,
table.catalog_app_settings th.wide {
  width: 300px;
}
table.catalog_app_settings,
table.catalog_app_settings tr.first {
  background: rgba(256, 256, 256, 0.25);
}
table.app_settings .column_width {
  width: 148px;
}
table.app_settings .wide_column_width {
  width: 298px;
}

table.app_settings th.controls {
  width: auto;
}
table.app_settings td.controls {
  text-align: center;
}

.monospaced {
  font-family: monospace
}

input.wide {
  width: 600px;
}

div.details {
    margin-left:  75px;
    font-style:  italic;
}

.louder {
  font-weight: bold;
}

.mapping_color.unmapped {color: FireBrick;}
.mapping_color.exempt {color: LightGray;}
.mapping_color.ignored {color: LightGray;}
.mapping_color.printer {color: SeaGreen;}
.mapping_color.supply {color: DodgerBlue;}

.sortable::after {
  content: ' \25BD';
}
.sortable.asc::after {
  content: ' \25B2';
}
.sortable.desc::after {
  content: ' \25BC';
}

/* special case for age column, using reversed sort indicators */
.reversed_sort_indicators .sortable.asc::after {
    content: ' \25BC';
}
.reversed_sort_indicators .sortable.desc::after {
    content: ' \25B2';
}

/* remote file */

form.remote_file_form div.field input {
  width: 400px;
}

/* table.remote_file {
} */

table.remote_file th,
table.remote_file td {
  padding-left: 5px;
  padding-right: 5px;
}

table.remote_file caption {
  text-align: left;
}

.link-button {
  display: inline;
  padding: 0;
  border: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  color: -webkit-link;
  -webkit-appearance: none;
}

input.listnav[type=text][readonly=readonly] {
  field-sizing: content;
  font-style: italic;
  border: 0;
  padding-left: 0;
}

span.placeholder {
  font-style: italic;
}

input.listnav[type="text"] {
  border: 1px solid black;
}

button.listnav.add {
  color: green;
}

button.listnav.remove {
  border: 0;
  padding: 0;
  color: red;
}

span.listnav {
  padding-right: 0;
}

button.listnav {
  display: inline;
}

.comma-list .item::after {
  content: ", ";
}
.comma-list .item:last-child::after {
  content: "";
}

.custom {
  font-style: italic;
  font-weight: bold;
  background-color: #ccddff;
}

/* Fading, for download message etc
where it's not possible to close a
displayed message based on an event.
 */
.unfaded {
  opacity: 1;
}

.fading_out {
  opacity: 0;
  transition-timing-function: ease-in-out;
  transition-property: opacity;
  transition-duration: 3s;
}

.faded {
  opacity: 0;
}

.relative_position {
  position: relative;
}

.popup_form {
  background-color: white;
  box-shadow: 5px 5px 10px;
  width: 500px;
  padding: 5px;
  position: absolute;
  z-index: 1000;
}

.display_none {
  display: none;
}

.display_block {
  display: block;
}

.float_right {
  float: right;
}
/*
 * Simple CSS stylesheet for a navigation bar and flash messages.
 * primary page section selectors only
 */

* {
    box-sizing: border-box;
}

html, body {
  padding:  0;
  margin:  0;
}

body {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  min-width: 600px;

  background-color: #f7f7f7;
  color: #333;
}

div.header {
  display: flex;
  position: absolute;
  /* height of header  */
  height: 52px;
  width:  100%;

  margin: 0px;
  padding: 10px;
  background-color:  darkslategray;
  /* background-color: darkblue; */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

div.container {
  display:  flex;
  position: absolute;
  /* height of header  */
  top:  52px;
  /* viewport height minus height of the header */
  height:  calc(100vh - 52px);
  overflow:  hidden;
}

div.sidebar {
  width: 274px;
  overflow: auto;

  border-right: 4px solid gray;
  padding:  10px;
  background-color: #e7e7e7;
}

div.main {
  width: 100vw;
  overflow: auto;
  padding: 2em;
}

div.main.with-sidebar {
  width: calc(100vw - 274px);
}

nav.pagy.series-nav {

}

nav.pagy.series-nav a {
  margin: 0 0.25em;
}

/* h1, h2, h3 {
  color: red;
} */
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *

 */