/* TODO: obsolete! need to remove all of the instances. */
.larger_table_image {
    width: 20rem;
}
.table_image {
    width: 13rem;
}
.sort_buttons_class {
    white-space: nowrap;
    display: inline-block;
    /*If want to add margin to the left of the SORT buttons - uncomment.*/
    /*margin-left: 0.4em;*/
}
img.up_button_class,
img.down_button_class {
    height: 0.8em;
}
img.button_selected {
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}
p.notice {
    background-color: #ffcc00;
    color: #000;
    display: block;
    font-family: Courier, monospace;
    line-height: 140%;
    font-size: 1.2em;
    padding: 0.85em;
    margin: 1.35em;
    width: 25em;
}
p.error {
    background-color: #e32;
    color: #fff;
    font-family: Courier, monospace;
    font-size: 120%;
    line-height: 140%;
    padding: 0.8em;
    margin: 1em 0;
}
.hidden {
    display: none;
}
p.hidden {
    padding: 0;
    margin: 0 !important;
    border: none;
    display: none;
}
div.notice {
    background-color: #ffcc00;
    color: #000;
    display: block;
    font-family: Courier, monospace;
    line-height: 140%;
    font-size: 1.2em;
    padding: 0.85em;
    margin: 1.35em;
    width: 25em;
}
.head_controls {
    white-space: nowrap;
    display: inline-block;
}
/*Table search.*/
table.search {
    background-color: #ffffff;
    border-width: 4px;
    border-style: outset;
    border-color: #cccccc;
    border-collapse: separate;
    width: 600px;
}
table.search td {
    border-width: 1px;
    border-style: inset;
    border-color: #cccccc;
    padding: 1px;
    text-align: center;
}
table.narrow {
    width: 27em;
}
table#search_cell input[type="text"] {
    width: 9em;
}
/**/
div#edit_head {
    margin: 1.6em;
    margin-bottom: 0;
    width: 44em;
}
div#edit_head div {
    font-size: 1.2em;
}
div#edit_head div h2 {
    margin: 0;
    font-size: 1.2em;
}
div#edit_head div ul {
    margin: 0;
}
.input textarea#cifs {
    font-size: 1.1em;
}
.input textarea#logmessage {
    font-size: 1.1em;
}
/*Form buttons.*/
form#upload label {
    display: block;
    background-color: #AEEF0E;
    padding: 0.1em 0.4em;
}
form#edit label, label[for="logmessage"] {
    display: block;
    background-color: #AEEF0E;
    padding: 0.1em 0.4em;
    width: 40.6em;
}
div.errors ul {
    list-style-type: none;
}
div.errors ul li {
    font-family: monospace;
}
.monospace {
    font-family: Courier, monospace;
    font-size: 120%;
}
span.filter
{
    white-space: pre;
    font-weight: bold;
}
/*
Style definition below is not working as expected, as it produces very
lines with &nbsp; instead of spaces. It should be added to excerpts
only.
.monospace li {
    white-space: pre;
}
*/
.duplicate, .unchanged {
    background-color: gray;
    color: white;
}
.section.warnings {
    background-color: ##fff4d4;
}
.errors, .undeposited {
    background-color: #e32;
    color: #fff;
}
.notices {
    background-color: #a9d0f5;
    color: #000;
}
tr.messages {
    background-color: gray;
}
.required_indicator {
    color: red;
}
dl dt {
    font-weight: bold;
}
dl dt em {
    text-decoration: underline;
}
dl dd ul {
    padding: 0;
    margin: 0;
    list-style-position: inside;
    list-style-type: none;
}
dl dd ul li:before {
    content: "\00BB \0020";
}
span.tagname {
    font-weight: bold;
    font-style: italic;
}
/*Table.*/
tbody tr.warnings td ul li a {
    color: #000;
}
table tbody tr.warnings {
    background-color: #ffcc00;
    color: #000;
}
#progress_indicator {
    border-collapse: collapse;
    width: 90%;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    margin: 0 1.6em 0 1.6em;
}
div.progress_indicator div.prev,
div.progress_indicator div.current,
div.progress_indicator div.next {
    float: left;
    padding-left: 20px;
    padding-right: 20px;
}
div.progress_indicator div.prev {
    background-image: url("../../images/chevron-left.svg"),
                      url("../../images/chevron-right.svg");
    background-repeat: no-repeat;
    background-position: left, right;
    background-color: #00cf1c;
}
div.progress_indicator div.current {
    background-image: url("../../images/chevron-left.svg"),
                      url("../../images/chevron-right.svg"),
                      url("../../images/stripes.svg");
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: left, right, left;
    background-color: #00cf1c;
}
div.progress_indicator div.next {
    background-image: url("../../images/chevron-left.svg"),
                      url("../../images/chevron-right.svg");
    background-repeat: no-repeat;
    background-position: left, right;
    background-color: #d0d0d0;
}
#stage_pointer {
    min-width: 25px;
    max-width: 25px;
}
a.no_decoration {
    text-decoration: none;
}
span.bold, a.bold {
    font-weight: bold;
}
span.process_name {
    color: #e32;
}
div.padded {
    line-height: 140%;
    padding: 0.8em;
    margin: 1em 0;
}
ul.links {
    list-style-type: none;
    padding: 0 0.5em 0 2em;
    text-indent:-1em;
}
ul.links a {
    text-decoration: none;
}
table.links {
    width: 100%;
    border-collapse:collapse;
}
table.links th {
    color: #ffffff;
    background-color: #0066aa;
    padding: 0 0 0 0.25em;
}
table.links td {
    color: #000000;
    background-color: #a9d0f5;
}
fieldset {
    display: inline-block;
}
fieldset > legend {
    font-weight: bold;
}
/* Adding some extra space from the left-hand side in order to squize
   in the highlighted border for the form. */
div.related {
    /* margin-left: 1em; */
    margin-left: 1.5rem;
}
/* vs the original 'related_tables' border: lets include bordered
   space a little higher from the table, including the control buttons
   if present. */
table:not(.editable) ~ .related.expandable,
table.editable ~ .related.expandable div.related_tables {
   border-left: .1rem solid black;
   box-shadow: -.15rem 0px #cfcece, -.6rem 0px #f0f0f0;
}
input ~ label.expandable {
    margin-top: 1em;
    margin-left: 0.5em;
    font-size: 1.2em;
    font-weight: bold;
}
div.news {
    padding-left: 4.5em;
    padding-right: 4.5em;
    text-align: left;
}
div.textpanel {
    padding: 0.5em 0.5em 0.5em 0.5em;
    margin: 0 0 0 0;
    border-style: solid;
    border-top-style: none;
    border: 1;
    border-width: 1px;
    border-color: #0066aa;
    text-align: left;
}
div.textpanel p {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}
div.textpanelhead {
    color: #0066aa;
    background-color: #a9d0f5;
    padding: 0 0 0 0.25em;
    text-align: left;
    font-weight: bold;
    border-style: solid;
    border: 1;
    border-width: 1px;
    border-color: #0066aa;
}
/* Search by structural formula menu. */
#menu {
    list-style: none;
    padding: 0 0 0 0;
    margin: 0;
}
#menu li {
    float: left;
    padding: 0 0 15px 0;
    border: 0;
    position: relative;
}
#menu ul {
    list-style: none;
}
#menu ul li {
    float: none;
    margin: 0;
    padding: 0 0 0 15px;
}
/* A child selector matches when an element is the child of some element.
A child selector is made up of two or more selectors separated by ">".
http://www.w3.org/TR/CSS2/selector.html */
/*nav > ul > li > ul {
    padding: 0 0 0 0;
    display: none;
    visibility: hidden;
}*/
/* Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is
the subject of the selector. The selector matches if E1 and E2 share the same
parent in the document tree and E1 immediately precedes E2, ignoring non-element
nodes (such as text nodes and comments).
http://www.w3.org/TR/CSS2/selector.html */
/* nav input[type="checkbox"]:checked + ul {
    display: block;
    visibility: visible;
} */
#draw {
    background-color:#FFF;
    padding: 0 100 0 0;
    margin: 0;
}
#draw-str-search {
    vertical-align: top;
}
/* Morzilla kūrėjų pavyzdys, kaip sukurti 'dropdown' meniu be javascript.
https://developer.mozilla.org/en-US/docs/Web/CSS/:checked */
#lbl_search_formula {
    color: blue;
}

#isexpanded:checked ~ #lbl_search_formula {
    color: #660099;
}
/* Checkbox should not be visible at all: */
input.isexpanded {
    display: none;
}
div.expandable,
div.expandable .isexpanded,
div.expandable .expandable,
div.expandable label.expandable
{
    display: none;
}
.isexpanded + label,
.isexpanded + label span {
    display: block;
    cursor: pointer;
}
.isexpanded + label span {
    display: inline-block;
}
.isexpanded + label span:after {
    content: "\25B6";
}
.isexpanded:checked + label span:after {
    content: "\25BC";
}
/* Set 'display:block' only for those forms that are not in the search form
   section (i.e. the main data table page). */
div:not(#search-form-section) > .isexpanded:checked + label.expandable,
div:not(#search-form-section) > .isexpanded:checked + label.expandable + div.expandable,
div:not(#search-form-section) > .isexpanded:checked + label.expandable + div.expandable label.expandable {
    display: block;
}
/* Set the anchor slide up - for editable forms VS fixed header offset. */
/* See 'page-title' breakpoint rules. */
table.editable ~ .isexpanded:checked + label.expandable,
table.editable ~ .isexpanded:checked + label.expandable + div.expandable,
table.editable ~ .isexpanded:checked + label.expandable + div.expandable label.expandable {
    padding-top: 5.2em;
    margin-top: -4.4em;
}
td .isexpanded2:checked + td div.expandable {
    display: block;
}
/*
no results for: find -type f | xargs grep "'infoheader'"
*/
.infoheader {
    font-size: 150%;
    font-weight: bold;
}
form.pagination
{
    margin: 0;
    padding: 0em;
    line-height: 1;
    background-color: #ffffff;
}
p.narrow
{
    font-family: initial;
    font-size: medium;
    line-height: normal;
    padding: 0;
}
a.external_link,
a.external_link:visited,
a.external_link:active {
    mask-image: url("../../images/external-link.svg");
    -webkit-mask-image: url("../../images/external-link.svg");
    mask-position: right center;
    -webkit-mask-position: right center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 0.75em 0.75em;
    -webkit-mask-size: 0.75em 0.75em;
    background-color: blue;
    padding-right: 0.9em;
}
a.external_link:visited {
    background-color: purple;
}
a.external_link:active {
    background-color: red;
}
table.form tbody tr td span.mandatory:after,
table.form tbody tr th span.mandatory:after {
    content: " *";
    color: #ff0000;
}
/* See new border at 'div.related.expandable' rule. */
form .related_tables,
form + .related_tables,
.related_tables {
    padding: 0.25em;
}
.invalid
{
    background-color: #ff7777;
}

/**/
/* Purpose: stylize the old head_controls buttons and input forms. */
/* Used: mini.css as the buffer. */
/* In order to set the small bordered
   buttons display inside the record page - remove background-color
   and border. Should keep these rules for the edit form buttons. */
/* Including disabled button class. */
form.head_controls {
 /* background:var(--form-back-color); */
 color:var(--form-fore-color);
}
form.head_controls>button,
form.head_controls>[type="button"],
form.head_controls>[type="submit"],
form.head_controls>[type="reset"],
form.head_controls>a.button,
form.head_controls>label.button,
form.head_controls>.button,
form.head_controls>a[role="button"],
form.head_controls>label[role="button"],
form.head_controls>[role="button"] {
 display:inline-block;
 /*background:var(--button-back-color);*/
 color:var(--button-fore-color);
 border:.0625rem solid var(--button-border-color);
 border-radius:var(--universal-border-radius);
 text-decoration:none;
 cursor:pointer;
 transition:background 0.3s
}
/* Button property - disabled is the ultimate solution for creating inactive
   buttons. */
form.head_controls>[type="submit"]:disabled,
.button[disabled],
a.button.disabled {
 /*cursor:not-allowed;*/
 pointer-events:none;
 color:unset !important;
 cursor:auto !important;
 background:unset !important;
 border-color:gray !important;
 box-shadow:unset !important;
 opacity:.2
}
.button:hover[disabled],
.button:focus[disabled],
.button.primary:hover[disabled],
.button.primary:focus[disabled] {
 --button-hover-back-color:unset !important;
 --button-fore-color:unset !important;
 border-color:gray !important;
 background:unset !important;
 color:unset !important;
}
/**/

/**/
/* Positional styles. */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/**/

/**/
/* Change the default colors for scrollbar. */
/* For Chrome. */
body::-webkit-scrollbar {
 width: 1rem;
}
body::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
 background-color: darkgrey;
 outline: 1px solid slategrey;
}
/* For Firefox. */
body{
 /* #f8f8f8 - is the background color for the site. */
 /* #b8b8b8 - is couple shades darker than table header background. */
 scrollbar-color: #b8b8b8 #f8f8f8;
 scrollbar-width: thin;
}
/**/

/**/
/* Set for the 'tables.pl' table list cards and navigation. */
/* On 2019.07.29 : currently not used. List cards styles. May be useful
   for the enlarged list cards. */
div.dbtable-list-card {
  border: solid .1rem #969494;
  box-shadow: .1rem .1rem .2rem .1rem lightgray;
}
div.dbtable-list-card > div:nth-child(2) {
  min-height: 40vh;
}
/* Fighting for the specificity with '.card > .section' rules, so had to up
   the level of specificity for :target. */
h4[id^="dbtable-letter-"]:target {
  color:red;
}
div.dbtable-list-card>h4 {
  top:0;
  position:sticky;
}
div.dbtable-list-card:hover {
  border: solid .15rem #888dd4;
}
@media screen and (max-width: 767px) {
  div.dbtable-list-card {
    max-height: 100%;
  }
}
/* Rules for the 'first letter table names' navigation panel. */
div.navigate-table-letters {
  padding: inherit;
  background: var(--form-back-color);
  border: solid .1625rem var(--form-border-color);
}
div.navigate-table-letters p {
  font-variant: small-caps;
}
div.navigate-table-letters p>span {
  margin-left: .7rem;
}
p.dbtable-letter-nav {
  font-weight: bold;
}
p.dbtable-letter-nav-text {
  font-weight: bold;
}
/* Style the 'tables-list' data row : consisting of upto 4 columns of table
   names in alphabetical order. */
/* Remove margins so as to 'collapse' data columns without leaving gaps. */
div#tables-list ul,
div#tables-list ol {
  margin-top: 0;
  margin-bottom: 0;
}
/* Add bottom margin to impose space before the new table name letter. */
div#tables-list h4 {
   margin-bottom: calc(1.5 * var(--universal-margin));
   margin-top: calc(1.5 * var(--universal-margin));
}
/* Remove extra space before the very first heder in data list. */
div#tables-list div > h4:first-child{
  margin-top: calc(.5 * var(--universal-margin));;
}
/**/

/**/
/* Navigation panel for the record page (in 'modify.pl'). */
div.record-navigation-panel {
  border: solid .1rem #f0f0f0;
  top: 0;
  position: sticky;
  z-index: 100000;
  opacity: 0.98;
  border-bottom-color: #828181;
  border-top-width: .4rem;
  border-bottom-width: .2rem;
  /*Uncomment to set the shadow for the navigation bar.*/
  /*box-shadow: -.01rem .02rem .2rem .01rem #3e3eff;*/
  margin-top: 0;
}
div.record-navigation-panel:hover {
  opacity: 1;
}
.record-navigation-panel div#record-navigation-buttons {
  padding-right: .5rem;
}
/* Rules for displaying page title on smaller screens inside the nav.panel. */
div.record-navigation-panel > div.page-title {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
  /* #ddd =: var(--card-border-color) (from mini.css) */
  border-bottom: .0625rem solid #ddd;
  padding: .5rem;
}
/* 'page-title' paragraphs breakpoint rules. */
/* Set the record id breakpoint coincide with header medium-small screen break
   on span elements. */
@media (min-width: 909px) {
  .page-title,
  .record-navigation-panel > .page-title {
    display: none;
  }
  /* Need to minimize fake-slide of the label anchors as well : bc the fixed
     header has just lost extra paragraph on the page display. */
  table.editable ~ .isexpanded:checked + label.expandable,
  table.editable ~ .isexpanded:checked + label.expandable + div.expandable,
  table.editable ~ .isexpanded:checked + label.expandable + div.expandable label.expandable {
      padding-top: 3em;
      margin-top: -2.2em;
  }
}
div.record-navigation-panel > .section {
  padding: 0;
}
/* Getting the last '> div:nth-child(1)' sets the border INSIDE the element. */
div.record-navigation-panel:nth-child(1) > div:nth-child(1) {
  padding: inherit;
  border: solid .1rem #bdbfd1;
}
/* Set more space right before the next data card after the navigation panel. */
div.record-navigation-panel+.card {
  margin-top: 0;
}
/* Filter selection text paragraph rules. */
div#filter-selection-text>p.doc {
  /*font-size: 1.07rem;*/
}
/**/

/**/
/* Utility classes. */
div.align-flex-content-to-middle {
  padding: inherit;
  align-items: center;
}
/* Make sure that all the child containers of the 'align-flex-content-to-middle'
   are centered (including buttons). */
div.align-flex-content-to-middle>div {
  text-align: center;
}
/* Record delete button. */
/* Sol.1.*/
/* Primitive solution. Leaves controls buttons in two separate rows. */
/*form#record-delete-form {
  text-align:right;
}*/
/* Sol.2. */
/* So as to depict all of the controls buttons in one row: choose
   inline display and then absolute position Delete button on the right
   corner of the card. */
form#record-delete-form,
form#record-delete-form ~ form.edit {
  display:inline;
}
form#record-delete-form {
  right:.5rem;
  position:absolute;
}
/**/

/**/
/* Adding invisible paragraph for href := 'top',
   cause there seems not to be any headers or paragraphs whatsoever on
   the data pages. */
p#top {
  visibility:hidden;
  font-size:0;
  margin:0;
}
/**/

/**/
/* Highly specific to RESTful. */
/* Rules to manage display of the hidden elements in the editable data tables. */
/* Discerning editable tables from the rest. Only
   editables have hidden children.
   Also column-value rules should be separated from the regular tables:
   column-value has hidden children as a whole row, whereas regular tables
   have hidden elements as the last td child in a row. */
table:not(.column-value).editable tr td:last-child,
table:not(.column-value).editable tr th:last-child,
table.column-value.editable tbody tr:last-child {
  display:none;
}
/**/

/**/
/* Rules for styling redirect-links and file input buttons
   in input fields for the Edit form pages. */
tbody td img + input[type="file"],
tbody td a + input[type="file"],
tbody td .lightbox-target + input[type="file"] {
 padding-left: .3rem;
}
/**/

/**/
/* RESTful footer rules. */
/* No need to display 'Back to top' link in a db.pl
   footer on the medium through large screens. */
footer div.row {
  padding: inherit;
  padding-top: var(--universal-padding);
  padding-bottom: calc(.55 * var(--universal-padding));
  /*padding-bottom: var(--universal-padding);*/
}
/**/

/**/
/* Rules for tables in edit forms. */
div.entry + div.entry {
  margin-top: 1.33rem;
}
div.related.expandable fieldset.js-button {
  margin-left: .4rem;
  margin-bottom: .25rem;
}
div#table-nav-panel {
  padding-bottom: 0;
}
@media screen and (max-width: 1280px) {
  /* In order to set new record button close to the records table: reverse
     the column flow. */
  div#table-nav-panel {
  /*flex-flow: column-reverse;*/
  }
}
/**/

/**/
/* RESTful header icons rules. */
header a:not(.logo) svg,
header a.logo svg {
  /*Uncomment to return to defaults.*/
  /*
  height: 20px;
  vertical-align: text-top;
  */
  height: 19px;
  vertical-align: middle;
}
header a:not(.logo) span,
header a.logo span {
  font-size: 1.3em;
  vertical-align: middle;
  /*padding-top: .1em;*/
}
header a.logo {
  overflow: auto;
  text-overflow: ellipsis;
  /* Adding background color to separate the logo from the rest. */
  /*
  background: #e4e4e4;
  */
}
/**/

/* Text style for message about senstive data*/
span.confidential-msg {
  color: grey;
  font-style: italic;
}

/* Restful collapsible spreadsheet panels. */
/**/
/* Solution 1: using links. */
#spreadsheet-row2 {
  padding-top: .2em;
}
#spreadsheet-row2 #content,
#spreadsheet-row2:target #open-row2 {
  display: none;
}
#spreadsheet-row2 #content {
  position: relative;
}
/* Toggle-close the visible panel. */
#close-row2 {
  position: absolute;
  top: 0;
  right: .5em;
}
#spreadsheet-row2:target #content {
  display: block;
}
#spreadsheet-row2 #content.row > div {
  padding-left: 0;
  padding-right: 0;
}
/**/
/* Solution 2: using checkboxes. */
#search-form-section input[id="expandable:spreadsheet-panels"].isexpanded:checked ~ div[id="spreadsheet-panels"].related.expandable {
  display:block;
}
/*
div.expandable,
div.expandable .isexpanded,
div.expandable .expandable,
div.expandable label.expandable,*/
div[id="spreadsheet-panels"].related.expandable {
  display: none;
}
input[id="expandable:spreadsheet-panels"] + label {
  margin-left: 0;
}
/*
div[id="spreadsheet-panels"].related {
  margin-left: .65rem;
}
*/
input[id="expandable:spreadsheet-panels"] ~ div[id="spreadsheet-panels"].related {
  margin-left: .9rem;
  border-left: .1rem solid black;
  /* Second shadow:
     , -.6rem 0px #f0f0f0 */
  box-shadow: -.15rem 0px #cfcece;
}
