.main-menu-active {
  background-color: rgba(212, 212, 212, 0.76);
}

.row-inactive {
  opacity: 0.3;
}

.error-badge {
  text-align:    center;
  line-height:   50px;
  height:        50px;
  width:         50px;
  background:    #f0506e;
  color:         #ffffff;
  border-radius: 25px;
  margin-left:   5px;
}

/* Error log */
.log-level-0 {
  background-color: rgba(255, 103, 103, 0.25);
  color:            #CC3D3D;
}

/* Warning log */
.log-level-1 {
  background-color: rgba(255, 193, 103, 0.25);
  color:            #FFBA4A;
}

/* Info log */
.log-level-2 {
  background-color: rgba(103, 179, 255, 0.25);
  color:            #ADD3FF;
}

/* Debug log */
.log-level-3 {
  background-color: rgba(209, 209, 209, 0.15);
  color:            #D1D1D1;
}

/* Fatal log */
.log-level-4 {
  background-color: rgba(204, 61, 61, 0.75);
  color:            #fff;
}

.table-fixed {
  table-layout: fixed;
}

.hidden {
  display: none;
}

.fixed-container {
  position:         fixed;
  background-color: #000000;
  top:              50%;
  left:             50%;
  max-width:        500px;
  transform:        translate(-50%, -50%);
  pointer-events:   none;
  border:           1px solid #ffffff;
  box-shadow:       0 0 3px 3px rgba(0, 0, 0, 0.25);
  z-index:          999;
}

.fixed-container > * {
  width:  100%;
  height: 100%;
}

form > div {
  overflow:      visible;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

#add-edit-tariff-schedule-modal form small,
#add-edit-tariff-schedule-record-modal form small,
#add-edit-occupancy-schedule-modal form small {
  white-space:   normal;
  overflow:      visible;
  text-overflow: clip;
}

.log-tooltip {
  max-width:  400px;
  font-size:  15px;
  padding:    12px;
  word-break: break-all;
}

.receipts-list > li {
  white-space: pre-line;
}

.padding-inherit {
  padding: inherit;
}

.button-selected {
  background-color: #5bc53a;
  color:            #fff;
  border:           1px solid transparent;
}

.button-selected:hover,
.button-selected:focus {
  background-color: #57a836;
  color:            #fff;
}

.button-selected:active,
.button-selected.uk-active {
  background-color: #44872a;
  color:            #fff;
}

#breadcrumbs {
  background:    rgba(212, 212, 212, 0.25);
  text-align:    center;
  padding:       6px 0;
  margin-bottom: 24px;
}

#breadcrumbs li,
#breadcrumbs a {
  font-size: 16px;
  color:     #666666;
}

.navbar-height-small > div > ul > li > a {
  height: 60px !important;
}

.navigate-top {
  position:   fixed;
  bottom:     25px;
  right:      25px;
  display:    inline-block;
  padding:    5px;
  background: #f8f8f8;
}

tbody > tr > th {
  background: rgba(30, 135, 240, 0.1);
  color:      #000000 !important;
}

#config-messages-info {
  background-color: #d1e6ec;
  padding:          5px 5px 5px 10px;
}

#pagination a {
  cursor: pointer;
}

.text-pos {
  color: #008000;
}

.text-notice {
  color: #fa7c2d;
}

.text-neg {
  color: #DC143C;
}

.page-link.disabled {
  pointer-events: none;
  cursor:         default !important;
  color:          #767676 !important;
}

button.cancelBtn {
  border: 1px solid #767676 !important;
  color:  #ffffff !important;
}

table.transparent-table td,
table.transparent-table th {
  background: transparent;
  padding:    0.5rem 0.75rem;
}

table.transparent-table th {
  color: #ffffff !important;
}

table.transparent-table th {
  font-weight: bold;
}

table.transparent-table.vertical th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}

table.transparent-table.horizontal th {
  border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.contained-img {
  max-width: 100%;
}

.cursor-pointer {
  cursor: pointer;
}

.hover-dim:hover {
  opacity: 0.7;
}

.darker {
  background-color: #00000066;
}

.dark-panel {
  border-radius: 0.25rem;
  padding: 0.75rem;
  background-color: rgba(0, 0, 0, 0.25);
}

.semi-transparent-border {
  border:        1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
}

.white-space-pre-line {
  white-space: pre-line;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1-5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.min-width-0 {
  min-width: 0 !important;
}

th.min-size,
td.min-size {
  width: 1px;
}

.table-col-narrow {
  width: 2rem;
}

#recent-events-auto-update {
  height:        17px;
  width:         17px;
  border-radius: 50%;
  display:       inline-block;
}

.area-pos {
  background-color: #008000;
}

.area-neg {
  background-color: #DC143C;
}

.text-sm {
  font-size: 14px;
}

.text-small {
  font-size: 0.8rem;
}

.device-icon {
  transform: scaleX(0.85);
}

.grid-panel {
  display:       flex;
  margin:        5px 0;
  border:        1px solid #404040;
  border-radius: 3px;
}

.grid-panel > .grid-panel-box:first-of-type {
  border-right: 1px solid #404040;
  font-weight:  bold;
}

.grid-panel > .grid-panel-box {
  padding: 10px;
}

.table-header {
  background:    #1A1A1A;
  padding:       0.75rem;
  border:        1px solid #404040;
  border-radius: 3px;
  display:       flex;
  margin-bottom: 0.75rem;
}

.overview-container {
  max-height:    90px;
  line-height:   23px;
  overflow-y:    auto;
  padding:       0.35rem 1.25rem 0.35rem 0.75rem;
  border:        1px solid #404040;
  border-radius: 3px;
  white-space:   nowrap;
  display:       inline-block;
  min-width:     150px;
  min-height:    36px;
  text-align:    center;
}

.overview-container.all-synced-true {
  border: 1px solid #baff91 !important;
}

.overview-container.all-synced-false {
  border: 1px solid #ff7a7a !important;
}

.overview-container li.synced-true {
  color: #baff91;
}

.overview-container li.synced-false {
  color: #ff7a7a;
}

.overview-container::-webkit-scrollbar {
  background: #404040;
  width:      9px;
  z-index:    100;
}

.overview-container::-webkit-scrollbar-thumb {
  background:    rgba(255, 255, 255, 0.25);
  border-radius: 3px;
}

.table-row-toggler {
  width:                      25px;
  height:                     25px;
  line-height:                25px;
  margin:                     -0.5rem 0 0.5rem -0.5rem;
  background:                 #02B088;
  cursor:                     pointer;
  text-align:                 center;
  font-size:                  1.75rem;
  border-bottom-right-radius: 7px;
}

.toggleable-row > td {
  border-top: 1px solid #02B088 !important;
}

.flex-label {
  display:     flex;
  align-items: center;
}

.flex-label > * {
  margin-bottom: 10px;
}

.flex-label > .label-icon {
  height:          14px !important;
  background-size: contain !important;
  margin-left:     5px;
}

#global-notification-container {
  position:   fixed;
  width:      100%;
  height:     100%;
  background: rgba(0, 0, 0, 0.75);
  z-index:    9999;
}

#global-notification {
  position:        absolute;
  width:           500px;
  height:          200px;
  left:            50%;
  top:             50%;
  background:      #1A1A1A;
  box-shadow:      0 0 7px #000;
  transform:       translate(-50%, -50%);
  border:          1px solid #404040;
  border-radius:   7px;
  display:         flex;
  flex-direction:  column;
  justify-content: space-evenly;
}

#global-notification > .title {
  font-size:   1.5rem;
  font-weight: bold;
}

#global-notification > * {
  text-align: center;
  padding:    0.75rem;
}

.passing-row {
  height: 70px;
}

.passing-row > td {
  transition: 0.5s background-color linear;
}

.passing-row.highlighted > td, .highlighted > div {
  background-color: #505050 !important;
}

table .col-log-sys-component > div {
  margin-left: auto;
  max-width:   150px;
  font-size:   0.8rem;
  color:       #fff;
  text-align:  center;
}

#video-container {
  position:   relative;
  min-height: 95px;
}

#video-container.full-screen {
  position:   fixed !important;
  width:      100%;
  height:     100%;
  left:       0;
  top:        0;
  background: #000000;
  z-index:    1051;
}

.video-paused-overlay {
  position:       absolute;
  left:           50%;
  top:            50%;
  transform:      translate(-50%, -50%);
  display:        inline-block;
  background:     #ffffff25;
  color:          #ffffff75;
  padding:        20px;
  font-size:      2rem;
  border-radius:  7px;
  pointer-events: none;
}

.video-buttons-overlay {
  position:        absolute;
  display:         flex;
  justify-content: space-between;
  left:            0;
  bottom:          0;
  background:      #ffffff40;
  width:           100%;
  padding:         5px;
}

.video-buttons-overlay .video-player-btn {
  width:         35px;
  outline:       none;
  border:        none;
  padding:       8px 5px;
  color:         #02af88;
  background:    #1a1a1a;
  font-size:     0.8rem;
  border-radius: 3px;
}

.highlighted {
  color: #ffe8a1;
}

.main-table-row {
  cursor: pointer;
}

.main-table-row:hover {
  background: #545454;
}

.main-table-row > *:not(:last-child):not(:nth-last-child(2))::after {
  content:    '';
  right:      0;
  top:        20%;
  height:     60%;
  width:      2px;
  position:   absolute;
  background: #373737;
}

.openable {
  background: #313131;
}

.bg-black {
  background-color: #000000 !important;
}

.bg-neutral-600 {
  background-color: #525252 !important;
}

.display-none {
  display: none !important;
}

.component-container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: flex-start;
  line-height:     1.8;
}

.component-box {
  background:    #1f1f1f;
  border:        1px #696969 solid;
  border-radius: 10px;
  width:         310px;
  padding:       15px;
  margin:        25px;
  white-space:   nowrap;
}

.component-box.openable:hover {
  cursor:     pointer;
  background: #545454;
}

.border-bottom-custom {
  border-bottom: 1px solid #3f3f3f;
}

.hr {
  border:      none;
  border-left: 3px solid #373737;
  height:      20px;
  width:       1px;
  float:       right;
}

.unbutton-look {
  background-color:  transparent !important;
  background-repeat: no-repeat !important;
  border:            none !important;
  cursor:            pointer !important;
  overflow:          hidden !important;
  outline:           none !important;
  box-shadow:        none !important;
  font-family:       inherit !important;
}

.scale-2 {
  transform: scale(2);
}

.password-visibility-toggle {
  display:    inline-block;
  width:      17px;
  height:     17px;
  background: url("../img/ico_ops.svg") 0 0 no-repeat;
  position:   absolute;
  right:      10px;
  bottom:     10px;
  cursor:     pointer;
}

.openable-wrap {
  border-radius:    3px;
  background-color: #3a3a3a;
  padding:          0.75rem;
}

.openable-wrap.secondary {
  background-color: transparent;
}

.openable-trigger {
  position: relative;
}

.openable-trigger::after {
  content:   'V';
  position:  absolute;
  top:       0;
  right:     -20px;
  transform: scaleY(0.6);
  opacity:   0.5;
}

.card.card-filled {
  background-color: #3a3a3a;
}

.card-element {
  background: #000;
  padding:    0.75rem 1.5rem;
  border:     1px solid #373737;
}

.card-element > .card-element-footer {
  margin-top:    0.75rem;
  padding-top:   0.75rem;
  border-top:    1px solid #373737;
  margin-left:   -1.5rem;
  margin-right:  -1.5rem;
  padding-left:  1.5rem;
  padding-right: 1.5rem;
}

.card-element > table td,
.card-element > table th {
  padding: 0.25rem 0.5rem;
}

#subscription-groups .card-element {
  display:         flex;
  justify-content: space-between;
  flex-wrap:       wrap;
  margin:          0.25rem;
}

#subscription-groups .card-element > * {
  padding: 0.75rem 0;
}

#subscription-groups .card-element > .info > .title {
  font-weight: bold;
}

#subscription-groups .card-element > * > *:not(:last-child) {
  padding-right: 0.75rem;
  margin-right:  0.5rem;
}

#subscription-groups .card-element > .info > *:not(:last-child) {
  border-right: 1px solid #373737;
}

#subscription-groups .card-element > .data {
  margin-left: 36px;
}

#subscription-groups .card-element > .data > .nr-of-vehicles {
  position: relative;
}

#subscription-groups .card-element > .data > .nr-of-vehicles::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -28px;
  width:      20px;
  height:     20px;
  background: url("../img/ico_user_white.svg") no-repeat;
}

#subscription-groups .card-element > .data > .nr-of-days {
  padding:       0.25rem 1.25rem;
  border:        1px solid #373737;
  border-radius: 0.75rem;
}

#subscription-groups .card-element > .data > .amount {
  padding:       0.25rem 1.25rem;
  background:    #373737;
  border-radius: 0.75rem;
}

.card-element input,
.card-element button {
  text-align: center;
}

.card-element input,
.card-element button,
.card-element textarea {
  background:    transparent;
  box-shadow:    none;
  outline:       none;
  border:        1px solid #373737;
  border-radius: 0.25rem;
  color:         #fff;
  padding:       0.2rem;
}

.card-element textarea {
  width: 100%;
}

.card-element input {
  width: 70px;
}

.card-element button {
  padding:     0.25rem 0.75rem !important;
  line-height: 1;
}

.weekly-schedule-table td {
  padding-top:    0.35rem !important;
  padding-bottom: 0.35rem !important;
  vertical-align: middle;
}

.weekly-schedule-table .weekday-col {
  width: 130px;
}

tr[class*="extra_elem_"] > td:first-child {
  position: relative;
}

tr[class*="extra_elem_"] > td:first-child::after {
  content:    '';
  position:   absolute;
  left:       12px;
  top:        0;
  bottom:     0;
  width:      2px;
  background: rgba(255, 255, 255, 0.25);
}

.tree-list-1 {
  background-color: #383838;
  margin-left:      10px;
  margin-bottom:    15px;
  padding:          10px;
}

.tree-list-2 {
  background-color: #2c2c2c;
  margin-left:      10px;
  margin-bottom:    15px;
  padding:          10px;
}

.add-button {
  width:         25px;
  height:        25px;
  line-height:   25px;
  margin:        0 0 0.5rem 0.5rem;
  background:    #22b022;
  cursor:        pointer;
  text-align:    center;
  font-size:     1.5rem;
  border-radius: 4px;
}

.del-button {
  width:         25px;
  height:        25px;
  line-height:   25px;
  margin:        0 0 0.5rem 0.5rem;
  background:    #c70000;
  cursor:        pointer;
  text-align:    center;
  font-size:     1.5rem;
  border-radius: 4px;
}

.occupancy-info {
  color: #686868;
}

.occupancy-info-num {
  text-align: right;
  font-size:  14px;
}

.row-bordered > td {
  border-top: 1px solid #404040 !important;
}

.table-dashboard-las {
  text-align:       center;
  width:            auto !important;
  border:           none !important;
  background-color: transparent !important;
}

.table-dashboard-las th {
  border-top: none !important;
  background: none;
}

.active-gate-group {
  background:    #1a1a1a !important;
  border-bottom: 2px solid #02B088 !important;
}

.tri-state-toggle {
  background:     #1a1a1a;
  border:         1px solid #404040;
  border-radius:  24px;
  overflow:       hidden;
  display:        inline-flex;
  flex-direction: row;
  transition:     all 500ms ease;
  margin-bottom:  20px;
  font-size:      13px;
}

.tri-state-toggle-button {
  border-radius:    22px;
  height:           26px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            auto;
  min-width:        50px;
  background-color: transparent;
  border:           0 solid transparent;
  margin:           1px;
  color:            white;
  cursor:           pointer;
  transition:       all 0.5s ease;
  padding:          0 10px;
}

.tri-state-toggle-button.active {
  background-color: #02B088;
  border:           0 solid rgba(207, 207, 207, 0.6);
  box-shadow:       0 8px 16px 0 rgba(0, 0, 0, 0.1);
  color:            white;
  font-weight:      500;
  transition:       all .5s ease-in;
}

.tri-state-toggle-button:focus {
  outline: none;
}

tr:has(.passing-error), .header-error {
  background-color: #772120 !important;
}

.grey-separator {
  color:     #404040;
  font-size: 32px;
}

.plate > a {
  color:           #02B088 !important;
  text-decoration: none !important;
  border-bottom:   2px dotted #333;
  padding-bottom:  2px;
}

.plate > a:hover {
  border-bottom: 2px solid #686868;
}

.flex-content {
  flex:            1 1 0;
  display:         flex;
  align-items:     center;
  justify-content: center
}

.video-stream {
  object-fit: contain;
  width:      100%;
  height:     100%;
}

.license-valid {
  height:           fit-content;
  color:            black;
  background-color: #acf3ac;
  border:           5px solid #268d0f;
  padding:          15px 15px 50px 15px;
  border-radius:    15px;
}

.license-expired {
  height:           fit-content;
  color:            black;
  background-color: #e1d54f;
  border:           5px solid #9f6e15;
  padding:          15px 15px 50px 15px;
  border-radius:    15px;
}

.license-invalid {
  height:           fit-content;
  color:            black;
  background-color: #e78e8e;
  border:           5px solid #ad1212;
  padding:          15px 15px 50px 15px;
  border-radius:    15px;
}

.SumoSelect {
  display: block !important;
  width:   auto !important;
}

.SumoSelect > div > ul {
  background-color: black !important;
}

.SumoSelect > div > ul > li:hover {
  background-color: #313131 !important;
}

.SumoSelect > .CaptionCont > label {
  margin: 0 !important;
}

.SumoSelect > .CaptionCont > label > i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

.sumo-multi-select {
  background-color: black !important;
  border:           1px solid #404040 !important;
  border-radius:    3px !important;
  height:           100% !important;
}

.container-fluid:has(.SumoSelect.open) {
  overflow: visible;
}

.card-body {
  overflow: visible;
}

.loader {
  position:      absolute;
  z-index:       20000;
  margin-top:    20%;
  margin-left:   auto;
  margin-right:  auto;
  top:           0;
  right:         0;
  bottom:        0;
  left:          0;
  border:        20px solid #f3f3f3;
  border-top:    20px solid #02B088;
  border-radius: 50%;
  width:         120px;
  height:        120px;
  animation:     spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.switch {
  position:       relative;
  display:        inline-block;
  width:          90px;
  height:         37px;
  vertical-align: top;
}

.switch input {
  opacity: 0;
  width:   0;
  height:  0;
}

.slider {
  position:           absolute;
  cursor:             pointer;
  top:                0;
  left:               0;
  right:              0;
  bottom:             0;
  background-color:   #ccc;
  -webkit-transition: .4s;
  transition:         .4s;
}

.slider:before {
  position:           absolute;
  content:            "";
  height:             29px;
  width:              29px;
  left:               4px;
  bottom:             4px;
  background-color:   white;
  -webkit-transition: .4s;
  transition:         .4s;
}

input:checked + .slider {
  background-color: #02B088;
}

input:focus + .slider {
  box-shadow: 0 0 1px #02B088;
}

input:checked + .slider:before {
  -webkit-transform: translateX(51px);
  -ms-transform:     translateX(51px);
  transform:         translateX(51px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.btn.btn-icon {
  padding: 2px 6px !important;
}

.btn-icon svg {
  width:  21px;
  height: 21px;
}

.icon-sm svg {
  width: 16px;
  height: 16px;
}

.icon-md svg {
  width: 18px;
  height: 18px;
}

.icon-lg svg {
  width: 21px;
  height: 21px;
}

.btn.btn-icon.btn-danger {
  border-bottom-width: 1px;
}

.btn-export {
  background-color: black !important;
  border-color:     white !important;
  border-style:     solid !important;
  border-width:     1px !important;
}

.btn-export:hover {
  background-color: #363636 !important;
  border-color:     gold !important;
}

.modal-dialog-larger {
  max-width: 700px !important;
}

.kiosk-events {
  font-weight: bold;
}

.filter-event-btn {
  margin-top: 8px;
}

.form-legend {
  margin-bottom: 1rem;
  font-weight:   700;
}

.input-height {
  min-height: calc(1.5em + 0.75rem + 2px);
}

.input-spinner {
  position:       absolute;
  top:            50%;
  right:          .75rem;
  margin-top:     -.5rem;
  pointer-events: none;
}

.js-pagination > li > a {
  cursor: pointer;
}

.js-pagination > li > a:hover {
  border-bottom: none !important;
}

#receipt-builder {
  margin-right: 1.5rem !important;
  width:        637px !important;
}

.receipt-preview {
  padding:     0.5rem;
  width:       410px;
  background:  white !important;
  color:       black !important;
  font-family: monospace, monospace;
}

.big-modal {
  max-width: 1110px !important;
}

.rec-target-row {
  background:    rgba(209, 209, 209, 0.15);
  height:        12px;
  border-radius: 5px;
  cursor:        pointer;
}

.rec-target-row-selected {
  background: rgb(52, 192, 52) !important;
}

.rec-data-row {
  margin-top:    0.25rem;
  margin-bottom: 0.25rem;
  padding:       0.3rem;
  border-radius: 5px;
  cursor:        pointer;
}

.rec-data-row-selected {
  background: rgb(127, 140, 127) !important;
}

.video-container2 {
  display: block;
  z-index: 1;
}

.video-error {
  display:  block;
  position: absolute;
  height:   auto;
  z-index:  4;
  opacity:  .7;
  top:      20%;
}

.currency-table-row > td {
  padding-top:    0.3rem !important;
  padding-bottom: 0 !important;
}

.btn-color-swatch {
  width:         24px;
  height:        24px;
  border:        none;
  border-radius: 4px;
  box-shadow:    inset 0 0 0 1px rgba(0, 0, 0, .15);
  outline:       none !important;
}

.btn-color-swatch:focus {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 0.12rem var(--green);
}

.btn-color-swatch:hover {
  filter: brightness(110%);
}

.btn-sos {
  height:        56px;
  width:         56px;
  border:        1px solid #CC3D3D;
  color:         #CC3D3D;
  background:    #000000;
  border-radius: 50%;
  cursor:        pointer;
  display:       inline-block;
  font-size:     18px;
  margin:        0 20px;
}

.btn-sos--active {
  animation:        sos-glowing 1300ms infinite;
  border-color:     transparent;
  background-color: #CA0000;
  color:            #FFFFFF;
}

@keyframes sos-glowing {
  0%, 100% {
    background-color: #CA0000;
    box-shadow:       0 0 3px #CA0000;
  }
  50% {
    background-color: #FF0000FF;
    box-shadow:       0 0 15px #FF0000FF;
  }
}

.login-languages {
  padding: 0.5rem 0;
}

.login-language-item {
  display: inline-block;
  cursor:  pointer;
}

.login-language-flag {
  height:        30px;
  width:         40px;
  object-fit:    cover;
  border:        2px solid transparent;
  border-radius: 10%;
}

.login-language-selected .login-language-flag {
  border: 2px solid var(--green) !important;
}

#filter-gate-id {
  min-width: 200px;
}

#background-image-preview {
  margin-top: 10px;
}

.background-preview-container {
  display: flex;
  gap:     5px;
}

.background-preview-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

.background-preview-label {
  margin-bottom: 5px;
  font-size:     0.9rem;
  font-weight:   bold;
}

#background-image-preview-img,
#background-image-preview-img-2,
.background-image-preview-area {
  width:               270px;
  height:              478px;
  background-size:     contain;
  background-position: center;
  background-repeat:   no-repeat;
  border:              1px solid #ddd;
  border-radius:       4px;
  position:            relative;
  overflow:            hidden;
}

.background-image-preview-overlay {
  position:            absolute;
  top:                 0;
  left:                0;
  width:               100%;
  height:              100%;
  background-size:     contain;
  background-position: center;
  background-repeat:   no-repeat;
  pointer-events:      none;
}

.available-spaces-plain-overlay {
  background-image: url('../img/backgrounds/available_spaces_plain.png');
}

#background-image-preview-overlay {
  background-image: url('../img/backgrounds/available_spaces.png');
}

#background-image-preview-overlay-2 {
  background-image: url('../img/backgrounds/vehicle_exit.png');
}