.bold {
  font-weight: bold;
}

.statustext {
  color: orangered;
  font-weight: bold;
}

.api_status {
  font-family: "Source Sans Pro", sans-serif;
  font-size: large;
  text-align: center;
}

.black_text {
  color: black;
}

.white_text {
  color: white;
}

.red_text {
  color: orangered;
}

.cyan_text {
  color: cyan;
}

.green_text {
  color: lawngreen;
}

.yellow_text {
  color: yellow;
}

.blue_text {
  color: deepskyblue;
}

.normal_text {
  color: #DDDDDD;
}

.value_std {                    /* For standard caption values */
  color: #66D8FA;
  padding-right: 7px;
}

.value_orange {                 /* For user-added caption & admin tool values */
  color: #FEB404;
  padding-right: 7px;
}

.value_white {                  /* For import-added admin tool values */
  color: #FFFFFF;
  padding-right: 7px;
}

.value_green {                  /* For standardised admin tool values */
  color: #0CCE16;
  padding-right: 7px;
}

.background_orange {            /* For user-added admin tool values */
  background-color: orange;
  color: black;
}

.background_red {
  background-color: red;
  color: white;
}

.background_green {
  background-color: green;
  color: white;
}

.background_reddish {
  background-color: #BB0000;
  color: white;
}

.redborder {                        /* Used for the reupload feature in the queue management (via jQuery) */
  border-style: double;
  border-width: 5px;
  border-color: orangered;
}

.lockborder {                       /* Used to marked locked panels in edit tools */
  border-style: double;
  border-width: 5px;
  border-color: orangered;
}

.btn_photo {                    /* For buttons below the large versions of the photos */
  font-size: 0.8rem;
  width: 7rem;
}

.btn_queue {
  font-size: 0.9rem;
  width: 80px;
  height: 60px;
}

.btn_admtools_140 {
  width: 140px;
}

.btn_admtools_160 {
  width: 160px;
}

.btn_admtools_220 {
  width: 220px;
}

.btn_admtools_230 {
  width: 230px;
}

.btn_edt_scn {
  width: 140px;
}

.btn_edt_scn_checkbox {
  font-size: 0.9rem;
  width: 120px;
}

.btn_edt_scn_adm {
  font-size: 0.9rem;
  width: 145px;
}

/* Make the fullsize view modal auto-adapt its width to the actual width of the fullsize photo */
/* See: https://stackoverflow.com/questions/34307647/bootstrap-modal-dynamic-width */
.modal_fullsize {
  max-width: 1850px;              /* Photos are never wider than 1800px, so keep some width for the X closing button top right (see below) */
  width: auto !important;
  display: inline-block;          /* inline-block makes an element auto-adjust its width to its content */
}

.close_cross {                    /* Position close button in top right corner of the fullsize view modal */
  background: transparent;
  cursor: pointer;
  border: 0;
  position: absolute;
  right: -40px;
  top: -10px;
  z-index: 999;
  font-size: 2rem;
  font-weight: normal;
  color: #FFFFFF;
  opacity: 1;
}

.thumb_separator {
  border-color: #8C959D !important;    /* Komt overeen met kleur tussen Bootstrap 4 $gray-500 en $gray-600 in */
}

/* ===================================================================================== */
/* media-dependent styles */

@media (min-width: 1200px) {
  .modal_wide {
    max-width: 1150px; }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .modal_wide {
    max-width: 700px; }
}
@media (max-width: 768px) {
  .modal_wide {
    max-width: 95%; }
}

/* ===================================================================================== */
/* AirHistory text styling */

.ah_datafont {                                   /* This is the default in the AH Bootstrap 4 config - so only assign this when needed */
  font-family: "Segoe UI", sans-serif;
}

.ah_textfont {
  font-family: "Source Sans Pro", sans-serif;
}

p,h1,h2,h3,h4,h5,h6 {
  font-family: "Source Sans Pro", sans-serif;
}

.ah_blue,
.ah_h {
  color: deepskyblue;
}

h1.ah_h {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h2.ah_h,h3.ah_h,h4.ah_h {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
}

h5.ah_h,h6.ah_h {
  margin-top: 1.25rem;
  margin-bottom: 0.15rem;
}

a.faq_header {
  color: deepskyblue;
  text-decoration: none;
}

.panel {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 230px;
}

.panel_header {
  color: deepskyblue;
  font-variant: small-caps;
  margin-top: 0.4rem;
  margin-bottom: 1rem;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: royalblue;
}

a.panel_link {
  color: deepskyblue;
  text-decoration: none;
}

.stats {
  line-height: 1.3rem;
  color: deepskyblue;
}

.stats_number {
  font-size: 2rem;
}

.stats_text {
  font-size: 1.2rem;
  font-variant: small-caps;
}

.fp_h {                                 /* Front page panel header styling */
  /*todo: Kan deze al weg?     */
  color: deepskyblue;
  font-variant: small-caps;
  margin-top: 0.4rem;
  margin-bottom: 1rem;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: royalblue;
}

.counter_remain {                       /* For "characters remaining" text below textarea inputs */
  font-size: 0.75rem;
}

textarea {
  font-size: 0.95rem !important;
  line-height: 1.1rem !important;
  /*-------------------------------------------------------------------------------------------------------------------------------
  Firefox always adds an extra line to a textarea, to display a horizontal scrollbar if necessary. But we never need a horizontal
  scrollbar. This css style prevents the scrollbar, and thus also the extra line.
  See here: http://stackoverflow.com/questions/7695945/height-of-textarea-does-not-match-the-rows-in-firefox
  -------------------------------------------------------------------------------------------------------------------------------*/
  overflow-x: hidden;
}

/* ===================================================================================== */
/* AirHistory navbar styling */

.logo_ah {
  color: royalblue;
  font-family: 'Limelight',cursive;
  font-style: italic;
  font-size: 70px;
  text-align: center;
}

.logo_navbar {
  font-family: 'Limelight',cursive;
  font-style: italic;
}

.logo_subtext {
  font-size: 28px;
  text-align: center;
}

/* ===================================================================================== */
/* AirHistory various styling */

.help_item {
  color: chartreuse;
  font-size: 0.8em;
  padding: 1px;
  margin-top: 4px;
  cursor: help;
}

.help_item_biglabel {
  color: chartreuse;
  font-size: 0.8em;
  padding: 1px;
  margin-top: 8px;
  cursor: help;
}

.photo_caption {
  font-size: 0.85rem;
  color: #00B3EE;
}

.photo_dyn_img {
  cursor: pointer;
}

.upload_info {
  font-size: 1rem;
}

.thumb_section {
  border-width: 1px;
  border-style: solid;
  border-color: #555555;
  margin-bottom: -10px;
}

.no_resize {
  resize: none;
}

/* Use .no_display for elements that must be hidden/unhidden by jQuery (the Bootstrap 4.1 .d-none class won't work with that). */
.no_display {
  display: none;
}

.no_decoration {
  text-decoration: none;
}

.display {
  display: initial;
}

/* This makes an input show up as regular text. The input must be read-only*/
/* todo: BT4 heeft hier toch een speciale class voor? */
.no_input {
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

/* ======================================================================================================================= */
/* Styles for social media icons */

.soc_med_icon {
  color: inherit;
  margin-left: 7px;
  margin-right: 7px;
}

/* Make the Bootstrap modal backdrop fully transparent, so that it will not darkern the photo */
.backdrop_transparent .modal-backdrop {
  background:rgba(0,0,0,0);
}

/* ======================================================================================================================= */
/* Styles for css tables */

.css_table    { display: table; }
.css_tr       { display: table-row; }
.css_thead    { display: table-header-group; }
.css_tbody    { display: table-row-group; }
.css_tfoot    { display: table-footer-group; }
.css_col      { display: table-column; }
.css_colgroup { display: table-column-group; }
.css_td, th   { display: table-cell; }
.css_row      { display: table-row; }
.css_cell     { display: table-cell; }
.css_caption  { display: table-caption; }

.css_caption_top    { caption-side: top; }
.css_caption_bottom { caption-side: bottom; }

/* ======================================================================================================================= */
/* Generic table styling */

.align_l {
  text-align: left;
}

.align_c {
  text-align: center;
}

.align_r {
  text-align: right;
}

.align_vert_c {
  vertical-align: middle !important;
}

/* ======================================================================================================================= */
/* Crew Logs table styling */

.table_log {
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table_log td {
  border: none;
}

.table_log th {
  font-size: 18px;
}

/* ======================================================================================================================= */
/* Admin tool table styling */

.table_overview {
  border-collapse: collapse;
  font-size: 14px;
}

.table_overview td {
  border: none;
}

.table_overview th {
  font-size: 18px;
}

.table_overview td, .table_overview th {
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 4px;
}

.add_separator {
  border-top-style: solid;
  border-top-width: 2px;
}

.table_button {
  color: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
}

.table_new_button {
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ======================================================================================================================= */
/* Bootstrap 4 & jQueryUI pulldown styling */

.dropdown_form {
  min-width: 300px;
}

.dropdown_form, .ui-menu {
  color: #BBBBBB;
  background: none;
  background-color: #444444;
}

/* ======================================================================================================================= */
/* jQuery-UI styling */

/* Tweak general jQuery menu styling */

.ui-menu {
  font-size: 0.9em;
  font-family: "Source Sans Pro","Segoe UI",sans-serif;
}

.ui-menu-item .ui-state-active {          /* Style for focus effect in the autocomplete suggestions list */
  font-weight: normal;
  border: 1px solid #000000;
  background: none;
  background: #447CFF;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Tweak jQuery styling for the suggestions menus */

.ui-autocomplete {
  max-height: 400px;                      /* Limit the height of any suggestions list */
  overflow-y: auto;                       /* Show scrollbar if longer than above */
  overflow-x: hidden;                     /* But never show horizontal scrollbar */
  z-index: 1050;                          /* Keeps suggestions menu from partially hiding behind the footer */
  padding-bottom: 1px;                    /* Keeps a scrollbar from popping up when hovering the bottom item in the suggestions list */
}

.autocomplete-country {
  color: cyan;
  font-size: 0.9em;
}

.autocomplete-comment {
  color: cyan;
  font-size: 0.9em;
  margin-left: 20px;
}

.autocomplete-white {
  color: #EEEEEE;
  font-size: 1em;
  font-weight: bold;
}

.autocomplete-yellow {
  color: yellow;
  font-size: 1em;
  font-weight: bold;
}

.ui-menu .ui-state-disabled {             /* Override the jquery-ui default setting of 0.35 for disabled items */
  opacity: 1;
}

.autocomplete-separator {                 /* Add separator border for 'unknown' item */
  border-top: 1px #ccc solid;
  /*padding: 2em 0;*/
}

/* ======================================================================================================================= */
/*todo: Alles hieronder nog checken!

/* For the label name in photo captions */
.label_text {
  white-space: nowrap;
  width: 130px;
}

.caption-large {
  font-size: 14px;
  border: 1px solid #555555;
  margin-top: 10px;
  padding-bottom: 5px;
  padding-left: 0;
  padding-right: 0;
}

.caption-full table {
  border: 1px solid #555555;    /* For the outer border of the caption table */
  padding-bottom: 0;
}

.caption-full tr:first-child td {
  padding-top: 7px;
}

.caption-full thead tr th {
  background-color: #555555;
  padding-top: 5px;
  padding-bottom: 1px;
  font-size: 15px;
}

.caption-full tbody tr td, .caption-full tbody tr th, .caption-full thead tr th {
  border: none;
  vertical-align: middle;
}

.caption-full tbody tr td, .caption-full tbody tr th {
  padding-top: 1px;
  padding-bottom: 1px;
}

.caption-thumb tbody tr td, .caption-full tbody tr th {
  padding-top: 1px;
  padding-bottom: 1px;
}

.caption-thumb {
  font-size: 0.75rem;
}

.caption-thumb table {
  border: 1px solid #555555;    /* For the outer border of the caption table */
  padding-bottom: 0;
}

.caption-thumb tbody tr td, .caption-full tbody tr th, .caption-full thead tr th {
  border: none;
  vertical-align: middle;
}

.caption-thumb tbody tr td, .caption-full tbody tr th {
  padding-top: 1px;
  padding-bottom: 1px;
}

/*------------------------------------------------------------------------------------*/


/* --- Site admin styles --- */
.debug {
  font-size: 11px;
  font-family: "Lucida Console",Consolas,Monaco,"Courier New",monospace;
}

.vardump {
  background-color: white;
  padding-left: 10px;
}