/* 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. */
.modal-dialog{
  margin-top: 15px;
  margin-bottom: 15px;
}
.modal-content{
  max-height: 95vh;
  display: flex;
  flex-direction: column;
}
.modal-header, .modal-footer{
  flex: 0 0 auto;
}
/* Theme default is padding:20px top+bottom around the "Event Details"
   title - taller than it needs to be as a strip. */
.modal-header{
  padding: 12px 20px;
}
/* Theme default close "x" is a faint 30px grey glyph, easy to miss/mis-tap.
   Bigger circular button in the app's own brand orange (matches
   .btn-primary's rgb(242,100,48) used on every Save/Add/Close action
   button) so it reads as a real control, not decoration. */
.modal-header .close{
  width: 36px;
  height: 36px;
  top: 12px;
  right: 12px;
  background-color: #F26430;
  color: #fff;
  opacity: 1;
  font-size: 22px;
  line-height: 34px;
  text-align: center;
  text-shadow: none;
}
.modal-header .close:hover,
.modal-header .close:focus{
  background-color: #d8551f;
  color: #fff;
  opacity: 1;
}
.modal-body{
  overflow-y: auto;
  flex: 1 1 auto;
}
/* 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. */
.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. */
.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). */
.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. */
.modal-body img.face.height_150p{
  max-height: 110px;
}
.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;
}
/* 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;
}