/* EVENTUALLY GET RID OF THESE, DOWN TO ETC OVERRIDES */

.modal.lib {
    top: 0px;
    margin: 0 0 -500px -650px;
    width: 1300px;
}

.modal-body.lib {
    height: 500px;
    min-height: 500px;
    max-height: 500px;
}


/* --------------------------------------------------------------------------------------- */
/* This is a HACK to use the old bootstrap 3.4.1 glyphicon icons simply for question-sign, */
/* it is by and large a small chunk cut straight from the bs341 code.                      */
/* --------------------------------------------------------------------------------------- */
@font-face {
  font-family: "Glyphicons Halflings";
  src: url("../libraries/old_bs341_fonts/glyphicons-halflings-regular.eot");
  src: url("../libraries/old_bs341_fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../libraries/old_bs341_fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../libraries/old_bs341_fonts/glyphicons-halflings-regular.woff") format("woff"), url("../libraries/old_bs341_fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../libraries/old_bs341_fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
.glyphicon {
  position: relative;
  top: 1px; 
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} 
.glyphicon-question-sign:before {
    content: "\e085";
    font-size: 0.9rem; /* this line added by CDS to make it just right */
} 
span.etc_span_glyph_focus:before { /* show when these receive focus in case of tab-navigating */
    color: blueviolet; /* also like green for this */
    border-bottom: 1px solid;
} 

/* --- END OF HACK ---------------------------------------------------------------------- */


/* ETC Help Settings in General */
a.etc_help_a {
    outline: none;
}
a.etc_help_a > span {
    color: blue;
    cursor: pointer;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* commonly accepted web standard these days (2022) is to show underline only on hover */
/* which we fix here, except on our dropdowns, bc oddly Bootstrap deviated from this in BS5 */
a, .btn-link, a.navbar-brand:hover, a.btn:hover, li > a.dropdown-item:hover {
    text-decoration: none;
}
a:hover, #user_device_cfg > .btn-link:hover {
    text-decoration: underline;
}


/* to use as a quick stand-in when/if we rip out glyphicon ...
.glyphicon {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-question-sign:before {
    content: "\003F";
    font-size: 1rem;
    font-weight: bold;
}
*/


/* ------------------------------------------------------------------ */
/* ETC glyph/icon settings - use these where possible - we are now    */
/* wrapping standard web symbols and emjois in these CSS classes      */
/* since all current browsers can show them.                          */
/* see also:  https://www.w3schools.com/charsets/ref_html_symbols.asp */
/* see also:  https://unicode.org/emoji/charts/full-emoji-list.html   */
/* ------------------------------------------------------------------ */

.etc-glyph-arrow-left:before {
    content: "\2190";
    font-size: 1rem;
    font-weight: bold;
}
.etc-glyph-arrow-hint:before {
    content: "\2190"; /* by default, the "hint" arrow is set up to be the left arrow */
    font-size: 1rem;
    font-weight: bold;
}
.etc-glyph-arrow-right:before {
    content: "\2192";
    font-size: 1rem;
    font-weight: bold;
}
.etc-glyph-star:before {
    content: "\2605";
    font-size: 1rem;
}
.etc-glyph-star-empty:before {
    content: "\2606";
    font-size: 1rem;
}
.etc-glyph-ok-sign:before {
    content: "\2705";
    font-size: 1rem;
}
.etc-glyph-bop-sign:before {
    content: "\26A1"; /* bomb: 1F4A3; brightness: 1F506; bulb: 1F4A1; collision: 1F4A5; zap: 26A1 */
    font-size: 1.0rem;
    background: black;
}
.etc-glyph-error-sign:before {
    content: "\274C";
    font-size: 0.8rem;
}
.etc-glyph-warning-sign:before {
    content: "\26A0";
    font-size: 1.2rem;
    font-weight: 999;
    margin: 0px;
    line-height: initial;
    /* could change color here to darken a bit */
}
.etc-glyph-just-check:before {
    content: "\2713";
    font-size: 1rem;
}
.etc-glyph-check-box:before {
    content: "\2611";
    font-size: 1rem;
}


/* ------------------------------------------------------------ */
/* ETC RE-IMPLEMENTATION OF DERECATED&REMOVED BOOTSTRAP CLASSES */
/* (don't use these for any new ui development)                 */
/* ------------------------------------------------------------ */
.form-group {
    margin-bottom: 1rem;
    align-items: center;
}

/* ---------------------- */
/* ETC SPECIFIC OVERRIDES */
/* ---------------------- */

.etc_ltgrey_bg {
    background-color: #f5f5f5;
}

.etc_label {
    font-weight: bold;
}
.etc_rlabel {
    font-weight: bold;
    text-align: right;
}
/* pad, but do not pad for div.input-group > label.etc_rlabel; eg source->offset->xoffset */
div.form-group > label.etc_label {
    margin-bottom: 0.3rem;
}
div.form-group > label.etc_rlabel {
    margin-bottom: 0.3rem;
}

/* one place where we can hit dozens of etc_label elements in the strategy tabs, all in one shot */
div.form > div.row > div > div > label.etc_label {
    margin-bottom: 0.25rem;
}
div.form > div.row > div > label.etc_label {
    margin-bottom: 0.25rem;
}

.etc_just_right {
    text-align: right !important;
}
.etc_just_center {
    text-align: center !important;
}
.etc_just_left {
    text-align: left !important;
}

.etc_hidden_text {
    color: transparent;
    user-select: none;
    font-size: 0;
}

/* BS 5.3 changed the color here to something too light */
.input-group-text {
    background-color: #e9ecef;
}

/* width convenience classes, esp. for input boxes; it's useful to manipulate classes over styles */
.width_auto {
    width: auto;
}
.width_5 {
    width: 5rem;
}
.width_6 {
    width: 6rem;
}
.width_7 {
    width: 7rem;
}
.width_8 {
    width: 8rem;
}
.width_9 {
    width: 9rem;
}
.width_10 {
    width: 10rem;
}
.width_12 {
    width: 12rem;
}
.width_15 {
    width: 15rem;
}
.width_20 {
    width: 20rem;
}
.width_25 {
    width: 25rem;
}
.width_30 {
    width: 30rem;
}

div.etc_form_indent {
    padding-left: 1.75rem; /* for divs, p is better thabn m since p doesnt get eaten */
}
select.etc_form_indent {
    margin-left: 1.75rem; /* for selects, we must use m (margin) else it pads inside of pulldown */
    width: auto; /* otherwise selects in a form-group just shift to the right */
}

.navbar-readonly {
    font-style: italic;
    font-weight: bold;
}
.navbar-fixed-top-read-only {
    pointer-events: none;
    background-color: #FFD7A9 !important; /* light orange */
}

/* workbooklist page, Name and Description cols should text wrap */
tbody#workbooks_table_body > tr > td:nth-child(2),
tbody#workbooks_table_body > tr > td:nth-child(5),
tbody#workbooks_table_body > tr > td:nth-child(6) {
    white-space: normal;
}

/* reports table stuff */
.reptbl_hdr_row {
    border-bottom-width: thin;
    border-top-width: thin;
}
tr.reptbl_item_row:hover {
    background-color: #bdf; /* def? */
}

.reptbl_name_indent {
    padding-left: 2rem;
}

.reptbl_value {
    max-width: 7rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.reptbl_value_long {
    max-width: 12rem;
    padding-left: 0.25rem;
}


/* table header sorting stuff */
#sourcepane_plotdrop > a.dropdown-toggle:after,
#calcpane_plotdrop   > a.dropdown-toggle:after {
    content: none; /* don't put caret next to this one as it is a pulldown and not sortable */
}
span.sorter.dropdown-toggle:after {
    margin-left: 0.25rem !important; /* spacing around the caret indicator for table sorting only */
}

/* HEIGHT-RELATED ITEMS! related: etc_vresizable_row, calctablecontainer, etc_viz_row, configcontenttabs, top_pane, scenepage_tabcontent */

/* note media-checking code also in js/media_css.js */
@media only screen and (min-width: 1000px) {
    /* only allow etc_vresizable_row to be resizable if screen is wide enough. not for single-column-mode */
    div.etc_vresizable_row {
        /* to make major sections of the UI vertically resizable */
        resize: vertical;
        overflow-y: auto;
        min-height: 8rem;  /* avoid "I cant find my calc-table" help desk calls */
        max-height: 33rem; /* if configcontenttabs is increased then this should be too */
    }
    div#visualizationrow.etc_vresizable_row {
       max-height: 59rem; /* override of the above, only for the viz row resizing */
    }
    div#sourcevizrow.etc_vresizable_row {
       max-height: 50rem; /* override of the above, only for the srcviz row resizing */
    }
}
/* note media-checking code also in js/media_css.js */
@media only screen and (max-width: 999px) {
    /* thinner than this browser width, all panes bump into single-column-mode, so don't hold unused heights */
    #myworkbooklisttablecontainer,
    #mywblist_perm_container,
    #calctablecontainer,
    #configcontenttabs,
    .scenepage_tabcontent,
    #spectra_list_container {
        min-height: unset !important;
        height: auto !important;
        max-height: 35rem !important; /* upper limit, but handle all cases */
    }
    .etc-glyph-arrow-hint:before {
        content: "\2191"; /* here we make the "hint" arrow an up arrow */
        font-size: 1rem;
        font-weight: bold;
    }
}

.etc_wblist_table_div {
    height: 25rem;
    overflow-y: scroll;
    white-space: nowrap;
}

/* calc table stuff */
#calctablecontainer {
    /* generalize these with an etc-based class name, if I reuse it */
    height: 27rem;
    overflow-y: scroll;
}
#calctable > thead {
    line-height: 1rem;
}

.table > tbody {
    border-top: 1.5px solid !important;
}

td.etc_edits_allowed {
    /* placeholder for future css; class is used as a flag */
    /* the td holds this class all the time, even when not editable by user */
/*  cursor: text;   also see:  https://developer.mozilla.org/en-US/docs/Web/CSS/cursor  */
/*  cursor: url("pencil.svg") 5 20, text; */
    cursor: pointer; /* see also the line in table.js that sets this for all selectable rows */
}

tr.row_selected > td.etc_edits_allowed:hover > .edit_me_icon {
    display: inline;
}

i.edit_me_icon {
    display: none;
    margin-left: 5px;
}

td.etc_editing_cell > .edit_me_icon {
    display: none !important; /* hide this while they are actually editing */
}

td.etc_editing_cell {
    outline-color: blue;
    outline-style: solid;
    outline-width: 1.75px;
    background-color: unset !important;
    cursor: text !important;
}

tr.etc_bop_row {
    color: red;
}
tr.etc_bop_row > td:first-of-type {
    background: red;
    color: white;
}

.etc_viz_row {
    overflow-y: auto;
    max-height: 57rem;
}

#configcontenttabs { 
    height: 24rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* this is config tab RHS of top_level_calculation_tab (gets overlay) */
/* div#top_pane.card-body {
    height: 27rem !important;
    overflow-y: hidden;
} */

.scenepage_tabcontent {
    /* This height affects the scene table and source table, but */
    /* it ALSO affects the height left over for the New and Delete btns */
    max-height: 26rem;
    min-height: 26rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* END OF HEIGHT-RELATED ITEMS! */


#li_twodsnr, #li_detector, #li_saturation, #twodsnr, #detector, #saturation {
    /* by default show none of the tab links or tab divs for old plots */
    display: none;
}

/* Make buttons look disabled when needed */
.btn.disabled {
    cursor: not-allowed;
}
#line_add.btn.disabled,
#line_update.btn.disabled,
#line_remove.btn.disabled,
#sctab_line_add.btn.disabled,
#sctab_line_update.btn.disabled,
#sctab_line_remove.btn.disabled {
    cursor: not-allowed;
    pointer-events: visible; /* needed to show correct cursor */
}

div#warning_messages > ul {
    padding-left: 0.75rem;
}

.etc_express_box {
    /* this class is specifically meant to override some bootstrap panel styles; hence "important" */
    background:   white;
    border-color: blue   !important;
    border-style: solid  !important;
    border-width: thin   !important;
    color:        blue;
    margin-right: 0.75rem;
    margin-left:  0.5rem;
}

.etc_express_calc_btn {
    background: blue  !important;
    color: white      !important;
}

.etc_express_calctable {
    height: 9rem !important;
}

.etc_express_tab {
    border: 1px solid blue !important;
}

/* change nav-link text color everywhere.  default is too light */
.navbar-light .navbar-nav  .nav-link {
    color: #606060;
}

/* color tweaks for the new-calc btns */
#miri_menu_btn, #nircam_menu_btn, #niriss_menu_btn, #nirspec_menu_btn {
    border-color: black; /* also liked #120091, a dark dark blue */
}

/* for calctable progress bars */
.progress {
    margin-top: 2px !important;
    height: 1.25rem;
}

label.error {
    color: red;
    margin-bottom: 0.3rem;
}

input.error {
    color: red;
}

label.warning {
    color: #FF8800;
    font-style: italic;
    margin-bottom: 0.3rem;
}

input.warning {
    color: #FF8800;
}

label.normal {
    font-weight: normal !important;
}

label.left {
    text-align: left !important;
}

tbody tr.current td {
    background-color: yellow;
}

tbody tr td {
    padding: 5px !important;
}

/* handle a BS 5.3 change which messed up the way header cell borders look when dropup class */
table thead tr th.dropup {
    position: unset;
}

.single_line_note {
    overflow: hidden;
    height: 1.5em;
    white-space: pre;
}

.row_selected td.colorable {
    background-color: #FF0;
}

.row_highlighted td.colorable {
    background-color: #B4FFB4;
}

.row_selected.row_highlighted td.colorable {
    background: #FF0 repeating-linear-gradient(
            -55deg,
            #FF0,
            #FF0 20px,
            rgba(174, 254, 174, 0.41) 20px,
            rgba(174, 254, 174, 0.41) 40px
    );
}

.row.no-gutter {
    margin-left: 2px;
    margin-right: 2px;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 2px;
    padding-left: 2px;
}

.vertical-align {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/*This a fix for a firefox bug that manifested on my system wherein */
/*responsive images are not responsive inside fieldsets*/
.img-responsive {
    width:100%;
}

.inst_tab_hdr {
    text-align: center;
    font-weight: 400;
    font-size: 1rem;
    margin-top: .25rem;
    margin-bottom: .75rem;
}

#calc_pane_msg {
    margin-bottom: 0;
    margin-top: 6px;
    padding-bottom: 8px;
    padding-top: 8px;
}
#calc_pane_msg.alert.alert-warning {
    background-color: #fcf8e3; /* override bootstrap-4.5 color for this to match old which is nicer */
}
#calctable_body > tr > td.alert-warning {
    background-color: #fff3cd; /* bootstrap51 has a css that is higher precedence than this so we add it here */
}

.overlay
{
    background-color: #f5f5f5;
    filter: none; /* error --> alpha(opacity=25); */ /* IE */
    opacity: 0.25; /* Safari, Opera */
    /* -moz-opacity:0.250; <-- error */ /* FireFox */
    z-index: 20;
    height: inherit;
    width: inherit;
    background-repeat:no-repeat;
    background-position:center;
    position:relative;
    top: 0;
    left: 0;
}

#snr_scale_x, #snr_scale_y {
    width:7em;
}

g.hovertext .name {
   fill: black !important;
   font-size: 12pt !important;
}

/* this is most likely for plotly but is a CSS error; revisit */
/* text.gtitle {
    y: 50 !important;
} */

g.subplot rect {
    stroke: black;
    stroke-width: 1 !important;
}

div.modebar-group a.modebar-btn--logo {
    display: none;
}

.scrollable-menu {
    height: auto;
    max-height: 13rem;
    overflow-x: hidden;
}

/* bootstrap got rid of help-block so make our own called etc_help_block */
.etc_help_block {
    display: block;     /* from BS's replacement for help-block, now "form-text" */
    margin-top: .25rem; /* from BS's replacement for help-block, now "form-text" */
    font-weight: 350;   /* just a little lighter */
    font-style: italic;
    font-size: .9rem;   /* just a skosh smaller */
}

/* specifics for the row_select_indicator's (override things in etc_help_block) */
.row_select_indicator {
    font-style: normal !important;
}