:root {
  --base-font-size: var(--core-font-size);
  --bigger-font: calc(var(--base-font-size) * 1.1);
  --big-font: calc(var(--base-font-size) * 1.2);
  --smaller-font: calc(var(--base-font-size) * .85);
  --small-font: calc(var(--base-font-size) * .7);
  --tiny-font: calc(var(--base-font-size) * .5);
}

span.mono {
  font-family: monospace;
}

.wrapit {
  max-width: 550px;
  white-space: normal;
}

.wrapit p.spacer {
  margin-top: 2px;
  font-size: 2px;
}

.wrapit>p {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.is-6,
.title.is-6 {
  font-size: calc(var(--smaller-font), .9) !important;
}

.is-5,
.title-is-5 {
  font-size: var(--base-font-size) !important;
}

.navbar-menu.is-active {
  text-align: right;
  padding-right: 2rem;
}

#upper_space {
  padding-bottom: .45rem;
  /* height: 5.3rem;
  min-height: 5.3rem; */
}

#button_bar {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

#button_bar .button:not(#busy):hover {
  filter: brightness(140%);
}

#busy {
  cursor:default;
}

.center {
  margin-top: .25rem;
  margin-left: 2rem;
}

.is-4 {
  margin-bottom: 1rem !important;
}

body {
  font-size: var(--base-font-size);
  color: var(--body-color);
  background-color: var(--body-background);
}

.button:not(#busy):not(#size_change):not(#submit_treatments):not(#settings),
select,
input {
  background-color: var(--body-background) !important;
  color: var(--body-color) !important;
  border-color: var(--body-color);
}

#submit_treatments.button {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  background-color: var(--body-background) !important;
  color: green !important;
  font-weight: bold;
  border: 1px solid green !important;
}

.navbar-item:first-of-type {
  padding-left: .25rem;
}

select,
input {
  border-color: var(--body-color) !important;
}

.input_wrapper {
  position: relative;
}
.clear_button {
  position: absolute;
  right: 3px;
  top: 4px;
  color: dimgray;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.input {
  width: 350px;
}

.buttons .input {
  width: 150px !important;
}

#edit_member input.input {
  width: 500px !important;
}

::placeholder {
  color: var(--body-color) !important;
  opacity: .8;
}

/* input {
  max-width: 50rem !important;
} */
/*
    override bulma
 */

.green {
  color: lime;
}

.w1 {
  display: inline-block;
  width: 70px;
}

.w2 {
  display: inline-block;
  width: 40px;
}


#res_date {
  border: solid dimgray 1px;
}

#res_date>p>input {
  max-width: 120px;
  font-size: 10px;
  padding: 0 5px;
}

.list-header:first-of-type {
  margin: 0 !important;
}

.list-header {
  margin-top: 1.5rem;
  margin-bottom: 0 !important;
}

.buttons {
  position: relative;
  top: .5rem;
}

.buttons .button {
  margin: 0 !important;
}

.hero-body {
  align-items: flex-start !important;
  padding: 0 .5rem;
}

.hero-foot {
  position: relative;
  top: -.1rem;
  display: flex;
  font-size: var(--tiny-font);
  align-items: start;
}

.hero-foot .container {
  display: flex;
  align-items: flex-start;
}

#page_title {
  display: flex;
  flex-direction: column;
  position: relative;
  top: -.3rem;
}

.clear {
  padding: 0 10px;
  cursor: pointer;
}

.dump {
  margin-right: .75rem;
  border: solid 1px;
  padding: 2px 10px;
  cursor: pointer;
}

#busy, #size_change, #settings {
  border: solid 1px;
  padding: 2px 10px;
}

#settings {
  background-image: url("/static/images/settings.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .65;
  width: 30px;
  height: 30px;
  display: inline-block; /* or block */
}
 
.on_right {
  align-self: flex-end;
  display: flex;
  margin-left: auto;
  gap: .5rem;
}
/* .on_right {
  margin-right: 5rem;
  display: flex;
  margin-left: auto;
} */


.thin_hr {
  color: var(--lightgray-color);
  margin: 0;
  padding: 0;
}

.tiny {
  align-self: center;
  font-size: calc(var(--base-font-size)*.5);
  position: relative;
  top: 1px;
}

.small {
  font-size: var(--small-font);
  margin: 0;
  /* padding: 2px 0; */
}

.smaller {
  font-size: var(--smaller-font);
}

.medium {
  font-size: var(--base-font-size);
}

.bigger {
  font-size: var(--bigger-font);
}


.bold {
  font-weight: 600;
}

.nq {
  color: maroon;
}

.aw {
  color: rgb(22, 195, 22);
}

.rn {
  color: rgb(24, 149, 24);
}

.cmp {
  color: brown;
}

.qd {
  color: darkgoldenrod;
}

#cur_time {
  position: absolute;
  right: 1rem;
}

.error {
  color: red;
  font-weight: bold;
}

.mild-warning {
  color: goldenrod;
}

.title.mild-warning {
  color: goldenrod !important
}

.warning {
  color: red;
}

.login {
  border-radius: 25px;
  padding: 1.5rem;
  box-shadow: 8px 8px 15px darkgray, -8px -8px 15px var(--lightgray-color);
}

.indent {
  padding-left: 12px;
  font-size: var(--smaller-font);
}

#m_top {
  position: relative;
  flex: 1;
  border: solid 1px var(--lightgray-color);
  padding: 5px;
  overflow: auto;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.fillbox {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* css for folder browser */
.folder_header {
  display: flex;
  gap: var(--tiny-font);
  align-items: flex-end;
}

.folder_header p {
  font-size: var(--bigger-font);
}

.folder_header p.bold {
  font-weight: 600;
}

.folder_header p.small {
  font-size: var(--smaller-font);
}

.top-1 {
  position: relative;
  top: 2px;
}

.folder {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.folder a {
  font-size: var(--base-font-size);
  color: var(--link-color);
  font-weight: 600;
}

.folder p {
  font-size: var(--smaller-font);
}

.file {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  font-size: var(--base-font-size);
}

.file a {
  color: var(--link-color);
}

.file p {
  margin-left: .5rem;
}

.file p.small {
  font-size: var(--smaller-font);
}

.file p.gray {
  color: gray;
}

.select_mode {
  font-style: italic;
  color: dimgray !important;
}

/* end of folder browser */

.row {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* css for database browser */
.record {
  cursor: pointer;
}

.link {
  color: var(--link-color);
  cursor: pointer;
}

#conn {
  align-self: center;
  position: relative;
  top: -2px;
  cursor: pointer;
  color: gray;
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
}
#conn.connected {
  color: red;
}

.link.red {
  color: red;
}

.link.in_group {
  color: goldenrod;
}


.click_edit_container {
  display: inline-flex;
}


#fps_dropdown, #fcs_dropdown, #cat_medical {
      padding: 3px;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
      text-align: center;
}

.click_edit_input {
  width: 5rem;
  height: 1.5rem;
  outline: none;
}

.hidden {
  display: none !important;
}


.boxy {
  font-size: .9rem;
  font-weight: bold;
  padding: 3px;
  border: solid 1px #555;
  cursor: pointer;
}

.spread:not(:first-child) {
  margin-left: .5rem;
}


input[type=radio] {
  margin-right: .5rem;
}

.link:hover {
  filter: brightness(120%);
}


#two_columns {
  flex: 1;
  overflow: hidden;
}

/* #foster_diff p.is-6 {
  font-size: var(--base-font-size) !important;
} */
.subtitle.is-6 {
  margin-top: -1rem !important;
}


/* #foster_list {
  font-size: var(--smaller-font);
}

#foster_list span.smaller {
  font-size: var(--small-font) !important;
} */

/* end of database browser */

.msg_link {
  cursor: pointer;
}

.msg_link:hover {
  filter: brightness(120%);
}

#click {
  width: 100px !important;
}

.message {
  width: 300px !important;
}

.highlight {
  background-color: yellow;
}

.scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: auto;
}

.wrap {
  overflow-y: auto;
  overflow-x: wrap;
  white-space: wrap;
}

#m_top:has(.scroll) {
  overflow: hidden;
}

.hanging-indent {
  text-indent: -1rem;
  margin-left: 2.5rem;
  padding: 0;
  margin-bottom: 0;
}

.headerer {
  cursor: pointer;
}

.hilight {
  color: #333;
  background-color: #b0b000;
  padding: 1px 3px;
}

.group {
  display: none;
  overflow: auto;
}

#screen {
  display: none;
  position: absolute;
  background-color: rgba(255, 0, 0, .1);
  z-index: 5;
}

#if {
  z-index: 1;
}

#fs {
  position: relative;
}

#overlay {
  display: none;
  position: absolute;
  z-index: 2;
}

.overlay_box {
  position: absolute;
  background-color: yellow;
}

.smallcaps {
  font-variant: small-caps;
}

#output {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  position: absolute;
  border: solid 2px limegreen;
  background-color: black;
  border-radius: 15px;
  top: 20px;
  right: 80px;
  width: 150px;
  height: 40px;
  overflow: hidden;
  padding: 10px;
  font-size: .7rem;
  color: limegreen;
  opacity: .5;
  z-index: 3;
}

#output> :first-child {
  font-weight: bold;
}

.db_small {
  font-size: .6rem;
}

#initials {
  /* top: 435px;
  left: 93px;
  width: 135px;
  height: 22px; */
  cursor: pointer;
  z-index: 4;
}

#signature {
  /* top: 728px;
  left: 157px;
  width: 390px;
  height: 30px; */
  cursor: pointer;
  z-index: 4;
}

/* input#c_date {
  top: 733px;
  left: 585px;
  width: 110px !important;
  height: 24px !important;
} */

input.f_text {
  color: darkblue !important;
  height: 24px;
  background-color: yellow !important;
  border-color: transparent !important;
  outline-color: transparent !important;
}


.category.open>.group,
.category.searching>.group {
  display: block;
}

@media screen and (min-width: 700px) {
  :root {
    --core-font-size: 1rem;
  }

  .dropdown-input {
    font-size: var(--bigger-font);
  }

  .fillbox {
    min-height: calc(100vh - 52px - 15px);
    max-height: calc(100vh - 52px - 15px);
  }

  #foster_diff {
    font-size: var(--smaller-font);
  }
}

@media (max-width: 820px) {
  .is-two-fifths {
    width: 50% !important;
  }
}


@media screen and (max-width: 700px) {
  :root {
    --core-font-size: .8rem;
  }

  .hero-body,
  .hero-foot {
    padding-top: 0 !important;
    padding-left: 5px;
    padding-right: 5px;
  }

  .dropdown-input {
    font-size: var(--bigger-font);
  }
 
  .navbar-item {
    font-size: var(--big-font) !important;
  }

  .navbar,
  .navbar-brand,
  .navbar-burger {
    min-height: 2rem;
    max-height: 2rem;
  }

  .fillbox {
    min-height: calc(100vh - 2.6rem);
    max-height: calc(100vh - 2.6rem);
  }

  /* .button, select, input {
      height: 1.5rem !important;
    } */
  /* select {
    position: relative;
    top: .2rem;
  } */

  #foster_diff {
    max-width: 95%;
    width: 95%;
    transform-origin: 0 10px;
    -webkit-transform-origin: 0 10px;
    -ms-transform-origin: 0 10px;
    -moz-transform-origin: 0 10px;
    font-size: var(--small-font);
    overflow: auto;
  }

}


@media (prefers-color-scheme: light) {
  :root {
    --link-color: steelblue;
    --lightgray-color: lightgray;
    --body-background: white;
    --body-color: dimgray;
  }

  .navbar-item {
    color: dimgray !important;
    cursor: pointer;
  }

  .title {
    color: dimgray !important;
  }

  .navbar-item:hover {
    background-color: #eee !important;
  }

  .up_to_date {
    color: #ffa0a0 !important;
  }

  .docs_ok {
    color: #a0a0ff !important;
  }

  .up_to_date.docs_ok {
    color: #a0ffa0 !important;
  }

  .is-active:not(.navbar-menu),
  .active {
    font-weight: bold;
    border-color: var(--body-color) !important;
    filter: brightness(90%);
  }

  .selected {
    color: darkgreen;
  }

  .current {
    background-color: wheat;
  }

  .record:hover {
    color: black;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --link-color: steelblue;
    --lightgray-color: gray;
    --body-background: black;
    --body-color: gray;
  }

  .navbar-item,
  .navbar-burger {
    color: gray !important;
    cursor: pointer;
  }

  .title {
    color: gray !important;
  }

  .navbar-item:hover {
    background-color: #222 !important;
  }

  .up_to_date {
    color: #a55 !important;
  }

  .docs_ok {
    color: #77b !important;
  }

  .up_to_date.docs_ok {
    color: #474 !important;
  }

  p.link.selected, span.link.selected {
    filter: brightness(150%);
  }

  .is-active:not(.navbar-menu),
  .active {
    font-weight: bold;
    border-color: var(--body-color) !important;
    filter: brightness(130%);
  }

  #busy.button, #size_change.button, #settings.button {
    background-color: var(--body-background);
  }

  .current {
    background-color: #222;
  }

  .record:hover {
    color: lightgray;
  }

  label.radio:hover {
    color: #aaa !important;
  }
}


@media screen and (max-width: 1023px) {

  /* this is where the menu collapses */
  #menu {
    background-color: var(--body-background);
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    opacity: .85;
  }

  #message {
    min-height: 1rem;
  }

  .navbar-brand {
    padding-left: .5rem;
  }

}

.select_cat {
  filter: brightness(150%);
}



#t_date {
  text-align: center;
  outline: none;
  width: 14rem;
}

.dropdown-input {
  text-align: center;
  outline: none;
}

.dropdown-container {
  border: solid dimgray 1px;
  width: 250px;
  height: 200px;
  overflow-y: scroll;
  position: absolute;
  z-index: 10;
  background-color: #222;
}

.dropdown-header {
  color: #aaa;
  margin: 0;
  padding: 0;
}

.dropdown-item {
  color: #777;
  cursor: pointer;
  margin: 0;
  padding: 0;
  padding-left: .5rem;
}

.dropdown-item.selected {
  color: lightsteelblue;
  background-color: #333;
}


.less {
  color: #a44
}

.more {
  color: #484;
}

.same {
  color: dimgray;
}


#column_2 {
  position: relative;
}

#additional_info {
  border: 1px solid #666;
  position: absolute;
  z-index: 20;
  width: 300px;
  background-color: black;
}

#ai_container {
  padding: .5rem 0 1rem 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#t_name, #t_info, #t_notes {
  text-align: center;
  background-color: transparent;
  color: gray;
  outline: none;
  border: 1px solid #666;
}

.cen {
  text-align: center;
}

._mono {
  display: inline-table;
  width: .75rem;
}


#custodian_form {
  display: flex;
  z-index: 20;
  align-items: center;
  background-color: black;
  flex-direction: column;
  border: 1px solid #666;
  width: 300px; 
}

#member_select, #cust_date {
  padding: 4px;
  width: 250px;
  text-align: center;
}

#custodian_form input {
  outline: none;
}


.edit_buttons {
  margin-left: 2rem;
  display: flex; 
  justify-content: center;
  gap: 1.5rem;  
  max-width: 400px;
}