body {
    background-color: black;
}


/* I've forgotten what these were for */
div.ui.list div.item {
    padding: .4em !important;
}

div.ui.list div.item.active {
    font-weight: bold;
}

div.ui.list div.item:hover {
    cursor: pointer;
    background-color: #eee;
}

/* The Bootstrap defaults don't work well for us */
.selector {
    display: inline;
    appearance: none;
    background: url("/img/expander.svg") 96% / contain no-repeat #fff;
    padding-right: 40px;
    max-width: 500px;		/* protect layout against huge batch/sheet names */
}

.inline {
    display: inline !important;
}

.icon {
    margin-left: 6px;
}

.icon:hover {
    text-shadow: 0 0 2px darkgrey;
    cursor: pointer;
}

.material-icons.md-dark { color: rgba(0, 0, 0, 0.8); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.25); }

.material-icons.md-light { color: rgba(127,127,127, 0.8); }
.material-icons.md-dark.md-inactive { color: rgba(127,127,127, 0.25); }

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.muted {
    color: grey !important;
}


.scrollable {
    overflow: scroll;
    height: 90%;
}

.filter {
    width: 200px;
    display: inline;
}

/* Table row backgrounds */

.unmatched {
    background-color: bisque !important;
}

.match-pending {
    /* Match modal button color */
    background-color: orangered !important;
}

.modal-button {
    margin-left: 5px;         
    margin-righ; 5px;
}

.modal-button-on {
    background-color: orangered;    
    color: white;
}

.inline {
    display: inline;
    width: auto;
}

.vcenter {
    vertical-align: middle;
}

.hcenter {
    text-align: center;
}

/* For UL witout bullets or margin  */
.barelist {
    list-style: none;
    padding-left: 0;
}


/* Based on https://github.com/benhowell/re-frame-modal/blob/master/re-frame-modal.css */

/*****************/
/* modal popovers*/
/*****************/
.modal-header {
    background-color: #a7a8aa;
    color: white;
    font-weight: bold;
}

.modal-header.panel-heading {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.modal-wrapper {
  display: flex;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1040
}

.modal-backdrop {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.6;
  z-index: 1;
  -webkit-animation: fade-in 0.2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fade-in 0.2s; /* Firefox < 16 */
  -ms-animation: fade-in 0.2s; /* Internet Explorer */
  -o-animation: fade-in 0.2s; /* Opera < 12.1 */
  animation: fade-in 0.2s;
}

.modal-child {
  margin: auto;
  margin-top: 30px;
  z-index: 2;
  -webkit-animation: fade-in-child 0.2s;
  -moz-animation: fade-in-child 0.2s;
  -ms-animation: fade-in-child 0.2s;
  -o-animation: fade-in-child 0.2s;
  animation: fade-in-child 0.2s;
}

@keyframes fade-in {
  from {opacity: 0;}
  to   {opacity: 0.6;}
}

@keyframes fade-in-child {
  from {opacity: 0;}
  to   {opacity: 1;}
}


/* Make the ops menu more compressed and legible */
.dropdown-header {
    padding-left: 1rem;
}

.dropdown-item {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.read-only {
    background-color: lightgray;
}

.ag-container {
    overflow-x: scroll;
}

/* fixes weird page scroll problem */
/* ref: https://www.ag-grid.com/javascript-grid-scrolling-scenarios/ */
/* Sigh, problem is back with reskinning. TODO  */
.ag-body-viewport {
    overflow-y: scroll !important;
}

/* Fixes problem in ag-grid 24.1.0, not necessary in 25.0.1, but that is broken in other ways */
.ag-paging-button {
    opacity: 1 !important;
}

/* Khryza stuff below */

.main {
    background-color: white;
    font-family: 'Roboto', sans-serif;
    padding: 0;
}

.container {
    max-width: 85%;
}

/* for the wide container-fluid view, add in some margin */
.margins {
    padding-left: 100px;
    padding-right: 100px;
    background: black;
}

/* TODO hm */
.main a:link {
    color: #685BC7; 
    font-weight: bold;
}

.main a:visited {
    color: #685BC7;
    font-weight: bold;
}


.a-disabled {
    color: gray;
    font-style: italic;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.black {
    background-color: black;
}
.white {
    background-color: white;
}

.blackf {
    color: black;
}

.whitef {
    color: white;
}

.orangef {
    color: #FF6C2F;
}

.project {
    background-color: white;
    border-radius: 3px;
    margin-top: 10px;
    padding-top: 4px;
    padding-left: 6px;
    padding-bottom: 1px;	/*actinv weird*/
}

.project li {
    list-style-type: square;
    color: #FF6C2F;
}


/* project collapse button */
.project .icon {
    float: right;
}

.proj-metadata {
    color: gray;
}


/* header */

.header {
}

.header-ic {
    position: absolute;
    pointer-events: none;
    height: 80px;
    width: 100%;
    overflow-y: hidden;
    background: url("/img/Header 1.png") 0% 0% padding-box;
    opacity: 0.3;
}

.header-i {

}

.header__logo {
    position: absolute;
    top: 16px;
    left: 16px;
}

.header__logo path {
    fill: white;
}


h1 {
    color: #FF6C2F;
}

.titles {
    margin-left: 250px;
}

/* TODO to position header, probably not the right way   */
.header h1 {
    padding-top: 10px;
    padding-left: 10px;
}

.header h1 a:link {
    color: white;
}
.header h1 a:visited {
    color: white;
}

.welcome {
    color: white;
    position: absolute;
    right: 20px;
    top: 10px;
}

/* supposed to be ugly and scary */
.asof {
    color: red;
    background: cyan;
    margin-left: 300px;
    padding: 5px;
}

h3 {
    font-size: 12pt;
    font-weight: bold;
    text-transform: uppercase;    
}

.dashitem {
    font-size: 12pt;
    font-weight: bold;
    background: #eee;
    padding: 14px;
}

.u {
    text-transform: uppercase;
}

.top-nav-link {
    text-transform: uppercase;
}

.active {
    border-bottom: 2px #FF6C2F solid;
}

.dropdown-item {
    text-transform: none;
}

.borderless {
    border: none;
}

.page-content {
    background: white;
    padding: 8px;
}

.editable-text {
    white-space: pre-wrap;
}

.dropdown-toggle::after {
    color: #FF6C2F;
}


.pici-purple {
    color: #685BC7;		/* Another official PICI brand color */
}

.count {
    color: #685BC7;
    font-style: italic;
}

.btn-primary {
    background-color: #FF6C2F;    
}

.btn-primary:disabled {
    background-color: #BBB;    
}

.dropdown-menu {
    background-color: white; ; /* #343a40 for hierarchical version */
}

.dropdown-menu .nav-link {
    text-transform: none;
}

.pici-blue {
    background-color: #0083C3;
}

.alert-piciblue {
    background-color: #0083C3;
    color: white;
}

.login-panel {
    margin-top: 30px;
    background-color: white;
    border-radius: 10px;
}

.nobr {
    white-space: nowrap; 
}

.break-all {
    word-break: break-all;
}

.hidden {
    display: none;
}

.yes-notes {
    color: #FF6C2F;    
}


.popover-title {
    text-transform: none;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
}

.popover-content > textarea  {
    width: 97%;
    border: 1px solid lightgray;
    margin: 3px;
}

/* for content in job/batch page sections */
.scontent {
    margin: 12px;
    font-style: italic;
}

/* sheet outline */
.sheetree {
    padding-inline-start: 20px;
}

/* sheet provenance grid */
.prov-grid {
    height: 600px;
}

/* bootstrap 5 */
a {
    text-decoration: none;
}

/* Note: changes here should also be made in the Vega graph code in batch.cljs */

/* Highlight for sheets that are attached to run-steps. */
.sheet-rs {
    border-bottom: 2px solid red;    
}


/* Have to use this in grid view */
.sheet-rs-ag {
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-thickness: 2pt;
}


/* Highlight for sheet that is currently active */
.sheet-latest {
    background-color: #d8efa1;
    display: block;		/* makes the background cover area, not just text */
}

.rs-sheet-picker {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 90%;
}

.rs-sheet-picker .selector {
    border: 0px;
    font-size: 9pt;
    padding-left: 2px;    
}

/* Override bootstrap class */
.form-check-input {
    width: 30px;
    height: 30px;
    position: initial;
    margin-left: initial;
}

/* Try to get op dialog rows looking better. This is icky; maybe alternating is better */

.optable {
    border-collapse: collapse;
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
}



.optable td {
    border: none;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: 7px;
    padding-bottom: 7px;
    
}
.optable th {
    border: none;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
}

.optable tbody {
    vertical-align: middle;
}

.optable tr:nth-child(2n) {
    background-color: #f6f6f6;
}


/* Recipes */

.recipe {
    position: relative;
    width: 100%;
    height: 2009px;		/* Needs scrolling or something */
}

.recipe .svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.run-step {
    position: absolute;
    width: 200px;		/* box-width */
    height: 100px;		/* box-height */
    border: 1px solid black;
    font-size: small;
}

.run-step .doc {
    position: absolute;
    right: 0;
    bottom: 28;
}

.run-step .notes {
    position: absolute;
    right: 0;
    bottom: 0;
}

.run-step .name {
    padding-left: 2px;
    font-weight: bold;
}

.run-step .status {
    float: right;
    border: 1px solid #aaa;
    padding-right: 2px;
    padding-left: 4px;
    padding-bottom: 2px;
}

.run-step .metadata {
    margin-left: 3px;
}

/* sheet chooser */

.sheet-chooser {
    padding-bottom: 1rem;
    display: block;
}

.sheet-chooser .chooser {
    min-width: 300px;
}

.sheet-chooser .spacer {
    width: 40px;
}

.sheet-chooser .expand {
    margin-left: 5px;
    margin-right: 5px;
}