/* Modals must never force the page to scroll to see their own content -
   cap every modal to the viewport height and let only its own body scroll
   internally if content is unusually tall. Bootstrap 3 (this app's actual
   loaded theme, bootswatch 3.3.7) has no built-in equivalent of Bootstrap
   4/5's .modal-dialog-scrollable, so this is hand-rolled once here and
   applies to every modal app-wide, not just Event Details. */
:where(.modal:not(.modal-june)) .modal-dialog{
  margin-top: 15px;
  margin-bottom: 15px;
}
/* Modal shell (2026-10-13, owner: revamp every modal): one white, quiet frame for all of
   them - Minimalism/Swiss, the white theme and Poppins the owner set. Behaviour is unchanged:
   the dialog still caps at the window and only its body scrolls. Deliberately NOT
   overflow:hidden on .modal-content - that would clip dropdowns and date pickers opening out
   of a modal - and Bootstrap's own dialog transform is kept (only its distance changes), since
   date pickers inside a modal are positioned against it. A page's own #id rules still win. */
:where(body:not(:has(.modal-june.in))) .modal-backdrop{
  background-color: #0f172a;
}
:where(body:not(:has(.modal-june.in))) .modal-backdrop.in{
  opacity: .5;
}
.modal.fade:where(:not(.modal-june)) .modal-dialog{
  -webkit-transform: translate(0, 12px);
  transform: translate(0, 12px);
  transition: transform .2s ease-out;
}
@media (prefers-reduced-motion: reduce){
  .modal.fade:where(:not(.modal-june)) .modal-dialog{ transition: none; }
}
:where(.modal:not(.modal-june)) .modal-content{
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .06);
}
:where(.modal:not(.modal-june)) .modal-header, :where(.modal:not(.modal-june)) .modal-footer{
  flex: 0 0 auto;
}
/* room on the right for the close button, whatever else a header holds. `.modal .modal-header`
   because theme-d.css paints `.modal .modal-header` red (#EE6E73, white text) - the old grey
   `!important` in duranccss.css used to hide it. */
.modal:where(:not(.modal-june)) .modal-header{
  position: relative;
  padding: 14px 60px 14px 20px;
  min-height: 0;
  color: #0f172a;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 12px 12px 0 0;
}
.modal:where(:not(.modal-june)) .modal-title{
  margin: 0;
  font-family: 'Poppins', sans-serif !important;  /* duranccss.css forces Wix on h1/h2 with !important */
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: #0f172a;
}
/* The close control in the brand orange of every Save/Close button (owner, 2026-10-13: "in
   sync with orange colour", the quiet grey one read as missing). !important on its colours:
   page and theme rules painted it white or faded it; a page that styles its own close with an
   #id + !important (vault's video player) still wins. 40px target, white x, darker on hover,
   a dark ring for keyboard focus. */
.modal:where(:not(.modal-june)) .modal-header .close{
  position: absolute;
  top: 50%;
  right: 12px;
  width: 36px;
  height: 36px;
  margin: -18px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #F26430 !important;
  color: #fff !important;
  opacity: 1 !important;
  font-size: 22px;
  font-weight: 300;
  line-height: 36px;
  text-align: center;
  text-shadow: none;
  box-shadow: 0 2px 6px rgba(242, 100, 48, .35);
  transition: background-color .15s ease-out, box-shadow .15s ease-out;
}
.modal:where(:not(.modal-june)) .modal-header .close:hover{
  background: #d8551f !important;
  box-shadow: 0 3px 10px rgba(216, 85, 31, .45);
}
.modal:where(:not(.modal-june)) .modal-header .close:focus{
  outline: 0;
}
.modal:where(:not(.modal-june)) .modal-header .close:focus-visible{
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}
:where(.modal:not(.modal-june)) .modal-body{
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 20px;
  color: #334155;
}
:where(.modal:not(.modal-june)) .modal-footer{
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 0 0 12px 12px;
}
/* Bootstrap's default h1 margin-top (~20px) stacks on top of
   .modal-body's own 20px padding-top, leaving a large empty gap before
   a modal's first heading (e.g. Event Details' "Attendance Reporting"
   row) even though the header strip right above it already provides
   separation. */
:where(.modal:not(.modal-june)) .modal-body h1{
  margin-top: 0;
}
/* Tighter than Bootstrap's default 10px p margin - reclaims space in the
   text rows above a modal's event image (time/feed/location/match), which
   is exactly the content most likely to push a modal into needing scroll.
   Theme default line-height:1.8em (app.bundle.css) is the real source of
   the loose look between stacked rows like Match/Gender/Email/Match Sets -
   margin-bottom alone wasn't enough, line-height needed tightening too. */
:where(.modal:not(.modal-june)) .modal-body p{
  margin-bottom: 4px;
  line-height: 1.3;
}
/* A modal's own event snapshot is often tall enough alone to force a
   scroll - cap it so the common case fits with zero scrolling, not just
   internal scrolling. Harmless on already-small images (max-height only
   constrains images bigger than this). */
:where(.modal:not(.modal-june)) .modal-body img{
  max-height: 28vh;
  object-fit: contain;
}
/* Event Details' small enrolled-person reference photo (.face.height_150p)
   only needs to be a thumbnail, not the same size as the actual event
   capture below it - shrinking just this one (not .modal-body img above,
   which also sizes the real capture) freed the room needed to grow the
   capture image above without reintroducing an internal scrollbar. */
:where(.modal:not(.modal-june)) .modal-body img.face.height_150p{
  max-height: 110px;
}
/* Modal shell, part 2 (2026-10-16, owner: "check all modal boxes"): what the shell above left
   to each page - the title when a header uses a bare h3/h4, boxed fields, footer order, the
   phone sizes, and the two-column form helpers. */
.modal:where(:not(.modal-june)) .modal-header :is(h1, h2, h3, h4, h5){
  margin: 0;
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.4;
  color: #0f172a !important;
  overflow-wrap: anywhere;
}
/* boxed fields instead of the material underline (duranccss.css paints that underline orange,
   full height on some pages) */
.modal:where(:not(.modal-june)) .modal-body .form-group > label,
.modal:where(:not(.modal-june)) .modal-body .control-label{
  font-size: 13px;
  font-weight: 400;
  color: #3F5F6B;
  margin-bottom: 6px;
}
.modal:where(:not(.modal-june)) .modal-body .form-group{ margin-bottom: 14px; }
/* not .bootstrap-select: it copies the select's classes onto its wrapper div, which would get a
   second box around its own button */
.modal:where(:not(.modal-june)) .modal-body .form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not(.bootstrap-select){
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #DCE5E7;
  border-radius: 10px;
  background-color: #fff;
  background-image: none !important;
  box-shadow: none;
  font-size: 15px;
  color: #0C3745;
  transition: border-color .15s, box-shadow .15s;
}
.modal:where(:not(.modal-june)) .modal-body textarea.form-control{ height: auto; min-height: 88px; }
.modal:where(:not(.modal-june)) .modal-body select.form-control[multiple]{ height: auto; }
.modal:where(:not(.modal-june)) .modal-body .form-control:focus{
  border-color: #0F7C8C;
  box-shadow: 0 0 0 3px rgba(15, 124, 140, .15);
  outline: 0;
}
.modal:where(:not(.modal-june)) .modal-body .form-control[readonly], .modal:where(:not(.modal-june)) .modal-body .form-control[disabled]{ background-color: #F6F9FA; }
.modal:where(:not(.modal-june)) .modal-body .asterisk, .modal:where(:not(.modal-june)) .modal-body .asterisk_name{ color: #B4441A; }
/* secrets (views/shared/_secret.pug): a password shown as dots, an eye to reveal it */
.secret-input{ position: relative; display: block; }
.secret-input > .form-control{ padding-right: 46px !important; }
.secret-eye{
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: #3F5F6B; font-size: 18px; cursor: pointer; vertical-align: middle;
}
.secret-input > .secret-eye{ position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.secret-eye:hover{ background: #F1F5F6; color: #0C3745; }
.secret-eye:focus-visible{ outline: 2px solid #0F7C8C; outline-offset: 1px; }
.secret-wrap{ display: inline-flex; align-items: center; gap: 4px; }
.secret-text{ font-family: Consolas, Menlo, monospace; letter-spacing: .08em; overflow-wrap: anywhere; }
/* duranccss.css floats .asterisk absolutely 7px above its box; inside a label it belongs inline */
.modal:where(:not(.modal-june)) .modal-body label .asterisk{ position: static; top: auto; margin-left: 2px; font-size: inherit; }
/* a .row straight inside a .row doubles bootstrap's gutters and pushes the body sideways
   (feed.pug #onvifModel was 10px wider than its dialog) */
.modal:where(:not(.modal-june)) .modal-body .row > .row{ margin-left: 0; margin-right: 0; }
/* footer: actions on the right, Cancel / Close before the primary */
.modal:where(:not(.modal-june)) .modal-footer{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.modal:where(:not(.modal-june)) .modal-footer > :is(.btn-default, .btn-secondary){ order: -1; }
/* bootstrap's clearfix pseudo-elements would be flex items (8px extra each end); a floated-left
   footer item (a checkbox, a Delete link) keeps its place on the left */
.modal:where(:not(.modal-june)) .modal-footer::before, .modal:where(:not(.modal-june)) .modal-footer::after{ content: none; display: none; }
.modal:where(:not(.modal-june)) .modal-footer > .pull-left{ float: none; order: -2; margin-right: auto; }
/* a field joined to an input-group addon keeps a square edge on the joined side */
.modal:where(:not(.modal-june)) .modal-body .input-group > .form-control:not(:last-child){ border-top-right-radius: 0; border-bottom-right-radius: 0; }
.modal:where(:not(.modal-june)) .modal-body .input-group > .form-control:not(:first-child){ border-top-left-radius: 0; border-bottom-left-radius: 0; }
.modal:where(:not(.modal-june)) .modal-footer .btn + .btn,
.modal:where(:not(.modal-june)) .modal-footer .btn + .btn:last-child{ margin: 0; }
.modal:where(:not(.modal-june)) .modal-footer > form{ margin: 0; }
.modal:where(:not(.modal-june)) .modal-footer .btn{ min-height: 40px; border-radius: 10px; }
/* two-column create / edit forms (views/shared/_person_form_fields.pug, people and vehicle
   create modals); .md-span takes the full row */
.modal:where(:not(.modal-june)) .md-grid{ display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
.modal:where(:not(.modal-june)) .md-grid > *{ min-width: 0; }
.modal:where(:not(.modal-june)) .md-help{ margin: 4px 0 0; font-size: 12px !important; line-height: 1.45 !important; color: #5E7882 !important; }
/* header with an icon square, the look of the add pages */
.modal:where(:not(.modal-june)) .md-title{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.modal:where(:not(.modal-june)) .md-title > i{
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; background: #FFF3EC; color: #B4441A;
}
.modal:where(:not(.modal-june)) .md-title.is-teal > i{ background: #E8F6FC; color: #0F6E8C; }
.modal:where(:not(.modal-june)) .md-title :is(h1, h2, h3, h4){ flex: 1 1 auto; min-width: 0; }
@media (min-width: 640px){
  .modal:where(:not(.modal-june)) .md-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal:where(:not(.modal-june)) .md-grid > .md-span{ grid-column: 1 / -1; }
}
/* never wider than the window: app.bundle.css pins .modal-dialog at 600px (and .modal-lg at
   1000px, .modal-xl 1200px) at EVERY width, so on a phone most modals ran off the screen */
.modal:not(.fullscreen):where(:not(.modal-june)) .modal-dialog{ max-width: calc(100vw - 32px); }
@media (max-width: 640px){
  .modal:not(.fullscreen):where(:not(.modal-june)) .modal-dialog,
  .modal:not(.fullscreen):where(:not(.modal-june)) .modal-dialog:is(.modal-xs, .modal-sm, .modal-md, .modal-lg, .modal-xl){
    width: auto !important;
    max-width: none;
    margin: 8px !important;
  }
  .modal:where(:not(.modal-june)) .modal-header{ padding: 12px 56px 12px 16px; }
  :where(.modal:not(.modal-june)) .modal-body{ padding: 14px 16px; }
  :where(.modal:not(.modal-june)) .modal-footer{ padding: 10px 16px; }
  /* two or three actions share the row; a long label wraps inside its button */
  .modal:where(:not(.modal-june)) .modal-footer > .btn{ flex: 1 1 0; min-width: 0; white-space: normal; }
  .modal:where(:not(.modal-june)) .modal-body th.um-assign{ width: auto !important; }
}
.pos_rel{
  position: relative;
}
.pos_abs{
  position: absolute;
}
.m-10{
  margin: 10px;
}
.m-20{
  margin: 20px;
}
.m_0_auto{
  margin: 0 auto;
}
.m_0_5 {
  margin: 0 5px !important;
}
.m_0_15_0_0{
  margin: 0 15px 0 0 !important;
}
.m-auto{
  margin: auto;
}
.m-l-s8{
  margin-left: -8px;
}
.m-l-s10{
  margin-left: -10px;
}
.m-l-s15{
  margin-left: -15px;
}
.m-l-s20{
  margin-left: -20px;
}
.m-l-s55{
  margin-left: -55px;
}
.m-l-s60{
  margin-left: -60px;
}
.m-l-0{
  margin-left: 0px;
}
.m-l-1em{
  margin-left: 1em;
}
.m-l-5{
  margin-left: 5px;
}
.m-l-12{
  margin-left: 12px;
}
.m-l-15{
  margin-left: 15px;
}
.m-l-40{
  margin-left: 40px !important;
}
.m-l-80 {
  margin-left: 80px !important;
}
.m-l-110{
  margin-left: 110px !important;
}
.m-l-120{
  margin-left: 120px !important;
}
.m-l-auto{
  margin-left: auto;
}
.m-r-auto{
  margin-right: auto;
}
.m-r-s25{
  margin-right: -25px;
}
.m-r-s15{
  margin-right: -15px;
}
.m-r-0{
  margin-right: 0;
}
.m-r-5{
  margin-right: 5px;
}
.m-r-7{
  margin-right: 7px;
}
.m-r-1em{
  margin-right: 1em;
}
.m-r-2rem{
  margin-right: 2rem;
}
.m-r-10{
  margin-right: 10px;
}
.m-r-15{
  margin-right: 15px !important;
}
.m-r-20{
  margin-right: 20px;
}
.m-t-s340{
  margin-top: -340px;
}
.m-t-s65{
  margin-top: -65px;
}
.m-t-s20{
  margin-top: -20px;
}
.m-t-s15{
  margin-top: -15px;
}
.m-t-s10{
  margin-top: -10px;
}
.m-t-s8{
  margin-top: -8px !important;
}
.m-t-s7{
  margin-top: -7px;
}
.m-t-s5{
  margin-top: -5px;
}
.m-t-s1_imp{
  margin-top: -1px !important;
}
.m-t-0{
  margin-top: 0px;
}
.m-t-0i{
  margin-top: 0px !important;
}
.m-t-1i{
  margin-top: 0px !important;
}
.m-t-3{
  margin-top: 3px;
}
.m-t-5{
  margin-top: 5px;
}
.m-t-10{
  margin-top: 10px;
}
.m-t-11{
  margin-top: 11px;
}
.m-t-14{
  margin-top: 14px !important;
}
.m-t-18{
  margin-top: 18px;
}
.m-t-20{
  margin-top: 20px;
}
.m-t-360{
  margin-top: 360px;
}
.m-t-55{
  margin-top: 55px !important;
}
.m-t-60{
  margin-top: 60px !important;
}
.m-t-1em{
  margin-top: 1em;
}
.m-t-2em{
  margin-top: 2em;
}
.m-t-1rem{
  margin-top: 1rem;
}
.m-t-4per{
  margin-top: 4%;;
}
.m-0{
  margin: 0px !important;
}
.m-5{
  margin: 5px !important;
}
.m-b-2per{
  margin-bottom: 2%;
}
.m_b_s10{
  margin-bottom: -10px;
}
.m-b-s5{
  margin-bottom: -5px;
}
.m-b-s10{
  margin-bottom: -10px !important;
}
.m_b_s1{
  margin-bottom: -1px;
}

.m-b-0{
  margin-bottom: 0px;
}
.m-b-2{
  margin-bottom: 2px;
}
.m-b-5{
  margin-bottom: 5px;
}
.m-b-8{
  margin-bottom: 8px !important;
}
.m_s25_10_s5_10{
  margin: -25px 10px -5px 10px;
}
.m_s25_5_s5_20{
  margin: -25px 5px -5px 20px;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-b-1{
  margin-bottom: 1px;
}
.m_27_0_0{
  margin: 27px 0 0 !important;
}
.m_10_0_0{
  margin:10px 0 0 !important
}
.padd_0{
  padding: 0px;
}
.padd_0i{
  padding: 0px !important;
}
.padd_1{
  padding: 1px;
}
.padd_30{
  padding: 30px;
}
.padd_0_7{
  padding: 0 7px;
}
.padd_0_10{
  padding: 0px 10px;
}
.padd_0_15{
  padding: 0px 15px;
}
.padd_15{
  padding: 15px;
}
.padd_0_10_0_10{
  padding: 0 10px 0 10px !important;
}
.padd_0_20_0_20{
  padding: 0 20px 0 20px;
}
.padd_2_8{
  padding: 2px 8px !important;
}
.padd_3{
  padding: 3px;
}
.padd_5{
  padding: 5px;
}
.padd_5i{
  padding: 5px !important;
}
.padd_5_0{
  padding: 5px 0 !important;
}
.padd_5_10{
  padding: 5px 10px;
}
.padd_7{
  padding: 7px !important;
}
.padd_7_1_0{
  padding: 7px 1px 0;
}
.padd_7_20{
  padding: 7px 20px !important;
}
.padd_10{
  padding: 10px;
}
.padd_10i{
  padding: 10px !important;
}
.padd_15i{
  padding: 15px !important;
}
.padd_17{
  padding: 17px;
}
.padd_20{
  padding: 20px;
}
.padd_01emi{
  padding: 0.1em !important;
}
.p-l-1em{
  padding-left: 1em;
}
.p-l-2rem{
  padding-left: 2rem;
}
.p-l-1{
  padding-left: 1px;
}
.p-l-3{
  padding-left: 3px;
}
.p-l-5{
  padding-left: 5px;
}
.p-l-8i{
  padding-left: 8px !important;
}
.p-l-10{
  padding-left: 10px;
}
.p-l-10i{
  padding-left: 10px !important;
}
.p-l-13{
  padding-left: 13px !important;
}
.p-l-14{
  padding-left: 14px !important;
}
.p-l-20{
  padding-left: 20px;
}
.p-l-25{
  padding-left: 25px;
}
.p-l-25i{
  padding-left: 25px !important;
}
.p-l-30{
  padding-left: 30px;
}
.p-l-35{
  padding-left: 35px;
}
.p-l-40{
  padding-left: 40px;
}
.p-l-60{
  padding-left: 60px;
}
.p-l-75{
  padding-left: 75px;
}
.p-r-0{
  padding-right: 0;
}
.p-r-1em{
  padding-right: 1em;
}
.p-r-1{
  padding-right: 1px;
}
.p-r-5{
  padding-right: 5px !important;
}
.p-r-8{
  padding-right: 8px !important;
}
.p-r-10{
  padding-right: 10px;
}
.p-r-11{
  padding-right: 11px;
}
.p-r-12{
  padding-right: 12px;
}
.p-r-15{
  padding-right: 15px;
}
.p-r-20{
  padding-right: 20px;
}
.p-r-25{
  padding-right: 25px;
}
.p-r-35{
  padding-right: 35px;
}
.p-r-40{
  padding-right: 40px;
}
.p-t-0{
  padding-top: 0px;
}
.p-t-1{
  padding-top: 1px;
}
.p-t-08em{
  padding-top: 0.8em;
}
.p-t-5{
  padding-top: 5px;
}
.p-t-7{
  padding-top: 7px;
}
.p-t-13{
  padding-top: 13px;
}
.p-t-15{
  padding-top: 15px;
}
.p-b-0{
  padding-bottom: 0;
}
.p-b-2{
  padding-bottom: 2px;
}
.p-b-5{
  padding-bottom: 5px;
}
.p-b-10{
  padding-bottom: 10px;
}
.p-b-10i{
  padding-bottom: 10px !important;
}
.p-b-22{
  padding-bottom: 22px;
}
.p-b-30{
  padding-bottom: 30px;
}
.padd_0_5{
  padding: 0 5px;
}
.padd_0_5i{
  padding: 0 5px !important;
}
.padd_0_10{
  padding: 0px 10px;
}
.padd_0_15{
  padding: 0px 15px;
}
.padd_0_20{
  padding: 0px 20px;
}
.padd_1{
  padding: 1px !important;
}
.padd_2_8{
  padding: 2px 8px !important;
}
.padd_2_4{
  padding: 2px 4px !important;
}
.padd_2_2{
  padding: 2px 2px !important;
}
.padd_3_10{
  padding: 3px 10px;
}
.padd_5_5{
  padding: 5px 5px;
}
.padd_5_10{
  padding: 5px 10px;
}
.padd_5_20{
  padding: 5px 20px;
}
.padd_8_12{
  padding: 8px 12px;
}
.padd_8_0_8_20{
  padding: 8px 0 8px 20px !important;
}
.padd_8_10_0_10{
  padding: 8px 10px 0 10px !important;
}
.w_auto{
  width: auto ;
}
.w_auto_imp{
  width: auto !important;
}
.w_10vw{
  width: 10vw;
}
.w_110per{
  width: 110% !important;
}
.w_99per{
  width: 99% !important;
}
.w_98per{
  width: 98% !important;
}
.w_95peri{
  width: 95% !important;
}
.w_90per{
  width: 90%;
}
.w_80per{
  width: 80%;
}
.w_70per{
  width: 70%;
}
.w_65per{
  width: 65%;
}
.w_60per{
  width: 60%;
}
.w_50per{
  width: 50%;
}
.w_49per{
  width: 49%;
}
.w_45per{
  width: 45%;
}
.w_40per{
  width: 40%;
}
.w_35per{
  width: 35%;
}
.w_30per{
  width: 30%;
}
.w_20per{
  width: 20%;
}
.w_19per{
  width: 19%;
}
.w_15per{
  width: 15%;
}
.w_10per{
  width: 10%;
}
.w_7peri{
  width: 7% !important;
}
.w_0{
  width: 0;
}
.w_8p{
  width: 8px;
}
.w_17p{
  width: 17px;
}
.w_20p{
  width: 20px;
}
.w_25p{
  width: 25px;
}
.w_30p{
  width: 30px;
}
.w_40p{
  width: 40px;
}
.w_45p{
  width: 45px;
}
.w_50p{
  width: 50px;
}
.gateway_cam_icon{
  width: 50px !important;
}
.w_70p{
  width: 70px;
}
.w_80p{
  width: 80px;
}
.w_85p{
  width: 85px;
}
.w_90p{
  width: 90px;
}
.w_100p{
  width: 100px;
}
.w_110p{
  width: 110px;
}
.w_120p{
  width: 120px;
}
.w_130p{
  width: 130px;
}
.w_150p{
  width: 150px !important;
}
.w_160p{
  width: 160px;
}
.w_200p{
  width: 200px;
}
.w_230p{
  width: 230px !important;
}
.w_300p{
  width: 300px !important;
}
.w_320p{
  width: 320px;
}
.w_330p{
  width: 330px;
}
.w_350p{
  width: 350px;
}
.w_400p{
  width: 400px;
}
.w_576p{
  width: 576px;
}
.w_600pi{
  width: 600px !important;
}
.w_640p{
  width: 640px;
}
.w_750p{
  width: 750px !important;
}
.w_1200pi{
  width: 1200px !important;
}
.w_12vw{
  width: 12vw;
}
.w_13vw{
  width: 13vw;
}
.w_14vw{
  width: 14vw;
}
.w_15vw{
  width: 15vw;
}
.w_25vw{
  width: 25vw;
}
.w_30vw{
  width: 30vw;
}
.w_100vw{
  width: 100vw;
}
.w_6per {
  width: 6%;
}
.w_10per{
  width: 10%;
}
.w_20per{
  width: 20%;
}
.w_25per{
  width: 25% !important;
}
.w_50per{
  width: 50%;
}
.w_75per{
  width: 75%;
}
.w_85per{
  width: 85% !important;
}
.w_90per{
  width: 90% !important;
}
.w_95per{
  width: 95% !important;
}
.w_100per{
  width: 100% !important;
}
.mx_width_640{
  max-width: 640px;
}
.mx_width_180{
  max-width: 180px;
}
.mx_width_640i{
  max-width: 640px !important;
}
.mx_width_1300{
  max-width: 1300px;
}
.m_width_80per{
  max-width: 80%;
}
.m_width_90per{
  max-width: 90%;
}
.m_width_100per{
  max-width: 100%;
}
.mn_width_140{
  min-width: 140px;
}
.height_100per{
  height: 100% !important;
}
.height_95per{
  height: 95%;
}
.height_95peri{
  height: 95% !important;
}
.height_80per{
  height: 80%;
}
.height_75per{
  height: 75%;
}
.height_60per{
  height: 60%;
}
.height_45per{
  height: 45%;
}
.height_30per{
  height: 30%;
}
.height_15p{
  height: 15px;
}
.height_17p{
  height: 17px;
}
.height_25p{
  height: 25px !important;
}
.height_26p{
  height: 26px !important;
}
.height_30p{
  height: 30px;
}
.height_32p{
  height: 32px;
}
.height_40p{
  height: 40px;
}
.height_45p{
  height: 45px;
}
.height_50p{
  height: 50px;
}
.height_60p{
  height: 60px;
}
.height_63p{
  height: 63px !important;
}
.height_66p{
  height: 66px;
}
.height_70p{
  height: 70px;
}
.height_73p{
  height: 73px;
}
.height_73pi{
  height: 73px !important;
}
.height_75p{
  height: 75px !important;
}
.height_90p{
  height: 90px !important;
}
.height_100p{
  height: 100px;
}
.height_150p{
  height: 150px;
}
.height_200p{
  height: 200px;
}
.height_240p{
  height: 240px;
}
.height_279p{
  height: 279px;
}
.height_300p{
  height: 300px;
}
.height_310p{
  height: 310px;
}
.height_320p{
  height: 320px;
}
.height_350p{
  height: 350px;
}
.height_360{
  height: 360px;
}
.height_400{
  height: 400px;
}
.height_470{
  height: 470px;
}
.height_100vh{
  height: 100vh;
}
.height_70vh{
  height: 70vh;
}
.height_fitcontent{
  height: fit-content;
}
.min_height_10vh{
  min-height: 10vh;
}
.min_height_65vh{
  min-height: 65vh;
}
.min_height_150p{
  min-height: 150px;
}
.min_height_180p{
  min-height: 180px;
}
.min_height_200p{
  min-height: 200px;
}
.max_height_150p{
  max-height: 150px;
}
.max_height_200p{
  max-height: 200px;
}
.max_height_250p{
  max-height: 250px;
}
.max_height_300p{
  max-height: 300px;
}
.max_height_460p{
  max-height: 460px;
}
.max_height_500p{
  max-height: 500px;
}
.max_height_1000p{
  max-height: 1000px;
}
.height_3340{
  height: 3340px;
}
.height_30vh{
  height: 30vh;
}
.height_auto{
  height: auto;
}
.line_height_0{
  line-height: 0;
}
.line_height_1{
  line-height: 1 !important;
}
.line_height_4{
  line-height: 4 !important;
}
.line_height_1p5{
  line-height: 1.5 !important;
}
.line_height_08em{
  line-height: 0.8em;
}
.line_height_1e4em{
  line-height: 1.4em;
}
.line_height_10{
  line-height: 10px;
}
.line_height_15{
  line-height: 15px;
}
.line_height_20{
  line-height: 20px;
}
.line_height_26{
  line-height: 26px;
}
.line_height_40{
  line-height: 40px;
}
.line_height_43{
  line-height: 43px;
}
.line_height_50{
  line-height: 50px;
}
.whitespace{
  white-space: nowrap;
}
.border_0{
  border: 0px;
}
.border_none{
  border: none;
}
.overflow_vis{
  overflow: visible;
}
.switch-container {
  display: inline-flex;
  align-items: center;
}
.switch-input {
  display: none;
}
.switch-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  height: 14px;
  width: 38px;
  background-color: #e74c3c;
  border-radius: 12px;
  transition: background-color 0.3s ease;
}
.switch-input:checked + .switch-label {
  background-color: #2ecc71;
}
.switch-slider {
  position: absolute;
  height: 10px;
  width: 10px;
  left: 2px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.switch-input:checked + .switch-label .switch-slider {
  transform: translateX(24px);
}
.switch-text {
  margin-left: 56px;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
}
.left_s40{
  left: -40px;
}
.left_s20{
  left: -20px;
}
.left_s10{
  left: -10px;
}
.left_s4per{
  left: -4%;
}
.left_0{
  left: 0;
}
.left_12{
  left: 12px;
}
.left_40per{
  left: 40%;
}
.left_65{
  left: 65px;
}
.top_s2 {
  top: -2px;
}
.top_s20{
  top: -20px;
}
.top_s10{
  top: -10px;
}
.top_s5{
  top: -5px;
}
.top_s3{
  top: -3px;
}
.top_0{
  top: 0px;
}
.top_1{
  top: 1px !important;
}
.top_2{
  top: 2px;
}
.top_5{
  top: 5px;
}
.top_12{
  top: 12px;
}
.top_22{
  top: 22px !important;
}
.top_25{
  top: 25px !important;
}
.top_50{
  top: 50px !important;
}
.top_90{
  top: 90px !important;
}
.top_6{
  top: 6px;
}
.top_s17{
  top: -17px;
}
.top_s15{
  top: -15px;
}
.top_s9{
  top: -9px;
}
.right_s180{
  right: -180px;
}
.right_s20{
  right: -20px;
}
.right_s5{
  right: -5px;
}
.right_0{
  right: 0;
}
.right_5{
  right: 5px !important;
}
.right_15{
  right: 15px;
}
.right_25{
  right: 25px;
}
.right_40{
  right: 40px;
}
.right_60{
  right: 60px;
}
.bottom_10{
  bottom: 10px;
}
.zindex500{
  z-index: 500;
}
.trans_scale{
  transform: scale(1.5);
}
.font_weight300{
  font-weight: 300 !important;
}
.font_weight500{
  font-weight: 300;
}
.font_weight{
  font-weight: 600;
}
.font-size_1p5em{
  font-size: 1.5em;
}
.font-size-7{
  font-size: 7px;
}
.font-size-8{
  font-size: 8px;
}
.font-size-10{
  font-size: 10px !important;
}
.font-size-11{
  font-size: 11px;
}
.font-size-11i{
  font-size: 11px !important;
}
.font-size-12{
  font-size: 12px !important;
}
.font-size-13{
  font-size: 13px;
}
.font-size-14{
  font-size: 14px !important;
}
.font-size-15i{
  font-size: 15px !important;
}
.font-size-15{
  font-size: 15px ;
}
.font-size-16{
  font-size: 16px;
}
.font-size-18{
  font-size: 18px;
}
.font-size-20{
  font-size: 20px !important;
}
.font-size-22{
  font-size: 22px;
}
.font-size-24{
  font-size: 24px;
}
.font-size-100{
  font-size: 100px;
}
.cursor_pointer, .vis-item{
  cursor: pointer;
}
.pointer_default{
  cursor: default;
}
.cursor_none{
  cursor: none;
}
.color_inherit{
  color: inherit;
}
.color_unset{
  color: unset;
}
.color_midnightblue{
  color: midnightblue;
}

.color_white{
  color: white !important;
}
.color_brown{
  color: brown;
}
.color_whitei{
  color: white !important;
}
.color_black{
  color: black !important;
}
.color_32cd32{
  color: #32cd32;
}
.color_eef5f9{
  color: #eef5f9;
}
.color_e57373{
  color: #e57373;
}
.color_8396b0{
  color: #8396b0;
}
.color_E7EBEC{
  color: #E7EBEC !important;
}
.color_c62828{
  color: #c62828;
}
.color_ef5350{
  color: #ef5350;
}
.color_green{
  color: #027A26 !important;
}
.color_orange{
  color: orange;
}
.color_607188{
  color: #607188;
}
.color_688696{
  color: #688696;
}
.color_red{
  color: red !important;
}
.color_758396{
  color: #758396;
}
.background_inherit{
  background: inherit !important;
}
.background_indianred:hover{
  background: indianred !important;
}
/* .background_bisq_hover:hover {
  background-color: #0C3745 !important;
} */
.background_eee{
  background: #eee;
}
.background_2c3e50{
  background: #2c3e50;
}
.background_007aff{
  background: #007aff;
}
.background_ff3b30{
  background: #ff3b30;
}
.background_34c759{
  background-color: #34c759;
}
.background_5856d6{
  background-color: #5856d6;
}
.background_silver{
  background: silver;
}
.background_81c784{
  background-color: #0C3745 !important;
}
.background_darksea{
  background-color: darkseagreen;
}
.background_bisq{
  background: #0C3745 !important;
}
.background_286090{
  background: #286090;
}
.background_rgb06{
  background-color:rgba(255,255,255,0.6);
}
.background_FDFDFD{
  background: #FDFDFD;
}
.background_688696{
  background: #688696;
}
.background_F8C05A{
  background: #F8C05A;
}
.background_7986cb{
  background: #7986cb !important;
}
.background_white{
  background: #fff;
}
.background_coral{
  background: coral;
}
.background_d5f4e6{
  background: #d5f4e6;
}
.background_d7e1ed{
  background: #d7e1ed;
}
.background_green{
  background: green;
}
.background_black{
  background: #000 !important;
}
.background_EEF5F9{
  background-color: #EEF5F9 !important;
}
.background_smoke{
  background-color: whitesmoke !important;
}
.background_136{
  background-color: rgb(0, 150, 136) !important;
}
.border_color_white{
  border-color: white;
}
.border_color_237{
  border: thin solid rgb(215, 225, 237);
}
.border_radius_3{
  border-radius: 3px;
}
.border_radius_10{
  border-radius: 10px;
}
.border_radius_15{
  border-radius: 15px;
}
.background_009688{
  background: #009688 !important;
}
.text_trans_cap{
  text-transform: capitalize;
}
.text_trans_upper{
  text-transform: uppercase;
}
.fontfamily{
  font-family: 'Open Sans', sans-serif;
}
.header_plus_1_dropdown_menu{
  width: auto; 
  display: block; 
  padding: 10px;
  padding: 5px 10px; 
  color: black !important; 
  padding-right: 25px; 
  cursor: pointer;
}
.border_bottom_1p_solid{
  border-bottom: 1px solid;
}
.border_bottom_1p_solid_eee{
  border-bottom: 1px solid #eee;
}
.border_1p_col{
  border:1px solid #ddd
}
.border_1p_white{
  border:1px solid white !important;
}
.border_bottom_1p_white{
  border-bottom:1px solid white !important;
}
.border_1p_sol{
  border:1px solid;
}
.border_1p_sol_black{
  border:1px solid black
}
.border_thin{
  border: thin solid rgb(215, 225, 237)
}
.top_s5_left_0{
  top: -5px;
  left: 0px
}
.align_center{
  align-items: center;
}
.flex_wrap{
  flex-wrap: wrap;
}
.display_tabcell{
  display: table-cell;
}
.display_flex{
  display: flex;
}
.display_flow{
  display: flow-root;
}
.display_grid{
  display: grid;
}
.display_block{
  display: block !important;
}
.display_inline{
  display: inline;
}
.display_inlinei{
  display: inline !important;
}
.display_inlineb{
  display: inline-block;
}
.display_inlinebimp{
  display: inline-block !important;
}
.display_none{
  display: none !important;
}
.group_view{
  overflow:hidden;
  display:inline-block;
  width:65%;
  white-space: nowrap;
  line-height:20px; 
  margin-left:5px;
  padding:5px;
}
.tiled_view_css{
  padding:0; 
  background:#000; 
  height:auto;
  min-height:180px
}
.snapshot_css{
  background-color:rgba(255,255,255,0.6);
  padding:5px;
  padding-right:0
}
.event_css{
  text-transform: capitalize;
  margin-top:3px;
}
.item-template_css{
  padding:3px !important; 
  background-color:#008cba;
  font-size:13px;
  text-transform:initial !important;
}
.group_hier_css{
  padding:3px !important; 
  background-color:#6f829c;
  font-size:13px;
  text-transform:initial !important;
}
.daySelected {
  background: #027A26 !important;
}
.anal_lic{
  margin-left: -3.5em; 
  font-size: 15px;
}
.m-r-5_height-200{
  margin-right:5px;
  height: 200px;
  max-width: 100%;
  object-fit: cover;
}
/* LPR's event image is a single composite photo (scene on the left, a
   zoomed plate crop pasted on the right), roughly 2.4:1-3.5:1 wide -
   nothing close to the 290x200 (1.45:1) box every other event type uses.
   Approaches tried and rejected before this one: dropping width entirely
   let the image render at full natural width, but that overflowed past
   the card into neighboring cards; object-fit:cover with
   object-position:right avoided cropping the plate but, on composites
   where the plate crop region itself is wide, cropped the scene out
   entirely; shrinking the box's own height to better match the
   composite's aspect (to reduce the letterbox) left too little room
   between the image's top and the caption overlay (position:absolute,
   min-height:85px, pinned to the bottom) - the caption ended up covering
   most of the already-short image. object-fit:contain at the SAME
   200px height every other event type uses is the only option that
   guarantees both scene and plate are always fully visible (nothing is
   ever cropped) while leaving enough image height above the caption to
   actually see. The tradeoff is letterbox bars above/below on composites
   whose aspect doesn't match the box - softened by the near-white
   gradient background below instead of the theme's default coral. */
.card .card-heading.card-image img.m-r-5_height-200.lpr-event-img{
  object-fit: contain;
}
/* Per-analytics-type icon in the shared event-card template
   (views/shared/_listings.pug). Off by default so the dozen+ pages that
   share that template keep their existing look; the Insights page turns it
   on with its own #insight-events rule. */
.evt-type-icon{
  display: none;
}
/* Match-confidence row on face_match/attendance event cards, added for the
   Insights page's 2-column card layout. Off by default for the same reason
   as the icon above - the other pages sharing that template should look
   exactly as they did. */
.evt-confidence-row{
  display: none;
}
/* Switching to object-fit:contain above means the card header's own
   background now shows through as letterbox bars around any image whose
   aspect ratio doesn't exactly match the box - .app_primary_bg's solid
   coral (#EE6E73) looked jarring there. Scoped to this specific header
   combo (higher specificity than .app_primary_bg alone) so every OTHER
   use of .app_primary_bg app-wide (buttons, other headers) is untouched. */
.card-heading.card-image.app_primary_bg{
  background: linear-gradient(135deg, #f6f8fa 0%, #e9edf2 100%);
}
.float_right{
  float: right;
}
.float_left{
  float: left;
}
.wid_webkit{
  width: -webkit-fill-available;
}
.opacity_1{
  opacity: 1;
}
.opacity_75per{
  opacity: 75%;
}
.overflow_auto{
  overflow: auto;
}
.overflow_hid{
  overflow: hidden;
}
.overflowy_hid{
  overflow-y: hidden;
}
.overflow_y_auto{
  overflow-y: auto;
}
.overflow_y_scroll{
  overflow-y: scroll;
}
.text_overflow{
  text-overflow: ellipsis;
}
.clear_both{
  clear: both;
}

.wordwrap{
  word-wrap: break-word;
}
.vertical_top{
  vertical-align: top;
}
.vertical_middle{
  vertical-align: middle !important;
}
.table thead tr th[class="vertical_middle"] {
  vertical-align: middle !important;
}
.vertical_bottom{
  vertical-align: text-bottom;
}
.user_select_none {
  user-select: none;
}
.justify_space{
  justify-content: space-between;
}
.justify_space_around{
  justify-content: space-around;
}
.justify_flex{
  justify-content: flex-start;
}
.text_dec_none{
  text-decoration: none;
}
.text_underline{
  text-decoration: underline;
}
#app_topnavbar-wrapper {
  background-color: white !important;
}
.mejs__controls, .mejs__overlay-button, .mejs__overlay-loading-bg-img{
  display: none !important;
} 
.rotate_90{
  -webkit-transform: rotate(-90deg);
}
.checkbox_input{
  transform: scale(1.1);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
button.swal2-confirm.swal2-styled{
  background: #EF5350 !important;
  border-radius: 10px !important;
}
button.swal2-cancel.swal2-styled, button.swal2-cancel.swal2-styled:hover{
  background: #9daec4 !important;
  border-radius: 10px !important;
  color: white !important;
}
.swal2-icon.swal2-info, .swal2-icon.swal2-question, .swal2-icon.swal2-warning {
  font-size: 10px !important;
}
@media only screen and (max-width: 764px) {
  .profile, .logout{
    /* display: none !important; */
  }
  .navbar-nav .open .dropdown-menu{
    width: 210px !important;
  }
}
.headiconpadd{
  width: 20px;
}