.tim-row {
  margin-bottom: 20px;
}

.tim-white-buttons {
  background-color: #777777;
}

.typography-line {
  padding-left: 25%;
  margin-bottom: 35px;
  position: relative;
  display: block;
  width: 100%;
}

.typography-line span {
  bottom: 10px;
  color: #c0c1c2;
  display: block;
  font-weight: 400;
  font-size: 13px;
  line-height: 13px;
  left: 0;
  position: absolute;
  width: 260px;
  text-transform: none;
}

.tim-row {
  padding-top: 60px;
}

.tim-row h3 {
  margin-top: 0;
}

.tim-typo {
  padding-left: 25%;
  margin-bottom: 40px;
  position: relative;
  width: 100%;
}

.tim-typo .tim-note {
  bottom: 5px;
  color: #c0c1c2;
  display: block;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  left: 0;
  margin-left: 20px;
  position: absolute;
  width: 260px;
}

.float {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 40px;
  right: 40px;
  background-color: #0C9;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  z-index: 1000;
}

.my-float {
  margin-top: 10px;
}

.float:hover {
  background-color: #0277bd;
}

.iarts_striked {
  text-decoration: line-through !important;
  color: #c0bdbd !important;
}

.speech_box_left {
  width: 90%;
  float: right;
  margin: 5px auto;
  border-radius: 15px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: right;
  padding-right: 15px;
  /* font-weight: 900; */
  /* font-family: arial; */
  position: relative;
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.24);
}

.speech_box_right {
  width: 90%;
  float: left;
  margin: 5px auto;
  border-radius: 15px;
  background: #e1ffc7;
  color: #000;
  padding: 5px;
  padding-left: 15px;
  text-align: left;
  /* font-weight: 900; */
  /* font-family: arial; */
  position: relative;
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.24);
}

/* speech bubble */

.speech_bubble_left:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid #fff;
  border-right: 15px solid transparent;
  border-top: 15px solid #fff;
  border-bottom: 15px solid transparent;
  right: -16px;
  top: 0px;
}

/* speech bubble 14 */

.speech_bubble_right:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid #e1ffc7;
  border-top: 15px solid #e1ffc7;
  border-bottom: 15px solid transparent;
  left: -16px;
  top: 0px;
}
.imagedropshadow {
  padding: 3px;
  border: solid 1px #fff;
  background-color: white;
  margin-top: 5px;
  margin-bottom: 5px;
}

a:hover img.imagedropshadow {
  border: solid 1px #CCC;
  -moz-box-shadow: 1px 1px 5px #999;
  -webkit-box-shadow: 1px 1px 5px #999;
  box-shadow: 1px 1px 5px #999;
}

/* ------------------------------------------------------------------
   Phones (event QR traffic). Desktop layout is unchanged above 767px.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* iOS Safari zooms into any field whose text is under 16px */
  .form-control,
  input.form-control,
  select,
  textarea,
  .swal2-input,
  .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    font-size: 16px !important;
  }

  /* cookie notice: a compact strip at the bottom instead of a card over a third of the screen */
  #gdpr-cookie-message {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-radius: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
  }
  #gdpr-cookie-message h4 { display: none; }
  #gdpr-cookie-message p,
  #gdpr-cookie-message a { font-size: 13px; line-height: 1.4em; }
  #gdpr-cookie-message a { border-bottom: 0; text-decoration: underline; }
  #gdpr-cookie-message p { margin-bottom: 6px; }
  #gdpr-cookie-message p:last-child { margin-bottom: 0; display: flex; justify-content: flex-end; gap: 8px; }
  #gdpr-cookie-message button { margin: 0; padding: 8px 16px; font-size: 14px; }

  /* long page titles: keep the menu button on the first line */
  .navbar .navbar-wrapper { min-width: 0; flex: 1 1 auto; }
  .navbar .navbar-brand {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100vw - 110px);
    font-size: 16px;
  }
  .navbar > .container-fluid { flex-wrap: nowrap; }

  /* help button on the FWC form: sit bottom-right, clear of the content */
  .fab-container { right: 16px; bottom: 16px; }

  /* links people tap with a thumb: vertical padding on an inline link grows the tap area without moving the text */
  /* (only plain text links: anything holding a block or an image, e.g. dashboard tiles, is left alone) */
  .card-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(:has(div, img, .card)),
  .card-footer a:not(.btn), .footer a, label a, .form-check-label a, .forgot-password-link a,
  .text-center > a:not(.btn):not(:has(div, img)), #gdpr-cookie-message a { padding-top: 10px; padding-bottom: 10px; }
  .navbar .navbar-toggler { padding: 12px 10px; }
  .sidebar .nav li > a.nav-link { padding-top: 15px; padding-bottom: 15px; }
  .xcrud-button_big { min-height: 40px; }

  /* videos (help popups, campaign intro): full width, 16:9, never wider than the screen */
  .swal2-popup iframe, .jconfirm iframe, iframe[src*="vimeo"], iframe[src*="youtube"] {
    width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 16 / 9;
  }

  /* results page: chart a little shorter on a phone */
  #chart_div { height: 420px !important; }
  #graph_area > .card > .card-body { padding-left: 6px !important; padding-right: 6px !important; }
  #graph_area > .card > .card-body > .col-md-12 { padding-left: 0; padding-right: 0; }
  #graph_area h3 { font-size: 1.35rem; }
}