/*================================================================================
	Item Name: Frest HTML Admin Template
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.logo {
  float: left !important;
  /*margin-left: 10px !important;*/
}

/* Show the web logo by default, hide the skyblue logo */
.brand-logo .logo-expanded {
  display: none;
}

.brand-logo .logo-collapsed {
  display: block;
}

/* When the .expanded class is present, show skyblue logo and hide web logo */
.expanded .brand-logo .logo-expanded {
  display: block;
}

.expanded .brand-logo .logo-collapsed {
  display: none;
}

/* toast background colors starts */
.toast {
  background-color: #5A8DEE !important;
}

.toast-success {
  background-color: #39DA8A !important;
}

.toast-error {
  background-color: #FF5B5C !important;
}

/* Resident Loader Container */
.resident-loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 2px dashed #dee2e6;
  margin-bottom: 10px;
  width: 100%;
  min-height: 150px;
}

.resident-loader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.resident-loader-icon {
  font-size: 48px;
  color: #202B56;
  display: block;
  text-align: center;
}

.resident-loader-text {
  font-size: 16px;
  font-weight: 500;
  color: #495057;
  text-align: center;
}

/* Resident Empty State Container */
.resident-empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
  border-radius: 12px;
  border: 2px dashed #e9ecef;
  margin-bottom: 10px;
  width: 100%;
  min-height: 180px;
}

.resident-empty-content {
  text-align: center;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.resident-empty-icon {
  font-size: 64px;
  color: #adb5bd;
  display: block;
  text-align: center;
}

.resident-empty-title {
  font-size: 20px;
  font-weight: 600;
  color: #495057;
  text-align: center;
}

.resident-empty-text {
  font-size: 14px;
  color: #6c757d;
  line-height: 1.5;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .resident-loader-container,
  .resident-empty-container {
    padding: 30px 15px;
    margin: 5px 0;
  }
  
  .resident-loader-icon {
    font-size: 36px;
  }
  
  .resident-empty-icon {
    font-size: 48px;
  }
  
  .resident-loader-text {
    font-size: 14px;
  }
  
  .resident-empty-title {
    font-size: 18px;
  }
  
  .resident-empty-text {
    font-size: 13px;
  }
}

/* Resident Cards Horizontal Display */
.resident-list-horizontal {
  padding: 10px 0;
}

.resident-card {
  transition: all 0.3s ease;
  background: #fff;
  border-color: #e0e0e0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.resident-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-color: #202B56 !important;
}

.resident-card img {
  border: 3px solid #f0f0f0;
  transition: all 0.3s ease;
}

.resident-card:hover img {
  border-color: #202B56;
  transform: scale(1.05);
}

.resident-avatar {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.resident-name {
  color: #202B56;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.resident-card:hover .resident-name {
  color: #1a2045;
}

.resident-phone {
  color: #6c757d;
  font-size: 12px !important;
}

/* Custom Checkbox Styling */
.resident-checkbox-wrapper {
  margin-top: 10px;
}

.custom-checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: #6c757d;
  transition: all 0.3s ease;
  padding: 5px 15px;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  background: #f8f9fa;
}

.custom-checkbox-label:hover {
  background: #202B56;
  color: #fff;
  border-color: #202B56;
  transform: scale(1.05);
}

.resident-checkbox {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #d0d0d0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.custom-checkbox-label:hover .checkmark {
  border-color: #fff;
}

.resident-checkbox:checked ~ .checkmark {
  background-color: #202B56;
  border-color: #202B56;
}

.resident-checkbox:checked ~ .checkmark::after {
  content: '';
  position: absolute;
  display: block;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.resident-checkbox:checked ~ .select-text {
  color: #202B56;
  font-weight: 600;
}

.custom-checkbox-label:hover .select-text {
  color: #fff;
}

.resident-checkbox:checked + .custom-checkbox-label {
  background: #e8eef5;
  border-color: #202B56;
  color: #202B56;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .resident-list-horizontal {
    gap: 15px !important;
  }
  
  .resident-card {
    min-width: 120px !important;
    padding: 15px !important;
  }
  
  .resident-card img {
    width: 60px !important;
    height: 60px !important;
  }
}

.toast-warning {
  background-color: #FDAC41 !important;
}

.custom-switch .custom-control-label::before {
  background-color: #d5dadf;
}

.table td {
  padding: 5px 10px !important;
}

.table th, .table td {
  padding: 1.15rem 1rem;
}

.form-control {
  height: auto;
  line-height: 1.0;
}

.btn {
  padding: 0.367rem 1.0rem;
}

.pac-container {
  z-index: 1000001 !important;
  border-top: none !important;
}

.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
  background-color: #FFFFFF !important;
}

div.dataTables_wrapper div.dataTables_filter select,
div.dataTables_wrapper div.dataTables_length select {
  padding: 0.3rem 0.8rem;
}

div.dataTables_wrapper .dataTables_length {
  padding-top: 2px;
  padding-left: 4px;
}

div.dataTables_wrapper div.dataTables_length select {
  padding: 14px 20px !important;
  border: 2px solid #D9E1E7 !important;
  background-position: calc(100% - 4px) 14px, calc(100% - 20px) 14px, 100% 0 !important;
  border-radius: 6px;
}

.table.dataTable td.dataTables_empty,
table.dataTable th.dataTables_empty {
  padding: 15px 10px !important;
}

.text-12 {
  font-size: 12px !important;
}

.border-top-gray {
  border-top: 1px solid #e1e1e1
}

.table .row:nth-child(2) {
  overflow-x: auto;
}

.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:not(.mm-next):after {
  transform: rotate(180deg);
}

.img_150 {
  height: 150px;
  object-fit: contain;
}

.box-scroll::-webkit-scrollbar {
  width: 6px; /* width of the entire scrollbar */
}

.box-scroll::-webkit-scrollbar-track {
  background: #CFD8DC;
}

.box-scroll::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 6px;
  border: 3px solid #aaa;

}

.object-fit-img {
  object-fit: contain;
}

.flatpickr-time input {
  padding: 10px 38px !important;
}

.flatpickr-time {
  border: 0 solid rgba(0, 0, 0, 0.05);
  background: rgba(90, 141, 238, 0.15);
  border-radius: 0.25rem;
}

#filterFrm .filter-btn {
  padding: 10px 10px 10px 10px;
}

#filterFrm .btn-toggle-sidebar {
  padding: 10px 10px 10px 10px;
}

input[type=radio] {
  width: 20px;
  height: 20px;
}

.btn.active:focus,
.btn:active:focus,
.btn:focus {
  outline: none;
}

.select2-container--default .select2-selection--multiple {
  min-height: 42px !important;
  margin-bottom: 0 !important;
}

.checkbox label:after {
  border: 1px solid #b7b7b7;
  background: #fff;
}

.swal2-container .checkbox label:after {
  top: 2px;
}

#main-search div.search-input {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#main-search div.search-input span {
  display: none;
  position: absolute;
  z-index: 10001;
  right: 54px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background-color: #ef4242;
  font: 14px monospace;
  text-align: center;
  line-height: 1.4em;
  cursor: pointer;
}

#searchVisitorFrm .search-input span {
  display: none;
  position: absolute;
  z-index: 1001;
  right: 25px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #fff;
  background-color: #ccc;
  font: 13px monospace;
  text-align: center;
  line-height: 1em;
  cursor: pointer;
  top: 38px;
}

span.search-input input {
  padding-right: 18px;
  box-sizing: border-box;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
  border: 0 solid #cccccc;
  background: #ededed;
  font-weight: normal;
  color: #000000;
}

html:not([dir=rtl]) .modal-simple .btn-close {
  right: -1.625rem;
}

.modal-simple .btn-close {
  position: absolute;
  top: -1.625rem;
}

.modal .btn-close {
  background-color: #eeeff1;
  padding: 0.5625rem 0.5625rem;
  margin: 0 0 0 auto;
  z-index: 1;
}

.btn-close {
  box-sizing: content-box;
  width: 0.8em;
  height: 0.8em;
  padding: 0.25em 0.25em;
  color: #a8b1bb;
  background: transparent url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate%28-225.000000, -250.000000%29'%3E%3Cg id='Icon-Color' transform='translate%28225.000000, 250.500000%29'%3E%3Cuse fill='%23a8b1bb' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23a8b1bb' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/0.8em auto no-repeat;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.95;
}

.btn-close:hover {
  color: #a8b1bb;
  text-decoration: none;
  opacity: 0.95;
}

.btn-close:focus {
  outline: 0;
  box-shadow: none;
  opacity: 0.95;
}

.btn-close:disabled, .btn-close.disabled {
  pointer-events: none;
  user-select: none;
  opacity: 0.25;
}

.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.picker__footer button {
  padding: 8px 10px !important;
}

.open.flatpickr-calendar {
  z-index: 100001 !important;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  background: #bad3ff !important;
}

.flatpickr-time input {
  background: #bad3ff !important;
}

.note_edit_container .btn {
  position: absolute;
  right: 20px;
}

.navbar-brand #username {
  color: #06152B;
  font-family: 'Segoe UI', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
}

.navbar-brand #role-title {
  color: #809FB8;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}

.navbar-brand #date-time {
  color: #809FB8;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}

/* #main-search {
  width: 100%;
  margin: 0;
  padding: 0 10px;
} */

.input-group-text {
  border: 2px solid #d4d8dd;
  border-radius: 8px !important;
}

html:not([dir=rtl]) .input-group-merge .form-control:not(:last-child),
html:not([dir=rtl]) .input-group-merge .form-control-custom:not(:last-child) {
  padding-right: 0 !important;
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#main-search .form-control {
  border-radius: 12px;
  border: 2px solid #D9E1E7;
  height: 48px;
  flex-shrink: 0;
}

#main-search .input-group-text {
  border-radius: 12px;
  border: 2px solid #D9E1E7;
}

#navbar-icons li.custom-icon {
  padding: 4px;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 2px solid #D9E1E7;
  border-radius: 12px;
}

#navbar-icons li .custom-icon {
  padding: 4px;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 2px solid #D9E1E7;
  border-radius: 12px;
}

#main-content.content-body {
  border: 1px solid #D9E1E7;
  border-radius: 12px;
  padding: 8px;
  margin: 8px;
  min-height: 660px;
}

.btn-custom {
  padding: 8px 10px;
  border-radius: 8px;
  background: #202B56 !important;
  border-color: #202B56 !important;
  color: #FEFEFE !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.btn-clear {
  padding: 8px 10px;
  border-radius: 8px;
  background: #F5BE2E !important;
  border-color: #F5BE2E !important;
  color: #FEFEFE !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.btn-clear:hover {
  color: #ffffff;
}

#main-content .card {
  margin-bottom: 0;
}

/*.card-header {*/
/*  padding: 1.5rem 2rem !important;*/
/*}*/

.card .card-header .card-title {
  color: #06152B !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.badge-custom {
  border-radius: 8px;
  background: #202B56;
  color: #FFFFFF;
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
}

.table:not(.table-dark) thead:not(.table-dark) th {
  color: #809FB8;
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
}

.table tbody tr td {
  color: #06152B;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.text-blue {
  color: #06152B !important;
}

.table.table-borderless thead tr {
  border-bottom: none !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  color: #06152B;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: #F7F7F7;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.table > :not(caption) > * > * {
  background: #FFF;
  /*box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.06);*/
}

/* Apply border-radius to the first td of each row */
.table-striped > tbody > tr td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.table-striped > thead > tr th:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

/* Apply border-radius to the last td of each row */
.table-striped > tbody > tr td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.table-striped > thead > tr th:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.action-icon-blue {
  background: #0090FF;
  padding: 10px 10px;
  border-radius: 10px;
  margin: 4px;
  border: 2px solid #ffffff;
}

.action-icon-blue svg,
.action-icon-blue i {
  color: #FFF !important;
  /* font-size: 12px; */
}

.action-icon-green {
  background: #1AD598;
  padding: 10px 10px;
  border-radius: 10px;
  margin: 4px;
  border: 2px solid #ffffff;
}

.action-icon-red {
  background: #FF4C4C;
  padding: 10px 10px;
  border-radius: 10px;
  margin: 4px;
  border: 2px solid #ffffff;
}

.action-icon-red svg,
.action-icon-red i {
  color: #FFF !important;
  /* font-size: 12px; */
}

.action-icon-green svg,
.action-icon-green i {
  color: #FFF !important;
  /* font-size: 12px; */
}

.action-icon-dark-blue {
  background: #202B56;
  padding: 10px 10px;
  border-radius: 10px;
  margin: 4px;
  border: 2px solid #ffffff;
}

.action-icon-dark-blue svg,
.action-icon-dark-blue i {
  color: #FFF !important;
  /* font-size: 12px; */
}

.action-icon-yellow {
  background: #FFA046;
  padding: 10px 10px;
  border-radius: 10px;
  margin: 4px;
  border: 2px solid #ffffff;
}

.action-icon-yellow svg,
.action-icon-yellow i {
  color: #FFF !important;
  /* font-size: 12px; */
}

.pagination .page-item.active .page-link {
  padding: 0.535rem 0.3125rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover {
  background-color: #202B56 !important;
}

.pagination .page-item.previous.disabled .page-link,
.pagination .page-item.next.disabled .page-link,
.pagination .page-item.first.disabled .page-link,
.pagination .page-item.last.disabled .page-link {
  background-color: #F7F7F7 !important;
}

.pagination .page-item.previous .page-link,
.pagination .page-item.next .page-link {
  border: 2px solid #efe9e9 !important;
}

/*.pagination .page-item.previous ~ .page-item:nth-child(2) .page-link {*/
/*  border-left: none !important;*/
/*}*/

/*.pagination .page-item.previous ~ .page-item:nth-last-child(-n+2) .page-link {*/
/*  border-right: none !important;*/
/*}*/

div.dataTables_wrapper div.dataTables_paginate {
  white-space: nowrap;
  text-align: right;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*div.dataTables_wrapper div.dataTables_info {*/
/*  padding-top: 0 !important;*/
/*  white-space: nowrap;*/
/*  padding-bottom: 0 !important;*/
/*}*/

/*div.dataTables_wrapper div.dataTables_paginate ul.pagination {*/
/*  margin-top: 0 !important;*/
/*}*/

.tab-content div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  padding-top: 0.85em !important;
}

.pagination .page-item .page-link {
  border: none !important;
}

.page-item:not(.first, .last, .next, .prev, .previous) {
  background-color: transparent !important;
}

/*div.dataTables_wrapper div.dataTables_filter,*/
/*div.dataTables_wrapper div.dataTables_length {*/
/*  margin: 0 !important;*/
/*}*/

.dataTables_filter .form-control {
  border-radius: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid #D9E1E7;
  height: 40px;
}

/*.table.dataTable thead .sorting:before,*/
/*.table.dataTable thead .sorting_asc:before,*/
/*.table.dataTable thead .sorting_desc:before,*/
/*.table.dataTable thead .sorting_desc_disabled:before {*/
/*  padding-top: 0.8em;*/
/*}*/

/*.table.dataTable thead .sorting:after,*/
/*.table.dataTable thead .sorting_asc:after,*/
/*.table.dataTable thead .sorting_desc:after,*/
/*.table.dataTable thead .sorting_desc_disabled:after {*/
/*  padding-top: 1.4em;*/
/*}*/

/*.table.dataTable thead .sorting:before,*/
/*.table.dataTable thead .sorting:after,*/
/*.table.dataTable thead .sorting_asc:before,*/
/*.table.dataTable thead .sorting_asc:after,*/
/*.table.dataTable thead .sorting_desc:before,*/
/*.table.dataTable thead .sorting_desc:after {*/
/*  top: 4px;*/
/*}*/

.btn-approved, .btn-approve {
  padding: 8px 10px;
  border-radius: 8px;
  background: #1AD598;
  border-color: #1AD598;
  color: #FFF !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  /*line-height: normal;*/
}

.btn-reject, .btn-rejected {
  padding: 8px 10px;
  border-radius: 8px;
  background: #FF4C4C;
  border-color: #FF4C4C;
  color: #FFF !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  /*line-height: normal;*/
}

.btn-dismiss {
  padding: 8px 10px;
  border-radius: 8px;
  background: #d514d3;
  border-color: #d514d3;
  color: #FFF !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  /*line-height: normal;*/
}

.btn-pending {
  padding: 8px 10px;
  border-radius: 8px;
  background: #809FB8;
  border-color: #809FB8;
  color: #FFF !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  /*line-height: normal;*/
}

.btn-expired {
  padding: 8px 10px;
  border-radius: 8px;
  color: #FFF !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  /*line-height: normal;*/
}

.btn-remove-plate {
  padding: 8px 10px;
  border-radius: 8px;
  background: #5a18f7;
  border-color: #5a18f7;
  color: #FFF !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  /*line-height: normal;*/
}

.permanent {
  position: relative;
}

.text-route {
  color: #0c4ecf;
}

.text-route:hover {
  color: #3d24cf;
}

.badge-temporary {
  background: #0090FF;
  border-radius: 50%;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.badge-permanent {
  background: #1AD598;
  border-radius: 50%;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.badge-denied {
  background: #FF6969;
  border-radius: 50%;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.badge-temporary-denied {
  background: #F5BE2E;
  border-radius: 50%;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.day-active {
  padding: 6px 8px;
  border-radius: 6px;
  background: #202B56;
  color: #FFF;
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
}

.day-mute {
  padding: 6px 8px;
  border-radius: 6px;
  background: #cccccc;
  color: #FFF;
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
}

.scroll-top.btn {
  padding: 0 !important;
}

.text-pass-type {
  color: #06152B;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.pass-type-circle {
  width: 54px;
  height: 54px;
  background: #202B56;
  border-radius: 50%;
  color: #FFF;
  font-family: 'Segoe UI', sans-serif;
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  display: grid;
  align-items: center;
}

#community_details {
  border-radius: 25px;
  background: #F7F9FB;
}

.btn-signup-link {
  border-radius: 8px;
  border: 1px solid #809FB8;
  background: #F5F6FF;
  color: #000;
  font-family: 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 400;
}

.btn-edit {
  border-radius: 8px;
  border: 1px solid #809FB8;
  background: #F5F6FF;
  color: #000;
  font-family: 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 400;
}

.btn-blue {
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff;
  background: #0090FF;
  border-color: #0090FF;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.btn-green {
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff;
  background: #079D68;
  border-color: #079D68;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.btn-blue:hover,
.btn-blue:focus {
  color: #fff;
}

.btn-green:hover,
.btn-green:focus {
  color: #fff;
}

.btn-gray:hover,
.btn-gray:active,
.btn-gray:focus {
  color: #fff;
  background: #809FB8;
  border-color: #809FB8;
}

.btn-gray {
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff;
  background: #809FB8;
  border-color: #809FB8;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.btn-orange {
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff;
  background: #FFA500;
  border-color: #FFA500;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.btn-orange:hover,
.btn-orange:focus {
  color: #fff;
}

#new_residents .card {
  border-radius: 10px;
  border: 1px solid #F2F2F2;
  background: #E3F3FF;
}

#new_residents .card .card-header {
  padding: 15px !important;
  color: #2477B6;
  font-family: 'Segoe UI', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#new_residents .card .username {
  color: #06152B;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 5px 0;
}

#new_residents .user-avatar-section {
  padding: 0 12px;
}

#no-of-units .card {
  border-radius: 10px;
  border: 1px solid #F2F2F2;
  background: #E3F5FF;
}

#no-of-units .card-text {
  color: #066BA4;
  font-family: 'Segoe UI', sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-top: 12px;
  margin-bottom: 8px;
}

#no-of-units .units-text {
  color: #066BA4;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#created-on .card {
  border-radius: 10px;
  border: 1px solid #F2F2F2;
  background: #FFE3E3;
}

#created-on .card-text {
  color: #FC6464;
  font-family: 'Segoe UI', sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-top: 12px;
  margin-bottom: 8px;
}

#created-on .date-text {
  color: #FC6464;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#community-details .card {
  border-radius: 10px;
  border: 1px solid #F2F2F2;
  background: #E3E4FF;
}

#community-details .card-text {
  color: #6E73FC;
  font-family: 'Segoe UI', sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-top: 12px;
  margin-bottom: 8px;
}

#community-details .active-community-text {
  color: #6E73FC;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.tabs-line.nav-tabs .nav-link.active,
.tabs-line.nav-tabs .nav-link.active:hover,
.tabs-line.nav-tabs .nav-link.active:focus,
.tabs-line > .nav-tabs .nav-link.active,
.tabs-line > .nav-tabs .nav-link.active:hover,
.tabs-line > .nav-tabs .nav-link.active:focus {
  box-shadow: none !important;
}

#community_details_container .nav-link {
  opacity: 0.5;
  color: #202B56;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#community_details_container .nav-tabs {
  border-bottom: 1px solid #EDEDED;
}

#community_details_container .nav-tabs .nav-item {
  padding-bottom: 0 !important;
}

#community_details_container .nav-link.active {
  opacity: 1;
  border-bottom: 2px solid #202B56;
  border-radius: 0;
}

#community_details_container .nav.nav-tabs .nav-item .nav-link.active:before {
  content: none !important;
}

#community_details_container .nav.nav-tabs .nav-item .nav-link.active:after {
  content: none !important;
}

#community_details_container .tab-content {
  border: 1px solid #D9E1E7;
  border-radius: 12px;
  box-shadow: none !important;
}

#logout-button {
  position: absolute;
  bottom: 10px;
  left: 30px;
}

#logout-button .logout {
  color: #EB4949;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 52px; /* 260% */
}

#profile_details .banner {
  position: relative;
  height: 200px;
  width: 100%;
  background: url("../../images/profile_cover.jpg");
  background-size: cover;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
}

#profile_details .profile {
  position: absolute;
  height: 130px;
  width: 130px;
  top: 60px;
  left: 25px;
  border-radius: 50%;
  transform: translateY(50%);
  box-shadow: inherit;
  object-fit: cover;
  border: 4px solid #fff;
  z-index: 1001;
}

#profile_details .username {
  color: #000;
  font-family: 'Segoe UI', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#profile_details .address {
  color: #000 !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-left: 5px;
}

#address_details_container .address {
  font-size: 22px !important;
  font-weight: bold !important;
}

#profile_details .email {
  color: #000 !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-left: 5px;
}

#profile_details .resident-profile-header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 100%;
}

#profile_details .resident-profile-header .username {
  color: #06152B;
  letter-spacing: 0.01em;
}

#profile_details .resident-profile-header__actions {
  max-width: 100%;
}

#profile_details .resident-profile-header__actions .btn {
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1.1;
  white-space: nowrap;
}

#profile_details .resident-profile-header__actions .btn i {
  font-size: 0.95em;
}

#profile_details > .card > .card-body {
  position: relative;
  padding-top: 4rem;
}

#profile_details .resident-doors-container {
  position: absolute;
  top: 0.75rem;
  left: 22px;
  z-index: 1002;
  width: 98%;
}

#profile_details .resident-header-row {
  margin-left: 4px !important;
}

#profile_details .resident-contact {
  background: #edf3f9;
  border: 1px solid #edf3f9;
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
}

#profile_details .resident-contact__row {
  max-width: 100%;
}

#profile_details .resident-contact__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(32, 43, 86, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#profile_details .resident-contact__icon img {
  max-width: 20px;
  max-height: 20px;
  height: auto;
}

#profile_details .resident-contact__content {
  min-width: 0;
}

#profile_details .resident-contact a .address {
  color: #0c4ecf;
  opacity: 1;
  font-weight: 600;
}

#profile_details .resident-contact .email {
  opacity: 0.85;
  font-weight: 600;
}

#profile_details .resident-contact__route {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #E9EEF5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: 0 0 auto;
  transition: box-shadow 0.15s ease, transform 0.08s ease;
}

#profile_details .resident-contact__route:hover {
  box-shadow: 0 10px 22px rgba(14, 18, 45, 0.10);
  transform: translateY(-1px);
}

#profile_details .resident-contact__route .fa-2x {
  font-size: 1.2rem;
}

#profile_details .resident-actions {
  margin-top: 0.25rem;
  max-width: 100%;
}

#profile_details .resident-actions__primary,
#profile_details .resident-actions__flags {
  max-width: 100%;
}

#profile_details .resident-actions .btn-custom {
  margin: 0 !important;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.1;
}

#profile_details .resident-actions .btn-custom:hover {
  box-shadow: 0 10px 22px rgba(14, 18, 45, 0.10);
  transform: translateY(-1px);
}

#profile_details .resident-actions__icon-btn {
  width: 46px;
  height: 46px;
  padding: 0 !important;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #E9EEF5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s ease, transform 0.08s ease;
}

#profile_details .resident-actions__icon-btn:hover {
  box-shadow: 0 10px 22px rgba(14, 18, 45, 0.10);
  transform: translateY(-1px);
}

#profile_details .resident-actions__icon-btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(32, 43, 86, 0.18), 0 10px 22px rgba(14, 18, 45, 0.10);
}

#profile_details .resident-actions__icon-btn img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

@media (max-width: 576px) {
  #profile_details .resident-doors-container {
    position: static;
    margin-bottom: 0.5rem;
  }

  #profile_details > .card > .card-body {
    padding-top: 3.25rem;
  }

  #profile_details .resident-actions {
    justify-content: flex-start !important;
  }

  #profile_details .resident-profile-header__actions .btn {
    font-size: 0.85rem;
  }

  #profile_details .resident-contact {
    padding: 0.75rem 0.75rem;
  }
}

#basic_details {
  border-radius: 10px;
  background: #F7F9FB;
}

#resident_notes_card {
  margin-top: 10px;
  border-radius: 10px;
  background: #fffbc8;
}

#resident_notes_card .card-body {
  padding: 10px;
}

#resident_notes_card .info-container {
  max-height: 110px;
  font-size: 16px;
  line-height: 22px;
  color: #000;
}

#resident_notes_card .empty-note {
  color: #999; /*Optional: Styling for empty message*/
  font-style: italic; /*Optional*/
  padding: 15px;
  margin-bottom: 0;
}

#resident_notes_card .edit-button {
  position: absolute;
  bottom: 6px;
  right: 6px;
  color: #fff;
  font-size: 12px;
  background: #0090FF;
  padding: 4px;
  border-radius: 6px;
}

/* Apply margin only if .empty-note is NOT inside .info-container */
#camera_view #resident_notes_card .info-container:not(:has(.empty-note)) {
  margin-bottom: 30px; /* Adjust this value as needed */
}

#resident_notes_card .edit-button:hover {
  background-color: #007BFF; /* Darker shade for hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow on hover */
  cursor: pointer; /* Changes the cursor to a pointer */
}

.swal-notes-ckeditor-popup .swal2-content {
  padding: 0;
}

.swal-notes-ckeditor-popup .swal2-actions {
  margin-top: 0;
  padding: 0;
}

.swal-officer-note .swal2-content {
  padding: 0;
}

.swal-officer-note .swal2-actions {
  margin-top: 0;
  padding: 0;
}

#web_settings .card-body {
  background: #F7F9FB;
  border-radius: 10px;
}

#resident_notes_card ol,
#resident_notes_card p,
#resident_notes_card ul {
  margin-bottom: 8px;
}

#profile_details .card-body {
  background: #F7F9FB;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

#vehicle_details .card-body {
  background: #F7F9FB;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

/*tab contain for resident profile*/
#resident_details_container .nav-link {
  opacity: 0.5;
  color: #202B56;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#resident_details_container .nav-tabs {
  border-bottom: 1px solid #EDEDED;
}

#resident_details_container .nav-tabs .nav-item {
  padding-bottom: 0 !important;
}

#resident_details_container .nav-link.active {
  opacity: 1;
  border-bottom: 2px solid #202B56;
  border-radius: 0;
}

#resident_details_container .nav.nav-tabs .nav-item .nav-link.active:before {
  content: none !important;
}

#resident_details_container .nav.nav-tabs .nav-item .nav-link.active:after {
  content: none !important;
}

#resident_details_container .tab-content {
  border: 1px solid #D9E1E7;
  border-radius: 12px;
  box-shadow: none !important;
}

/*end tab contain for resident profile*/

/*tab contain for resident profile*/
#visitor_profile_details_container .nav-link {
  opacity: 0.5;
  color: #202B56;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#visitor_profile_details_container .nav-tabs {
  border-bottom: 1px solid #EDEDED;
}

#visitor_profile_details_container .nav-tabs .nav-item {
  padding-bottom: 0 !important;
}

#visitor_profile_details_container .nav-link.active {
  opacity: 1;
  border-bottom: 2px solid #202B56;
  border-radius: 0;
}

#visitor_profile_details_container .nav.nav-tabs .nav-item .nav-link.active:before {
  content: none !important;
}

#visitor_profile_details_container .nav.nav-tabs .nav-item .nav-link.active:after {
  content: none !important;
}

#visitor_profile_details_container .tab-content {
  border: 1px solid #D9E1E7;
  border-radius: 12px;
  box-shadow: none !important;
}

/*end tab contain for visitor profile*/


#dashboard_container .nav-link {
  opacity: 0.5;
  color: #202B56;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#dashboard_container .nav-tabs {
  border-bottom: 1px solid #EDEDED;
}

#dashboard_container .nav-tabs .nav-item {
  padding-bottom: 0 !important;
}

#dashboard_container .nav-link.active {
  opacity: 1;
  border-bottom: 2px solid #202B56;
  border-radius: 0;
}

#dashboard_container .nav.nav-tabs .nav-item .nav-link.active:before {
  content: none !important;
}

#dashboard_container .nav.nav-tabs .nav-item .nav-link.active:after {
  content: none !important;
}

#dashboard_container .tab-content {
  border: 1px solid #D9E1E7;
  border-radius: 12px;
  box-shadow: none !important;
}

#dashboard_container #profile_details .profile-edit-btn {
  position: absolute;
  left: 124px;
  top: -20px;
  z-index: 1004;
}

#visitor_result_container {
  border: 1px solid #D9E1E7;
}

/* Terms and Conditions SweetAlert styling */
.swal-terms-text {
  text-align: justify;
  line-height: 30px;
}

/*resident member details page*/
#resident_member_details_container .nav-link,
#address_details_container .nav-link,
#visitor_result_container .nav-link {
  opacity: 0.5;
  color: #202B56;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#resident_member_details_container .nav-tabs,
#address_details_container .nav-tabs,
#visitor_result_container .nav-tabs {
  border-bottom: 1px solid #EDEDED;
}

#resident_member_details_container .nav-tabs .nav-item,
#address_details_container .nav-tabs .nav-item,
#visitor_result_container .nav-tabs .nav-item {
  padding-bottom: 0 !important;
}

#resident_member_details_container .nav-link.active,
#address_details_container .nav-link.active,
#visitor_result_container .nav-link.active {
  opacity: 1;
  border-bottom: 2px solid #202B56;
  border-radius: 0;
}

#resident_member_details_container .nav.nav-tabs .nav-item .nav-link.active:before,
#address_details_container .nav.nav-tabs .nav-item .nav-link.active:before,
#visitor_result_container .nav.nav-tabs .nav-item .nav-link.active:before {
  content: none !important;
}

#resident_member_details_container .nav.nav-tabs .nav-item .nav-link.active:after,
#address_details_container .nav.nav-tabs .nav-item .nav-link.active:after,
#visitor_result_container .nav.nav-tabs .nav-item .nav-link.active:after {
  content: none !important;
}

#resident_member_details_container .tab-content,
#address_details_container .tab-content,
#visitor_result_container .tab-content {
  border: 1px solid #D9E1E7;
  border-radius: 12px;
  box-shadow: none !important;
}

/*Vehicle details page*/
#vehicle_details_container .nav-link {
  opacity: 0.5;
  color: #202B56;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#vehicle_details_container .nav-tabs {
  border-bottom: 1px solid #EDEDED;
}

#vehicle_details_container .nav-tabs .nav-item {
  padding-bottom: 0 !important;
}

#vehicle_details_container .nav-link.active {
  opacity: 1;
  border-bottom: 2px solid #202B56;
  border-radius: 0;
}

#vehicle_details_container .nav.nav-tabs .nav-item .nav-link.active:before {
  content: none !important;
}

#vehicle_details_container .nav.nav-tabs .nav-item .nav-link.active:after {
  content: none !important;
}

#vehicle_details_container .tab-content {
  border: 1px solid #D9E1E7;
  border-radius: 12px;
  box-shadow: none !important;
}

#visitor_result_container .tab-content,
#visitor_result_container .table.dataTable {
  border-radius: 0 0 12px 12px !important;
}

/*staff member details page*/
#staff_member_details_container .nav-link {
  opacity: 0.5;
  color: #202B56;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#staff_member_details_container .nav-tabs {
  /*border-bottom: 1px solid #EDEDED;*/
  border: 2px solid #EDEDED;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin-bottom: 0 !important;
}

#staff_member_details_container .nav-tabs .nav-item {
  padding-bottom: 0 !important;
}

#staff_member_details_container .nav-link.active {
  opacity: 1;
  border-bottom: 2px solid #202B56;
  border-radius: 0;
}

#staff_member_details_container .nav.nav-tabs .nav-item .nav-link.active:before {
  content: none !important;
}

#staff_member_details_container .nav.nav-tabs .nav-item .nav-link.active:after {
  content: none !important;
}

#staff_member_details_container .tab-content {
  /*border-radius: 12px;*/
  border: 1px solid #D9E1E7;
  border-top: 0 !important;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: none !important;
}

.btn-repeat {
  padding: 8px 10px;
  border-radius: 8px;
  background: #202B56;
  border-color: #202B56;
  color: #FEFEFE;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  /*line-height: normal;*/
}

.btn-repeat-today {
  padding: 8px 10px;
  border-radius: 8px;
  background: #202B56;
  border-color: #202B56;
  color: #FEFEFE;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  /*line-height: normal;*/
}

#visitor_details {
  border-radius: 25px;
  background: #F7F9FB;
  padding: 10px;
}

#visitor_details img {
  object-fit: cover !important;
  border: 4px solid #fff;
}

#community_details img {
  object-fit: cover !important;
}

.visitor-info {
  color: #06152B;
  font-size: 22px;
  font-family: 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 12px 8px;
}

.text-label {
  color: #809FB8;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.text-value {
  color: #06152B;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#visitor_info {
  border: 1px solid #D9E1E7CC;
  border-radius: 12px;
  min-height: 692px;
}

#visitor_info .checkbox input:checked ~ label:before {
  background-color: #06152B !important;
  border: 1px solid #06152B !important;
}

#visitor_info .checkbox input:checked ~ label:after {
  border-color: #FFF !important;
}

#visitor_info .card-header {
  padding: 1.5rem 1.5rem !important;
}

.pin-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  background-color: #f4f4f4;
  border: 2px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: #DFE3E7 !important;
}

.select2-selection {
  border-radius: 8px !important;
  background: transparent !important;
  /*background: #F9F9F9 !important;*/
}

#visitorTypeFrm .select2-selection {
  background: #FFFFFF !important;
}

.swal2-styled.primary-bg:focus {
  box-shadow: 0 0 0 3px #4a95db !important;
}

.swal2-styled.bg-success:focus {
  box-shadow: 0 0 0 3px #88f1bd !important;
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b,
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: #99B2C6 transparent transparent #b3c0ce !important;
}

.label-custom {
  color: #06152B;
  font-family: 'Segoe UI', sans-serif;
  text-transform: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  opacity: 0.8;
}

.select2-custom .select2-container--classic .select2-selection--single,
.select2-custom .select2-container--default .select2-selection--single,
.select2-custom .select2-container--classic .select2-selection--multiple,
.select2-custom .select2-container--default .select2-selection--multiple {
  min-height: 46px !important;
  padding: 3px !important;
  border: 2px solid #D9E1E7 !important;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #202B56 !important;
}

.select2-custom .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 4px !important;
}

.select2-custom .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px !important;
}

.form-control-custom {
  border-radius: 8px !important;
  background: #FFFFFF;
  border: 2px solid #D9E1E7;
  height: 42px;
}

.form-select-custom {
  border-radius: 8px !important;
  background: #F9F9F9 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23394C62' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.8rem center/8px 10px no-repeat !important;
  border: 2px solid #D9E1E7;
  height: 44px;
}

.custom-input.has-icon-left .form-control-position {
  top: 4px !important;
}

.btn-cancel {
  padding: 8px 10px;
  border-radius: 8px;
  background: #FF4C4C;
  border-color: #FF4C4C;
  color: #FEFEFE;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

#communi_card_view_content .card-title small {
  font-size: 16px;
}

#app video {
  object-fit: cover;
}

#resident_card_view_content .btn-approve,
#resident_card_view_content .btn-approved,
#resident_card_view_content .btn-reject,
#resident_card_view_content .btn-rejected {
  font-size: 12px;
}

.switch-custom.switch .switch-input:checked ~ .switch-toggle-slider {
  background: #202B56;
  color: #fff;
}

.switch-custom.switch .switch-toggle-slider i {
  top: 2px !important;
}

.switch-custom .switch-toggle-slider {
  background: #B2B2B2;
  color: #202B56;
}

.parking-pass-availability .parking-pass-availability__header {
  width: 100%;
}

.parking-pass-availability .parking-pass-availability__cycle {
  margin-left: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}

.btn-custom.btn-lg, .btn-custom.btn-group-lg > .btn {
  padding: 0.74rem 2.1875rem !important;
  font-size: 1.063rem !important;
  border-radius: 0.3125rem !important;
}

#notifications_container li.yellow {
  border-radius: 8px;
  background: rgba(255, 146, 18, 0.11);
  box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.04);
}

#notifications_container li.green {
  border-radius: 8px;
  background: rgba(119, 190, 47, 0.11);
  box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.04);
}

#notifications_container li.red {
  border-radius: 8px;
  background: rgba(235, 55, 55, 0.11);
  box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.04);
}

#notifications_container li.purple {
  border-radius: 8px;
  background: rgba(160, 104, 252, 0.11);
  box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.04);
}

#notifications_container li.maroon {
  border-radius: 8px;
  background: rgba(197, 108, 108, 0.11);
  box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.04);
}

#notifications_container li.green h6 {
  color: #77BE2F;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#notifications_container li.yellow h6 {
  color: #FF9212;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#notifications_container li.red h6 {
  color: #EB3737;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#notifications_container li.purple h6 {
  color: #A068FC;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#notifications_container li.maroon h6 {
  color: #C56C6C;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#notifications_container li.green small {
  color: #000;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0.5;
}

#notifications_container li.green .icon {
  border-radius: 12px;
  background: #77BE2F;
  padding: 10px;
}

#notifications_container li.red .icon {
  border-radius: 12px;
  background: #EB3737;
  padding: 10px;
}

#notifications_container li.yellow .icon {
  border-radius: 12px;
  background: #FF9212;
  padding: 10px;
}

#notifications_container li.purple .icon {
  border-radius: 12px;
  background: #A068FC;
  padding: 10px;
}

#notifications_container li.maroon .icon {
  border-radius: 12px;
  background: #C56C6C;
  padding: 10px;
}

.notification-group-title {
  color: #000;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  opacity: 0.5;
}

#vehicle_details .banner {
  position: relative;
  height: 200px;
  width: 100%;
  background: url("../../images/vehicle_cover.png");
  background-size: cover;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
}

#vehicle_details .profile {
  position: absolute;
  height: 130px;
  width: 130px;
  border-radius: 50%;
  top: 20px;
  left: 55px;
  transform: translateY(50%);
  box-shadow: inherit;
}

#camera_view #vehicle_details .profile {
  left: 14px;
}

#classic_view #vehicle_details .profile {
  left: 40px;
}

.resident-details {
  border-radius: 25px;
  background: #FFF;
  box-shadow: 0 4px 31px 0 rgba(0, 0, 0, 0.10);
  padding: 10px 10px;
}

#visitor_history,
#pass_history,
#violation_history {
  border-radius: 25px;
  background: #FFF;
  box-shadow: 0 4px 31px 0 rgba(0, 0, 0, 0.10);
  padding: 10px 10px;
}

#comments {
  border-radius: 10px;
  background: #F7F9FB;
  padding: 20px;
  margin-top: 22px;
}

#comments img {
  object-fit: cover !important;
}

#result_recent_kiosk_scan #no_record {
  height: 250px;
  background: #eee !important;
  color: #020202 !important;
  box-shadow: 0 4px 31px 0 rgba(0, 0, 0, 0.10);
  border: none;
  font-size: 20px;
}

.swal2-container {
  z-index: 10061 !important;
}

.barcode-details {
  border-radius: 25px;
  background: #FFF;
  box-shadow: 0 4px 31px 0 rgba(0, 0, 0, 0.10);
  padding: 20px;
}

#comments .card {
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 4px 31px 0 rgba(0, 0, 0, 0.10);
}

#result_recent_plate_scan .accordion .accordion-item,
#result_recent_kiosk_scan .accordion .accordion-item {
  box-shadow: 4px 3px 7px -6px rgba(105, 105, 105, 1);
}

#result_recent_kiosk_scan .accordion-button:focus,
#result_recent_kiosk_scan .accordion-button:hover,
#result_recent_plate_scan .accordion-button:focus,
#result_recent_plate_scan .accordion-button:hover {
  z-index: 0 !important;
}

#dashboard-statistics .communities {
  border-radius: 16px;
  background: #E3F5FF;
}

/*#upcoming_vehicles .badge {*/
/*  position: static !important;*/
/*}*/

#upcoming_vehicles li {
  background: #F7F7F7;
  padding: 6px;
  border-radius: 8px;
}

/* Option 1: Left Border Accent */
#upcoming_vehicles .plate-item.active-plate {
  border-left: 6px solid #202B56;
  background: #e3edfe;
  padding-left: 8px;
  position: relative;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Option 3: Corner Badge */
#upcoming_vehicles .plate-item.active-plate:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #202B56 transparent transparent;
  border-radius: 0 8px 0 0;
}

#upcoming_vehicles .plate-item.active-plate .accordion-collapse {
  background: transparent !important;
}

#upcoming_vehicles .plate-item.active-plate .accordion-body {
  background: #e3edfe !important;
}

#upcoming_vehicles .plate-item.active-plate .accordion-body .card-body {
  background: #e3edfe !important;
}

#dashboard-statistics .communities .card-header .card-title {
  color: #066BA4 !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#dashboard-statistics .communities .card-body h5 {
  color: #066BA4 !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px; /* 150% */
}

#dashboard-statistics .residents {
  border-radius: 16px;
  background: #FFE3E3;
}

#dashboard-statistics .residents .card-header .card-title {
  color: #FC6464 !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#dashboard-statistics .residents .card-body h5 {
  color: #FC6464 !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px; /* 150% */
}

#dashboard-statistics .clients {
  border-radius: 16px;
  background: #E3E4FF;
}

#dashboard-statistics .clients .card-header .card-title {
  color: #6E73FC !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#dashboard-statistics .clients .card-body h5 {
  color: #6E73FC !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px; /* 150% */
}

#dashboard-statistics .officers {
  border-radius: 16px;
  background: #E3E4FF;
}

#dashboard-statistics .officers .card-header .card-title {
  color: #6E73FC !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#dashboard-statistics .officers .card-body h5 {
  color: #6E73FC !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px; /* 150% */
}

#dashboard-statistics .violations {
  border-radius: 16px;
  background: #E3F3FF;
}

#dashboard-statistics .violations .card-header .card-title {
  color: #2477B6 !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#dashboard-statistics .violations .card-body h5 {
  color: #2477B6 !important;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px; /* 150% */
}

#charts #violations-stats {
  height: 450px;
}

#charts #visitors-stats,
#charts #violations-chart {
  border-radius: 16px;
  background: #F7F9FB;
}

#communities .card {
  border-radius: 16px;
  background: #F7F9FB;
}

#notifications .card {
  border-radius: 25px;
  background: #F7F9FB;
}

#residents .card {
  border-radius: 16px;
  background: #F7F9FB;
}

#vehicles .card {
  border-radius: 16px;
  background: #F7F9FB;
}

#parking-pass .card {
  border-radius: 16px;
  background: #F7F9FB;
}

#violations .card {
  border-radius: 16px;
  background: #F7F9FB;
}

#visitor-history .card {
  border-radius: 16px;
  background: #F7F9FB;
}

#kiosk-history .card {
  border-radius: 16px;
  background: #F7F9FB;
}

#communi_card_view .svg-inline--fa,
#communi_list_view .svg-inline--fa,
#communi_view_all .svg-inline--fa {
  vertical-align: -0.2em !important;
}

/*.svg-inline--fa {*/
/*  font-size: 14px !important;*/
/*}*/

.dropdown-notification ul li:first-child {
  background: #202B56;
  padding: 0 12px;
}

.dropdown-notification ul li:last-child {
  border-bottom-left-radius: 0.267rem;
  border-bottom-right-radius: 0.267rem;
  background: #40434e;
  padding: 0 12px;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #F9F9F9 !important;
}

#unread-notifications .notify-action {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
  border-radius: 0.3125rem !important;
  margin-bottom: 5px !important;
}

.bg-denied {
  background: #FF6969 !important;
}

.bg-invalid {
  background: #FDAC41 !important;
}

#unread-notifications-container,
#unread-notifications {
  align-items: center;
  height: 450px;
  min-width: 350px;
  overflow: auto;
}

#unread-notifications-container .notify-action {
  border-bottom: 1px solid #eee;
}

#colorpicker input {
  display: block;
  width: 50%;
  float: left;
  height: 42px;
}

#colorpicker input[type="text"] {
  padding: 10px;
}

#colorpicker input[type="text"]:invalid {
  outline: 2px solid red;
}

.colorpick-eyedropper-input-trigger {
  display: none !important;
}

#live_camera1,
#live_camera2 {
  width: auto;
  min-height: 115px;
  background: #eee;
  text-align: center;
  display: grid;
  align-items: center;
  justify-content: center;
}

#live_camera1 .center-icon,
#live_camera2 .center-icon {
  opacity: 0.4;
}

#officer-toggle-btn .classic-btn,
#officer-toggle-btn .camera-btn {
  padding: 8px 8px;
}

#officer-toggle-btn .classic-btn:active,
#officer-toggle-btn .camera-btn:active,
#officer-toggle-btn .classic-btn.active,
#officer-toggle-btn .camera-btn.active {
  border-radius: 10px;
  /*border: 1px solid #202B56 !important;*/
  background: #06152B !important;
  color: #FFFFFF !important;
}

.btn-check:checked + .classic-btn,
.btn-check:checked + .camera-btn {
  border-radius: 10px !important;
  background: #06152B !important;
  color: #FFFFFF !important;
}

#officer-toggle-btn .classic-btn:hover,
#officer-toggle-btn .camera-btn:hover {
  border-radius: 10px;
  background: #06152B !important;
  color: #FFFFFF !important;
}

#result_recent_plate_scan .timeline-event img {
  object-fit: cover;
}

#result_recent_plate_scan .timeline .timeline-item,
#result_recent_kiosk_scan .timeline .timeline-item {
  padding-left: 2rem !important;
  padding-bottom: 0;
  padding-top: 0;
}

#result_recent_plate_scan .timeline .timeline-item .timeline-event,
#result_recent_kiosk_scan .timeline .timeline-item .timeline-event {
  top: -1.6rem;
  left: 30px;
}

#result_recent_plate_scan .timeline::before,
#result_recent_kiosk_scan .timeline::before {
  border-left: 2px solid #202B56 !important;
}

#result_recent_plate_scan .timeline .timeline-item .timeline-event,
#result_recent_kiosk_scan .timeline .timeline-item .timeline-event {
  padding: 10px 10px !important;
}

#result_recent_plate_scan .timeline .timeline-item .timeline-indicator,
#result_recent_kiosk_scan .timeline .timeline-item .timeline-indicator {
  border: 2px solid #202B56;
  background-color: #202B56 !important;
  left: 31px;
  top: 38px;
  height: 20px;
  width: 20px;
}

#result_recent_plate_scan .accordion-collapse .badge,
#result_recent_kiosk_scan .accordion-collapse .badge,
#upcoming_vehicles .accordion-collapse .badge {
  position: absolute;
  font-size: 14px;
  left: -42px;
  top: 65px;
}

.fs-7 {
  font-size: 0.6375rem !important;
}

#result_recent_plate_scan .timeline::before,
#result_recent_kiosk_scan .timeline::before {
  top: 46px;
}

#result_recent_plate_scan .timeline::before,
#result_recent_kiosk_scan .timeline::before {
  left: 40px;
}

#result_recent_plate_scan .timeline-indicator .badge-temporary,
#result_recent_plate_scan .timeline-indicator .badge-denied,
#result_recent_plate_scan .timeline-indicator .badge-permanent,
#result_recent_kiosk_scan .timeline-indicator .badge-temporary,
#result_recent_kiosk_scan .timeline-indicator .badge-denied,
#result_recent_kiosk_scan .timeline-indicator .badge-permanent {
  font-size: 14px;
}

#result_recent_plate_scan .timeline .timeline-point-info,
#result_recent_kiosk_scan .timeline .timeline-point-info {
  background-color: #202B56 !important;
  box-shadow: none !important;
}

#result_recent_plate_scan .timeline .timeline-end-indicator,
#result_recent_kiosk_scan .timeline .timeline-end-indicator {
  bottom: -40px !important;
  left: 30px !important;
}

#result_recent_plate_scan .timeline .timeline-end-indicator i,
#result_recent_kiosk_scan .timeline .timeline-end-indicator i {
  color: #202B56 !important;
}

#result_recent_plate_scan .accordion-body,
#result_recent_kiosk_scan .accordion-body {
  background: #F7F7F7;
}

#result_recent_plate_scan .accordion-collapse,
#result_recent_kiosk_scan .accordion-collapse {
  background: #F7F7F7;
}

#result_recent_plate_scan .accordion-body .card-body,
#result_recent_kiosk_scan .accordion-body .card-body {
  background: #F7F7F7;
}

#dummy_accordion_plate_scan {
  background: #F7F7F7;
}

#dummy_accordion_plate_scan .accordion-button::after {
  background-image: none !important;
}

#result_recent_kiosk_scan .accordion-button::after {
  background-image: none !important;
  width: 0;
  height: 0;
}

#result_recent_kiosk_scan .arrow-icon {
  padding: 5px;
  right: 14px;
  top: 34px;
}

.btn.active:focus,
.btn:active:focus,
.btn:focus {
  outline-offset: unset !important;
}

#dummy_accordion_plate_scan .card-body {
  height: 278px;
  background: #F7F7F7;
}

#camera_settings .camera,
#door_settings .door {
  background: #f9f9f9;
  padding: 10px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}

#document.card {
  height: 45px;
  width: 100px;
  background: #eee;
  text-align: center;
  display: grid;
  align-items: center;
  justify-content: center;
}

#document.card .body {
  padding: 5px;
}

#document .center-icon {
  opacity: 0.4;
}

#document .reset-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #202B56;
  border: none;
  border-radius: 4px;
  padding: 0 4px;
  cursor: pointer;
  color: #ffffff;
}

#result_recent_plate_scan #accordionVisitor {
  max-height: 420px;
  border-left: 6px solid #202B56;
  background: #F7F7F7;
  padding: 8px;
  position: relative;
  border-radius: 12px;
  transition: all 0.3s ease;
  overflow: auto;
}

#result_recent_plate_scan #accordionVisitor .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

#result_recent_plate_scan #accordionVisitor .accordion-button {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

#result_recent_plate_scan .accordion-body,
#result_recent_plate_scan .accordion-collapse {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px; 
}

#result_recent_plate_scan #accordionVisitor .accordion-item:not(:last-child) {
  margin-bottom: 8px;
}

#result_recent_plate_scan #upcoming_vehicles {
  height: 560px;
  overflow: auto;
}

#result_recent_plate_scan #accordionVisitor .accordion-button,
#result_recent_kiosk_scan #accordionKioskVisitor .accordion-button {
  background: #F7F7F7;
  position: relative;
  padding: 8px 8px 8px 8px;
}

#result_recent_plate_scan #accordionVisitor .right-section,
#result_recent_kiosk_scan #accordionKioskVisitor .right-section {
  float: right;
  position: absolute;
  right: 20px;
  top: 15px;
}

#result_recent_plate_scan #accordionVisitor .accordion-item,
#result_recent_kiosk_scan #accordionKioskVisitor .accordion-item {
  background: #F7F7F7;
}

#result_recent_plate_scan .timeline .timeline-item-primary .timeline-event:before,
#result_recent_kiosk_scan .timeline .timeline-item-primary .timeline-event:before {
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

#result_recent_plate_scan .timeline .timeline-item-primary .timeline-event,
#result_recent_kiosk_scan .timeline .timeline-item-primary .timeline-event {
  background-color: transparent;
}

.accordion-button:not(.collapsed.show)::after {
  /*background-image: url("../../images/arrow-up.png");*/
  /*transform: rotate(180deg);*/
  display: none;
  background-size: auto;
  background-position: center;
  width: 30px;
  height: 30px;
  position: relative;
  top: 0;
}

#result_recent_kiosk_scan .more-text {
  font-size: 14px;
  bottom: 0;
  left: 8px;
}

#result_recent_plate_scan .more-text {
  font-size: 16px;
  bottom: 30px;
  left: 8px;
}

#result_recent_plate_scan .h6 {
  font-size: 0.8000rem !important;
}

#result_recent_plate_scan .fs-5 {
  font-size: 0.998rem !important;
}

#result_recent_kiosk_scan .mCSB_scrollTools .mCSB_dragger {
  z-index: 1001 !important;
}

#kiosk_mode_div .btn-light {
  color: #263c55 !important;
  background-color: #e5e9ed !important;
  border-color: #e5e9ed !important;
}

#result_recent_kiosk_scan .kiosk-visitor-name {
  font-size: 16px;
  font-weight: bold;
}

.kiosk-type-label-resident {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  text-transform: uppercase;
  background: #1ad598;
  color: #ffffff;
  padding: 4px;
  border-radius: 4px;
  line-height: 1;
  box-sizing: border-box;
  font-size: 1.2rem !important;
}

.kiosk-type-label-visitor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-transform: uppercase;
  background: #1AD598;
  color: #ffffff;
  padding: 4px;
  border-radius: 4px;
  line-height: 1;
  box-sizing: border-box;
}

.kiosk-type-btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-transform: uppercase;
  background: #202b56;
  color: #ffffff;
  padding: 4px;
  border-radius: 4px;
  line-height: normal;
  box-sizing: border-box;
  min-width: 136px;
}

/* Optional: Add custom styles for emphasis */
.shepherd-highlight {
  position: relative;
  z-index: 9999;
  outline: 2px solid #202B56; /* Highlight border color */
  box-shadow: 0 0 15px rgba(32, 43, 86, 0.6); /* Blue shadow */
  border-radius: 8px;
}

.shepherd-element .shepherd-header {
  background: #202B56 !important;
  color: #fff !important;
}

.shepherd-element[data-popper-placement=bottom] .shepherd-arrow:before {
  background-color: #202B56 !important;
  border-color: #202B56;
}

.accordion-button.collapsed::after {
  /*background-image: url("../../images/arrow-up.png");*/
  /*transform: rotate(60deg);*/
  background-size: auto;
  background-position: center;
  width: 30px;
  height: 30px;
}

/*#result_recent_plate_scan .accordion-button::after {*/
/*  width: 2rem;*/
/*  height: 2rem;*/
/*  background-size: 1rem;*/
/*}*/

/* The actual timeline (the vertical ruler) */
.custom-timeline {
  position: relative;
  margin: 0 auto;
}

/*Container around content */
.timeline-container {
  padding: 0 6px 0 20px;
  position: relative;
  left: 25px;
}

/* The actual timeline (the vertical ruler) */
.custom-timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background: #202B56;
  top: 70px;
  bottom: 0;
  left: 25px;
}

/* The circles on the timeline */
.timeline-container::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: -7px;
  top: 70px;
  background: #202B56;
  border-radius: 50%;
  z-index: 1;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) #logout-button .menu-title,
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) #logout-button .badge {
  display: none;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) #video-tutorials .menu-title,
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) #video-tutorials .badge {
  display: none;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) #video-tutorials {
  margin: 0 0 0 0;
}

.timeline-container:last-child::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: -7px;
  bottom: 0;
  background: #202B56;
  border-radius: 50%;
  z-index: 1;
}

/* Add arrows to the right container (pointing left) */
/*.timeline-container::before {*/
/*  content: "";*/
/*  height: 25px;*/
/*  position: absolute;*/
/*  top: 0;*/
/*  width: 60px;*/
/*  z-index: 1;*/
/*  left: 0;*/
/*  background: #202B56;*/
/*}*/

/* The actual content */
.timeline-content {
  padding: 10px;
  background: transparent;
  position: relative;
  border-radius: 6px;
}

.authentication-wrapper .auth-input-wrapper .auth-input {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-size: 150%;
}

.bg-light-card {
  background: #F4F6Fb;
}

#container_profiles h6 {
  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
  color: #000;
}

#profile_details .avatar {
  width: 100px !important;
  height: 100px !important;
}

#basic_details ul li {
  font-family: 'Segoe UI', sans-serif;
}

#violation-history {
  border-radius: 10px;
  background: #F7F9FB;
  padding: 20px;
  margin-top: 22px;
}

.file-control-custom {
  border-radius: 8px !important;
  background: #F9F9F9 !important;
  line-height: 1.5 !important;
  border: 2px solid #D9E1E7;
  height: 42px;
}

.select2-container--classic .select2-selection--single,
.select2-container--default .select2-selection--single {
  min-height: 42px !important;
  background-color: #fff !important;
  padding: 6px !important;
  border: 2px solid #DFE3E7 !important;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
  min-height: 42px !important;
}

#status-history {
  border-radius: 10px;
  background: #F7F9FB;
  padding: 20px;
  margin-top: 22px;
}

.table.dataTable {
  border: 1px solid #D9E1E7;
  border-radius: 8px;
  border-collapse: unset !important;
  padding: 5px;
  border-spacing: 0 2px !important;
}

.search-loader {
  border: 4px solid #fdcccc;
  border-top: 4px solid #202B56;
  border-radius: 50%;
  z-index: 10003;
  width: 28px;
  height: 28px;
  animation: spin 1s linear infinite;
  display: none;
  top: 10px;
  right: 50px;
  position: absolute;
  z-index: 10003;
}

.camera-view .search-loader {
  border: 4px solid #fdcccc;
  border-top: 4px solid #202B56;
  border-radius: 50%;
  z-index: 10003;
  width: 28px;
  height: 28px;
  animation: spin 1s linear infinite;
  display: none;
  top: 10px;
  right: 50px;
  position: absolute;
}

.alert-warning-custom {
  background: #FF92121C;
  border: 2px solid #FF92121C;
  border-radius: 8px;
  color: #FF9212;
  box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.04);
}

.edit-camera {
  z-index: 1001;
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: transparent;
  padding: 2px 4px !important;
  border: none;
}

#specific-area {
  width: 365px;
  height: 200px;
  position: relative;
}

#specific-area video,
#specific-area iframe {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px;
}

#specific-area img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* fit image inside while keeping aspect ratio */
  object-position: center; /* center it inside */
}

.vehicle-image-box {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 230px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vehicle-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps aspect ratio & fills box */
}

/* Overlay controls at bottom right */
.camera-controls {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  gap: 8px;
}


#container_profiles {
  position: absolute;
  top: 90px;
  left: 0;
}

#container_profiles .profile_img {
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 50%;
  width: 135px;
  height: 135px;
}

#all-visitors-tbl_wrapper .dataTables_scrollHead table {
  border-radius: 8px 8px 0 0 !important;
}

#all-visitors-tbl_wrapper .dataTables_scrollBody table {
  border-radius: 0 0 8px 8px !important;
}

#visitor-tbl_wrapper .dataTables_scrollHead table {
  border-radius: 8px 8px 0 0 !important;
}

#visitor-tbl_wrapper .dataTables_scrollBody table {
  border-radius: 0 0 8px 8px !important;
}

.avatar img {
  object-fit: cover;
}

.ui-autocomplete {
  z-index: 10001 !important;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}

.ui-widget.ui-widget-content {
  border-radius: 8px !important;
}

.ui-menu .ui-state-active {
  margin: 0 !important;
}

.picker__input.form-control {
  background: #FFFFFF !important;
}

.btn-cancel:hover {
  color: #fff !important;
}

#plateFrm .btn-approve:focus {
  box-shadow: 0 4px 8px rgba(5, 213, 132, 0.99) !important;
}

#plateFrm .btn-custom:focus {
  box-shadow: 0 4px 8px rgba(6, 13, 86, 0.99) !important;
}

#plateFrm .btn-cancel:focus {
  box-shadow: 0 4px 8px rgba(255, 0, 10, 0.99) !important;
}

#plateFrm .select2-container--default .select2-selection--single .select2-selection__arrow {
  min-height: 50px !important;
}

#plateFrm .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 32px !important;
}

#plateFrm .select2-container--default .select2-selection--single {
  min-height: 50px !important;
}

#plateFrm .form-control-custom,
#plateNoFrm .form-control-custom {
  height: 50px;
}

.select2-container--open {
  z-index: 9999999
}

.add-plate {
  padding: 6px 32px;
  background: #fff;
  border-radius: 6px;
  border: 2px solid #ccc;
}

.add-visitor-btn-for-pic {
  background: #1AD598;
  color: #fff;
  padding: 8px 10px;
  border-radius: 50%;
  border: 4px solid #fff;
  font-weight: bold;
  font-size: 12px;
}

#address_details_container #profile_details .profile-edit-btn {
  position: absolute;
  left: 116px;
  top: 75px;
}

#resident_details_container #profile_details .profile-edit-btn {
  position: absolute;
  left: 124px;
  top: -20px;
  z-index: 1001;
}

/*#classic_view #address_details_container #profile_details .profile-edit-btn {*/
/*  position: absolute;*/
/*  left: unset;*/
/*  bottom: unset;*/
/*  right: 10px;*/
/*  top: 80px;*/
/*}*/

/*#camera_view #address_details_container #profile_details .profile-edit-btn {*/
/*  position: absolute;*/
/*  left: unset;*/
/*  bottom: unset;*/
/*  right: 10px;*/
/*  top: 80px;*/
/*}*/

.add-visitor-btn-for-pic:hover {
  color: #202b56f7;
}

#addPinnedVisitor {
  background: #fbfbfb !important;
  border: 3px solid #f9f6f6 !important;
}

#addPinnedVisitor i {
  color: green;
}

#pinned_visitor_result_container .user-avatar {
  padding: 6px 10px;
  border-radius: 8px;
}

table .visitor-status-action-btn,
table .visitor-admit-with-ids,
table .visitor-admit-addplate,
table .btn-doors-admit,
table .btn-door,
table .visitor-admit-with-face {
  min-width: 68px !important;
}

#result_recent_plate_scan .visitor-status-action-btn,
#result_recent_plate_scan .resident-admit-action-btn,
#result_recent_plate_scan .visitor-admit-with-ids,
#result_recent_plate_scan .visitor-admit-addplate,
#result_recent_plate_scan .btn-doors-admit,
#result_recent_plate_scan .btn-door,
#result_recent_plate_scan .btn-dismiss,
#result_recent_plate_scan .btn-remove-plate,
#result_recent_plate_scan .btn-repeat-today,
#result_recent_plate_scan .btn-blue,
#result_recent_plate_scan .btn-expired,
#result_recent_plate_scan .btn-custom,
#result_recent_plate_scan .btn-green {
  min-width: 78px !important;
}

#visitor_details .visitor-status-action-btn,
#visitor_details .visitor-admit-with-ids,
#visitor_details .visitor-admit-addplate,
#visitor_details .btn-doors-admit,
#visitor_details .btn-door,
#visitor_details .btn-dismiss,
#visitor_details .btn-remove-plate,
#visitor_details .btn-repeat-today,
#visitor_details .btn-repeat,
#visitor_details .btn-blue,
#visitor_details .btn-expired,
#visitor_details .btn-custom,
#visitor_details .btn-green {
  min-width: 78px !important;
}

.visitor-vip-label {
  display: inline-block;
  background-color: #ffd700;
  color: #000;
  font-weight: bold;
  font-size: 0.52rem;
  padding: 6px 6px 4px 6px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  line-height: 1;
}

.table td a {
  display: inline-flex;
}

#pinned_visitor_result_container .visitor-status-action-btn:hover {
  cursor: pointer;
}

#pinned_visitor_result_container .avatar.avatar-xl img {
  width: 100% !important;
  height: 100% !important;
}

#default-shortcuts .avatar {
  height: auto !important;
  width: auto !important;
  background: transparent;
}

#violation_details_container .resident-details img {
  object-fit: cover;
}

#violation_details_container #vehicle_details img {
  object-fit: cover;
}

.modal-open .popover {
  z-index: 10001;
}

#violationFrm .video-js .vjs-big-play-button,
#incidentFrm .video-js .vjs-big-play-button {
  font-size: 1em;
  width: 2em;
}

#violation_details_container #attachments img {
  object-fit: contain;
}

#default-shortcuts .shortcut {
  position: relative;
}

#default-shortcuts .shortcut .checkbox {
  position: absolute;
  /* right: 20px; */
  /* bottom: 10px; */
  height: 22px;
  width: 22px;
}

#video-tutorials {
  position: absolute;
  bottom: 70px;
  left: 22px;
  background: #1AD598;
  padding: 10px 12px;
  border-radius: 8px;
}

#video-tutorials a {
  color: #fff;
}

#swal2-content .select2-container {
  text-align: left !important;
}

#snapshot_camera label.card,
#document_camera label.card {
  position: relative;
  margin-bottom: 0 !important;
}

#snapshot_camera label.card .camera-type,
#document_camera label.card .camera-type {
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: 10001;
}

.switch-camera {
  z-index: 1001;
  position: absolute;
  bottom: 8px;
  right: 34px;
  background: transparent;
  /*padding: 4px;*/
  border: none;
}

#switch-lpr-camera {
  padding: 1px 4px !important;
}

.switch-headshot-camera,
.switch-identifi-camera {
  z-index: 1001;
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: transparent;
  padding: 4px;
  border: none;
}

.switch-camera .dropdown-toggle::after,
.switch-headshot-camera .dropdown-toggle::after,
.switch-identifi-camera .dropdown-toggle::after {
  display: none !important;
}

.switch-camera .dropdown-toggle,
.switch-headshot-camera .dropdown-toggle,
.switch-identifi-camera .dropdown-toggle {
  padding: 0 4px !important;
}

.switch-camera ul,
.switch-headshot-camera ul,
.switch-identifi-camera ul {
  background: #DBE2FD !important;
  padding: 4px !important;
}

#switch-camera-menu li:first-child a,
#switch-headshot-camera-menu li:first-child a,
#switch-identifi-camera-menu li:first-child a {
  border-top-left-radius: 8px; /* Top left corner radius for first item */
  border-top-right-radius: 8px; /* Top right corner radius for first item */
}

#switch-camera-menu li:last-child a,
#switch-headshot-camera-menu li:last-child a,
#switch-identifi-camera-menu li:last-child a {
  border-bottom-left-radius: 8px; /* Bottom left corner radius for last item */
  border-bottom-right-radius: 8px; /* Bottom right corner radius for last item */
}

#switch-camera-menu li .dropdown-item,
#switch-headshot-camera-menu li .dropdown-item,
#switch-identifi-camera-menu li .dropdown-item {
  color: #202B56;
  background-color: #DBE2FD;
}

#switch-camera-menu li .dropdown-item:hover,
#switch-camera-menu li .dropdown-item:focus,
#switch-headshot-camera-menu li .dropdown-item:hover,
#switch-headshot-camera-menu li .dropdown-item:focus,
#switch-identifi-camera-menu li .dropdown-item:hover,
#switch-identifi-camera-menu li .dropdown-item:focus {
  color: #FFFFFF;
  background-color: #202B56;
}

/*------------------*/
#camera_view_btn ul {
  background: #DBE2FD !important;
  padding: 4px !important;
}

#camera_view_btn ul li:first-child a {
  border-top-left-radius: 8px; /* Top left corner radius for first item */
  border-top-right-radius: 8px; /* Top right corner radius for first item */
}

#camera_view_btn ul li:last-child a {
  border-bottom-left-radius: 8px; /* Bottom left corner radius for last item */
  border-bottom-right-radius: 8px; /* Bottom right corner radius for last item */
}

#camera_view_btn ul li .dropdown-item {
  color: #202B56;
  background-color: #DBE2FD;
}

#camera_view_btn ul li .dropdown-item label {
  color: #202B56;
}

#camera_view_btn ul li .dropdown-item:hover label,
#camera_view_btn ul li .dropdown-item:focus label,
#camera_view_btn ul li .active label {
  color: #FFFFFF;
}

#camera_view_btn ul li .dropdown-item:hover,
#camera_view_btn ul li .dropdown-item:focus {
  color: #FFFFFF;
  background-color: #202B56;
}

#camera_view_btn ul li .active {
  color: #FFFFFF;
  background-color: #202B56;
}

#identification_camera .card-body {
  background: #F7F9FB;
  border-radius: 12px;
  min-height: 250px;
  border: 2px solid #E2E8EF;
}

#headshot_camera .card-body {
  background: #F7F9FB;
  border-radius: 12px;
  min-height: 250px;
  border: 2px solid #E2E8EF;
}

#headshot_webcam {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transform: scaleX(-1);
}

#identification_webcam {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transform: scaleX(-1);
}

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

#add_visitor_camera .card-body,
#drive_up_camera .card-body,
#walk_up_camera .card-body,
#approval_code_history .card-body,
#resident_special_instruction .card-body,
#resident_note_box .card-body,
#visitor_special_instruction .card-body {
  background: #F7F9FB;
  border-radius: 10px;
}

#system_camera {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transform: scaleX(-1);
}

#snapshot_camera video,
#document_camera video {
  width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: 12px;
  transform: scaleX(-1);
}

#system_camera_add_setting_modal {
  background: #f9f9f9;
  padding: 10px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}

#headshot_verkada {
  height: 250px;
  position: relative;
}

#identification_verkada {
  height: 250px;
  position: relative;
}

#headshot_verkada video,
#identification_verkada video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visitor-admit-with-ids {
  padding: 8px 24px;
}

#kiosk_create_visitor_content .main-card {
  background: #F7F9FB;
}

#visitor_history_resident_details .address-text,
#visitor_history_resident_details .email-text,
#visitor_history_resident_details .phone-text {
  font-size: 18px;
  line-height: 30px;
}

/* Define CSS classes for animation */
.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

.form-check-inline .form-check-input {
  margin-top: 1px !important;
}

#notificationFrm .form-check-inline .form-check-input {
  margin-top: 2px !important;
}

/* Wrap long text in Select2 selected items */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  white-space: normal !important; /* Allow wrapping */
  word-wrap: break-word; /* Break words if too long */
  line-height: 1.5; /* Adjust line height for readability */
  padding: 5px 10px; /* Add padding for better appearance */
}

/* Ensure the remove (cross) button is always visible */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  float: right; /* Align the remove button to the right */
  margin-left: 5px; /* Add some spacing */
}

#parking_setting_div .form-check-inline .form-check-input {
  margin-top: 1px !important;
}

#swal2-content .select2-container--default .select2-selection--single {
  min-height: 46px !important;
  padding: 8px !important;
}

#swal2-content .select2-container--default .select2-selection--single .select2-selection__arrow {
  min-height: 44px !important;
}

#swal2-content .select2-container--default .select2-selection--single:focus {
  box-shadow: none !important;
}

#swal2-content .select2-container--default .select2-selection--multiple {
  min-height: 46px !important;
}

#swal2-content .select2-container--default .select2-selection--multiple .select2-selection__rendered li .select2-search__field {
  margin-top: 10px !important;
}

#kiosk_create_visitor_content .select2-container--default .select2-selection--multiple .select2-selection__rendered li .select2-search__field {
  margin-top: 10px !important;
}

.kiosk-mode-info {
  background-color: #f8f9fa;
  border-left: 3px solid #202B56;
  padding: 12px 15px;
  border-radius: 4px;
}

.kiosk-mode-info-item {
  display: flex;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
}

.kiosk-mode-info-item i {
  margin-top: 2px;
  font-size: 14px;
  flex-shrink: 0;
}

.kiosk-mode-info-item span {
  color: #495057;
}

.kiosk-reason-section {
  background: linear-gradient(135deg, #fff9e6 0%, #fff3d6 100%);
  border-left: 4px solid #ffc107;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.kiosk-reason-section .text-dark {
  color: #202B56 !important;
  font-size: 14px;
}

.kiosk-reason-section .text-muted {
  color: #2c3e50 !important;
  font-weight: 500;
}

.kiosk-reason-section i {
  color: #ffc107;
  font-size: 16px;
}

.swal2-icon {
  margin: 1em auto 1em !important;
}

.lightbox {
  z-index: 100010 !important;
}

#otherReasonInput {
  height: 2.425em !important;
}

.show-me-how-swal-modal .swal2-content {
  padding-left: 2px;
  padding-right: 2px;
}

.notification-list-table .dropdown-menu {
  padding: 0 !important;
}

#add-visitor-pass {
  background: #eee;
  padding: 6px;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #ffffff;
  border-radius: 4px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #eaeaeb;
  border-radius: 4px;
  color: #272727;
}

.select2-container--default .select2-selection--multiple {
  margin-bottom: 10px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-radius: 4px;
}

.select2-container--default .select2-selection--multiple {
  border-width: 2px;
}

.select2-container--open .select2-dropdown--below {
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/*#resident_details_container #profile_details .resident_admit {*/
/*  background: #0baf0b !important;*/
/*  border-color: #0baf0b !important;*/
/*  position: absolute;*/
/*  left: 60px;*/
/*  top: 225px;*/
/*}*/

#resident_details_container #profile_details .resident_admit {
  left: 36px;
  top: 0;
}

#classic_view #resident_details_container #profile_details .resident_admit,
#camera_view #resident_details_container #profile_details .resident_admit {
  left: 36px;
  top: 24px;
}

#classic_view #resident_details_container #profile_details .door-buttons,
#camera_view #resident_details_container #profile_details .door-buttons {
  left: 52px;
  top: 15px;
}

#resident_details_container #profile_details .single-door .resident_admit {
  position: absolute;
}

.copy-text {
  padding: 20px;
  border: 2px dotted #ccc;
  border-radius: 12px;
  flex: 1;
  text-align: center;
  font-size: 20px;
}

.copy-button {
  border-radius: 6px;
  background: #007bff;
  padding: 10px;
  color: white;
  border: none;
}

.copy-button:hover {
  background-color: #0056b3;
}

#upcoming_vehicles .btn.active:focus,
#upcoming_vehicles .btn:active:focus,
#upcoming_vehicles .btn:focus {
  outline: none !important;
}

#special_instruction .custom-option-icon .form-check-input {
  height: 22px;
  width: 22px;
}

#special_instruction .custom-option {
  border: 2px solid;
}

#special_instruction .custom-option.checked {
  border: 2px solid #202B56;
}

#special_instruction .custom-option:hover {
  border: 2px solid;
}

#special_instruction .form-check-input:checked,
#visitor_instruction .form-check-input:checked,
#directory_options_form .form-check-input:checked,
#amenities_options_form .form-check-input:checked {
  background-color: #202B56;
  border-color: #202B56;
}

#visitor_instruction .form-check .form-check-input,
#directory_options_form .form-check .form-check-input,
#amenities_options_form .form-check .form-check-input {
  margin-left: -2em;
}

#visitor_instruction .form-check-input,
#directory_options_form .form-check-input,
#amenities_options_form .form-check-input {
  width: 1.6em;
  height: 1.6em;
  margin-top: 0;
}

#amenities_options_form .form-check {
  max-width: 260px;
}

#visitor_instruction .form-check .form-check-label,
#directory_options_form .form-check .form-check-label,
#amenities_options_form .form-check .form-check-label {
  font-size: 1rem !important;
}

#add_recipient_dialog .swal2-checkbox input[type="checkbox"],
#edit_recipient_dialog .swal2-checkbox input[type="checkbox"] {
  height: 18px;
  width: 18px;
}

#daily_reports_setting .card {
  box-shadow: 0 2px 14px rgba(38, 60, 85, 0.16) !important;
  min-height: 88px;
}

#btn-daily,
#btn-weekly {
  text-transform: uppercase;
  font-size: 12px;
  padding: 0 4px;
}

#btn-last-week,
#btn-this-week,
#btn-custom-week {
  text-transform: uppercase;
  font-size: 12px;
  padding: 2px 6px;
}

.datepicker .datepicker-days tr td.active ~ td,
.datepicker .datepicker-days tr td.active {
  color: #af1623 !important;
  background: transparent !important;
}

.datepicker .datepicker-days tr:hover td {
  color: #000;
  background: #e5e2e3;
  border-radius: 0;
}

#profile-settings .card,
#profile-settings .card .tab-content {
  background: #F7F9FB;
  border-radius: 8px;
}

#profile-settings .nav-pills .nav-link.active,
#profile-settings .nav-pills .nav-link.active:hover,
#profile-settings .nav-pills .nav-link.active:focus {
  color: #fff !important;
}

#profile-settings .nav-pills .nav-link.active,
#profile-settings .nav-pills .nav-link.active:hover,
#profile-settings .nav-pills .nav-link.active:focus {
  background: #202B56;
}

#profile-settings .nav.nav-pills,
#profile-settings .nav.nav-pills .nav-item {
  min-width: 268px !important;
}

#profile-settings .nav-link {
  text-align: center;
  font-weight: bold;
  padding: 15px;
}

#profile-settings .nav-pills .nav-link.active,
#profile-settings .nav-pills .nav-link.active:hover,
#profile-settings .nav-pills .nav-link.active:focus {
  padding: 15px;
}

#profile-settings .nav-pills .nav-item:not(:last-child) {
  border-bottom: 1px solid #d4d8dd !important;
}

/*Container for the main button and FABs*/
.btn-door-wrapper {
  position: relative;
  display: inline-block;
}

/*FAB Container, initially hidden*/
.fab-door-container {
  position: absolute;
  top: 45px;
  left: 0;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 10001;
}

.fab-door-container .fab-option {
  max-width: 200px;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.3s ease;
}

.fab-door-container .fab-option:hover {
  transform: scale(1.1);
}

/*Show the FAB options on hover of the main button*/
.btn-door-wrapper:hover .fab-door-container {
  display: flex;
  background: #202B56;
  padding: 10px;
  border-radius: 8px;
}

#swal2-content .btn-approve {
  padding: 20px 25px 16px 25px;
  font-weight: bold;
}

#swal2-content .btn-approve:hover {
  background: #0ed57f;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

#doors-swal-popup {
  width: 24em;
}

#resident-vehicle-settings .switch {
  margin-bottom: 4px;
}

#timestamp_on_photos .accordion-collapse {
  background: #fff;
}

#notification_alert_settings .accordion-collapse,
#notification_alert_settings .accordion-header {
  background: #fff;
}

#notification_alert_settings .switch-input:checked ~ .switch-toggle-slider {
  background: #202B56;
}

#layout-menu.expanded {
  width: 260px;
}

.main-menu.menu-light .navigation > li > ul > li:first-child > a {
  border-top: 0 solid #DFE3E7;
}

.main-menu.menu-light .navigation > li.nav-item.open.has-sub.open,
.main-menu.menu-light .navigation > li.nav-item.open.has-sub.sidebar-group-active,
.main-menu.menu-light .navigation > li.nav-item.sidebar-group-active.has-sub.open,
.main-menu.menu-light .navigation > li.nav-item.sidebar-group-active.has-sub.sidebar-group-active {
  border-radius: 8px;
  border: 0 solid rgba(90, 141, 238, 0.15);
  background-color: rgba(90, 141, 238, 0.15);
}

.main-menu.menu-light .navigation > li.nav-item.open > a,
.main-menu.menu-light .navigation > li.nav-item.sidebar-group-active > a {
  margin: 0;
  padding: 10px 10px 10px 10px;
}

/*.main-menu.menu-light .navigation li a {*/
/*  padding: 12px 10px 10px 14px;*/
/*}*/

.main-menu.menu-light .expanded .navigation li a {
  padding: 10px 10px 10px 10px;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation li.active a {
  background: #202B56;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation li a {
  display: grid;
}

#layout-menu .svg-inline--fa {
  height: 1.4em;
}

.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content > li > a > i {
  margin-right: 0.2em;
}

.main-menu.menu-light .navigation li a {
  color: #202B56;
}

.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:not(.mm-next):after {
  font-size: 22px;
  color: #202B56;
  font-weight: bold;
}

.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub.active > a:not(.mm-next):after {
  color: #ffffff;
}

.main-menu.menu-light .navigation > li.has-sub.open.active:not(.sidebar-group-active) > a {
  border-radius: 0.267rem 0.267rem 0 0;
}

.main-menu.menu-light .navigation li.has-sub ul {
  padding: 6px 0 6px 0;
  margin: -6px 0 0;
}

.main-menu.menu-light .navigation > li ul .active {
  border-radius: 8px;
}

.main-menu.menu-light .navigation > li ul .active:first-child {
  margin-top: 5px;
}

/*#main-menu-navigation .nav-item {*/
/*  border-radius: 8px;*/
/*  border: 0 solid rgba(90, 141, 238, 0.15);*/
/*  background-color: rgba(90, 141, 238, 0.15);*/
/*}*/


/*for date picker*/
.picker__day--disabled,
.picker__day--disabled:hover {
  background: #f3f3f3;
  color: #999999;
  cursor: default;
  border-radius: 50%;
  margin: 1px;
}

.picker__day--disabled:hover {
  opacity: 0.6;
}

#summary_report_box {
  border: 1px solid #efefef;
  border-radius: 8px;
  padding: 6px;
}

#full_report_box {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 6px;
}

#summary_report_box hr {
  color: #eee;
}

#full_report_box hr {
  color: #eee;
}

.reports-settings-swal2 .swal2-content {
  padding: 0 !important; /* Remove padding for content */
}

#report_type {
  margin-left: 6px;
}

.btn-circle {
  width: 20px;
  height: 20px;
  padding: 3px;
  text-align: center;
  font-size: 10px;
}

#task-list .task-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0 6px;
}

#task-list .list-group-item p {
  line-height: 1.2rem;
}

.incident-task-content {
  padding: 0 !important;
}

/*Style Saturdays and Sundays*/
.fc-day-sat, .fc-day-sun {
  background-color: #f9f9f9;
  pointer-events: none; /* Disable interactions */
}

.task-checkbox {
  height: 22px;
  width: 22px;
}

/*Container for the door buttons*/
.doors-container {
  position: relative;
  display: inline-block;
}

.swal2-actions .doors-container .door-buttons {
  background: #FFFFFF;
  padding: 0 12px;
}

/*door buttons container*/
.door-buttons {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* Initially hidden */
  border-radius: 8px;
  transform: translateX(-20px); /* Start off-screen slightly */
  transition: all 0.5s ease-out;
  pointer-events: none; /* Disable interaction initially */
  white-space: nowrap; /* Prevent wrapping of buttons */
  z-index: 10001;
}

.odd .door-buttons {
  background: #F7F7F7; /* Gray background for odd rows */
}

.even .door-buttons {
  background: #FFFFFF; /* White background for even rows */
}

.address-section .door-buttons {
  transform: translateX(0);
}

.address-section .doors-container.hover-active:hover .door-buttons, 
.address-section .doors-container.hover-active .door-buttons:hover {
  opacity: 1;
  transform: translateX(-90px);
  pointer-events: auto;
}

#resident_details_container .odd .door-buttons {
  background: #FFFFFF; /* Gray background for odd rows */
}

#resident_details_container .even .door-buttons {
  background: #F7F7F7; /* White background for even rows */
}

#result_recent_plate_scan .door-buttons {
  background: #F7F7F7; /* White background for even rows */
}

#visitor_details .door-buttons {
  background: #F7F7F7; /* White background for even rows */
}

#result_recent_kiosk_scan .door-buttons {
  background: #F7F7F7; /* White background for even rows */
  padding: 0 5px;
}

/*Extra buttons*/
.door-buttons .btn {
  display: inline-block; /* No flex */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.door-buttons .btn {
  margin-bottom: 0.5rem !important;
  margin-top: 0.5rem !important;
}

.door-buttons .btn:not(:last-child) {
  margin-right: 0.5rem !important;
}

#result_recent_plate_scan .door-buttons .btn {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

#visitor_details .door-buttons .btn {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Door buttons hover effect */
.door-buttons .btn-approve {
  transition: all 0.3s ease-in-out; /* Smooth transition for all properties */
  box-shadow: 0 0 0 0 #1AD598 inset, 0 0 0 0 #1AD598; /* Initial box-shadow */
}

.door-buttons .btn-clear {
  transition: all 0.3s ease-in-out; /* Smooth transition for all properties */
  box-shadow: 0 0 0 0 #F5BE2E inset, 0 0 0 0 #F5BE2E; /* Initial box-shadow */
}

.door-buttons .btn-approve:hover {
  box-shadow: 0 0 10px 0 #1AD598 inset, 0 0 10px 1px #1AD598; /* Glowing shadow */
}

.door-buttons .btn-clear:hover {
  box-shadow: 0 0 10px 0 #F5BE2E inset, 0 0 10px 1px #F5BE2E; /* Glowing shadow */
}

/*door main button */
.btn-door {
  position: relative;
  z-index: 2;
  transition: opacity 0.3s ease;
}

/*Hover effect (only active when .door-buttons is not empty) */
.doors-container.hover-active:hover .door-buttons,
.doors-container.hover-active .door-buttons:hover {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto; /* Enable interaction with buttons */
}

/*hide the main button on hover*/
.doors-container.hover-active:hover .btn-door {
  opacity: 0;
}

.door-btn {
  position: relative;
}

.door-btn .progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 213, 43, 0.2); /* Progress bar color */
  transform-origin: right; /* Sets the origin for the reverse fill */
  transition: width 0s; /* Prevents sudden changes */
  opacity: 0;
}

.door-btn.active .progress-bar {
  opacity: 1;
  animation: reverse-progress-anim 10s linear forwards; /* Trigger the reverse fill animation */
}

#alert-notification-center .list-group .list-group-item {
  background-color: #f7f7f7;
  border: 4px solid #ffffff;
  border-radius: 10px;
}

#notification_alert_item_details .fa-2x {
  font-size: 1.4em;
}

#list-group-time-location.list-group .list-group-item {
  border: 1px solid #ffffff !important;
}

#alert-notification-center .list-group .list-group-item:hover {
  cursor: pointer;
}

#notification_alert_list .item-active {
  border: 4px solid #bcbcbc !important;
}

#list-group-time-location.list-group .list-group-item {
  background-color: #06132c;
  border-radius: 0;
}

#list-group-time-location .list-group-item:first-child {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

#list-group-time-location .list-group-item:last-child {
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

.empty-state {
  width: auto;
  text-align: center;
  background: #ffffff;
}

.empty-state_icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state_message {
  color: #06152B;
  font-size: 1.5rem;
  font-weight: 500;
}

.empty-state_help {
  color: #a2a5b9;
  font-size: 0.875rem;
}

#notification_alert_list .alert-image {
  width: 100px;
  height: 75px;
  text-align: center;
  padding: 2px;
}

#notification_alert_list .alert-image a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#notification_alert_list .alert-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  vertical-align: middle; /* Align image vertically */
  line-height: normal; /* Reset line-height for images */
}

.alert {
  border-radius: 8px !important;
}

.toast {
  border-radius: 8px !important;
}

.toast-body {
  border-radius: 0 0 8px 8px !important;
}

.alert.alert-success {
  background: #1AD598 !important;
  color: #fff !important;
  box-shadow: 0 3px 8px 0 rgba(57, 218, 138, 0.4);
}

/* Parking Pass Availability (scoped) */
.parking-pass-availability {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e7ecf3;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(32, 43, 86, 0.08);
}

.parking-pass-availability .card-header {
  position: relative;
  padding: 1.05rem 1.25rem;
  background: #ffffff;
  border-bottom: 1px solid #eef2f7 !important;
}

.parking-pass-availability .card-header:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #202B56 0%, #5A8DEE 60%, #00CFDD 100%);
}

.parking-pass-availability .card-body {
  padding: 1.25rem;
}

.parking-pass-availability .badge.bg-primary {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #202B56 !important;
}

.parking-pass-availability .parking-pass-availability__title {
  letter-spacing: 0.06em;
  color: #202B56;
}

.parking-pass-availability .parking-pass-availability__subtitle {
  max-width: 520px;
}

.parking-pass-availability #resident_pass_cycle_label {
  font-weight: 600;
  background: #f6f8fc;
  border: 1px solid #e7ecf3 !important;
  color: #202B56 !important;
  padding-top: 6px;
}

.parking-pass-availability .ppa-tile {
  width: 100%;
  height: 100%;
  padding: 0.6rem;
  border-radius: 12px;
  border: 1px solid #e9edf3;
  background: #ffffff;
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.parking-pass-availability .ppa-tile:hover {
  box-shadow: 0 14px 34px rgba(32, 43, 86, 0.12);
  transform: translateY(-1px);
  border-color: #dbe3ef;
}

.parking-pass-availability .ppa-tile-clickable {
  cursor: pointer;
  user-select: none;
}

.parking-pass-availability .ppa-tile-clickable:hover {
  box-shadow: 0 16px 40px rgba(32, 43, 86, 0.16);
  transform: translateY(-3px);
  border-color: #202B56;
}

.parking-pass-availability .ppa-tile-clickable:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(32, 43, 86, 0.12);
}

.parking-pass-availability .ppa-tile--remaining {
  background: linear-gradient(180deg, rgba(90, 141, 238, 0.10) 0%, rgba(255, 255, 255, 1) 65%);
  border-color: rgba(90, 141, 238, 0.28);
}

.parking-pass-availability .ppa-tile--last {
  background: linear-gradient(180deg, rgba(0, 207, 221, 0.10) 0%, rgba(255, 255, 255, 1) 65%);
  border-color: rgba(0, 207, 221, 0.30);
}

.parking-pass-availability .ppa-tile--next {
  background: linear-gradient(180deg, rgba(253, 172, 65, 0.14) 0%, rgba(255, 255, 255, 1) 65%);
  border-color: rgba(253, 172, 65, 0.34);
}

.parking-pass-availability .ppa-tile--permit {
  background: linear-gradient(180deg, rgba(0, 207, 221, 0.12) 0%, rgba(255, 255, 255, 1) 65%);
  border-color: rgba(0, 207, 221, 0.30);
}

.parking-pass-availability .ppa-tile--used {
  background: linear-gradient(180deg, rgba(40, 167, 69, 0.12) 0%, rgba(255, 255, 255, 1) 65%);
  border-color: rgba(40, 167, 69, 0.30);
}

.parking-pass-availability .ppa-tile--purchased {
  background: linear-gradient(180deg, rgba(111, 66, 193, 0.12) 0%, rgba(255, 255, 255, 1) 65%);
  border-color: rgba(111, 66, 193, 0.30);
}

.parking-pass-availability .ppa-label {
  letter-spacing: 0.02em;
}

.parking-pass-availability .ppa-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.parking-pass-availability .ppa-tile--permit .ppa-icon {
  border: 1px solid rgba(0, 207, 221, 0.30) !important;
  background: rgba(0, 207, 221, 0.12) !important;
}

.parking-pass-availability .ppa-tile--purchased .ppa-icon {
  border: 1px solid rgba(111, 66, 193, 0.30) !important;
  background: rgb(238 232 247) !important;
}

.parking-pass-availability .ppa-tile--remaining .ppa-icon {
  background: rgba(90, 141, 238, 0.12) !important;
  border-color: rgba(90, 141, 238, 0.25) !important;
}

.parking-pass-availability .ppa-tile--last .ppa-icon {
  background: rgba(0, 207, 221, 0.12) !important;
  border-color: rgba(0, 207, 221, 0.25) !important;
}

.parking-pass-availability .ppa-tile--next .ppa-icon {
  background: rgba(253, 172, 65, 0.16) !important;
  border-color: rgba(253, 172, 65, 0.30) !important;
}

.parking-pass-availability .ppa-tile--used .ppa-icon {
  background: rgba(40, 167, 69, 0.14) !important;
  border-color: rgba(40, 167, 69, 0.28) !important;
}

.parking-pass-availability #resident_pass_used {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #202B56;
}

.parking-pass-availability #resident_pass_purchased {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #202B56;
}

.parking-pass-availability #resident_pass_permit {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #202B56;
}

#extra_passes_container .extra-pass-block {
  border: 1px solid #e7ecf3;
  border-radius: 14px;
  overflow: hidden;
}

#extra_passes_container .extra-pass-block .extra-pass-header {
  padding: 0.85rem 1rem;
  background: linear-gradient(90deg, rgba(32, 43, 86, 0.06) 0%, rgba(90, 141, 238, 0.06) 55%, rgba(0, 207, 221, 0.05) 100%);
  border-bottom: 1px solid #eef2f7;
}

#extra_passes_container .extra-pass-block .extra-pass-badge {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #202B56;
  color: #ffffff;
}

#extra_passes_container .extra-pass-block .extra-pass-body {
  padding: 1rem;
}

#extra_passes_container .extra-pass-block .extra-pass-remove {
  border-radius: 999px;
}

#add_pass_section .current-pass-panel {
  border: 1px solid #e7ecf3;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  padding: 0;
}

#add_pass_section .current-pass-header {
  padding: 0.85rem 1rem;
  background: linear-gradient(90deg, rgba(32, 43, 86, 0.06) 0%, rgba(90, 141, 238, 0.06) 55%, rgba(0, 207, 221, 0.05) 100%);
  border-bottom: 1px solid #eef2f7;
}

#add_pass_section .current-pass-badge {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #202B56;
  color: #ffffff;
}

#add_pass_section .current-pass-body {
  padding: 1rem;
}

#addMorePassBtn.add-more-pass-btn {
  border-radius: 8px;
  padding: 9px 10px;
  border-color: #202B56 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #202B56 0%, #2c3b78 100%) !important;
  font-weight: 700;
}

#addMorePassBtn.add-more-pass-btn:hover,
#addMorePassBtn.add-more-pass-btn:focus {
  border-color: #202B56 !important;
  background: linear-gradient(180deg, #2c3b78 0%, #3a54a2 100%) !important;
  color: #ffffff !important;
}

#add_pass_section .parking-pass-pricing {
  width: 100%;
  max-width: 420px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #e7ecf3;
  background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
  box-shadow: 0 10px 26px rgba(32, 43, 86, 0.08);
  padding: 0.9rem 1rem;
}

#add_pass_section .parking-pass-pricing:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #202B56 0%, #5A8DEE 65%, #00CFDD 100%);
}

#add_pass_section .parking-pass-pricing:hover {
  box-shadow: 0 14px 34px rgba(32, 43, 86, 0.12);
}

#add_pass_section .parking-pass-pricing__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #eef2f7;
}

#add_pass_section .parking-pass-pricing__title {
  font-weight: 800;
  color: #202B56;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
}

#add_pass_section .parking-pass-pricing__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  color: #202B56;
  background: rgba(90, 141, 238, 0.10);
  border: 1px solid rgba(90, 141, 238, 0.25);
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}

#add_pass_section .parking-pass-pricing__rows {
  display: grid;
  gap: 0.35rem;
}

#add_pass_section .parking-pass-pricing__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

#add_pass_section .parking-pass-pricing__label {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.82rem;
}

#add_pass_section .parking-pass-pricing__value {
  color: #202B56;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#add_pass_section .parking-pass-pricing__muted {
  color: #6b7280;
  font-weight: 700;
  margin-left: 0.25rem;
  font-size: 0.78rem;
}

#add_pass_section .parking-pass-pricing__row--total {
  margin-top: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(32, 43, 86, 0.12);
  background: linear-gradient(180deg, rgba(32, 43, 86, 0.06) 0%, rgba(90, 141, 238, 0.06) 100%);
}

#add_pass_section .parking-pass-pricing__row--total .parking-pass-pricing__label {
  color: #202B56;
  font-weight: 800;
}

#add_pass_section .parking-pass-pricing__row--total .parking-pass-pricing__value {
  font-size: 1.05rem;
}

#add_parking_pass_modal .owners-autocomplete-menu {
  border-radius: 12px;
  border: 1px solid #e7ecf3;
  box-shadow: 0 18px 40px rgba(32, 43, 86, 0.16);
  padding: 0.4rem;
  overflow: hidden;
}

#add_parking_pass_modal .owners-autocomplete-menu .ui-menu-item-wrapper {
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-weight: 700;
  color: #202B56;
}

#add_parking_pass_modal .owners-autocomplete-menu .ui-state-active {
  border: 1px solid rgba(90, 141, 238, 0.35) !important;
  background: rgba(90, 141, 238, 0.12) !important;
  color: #202B56 !important;
}

#add_parking_pass_modal .owners-autocomplete-menu .owners-autocomplete-empty {
  cursor: default;
}

#add_parking_pass_modal .owners-autocomplete-menu .owners-autocomplete-empty__inner {
  border-radius: 10px;
  border: 1px dashed #dbe3ef;
  background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
  padding: 0.75rem;
}

#add_parking_pass_modal .owners-autocomplete-menu .owners-autocomplete-empty__title {
  font-weight: 800;
  color: #202B56;
  display: flex;
  align-items: center;
}

#add_parking_pass_modal .owners-autocomplete-menu .owners-autocomplete-empty__hint {
  margin-top: 0.25rem;
  font-weight: 600;
  color: #6b7280;
  font-size: 0.82rem;
  line-height: 1.2;
}

.visitor-autocomplete-menu {
  border-radius: 12px;
  border: 1px solid #e7ecf3;
  box-shadow: 0 18px 40px rgba(32, 43, 86, 0.16);
  padding: 0.4rem;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 2055;
}

.visitor-autocomplete-menu .ui-menu-item-wrapper {
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-weight: 700;
  color: #202B56;
}

.visitor-autocomplete-menu .ui-state-active {
  border: 1px solid rgba(90, 141, 238, 0.35) !important;
  background: rgba(90, 141, 238, 0.12) !important;
  color: #202B56 !important;
}

.visitor-autocomplete-menu .visitor-autocomplete-empty,
.visitor-autocomplete-menu .visitor-autocomplete-action {
  cursor: default;
}

.visitor-autocomplete-menu .visitor-autocomplete-action {
  margin-top: 0.45rem;
}

.visitor-autocomplete-menu .visitor-autocomplete-empty__inner {
  border-radius: 10px;
  border: 1px dashed #dbe3ef;
  background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
  padding: 0.75rem;
}

.visitor-autocomplete-menu .visitor-autocomplete-empty__title {
  font-weight: 800;
  color: #202B56;
  display: flex;
  align-items: center;
}

.visitor-autocomplete-menu .visitor-autocomplete-empty__hint {
  margin-top: 0.25rem;
  font-weight: 600;
  color: #6b7280;
  font-size: 0.82rem;
  line-height: 1.2;
}

.visitor-autocomplete-menu .visitor-autocomplete-action__inner {
  border-radius: 10px;
  border: 1px solid rgba(26, 213, 152, 0.25);
  background: rgba(26, 213, 152, 0.08);
  padding: 0.65rem 0.75rem;
  display: flex;
  align-items: center;
  color: #202B56;
  font-weight: 900;
}

.visitor-autocomplete-menu .visitor-autocomplete-action .visitor-autocomplete-action__text {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.parking-pass-availability .ppa-icon i {
  color: #202B56;
}

.parking-pass-availability #resident_pass_remaining {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #202B56;
}

.parking-pass-availability #resident_last_pass_issued,
.parking-pass-availability #resident_next_eligible_date {
  font-size: 1.08rem;
  font-weight: 700;
  color: #202B56;
}

.parking-pass-availability .ppa-note {
  border-radius: 14px;
  border: 1px solid #e7ecf3;
  background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
}

.parking-pass-availability .ppa-note .fw-semibold {
  color: #202B56;
}

.parking-pass-availability .ppa-note__inner {
  gap: 0.75rem;
  padding: 0.95rem 1rem;
}

.parking-pass-availability .ppa-note__icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(90, 141, 238, 0.12);
  border: 1px solid rgba(90, 141, 238, 0.25);
  color: #202B56;
  flex: 0 0 auto;
}

.parking-pass-availability .ppa-note__title {
  font-weight: 800;
  color: #202B56;
  line-height: 1.2;
}

.parking-pass-availability .ppa-note__text {
  color: #6c757d;
}

#alert-notification-center .switch-input:checked ~ .switch-toggle-slider {
  background: #06152B !important;
}

.live-alert-setting-swal .switch-input:checked ~ .switch-toggle-slider {
  background: #06152B !important;
}


/* Directory component CSS styles */
#directory_card .directory-card {
  transition: all 0.3s ease;
  border-radius: 20px;
  overflow: hidden;
  border: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
}

#directory_card .directory-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(32,43,86,0.15) !important;
}

#directory_card .card-header {
  background: #EEEEEE;
  color: #202B56;
  padding: 0.6rem;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}

#directory_card .card-title {
  color: #202B56 !important;
  font-weight: bold;
  margin: 0;
  font-size: 1.25rem;
  position: relative;
  z-index: 1;
}

#directory_card .card-body {
  padding: 1.5rem;
}

#directory_card .contact-item {
  padding: 0.4rem;
  border-radius: 12px;
  transition: all 0.2s ease;
  margin-bottom: 0.2rem;
}

#directory_card .contact-item:hover {
  background-color: rgba(32,43,86,0.05);
  cursor: pointer;
}

#directory_card .card-header .fa2-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  margin-right: 0;
  font-size: 1rem;
  background: #1AD598;
  border-radius: 8px;
  padding: 0.6rem;
  transition: all 0.2s ease;
}

#directory_card .fa2-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #202B56;
  margin-right: 1rem;
  font-size: 1rem;
  background: rgba(32,43,86,0.1);
  border-radius: 8px;
  padding: 0.8rem;
  transition: all 0.2s ease;
}

#directory_card .contact-item:hover .fa2-icon {
  background: #202B56;
  color: white;
  transform: scale(1.1);
}

#directory_card .empty-field,
#directory_list .empty-field  {
  color: #a0a0a0;
  font-style: italic;
}

#directory_card .contact-text {
  font-weight: 500;
  color: #2c3e50;
}

#directory_list .directory-table {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  padding: 5px;
}

#directory_list .directory-table thead th {
  background: #eeeeee;
  color: #202B56;
  font-weight: bold;
  padding: 1rem;
  border: none;
}

#directory_list .directory-table tbody tr {
  transition: all 0.3s ease;
}

#directory_list .directory-table tbody tr:hover {
  background-color: rgba(32,43,86,0.05);
}

#directory_list .directory-table td {
  padding: 1rem;
  vertical-align: middle;
  border-color: rgba(32,43,86,0.1);
}

#directory_list .table.dataTable {
  border-collapse: collapse !important;
  border: none !important;
}

#directory_list .table-striped > thead > tr th:last-child {
  border-bottom-right-radius: 0 !important;
}

#directory_list .table-striped > thead > tr th:first-child {
  border-bottom-left-radius: 0 !important;
}

#directory_list .table-striped > tbody > tr td:first-child {
  border-top-left-radius: 0 !important;
}

#directory_list .table-striped > tbody > tr td:last-child {
  border-top-right-radius: 0 !important;
}

/* No Records Found Styles */
#directory_card .no-records {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

#directory_card .no-records-icon {
  font-size: 4rem;
  color: #202B56;
  margin-bottom: 1.5rem;
  opacity: 0.5;
}

#directory_card .no-records h3 {
  color: #202B56;
  font-weight: 600;
  margin-bottom: 1rem;
}

#directory_card .no-records p {
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

#directory_card .refresh-btn {
  background: #202B56;
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 25px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#directory_card .refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(32,43,86,0.2);
  color: white;
}

#directory-section .view-switcher .btn-group {
  border-radius: 4px;
}

#directory-section .view-switcher .btn-group .btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #202B56;
  line-height: 1;
  position: relative;
}

#directory-section .view-switcher .btn-group .btn:first-child {
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#directory-section .view-switcher .btn-group .btn:last-child {
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

#directory-section .view-switcher .btn-group .btn i {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#directory-section .view-switcher .btn-group .btn.active {
  background-color: #202B56;
  color: white;
  z-index: 2;
  border: 2px solid #202B56;
}

#directory-section .view-switcher .btn-group .btn:not(.active) {
  background-color: white;
  color: #202B56;
  border: 2px solid #D9E1E7 !important;
}

#directory-section .view-switcher .btn-group .btn:hover:not(.active) {
  background-color: rgba(32, 43, 86, 0.1);
}

.swal2-no-padding {
  padding: 0 !important;
}

.tbl-checkbox {
  height: 18px;
  width: 18px;
}


/* Custom Toggle Background */
.door-access-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #f8f9fa, #e6e9ec);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6;
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
}

.door-access-mode-toggle .form-check-input {
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

.door-access-mode-toggle .form-check-input:checked {
  background-color: #06152B;
  border-color: #06152B;
}

.badge-visitor-circle {
  display: inline-block; 
  width: 20px; 
  height: 20px; 
  border-radius: 50%;
  color: #FFFFFF; 
  text-align: center; 
  font-size: 12px; 
  line-height: 20px; 
  margin-right: 5px;
  font-weight: bold;
}

tr.urgent-row td {
  background-color: #FF4C4C !important; /* Slightly stronger red */
}

tr.attention-row td {
  background-color: #e5cc57 !important; /* Slightly stronger yellow */
}

tr.task-row td {
  background-color: #c12ec1 !important; /* Slightly stronger purple */
}

tr.task-dismiss td {
  background-color: #d35d2d !important;
}

.bg-label-purple {
  background-color: #fde0ff !important;
  color: #b01eb9 !important;
}

.urgent-row .bg-danger {
  background: rgb(253 27 29) !important;
}

#incident-tbl .badge {
  border: 2px solid;
}

/* Remove padding in SweetAlert2 content */
.swal2-content.no-padding-content {
  padding: 0 !important;
}

/* Add some CSS for sub-tasks */
.sub-task-item {
  transition: all 0.3s ease;
}

.sub-task-item:hover {
  box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
}

.border-left-primary {
  border-left: 0.25rem solid #4e73df !important;
}

.no-sub-tasks-message {
  border: 1px dashed #d1d3e2;
  border-radius: 0.35rem;
  margin: 0.5rem 0;
}

/* Recurring Task Styles */
.recurring-card,
.checkin-card {
  transition: all 0.3s ease;
  border-radius: 0.5rem;
  overflow: hidden;
}

.recurring-card:hover,
.checkin-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.recurring-card .card-header, 
.checkin-card .card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}


/* Task Details Page Custom Styles */
#task-module .icon-box {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(13, 110, 253, 0.1);
}

#task-module .fw-medium {
  font-weight: 500;
}

#task-module .card {
  transition: all 0.3s ease;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

#task-module .card-header {
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

#task-module .attachment-card {
  transition: all 0.2s ease;
}

#task-module .attachment-card:hover {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

#task-module .video-thumbnail {
  background-color: #f8f9fa;
  border-radius: 0.25rem;
  overflow: hidden;
}

#task-module .file-thumbnail {
  background-color: rgba(13, 110, 253, 0.05);
  border-radius: 0.25rem;
}

.arrow-toggle {
  font-size: 16px;
  cursor: pointer;
  padding: 10px;
  transition: transform 0.3s;
}

.arrow-toggle[aria-expanded="false"] {
  transform: rotate(90deg); /* rotate up to down when closed */
}

.subtask-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f8fafc;
}

.subtask-title {
  font-weight: 600;
  margin-bottom: 10px;
  color: #202B56;
}

.required-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 5px;
  background-color: #dc3545;
  color: white;
  vertical-align: middle;
}

.subtask-section {
  border-left: 3px solid #202B56;
  padding-left: 15px;
  margin-top: 15px;
}

.subtask-section-title {
  font-weight: 600;
  color: #202B56;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.subtask-section-title i {
  margin-right: 8px;
}

.subtask-priority {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #202B56;
  color: white;
  margin-right: 5px;
}

/* Task status enhancements */
.task-status-timeline .progress {
  height: 4px;
  border-radius: 2px;
}

.task-status-by-user .table th {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.task-status-by-user .badge {
  font-weight: 500;
  padding: 0.4em 0.65em;
}

.icon-box.bg-light {
  background-color: #f8f9fa !important;
}

/* Notification Styles */
.notification-group-title {
  color: #333;
  font-size: 1.4rem;
}

/* List item styling */
.list-group-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.list-group-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

/* Color-specific styles */
.list-group-item.green {
  background-color: #f8fffa;
  border-left: 4px solid #28a745 !important;
}

.list-group-item.red {
  background-color: #fff8f8;
  border-left: 4px solid #dc3545 !important;
}

.list-group-item.yellow {
  background-color: #fffdf8;
  border-left: 4px solid #ffc107 !important;
}

.list-group-item.purple {
  background-color: #faf8ff;
  border-left: 4px solid #6f42c1 !important;
}

.list-group-item.maroon {
  background-color: #fff8f8;
  border-left: 4px solid #800000 !important;
}

/* Icon styling */
.notification-icon-green, 
.notification-icon-red, 
.notification-icon-yellow, 
.notification-icon-purple, 
.notification-icon-maroon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-icon-green {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.notification-icon-red {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.notification-icon-yellow {
  background-color: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

.notification-icon-purple {
  background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

.notification-icon-maroon {
  background-color: rgba(128, 0, 0, 0.1);
  color: #800000;
}

/* Empty state styling */
.fa-bell-slash {
  opacity: 0.5;
}

/* Empty State Styling */
.empty-state-container {
  padding: 3rem 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.empty-state-icon {
  margin-bottom: 1.5rem;
}

.icon-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.1) 0%, rgba(67, 97, 238, 0.2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 10px 15px -3px rgba(67, 97, 238, 0.1), 0 4px 6px -2px rgba(67, 97, 238, 0.05);
}

.icon-circle i {
  font-size: 2.5rem;
  color: #4361ee;
}

.empty-state-title {
  color: #333;
  /* font-size: 1.75rem; */
  font-weight: 600;
}

.empty-state-description {
  color: #6c757d;
  font-size: 1.1rem;
  max-width: 400px;
  margin: 0 auto 2rem;
}

.empty-state-action .btn {
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.empty-state-action .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(67, 97, 238, 0.2);
}

input:focus ~ .bg-primary {
  box-shadow: none !important;
}

/* Modern Filter Form Styles */
.filter-form {
  margin-bottom: 20px;
}

.filter-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  background: linear-gradient(to right, #f8f9fa, #edf2f7);
  border-bottom: 1px solid #e9ecef;
}

.filter-header h5 {
  margin: 0;
  font-weight: 600;
  color: #495057;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.filter-header h5 i {
  margin-right: 8px;
  color: #6c757d;
}

.filter-actions {
  display: flex;
  gap: 10px;
}

.filter-actions .btn {
  padding: 6px 6px !important;
}

.filter-body {
  padding: 20px;
}

.filter-item {
  margin-bottom: 0;
}

.filter-item label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 500;
  color: #495057;
}

.filter-item label i {
  margin-right: 8px;
  color: #6c757d;
  font-size: 1rem;
}

.filter-item select,
.filter-item input {
  border-radius: 4px;
  border: 1px solid #ced4da;
  padding: 8px 12px;
  transition: all 0.2s ease;
  width: 100%;
}

.filter-item select:focus,
.filter-item input:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* End Modern Filter Form Styles */


#recurring-times-container .remove-recurring-time {
  height: 42px;
}


/* Camera Settings - Community Card */
#camera_settings .community-card {
  border: none;
  box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
}

#camera_settings .community-header {
  background-color: #202B56;
  color: white;
  padding: 1rem 1.5rem;
  border: none;
}

#camera_settings .community-header h6 {
  color: white;
}

#camera_settings .community-icon {
  font-size: 1.5rem;
  color: white;
}

#camera_settings .camera-count {
  background-color: white;
  color: #202B56;
  padding: 0.35rem 0.75rem;
  border-radius: 50px;
  font-weight: 500;
  font-size: 0.875rem;
}

#camera_settings .community-body {
  padding: 1.5rem;
}

#camera_settings .camera-grid {
  margin: 0 -0.75rem;
}

/* Camera Item Card */
#camera_settings .camera-item {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(32, 43, 86, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #f8f9fa;
  height: 100%;
  overflow: hidden;
}

#camera_settings .camera-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(32, 43, 86, 0.15);
}

#camera_settings .camera-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: rgb(32 43 86 / 19%);
}

#camera_settings .camera-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
}

#camera_settings .camera-type-badge i {
  margin-right: 0.35rem;
}

#camera_settings .type-lpr {
  background-color: rgba(0, 123, 255, 0.1);
  color: #007bff;
}

#camera_settings .camera-company {
  background-color: rgba(33, 37, 41, 0.1);
  color: #212529;
  padding: 0.25rem 0.5rem;
  border-radius: 50px;
}

#camera_settings .camera-content {
  padding: 1.25rem 1rem;
  background-color: white;
}

#camera_settings .camera-name {
  color: #202B56;
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

#camera_settings .camera-location {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

#camera_settings .location-icon {
  color: #202B56;
  background-color: rgba(32, 43, 86, 0.1);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 0.75rem;
}

#camera_settings .camera-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  background-color: rgb(32 43 86 / 19%);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Empty Camera Card Styles */
#camera_settings .empty-camera-card {
  border: none;
  box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
  border-radius: 12px;
  background-color: #fff;
}

#camera_settings .empty-camera-icon {
  font-size: 4rem;
  color: #202B56;
  display: block;
  opacity: 0.7;
}

#camera_settings .empty-camera-card h4 {
  color: #202B56;
  font-weight: 600;
}

#camera_settings .empty-camera-card p {
  color: #6c757d;
  font-size: 1rem;
}


/* Notification Alert Settings Styles */
#notification_alert_settings .notification-global-settings,
#notification_alert_settings .notification-cameras-container {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1rem rgba(147, 158, 170, 0.2);
}

#notification_alert_settings .notification-header {
  background-color: #202B56;
  color: white;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#notification_alert_settings .notification-header i {
  font-size: 1.25rem;
}

#notification_alert_settings .notification-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1rem;
}

#notification_alert_settings .notification-control {
  display: flex;
  align-items: flex-start;
  background-color: #f8f8fb;
  border-radius: 0.5rem;
  padding: 1.25rem;
  flex: 1;
  min-width: 300px;
  border-left: 4px solid #202B56;
  transition: all 0.3s ease;
}

#notification_alert_settings .notification-control:hover {
  box-shadow: 0 0.25rem 1rem rgba(147, 158, 170, 0.15);
}

#notification_alert_settings .notification-control-icon {
  font-size: 1.5rem;
  color: #202B56;
  margin-right: 1rem;
  padding-top: 0.25rem;
}

#notification_alert_settings .notification-control-content {
  flex: 1;
}

#notification_alert_settings .notification-control-desc {
  color: #6c757d;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

#notification_alert_settings .notification-community-card {
  background-color: #fff;
  border: 1px solid #e7e7ff;
  border-radius: 0.5rem;
  overflow: hidden;
}

#notification_alert_settings .notification-community-card:not(:last-child) {
  margin-bottom: 1rem;
}

#notification_alert_settings .notification-community-card .accordion-header {
  background-color: #f8f8fb;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e7e7ff;
}

#notification_alert_settings .community-title-container {
  display: flex;
  align-items: center;
}

#notification_alert_settings .community-title-container i {
  color: #202B56;
}

#notification_alert_settings .notification-community-card .accordion-button {
  padding: 0.5rem;
  font-weight: 600;
  color: #202B56;
  background: transparent;
  box-shadow: none;
  width: auto;
}

#notification_alert_settings .notification-community-card .accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  color: #202B56;
}

#notification_alert_settings .notification-community-card .accordion-button:focus {
  box-shadow: none;
}

#notification_alert_settings .notification-camera-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#notification_alert_settings .notification-camera-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #f0f0f7;
  transition: background-color 0.2s ease;
  text-transform: uppercase;
}

#notification_alert_settings .notification-camera-item:last-child {
  border-bottom: none;
}

#notification_alert_settings .notification-camera-item:hover {
  background-color: #f8f9fa;
}

#notification_alert_settings .camera-info {
  display: flex;
  align-items: center;
  font-weight: 500;
}

#notification_alert_settings .camera-info i {
  color: #202B56;
}

#notification_alert_settings .notification-empty-message {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  color: #6c757d;
  font-style: italic;
}

#notification_alert_settings .notification-empty-message i {
  color: #dc3545;
  font-size: 1.25rem;
}

#notification_alert_settings .switch-label {
  font-weight: 500;
}


/* Door Access Settings Styles */
#door_access_settings .door-access-card {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
}

#door_access_settings .door-access-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
}

#door_access_settings .door-access-section {
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

#door_access_settings .door-access-section:last-child {
  border-bottom: none;
}

#door_access_settings .section-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* #door_access_settings .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  margin: 0.75rem 0;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#door_access_settings .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#door_access_settings .user-group-section {
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  background-color: #edf1f6;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

#door_access_settings .user-group-section:hover {
  background-color: #f0f0f0;
}

#door_access_settings .user-group-section:last-child {
  margin-bottom: 0;
}

#door_access_settings .door-access-radio-group {
  display: flex;
  align-items: center;
}

#door_access_settings .door-access-radio-group .form-check-input:checked {
  background-color: #202B56;
  border-color: #202B56;
}

#door_access_settings .door-access-radio-group .form-check-label {
  font-size: 0.9rem;
}

#door_access_settings .form-check-input:focus {
  border-color: #202B56;
  box-shadow: 0 0 0 0.25rem rgba(32, 43, 86, 0.25);
}

#door_access_settings .switch-custom .switch-input:checked + .switch-toggle-slider {
  background-color: #202B56;
}


/* Stripe Integration Settings Styles */
#stripe_integration_settings_wrapper .stripe-integration-card {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
}

/* Stripe Accordion Active State */
#stripeSettingsAccordion .accordion-item {
  transition: all 0.3s ease;
}

#stripeSettingsAccordion .accordion-button:not(.collapsed) {
  background-color: #202B56 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(32, 43, 86, 0.2);
}

#stripeSettingsAccordion .accordion-button:not(.collapsed) .badge {
  background-color: #28a745 !important;
}

#stripeSettingsAccordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border: none !important;
  box-shadow: 0 4px 12px rgba(32, 43, 86, 0.15);
  transform: translateY(-2px);
}

/* QR Code Scan Control Settings Styles */
#qrcode_scan_control_settings .qrcode-scan-control-card {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
}

#qrcode_scan_control_settings .qrcode-scan-control-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
}

#qrcode_scan_control_settings .section-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* #qrcode_scan_control_settings .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  margin: 0.75rem 0;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#qrcode_scan_control_settings .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#qrcode_scan_control_settings .user-group-section {
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  background-color: #edf1f6;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

#qrcode_scan_control_settings .user-group-section:hover {
  background-color: #f0f0f0;
}

#qrcode_scan_control_settings .user-group-section:last-child {
  margin-bottom: 0;
}

#qrcode_scan_control_settings .qrcode-scan-control-radio-group {
  display: flex;
  align-items: center;
}

#qrcode_scan_control_settings .qrcode-scan-control-radio-group .form-check-input:checked {
  background-color: #202B56;
  border-color: #202B56;
}

#qrcode_scan_control_settings .qrcode-scan-control-radio-group .form-check-label {
  font-size: 0.9rem;
}

#qrcode_scan_control_settings .form-check-input:focus {
  border-color: #202B56;
  box-shadow: 0 0 0 0.25rem rgba(32, 43, 86, 0.25);
}

#qrcode_scan_control_settings .switch-custom .switch-input:checked + .switch-toggle-slider {
  background-color: #202B56;
}

/* Directory Options Settings Styles */
#directory_options_settings .directory-options-card {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
  padding: 0;
}

#directory_options_settings .directory-options-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
}

/* #directory_options_settings .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  margin: 0.75rem 0;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#directory_options_settings .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#directory_options_settings .directory-option-item {
  padding: 0.75rem;
  background-color: #edf1f6;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

#directory_options_settings .directory-option-item:hover {
  background-color: #f0f0f0;
}

#directory_options_settings .form-check-label {
  font-size: 1rem;
  font-weight: 500;
}

#directory_options_settings .form-check-label i {
  color: #202B56;
}

#stripe_integration_settings_wrapper .stripe-integration-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
}

/* Parking Pass Settings Styles */
#manage_buy_parking_pass_settings .parking-pass-settings-card {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
}

#manage_buy_parking_pass_settings .parking-pass-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
}

/* Note Box Styles */
/* #manage_buy_parking_pass_settings .note-box {
  background: linear-gradient(135deg, #f5f7ff 0%, #e8f0ff 100%);
  border-left: 4px solid #202B56;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
} */

/* #manage_buy_parking_pass_settings .note-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
} */

/* #manage_buy_parking_pass_settings .note-box i {
  color: #202B56;
  font-size: 1.1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
} */

/* #manage_buy_parking_pass_settings .note-box span {
  color: #4a5568;
  font-size: 0.9rem;
  line-height: 1.6;
} */

/* Enhanced Table Styles */
#manage_buy_parking_pass_settings .table-responsive {
  margin: 0;
  padding: 0;
}

#manage_buy_parking_pass_settings .table {
  margin-bottom: 0;
}

#manage_buy_parking_pass_settings .table td {
  vertical-align: middle;
  border: none;
}

#manage_buy_parking_pass_settings .table tbody tr {
  transition: all 0.3s ease;
}

#manage_buy_parking_pass_settings .table tbody tr:hover {
  background-color: #f8f9fc !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#manage_buy_parking_pass_settings .table tbody tr:hover td {
  color: #2c3e50;
}

#manage_buy_parking_pass_settings .avata img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#manage_buy_parking_pass_settings .avata:hover img {
  transform: scale(1.05);
}

#manage_buy_parking_pass_settings .avata > div {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#manage_buy_parking_pass_settings .avata:hover > div {
  transform: scale(1.05);
}

#manage_buy_parking_pass_settings .avata .position-absolute {
  transition: transform 0.3s ease;
}

#manage_buy_parking_pass_settings .avata:hover .position-absolute {
  transform: scale(1.1);
}

/* Center toggle switch in Actions column */
#manage_buy_parking_pass_settings .table td:last-child {
  text-align: center !important;
}

#manage_buy_parking_pass_settings .table td:last-child .form-switch {
  display: inline-block !important;
  margin: 0 auto !important;
}

#manage_buy_parking_pass_settings .table td:last-child .switch {
  position: relative !important;
  display: inline-block !important;
}

/* Status Badge Styles */
#manage_buy_parking_pass_settings .badge.bg-light-success {
  background-color: #e3fcef !important;
  border: 1px solid #b8e1d0;
}

#manage_buy_parking_pass_settings .badge.bg-light-secondary {
  background-color: #f5f5f9 !important;
  border: 1px solid #e3e3e8;
}

/* Summary Card Styles */
#manage_buy_parking_pass_settings .summary-card {
  transition: all 0.3s ease;
  border: none !important;
}

#manage_buy_parking_pass_settings .summary-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Directory Settings Styles */
#directory_settings .directory-settings-card {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

#directory_settings .directory-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
}

/* #directory_settings .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  margin: 0.75rem 0;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#directory_settings .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#directory_settings .directory-setting-item {
  padding: 1rem;
  background-color: #edf1f6;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

#directory_settings .directory-setting-item:hover {
  background-color: #f0f0f0;
}

#directory_settings .switch-custom .switch-input:checked + .switch-toggle-slider {
  background-color: #202B56;
}

#directory_settings .fs-7 {
  font-size: 0.875rem;
}

/* Timestamp Settings Styles */
#timestamp_on_photos_wrapper .timestamp-settings-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#timestamp_on_photos_wrapper .timestamp-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
}

/* #timestamp_on_photos_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  margin: 0.75rem 0;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#timestamp_on_photos_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#timestamp_on_photos_wrapper .timestamp-community-card {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  border-radius: 0.5rem;
  overflow: hidden;
}

#timestamp_on_photos_wrapper .accordion-button {
  background-color: #f8f9fa;
  color: #202B56;
  padding: 1rem;
  font-weight: 600;
}

#timestamp_on_photos_wrapper .accordion-button:not(.collapsed) {
  background-color: #edf1f6;
  color: #202B56;
  box-shadow: none;
}

#timestamp_on_photos_wrapper .accordion-button:focus {
  box-shadow: none;
  border-color: rgba(32, 43, 86, 0.25);
}

#timestamp_on_photos_wrapper .accordion-button::after {
  background-color: #202B56;
  border-radius: 50%;
  background-position: center;
  background-size: 12px;
  width: 24px;
  height: 24px;
}

#timestamp_on_photos_wrapper .timestamp-section-header {
  display: flex;
  align-items: center;
  color: #202B56;
}

#timestamp_on_photos_wrapper .timestamp-option-item {
  padding: 1rem;
  background-color: #edf1f6;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

#timestamp_on_photos_wrapper .timestamp-option-item:hover {
  background-color: #f0f0f0;
}

#timestamp_on_photos_wrapper .timestamp-divider {
  border-top: 1px solid #e0e0e0;
  margin: 1.2rem 0;
}

#timestamp_on_photos_wrapper .switch-custom .switch-input:checked + .switch-toggle-slider {
  background-color: #202B56;
}

#timestamp_on_photos_wrapper .fs-7 {
  font-size: 0.875rem;
}

#timestamp_on_photos_wrapper .empty-state {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  padding: 2rem;
}

#timestamp_on_photos_wrapper .empty-icon {
  font-size: 2.5rem;
  color: #adb5bd;
  display: block;
}

/* Visitor Settings Styles */
#add_visitors_wrapper .visitors-settings-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#add_visitors_wrapper .visitors-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
}

/* #add_visitors_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  margin: 0.75rem 0;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#add_visitors_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#add_visitors_wrapper .visitor-camera-item {
  padding: 1rem;
  background-color: #edf1f6;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  border-left: 3px solid #202B56;
}

#add_visitors_wrapper .visitor-camera-item:hover {
  background-color: #f0f0f0;
}


/* Violation Settings Styles */
#violation_settings_wrapper .violation-settings-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#violation_settings_wrapper .violation-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
}

/* #violation_settings_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#violation_settings_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#violation_settings_wrapper .violation-setting-item {
  padding: 1rem;
  background-color: #edf1f6;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

#violation_settings_wrapper .violation-setting-item:hover {
  background-color: #f0f0f0;
}

#violation_settings_wrapper .speed-settings-container {
  background-color: #f8f9fa;
  border-left: 4px solid #202B56;
  margin-top: 1rem;
}

#violation_settings_wrapper .speed-settings-header {
  display: flex;
  align-items: center;
  color: #202B56;
}

#violation_settings_wrapper .speed-input-group label {
  font-weight: 500;
  color: #202B56;
}

#violation_settings_wrapper .form-control-custom:focus {
  border-color: #202B56;
  box-shadow: 0 0 0 0.25rem rgba(32, 43, 86, 0.25);
}

#violation_settings_wrapper .input-group-text {
  background-color: #202B56;
  color: white;
  border-color: #202B56;
}

#violation_settings_wrapper .custom-checkbox .form-check-input:checked {
  background-color: #202B56;
  border-color: #202B56;
}

#violation_settings_wrapper .custom-radio .form-check-input:checked {
  background-color: #202B56;
  border-color: #202B56;
}

#violation_settings_wrapper .switch-custom .switch-input:checked + .switch-toggle-slider {
  background-color: #202B56;
}

#violation_settings_wrapper .fs-7 {
  font-size: 0.875rem;
}

#violation_settings_wrapper .btn-custom {
  background-color: #202B56;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

#violation_settings_wrapper .btn-custom:hover {
  background-color: #1a2347;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Parking Settings Styles */
#parking_settings_wrapper .parking-settings-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#parking_settings_wrapper .parking-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
}

#parking_settings_wrapper .parking-pass-section-header {
  background: #202B56;
  /* border-left: 4px solid #202B56; */
  /* border-bottom: 2px solid #e0e0e0; */
  border-radius: 8px;
  padding: 1rem 1.5rem;
  color: #fff;
}

#parking_settings_wrapper .parking-pass-section-header i {
  font-size: 1.25rem;
  color: #fff;
}

#parking_settings_wrapper .parking-pass-section-header span {
  letter-spacing: 0.5px;
}

/* #parking_settings_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#parking_settings_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#parking_settings_wrapper .parking-setting-item {
  padding: 1rem;
  background-color: #edf1f6;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

#parking_settings_wrapper .parking-setting-item:hover {
  background-color: #f0f0f0;
}

#parking_settings_wrapper .form-label {
  font-weight: 500;
  color: #202B56;
}

#parking_settings_wrapper .form-control-custom:focus {
  border-color: #202B56;
  box-shadow: 0 0 0 0.25rem rgba(32, 43, 86, 0.25);
}

#parking_settings_wrapper .input-group-text {
  background-color: #202B56;
  color: white;
  border-color: #202B56;
}

#parking_settings_wrapper .custom-checkbox .form-check-input:checked,
#parking_settings_wrapper .custom-radio .form-check-input:checked {
  background-color: #202B56;
  border-color: #202B56;
}

#parking_settings_wrapper .switch-custom .switch-input:checked + .switch-toggle-slider {
  background-color: #202B56;
}

#parking_settings_wrapper .fs-7 {
  font-size: 0.875rem;
}

#parking_settings_wrapper .btn-custom {
  background-color: #202B56;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

#parking_settings_wrapper .btn-custom:hover {
  background-color: #1a2347;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#parking_settings_wrapper .parking-settings-content {
  padding-top: 0.5rem;
}

#parking_settings_wrapper .time-period-options,
#parking_settings_wrapper .for-per-options {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.375rem;
  border-left: 3px solid #202B56;
}

#parking_settings_wrapper .days-input {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#parking_settings_wrapper small.text-muted {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}

/* Community Purchase Settings Accordion */
#parking_settings_wrapper #communityPurchaseSettingsAccordion .accordion-item {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  overflow: hidden;
}

#parking_settings_wrapper #communityPurchaseSettingsAccordion .accordion-button {
  background-color: #f8f9fa;
  color: #202B56;
  font-weight: 600;
  padding: 1rem 1.25rem;
}

#parking_settings_wrapper #communityPurchaseSettingsAccordion .accordion-button:not(.collapsed) {
  background-color: #202B56;
  color: white;
}

#parking_settings_wrapper #communityPurchaseSettingsAccordion .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(32, 43, 86, 0.25);
  border-color: #202B56;
}

#parking_settings_wrapper #communityPurchaseSettingsAccordion .accordion-button::after {
  filter: brightness(0) saturate(100%);
}

#parking_settings_wrapper #communityPurchaseSettingsAccordion .accordion-button:not(.collapsed)::after {
  filter: brightness(0) saturate(100%) invert(100%);
}

#parking_settings_wrapper #communityPurchaseSettingsAccordion .accordion-body {
  background-color: #ffffff;
  padding: 1.5rem;
}

#parking_settings_wrapper .community-purchase-settings {
  background-color: #f8f9fa;
  padding: 1.25rem;
  border-radius: 0.375rem;
  border-left: 3px solid #202B56;
}


/* Daily Reports Settings Styles */
#daily_reports_setting_wrapper .reports-header-card {
  background-color: #e7ebef;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #202B56;
}

#daily_reports_setting_wrapper .report-email-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

#daily_reports_setting_wrapper .report-email-card:hover {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important;
}

#daily_reports_setting_wrapper .report-email-header {
  background-color: #202B56;
  color: white;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

#daily_reports_setting_wrapper .btn-edit-recipient {
  background: linear-gradient(135deg, #1AD598 0%, #17c085 100%);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0.45rem 1.25rem;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(26, 213, 152, 0.3);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

#daily_reports_setting_wrapper .btn-edit-recipient:hover {
  background: linear-gradient(135deg, #17c085 0%, #14a872 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(26, 213, 152, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
}

#daily_reports_setting_wrapper .btn-edit-recipient:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(26, 213, 152, 0.3);
}

#daily_reports_setting_wrapper .btn-edit-recipient i {
  font-size: 0.875rem;
  margin-right: 0.35rem;
}

#daily_reports_setting_wrapper .report-section {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
}

#daily_reports_setting_wrapper .report-section-header {
  display: flex;
  align-items: center;
  color: #202B56;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
}

#daily_reports_setting_wrapper .report-options {
  padding-top: 0.5rem;
}

#daily_reports_setting_wrapper .report-option {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

#daily_reports_setting_wrapper .status-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

#daily_reports_setting_wrapper .status-success {
  background-color: #28a745;
  color: white;
}

#daily_reports_setting_wrapper .status-danger {
  background-color: #dc3545;
  color: white;
}

#daily_reports_setting_wrapper .option-text {
  font-size: 0.9rem;
}

#daily_reports_setting_wrapper .report-option-divider {
  height: 1px;
  background-color: #e9ecef;
  margin: 0.75rem 0;
}

#daily_reports_setting_wrapper .report-format-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

#daily_reports_setting_wrapper .empty-state {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  border: 1px dashed #dee2e6;
}


/* Trespass Settings Styles */
#trespass_settings_wrapper .trespass-settings-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#trespass_settings_wrapper .trespass-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 0;
}

/* #trespass_settings_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#trespass_settings_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#trespass_settings_wrapper .trespass-community-item {
  background-color: #e4ebf2;
  border-radius: 0.375rem;
  padding: 0.75rem;
  transition: all 0.2s ease;
  border-left: 3px solid #202B56;
}

#trespass_settings_wrapper .trespass-community-item:hover {
  background-color: #edf1f6;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#trespass_settings_wrapper .trespass-community-item .switch {
  margin-right: 2.75rem;
}


/* Default Shortcuts Settings Styles */
#shortcuts_settings_wrapper .shortcuts-settings-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#shortcuts_settings_wrapper .shortcuts-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 0;
}

#shortcuts_settings_wrapper .shortcuts-settings-header i {
  margin-right: 0.5rem;
}

/* #shortcuts_settings_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#shortcuts_settings_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#shortcuts_settings_wrapper .shortcuts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.5rem;
}

#shortcuts_settings_wrapper .shortcut-item {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  padding: 0.75rem;
  transition: all 0.2s ease;
  min-width: 120px;
  border: 1px solid #e9ecef;
}

#shortcuts_settings_wrapper .shortcut-item:hover {
  background-color: #edf1f6;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

#shortcuts_settings_wrapper .shortcut-item .avatar-name {
  max-width: 100px;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#shortcuts_settings_wrapper .add-shortcut {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #adb5bd;
  background-color: #f8f9fa;
}

#shortcuts_settings_wrapper .add-shortcut:hover {
  border-color: #202B56;
  background-color: #f0f2f5;
}

#shortcuts_settings_wrapper .search-card {
  background-color: #f2f8ff;
  border-left: 4px solid #202B56;
}

#shortcuts_settings_wrapper .form-check {
  display: flex;
  justify-content: center;
}

#shortcuts_settings_wrapper .form-check-input:checked {
  background-color: #202B56;
  border-color: #202B56;
}


/* Resident Vehicle Settings Styles */
#resident_vehicle_settings_wrapper .resident-settings-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#resident_vehicle_settings_wrapper .resident-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 0;
}

/* #resident_vehicle_settings_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#resident_vehicle_settings_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#resident_vehicle_settings_wrapper .approval-setting-item {
  background-color: #e4ebf2;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
  border-left: 3px solid #202B56;
}

#resident_vehicle_settings_wrapper .approval-setting-item:hover {
  background-color: #edf1f6;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#resident_vehicle_settings_wrapper .approval-setting-item .switch {
  margin-right: 2.75rem;
}


/* Drive-Up Camera Settings Styles */
#drive_up_settings_wrapper .camera-settings-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#drive_up_settings_wrapper .camera-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 0;
}

#drive_up_settings_wrapper .camera-setting-item {
  background-color: #edf1f6;
  border-radius: 0.375rem;
  padding: 1rem;
  transition: all 0.2s ease;
  border-left: 3px solid #202B56;
}

#drive_up_settings_wrapper .camera-setting-item:hover {
  background-color: #edf1f6;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#drive_up_settings_wrapper .camera-setting-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

/* #drive_up_settings_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#drive_up_settings_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

/* Walk-Up Camera Settings Styles */
#walk_up_settings_wrapper .camera-settings-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#walk_up_settings_wrapper .camera-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 0;
}

/* #walk_up_settings_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#walk_up_settings_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#walk_up_settings_wrapper .camera-setting-item {
  background-color: #edf1f6;
  border-radius: 0.375rem;
  padding: 1rem;
  transition: all 0.2s ease;
  border-left: 3px solid #202B56;
}

#walk_up_settings_wrapper .camera-setting-item:hover {
  background-color: #edf1f6;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#walk_up_settings_wrapper .camera-setting-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}


/* Special Instructions Styles */
#special_instruction_wrapper .special-instructions-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#special_instruction_wrapper .special-instructions-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 0;
}

/* #special_instruction_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#special_instruction_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#special_instruction_wrapper .special-instruction-item {
  height: 100%;
}

#special_instruction_wrapper .custom-option {
  border: 1px solid #e4e6ef;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  height: 100%;
}

#special_instruction_wrapper .custom-option:hover {
  border-color: #202B56;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#special_instruction_wrapper .custom-option.checked {
  border-color: #202B56;
  background-color: rgba(32, 43, 86, 0.05);
}

#special_instruction_wrapper .instruction-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

#special_instruction_wrapper .instruction-description {
  color: #6c757d;
  display: block;
  margin-top: 0.5rem;
}

#special_instruction_wrapper .custom-option-title {
  font-size: 1rem;
  color: #202B56;
}

/* Notes Settings Styles */
#note_box_wrapper .notes-settings-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#note_box_wrapper .notes-settings-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 0;
}

/* #note_box_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#note_box_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */


/* Visitor Instructions Styles */
#visitor_instruction_wrapper .visitor-instructions-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem;
}

#visitor_instruction_wrapper .visitor-instructions-header {
  background-color: #202B56;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 0;
}

/* #visitor_instruction_wrapper .note-box {
  background-color: #ededf5;
  border-left: 4px solid #202B56;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

#visitor_instruction_wrapper .note-box i {
  color: #202B56;
  margin-top: 0.2rem;
} */

#visitor_instruction_wrapper .visitor-instruction-options {
  background-color: #edf1f6;
  border-radius: 0.5rem;
  padding: 1rem;
  border-left: 3px solid #202B56;
}

#visitor_instruction_wrapper .visitor-instruction-item {
  padding: 0.5rem 0;
  border-bottom: 2px dashed #e4e6ef;
}

/* Tutorial Form Styles */
#tutorialFormContainer .tutorial-form-container {
  max-width: 1024px;
  margin: 0 auto;
}
                        
#tutorialFormContainer .card-header-custom {
  background: linear-gradient(to right, #f8f9fa, #edf2f7);
  padding: 1.5rem;
  border-radius: 0.5rem 0.5rem 0 0 !important;
}                  
                        
#tutorialFormContainer .card-header-custom h4 {
  color: #202B56 !important;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}                 
                        
#tutorialFormContainer .form-section-title {
  color: #202B56;
  font-weight: 600;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #eaeaea;
  position: relative;
}           
                        
#tutorialFormContainer .form-section-title:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background-color: #202B56;
}         
                        
#tutorialFormContainer .form-section-title i {
  margin-right: 10px;
  background-color: #202B56;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
                                              
#tutorialFormContainer .video-options-toggle {
  margin-bottom: 1.5rem;
}
                        
#tutorialFormContainer .video-options-toggle .btn-group {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 0.5rem;
  overflow: hidden;
}            
                        
#tutorialFormContainer .video-options-toggle .btn {
  padding: 0.75rem 1.5rem;
  border: none;
  font-weight: 600;
}                 
                        
#tutorialFormContainer .video-options-toggle .btn-outline-primary {
  color: #202B56;
  border-color: #202B56;
}
                        
#tutorialFormContainer .video-options-toggle .btn-outline-primary:hover,                     
#tutorialFormContainer .video-options-toggle .btn-outline-primary.active {
  background-color: #202B56;
  color: white;
}

#tutorialFormContainer .option-card {
  border: none;
  border-left: 5px solid #202B56;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  margin-bottom: 2rem;
  transition: all 0.3s ease;
  border-radius: 0.5rem;
  overflow: hidden;
}

#tutorialFormContainer .option-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

#tutorialFormContainer .option-card-header {
  background-color: #f8f9fa;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
}

#tutorialFormContainer .option-card-header h6 {
  font-weight: 600;
  color: #202B56;
}
                        
#tutorialFormContainer .option-card-header i {
  background-color: #e9ecef;
  color: #202B56;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

#tutorialFormContainer .option-card-body {
  padding: 1.5rem;
  background-color: white;
}           
                        
#tutorialFormContainer .dropzone {
  min-height: 180px;
  border: 2px dashed #202B56;
  background: #f8f9fa;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
} 

#tutorialFormContainer .dropzone:hover {
  border-color: #3a4675;
  background-color: #f1f3f9;
}

/*Tutorial Videos Modal Styling*/
.tutorial-modal-popup {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(32, 43, 86, 0.15);
  overflow: hidden;
  background: #fff;
}

.tutorial-modal-content {
  padding: 0 !important;
}

.tutorial-container h4.text-primary {
  color: #202B56 !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.tutorial-container hr {
  border-color: rgba(32, 43, 86, 0.2);
  margin-top: 0.75rem !important;
}

/* Video Grid Layout */
.tutorial-video-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

/* Card-based Design */
.tutorial-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(32, 43, 86, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid rgba(32, 43, 86, 0.1);
  margin-bottom: 1rem !important;
}

.tutorial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(32, 43, 86, 0.1);
}

.tutorial-card-header {
  background: #202B56;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(32, 43, 86, 0.1);
  border-radius: 10px 10px 0 0;
}

.tutorial-card-header h5 {
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.tutorial-card-header h5:before {
  content: '\f144';
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
  margin-right: 0.75rem;
  color: #fff;
  font-size: 1rem;
}

.tutorial-card-body p.text-muted {
  font-size: 0.9rem;
  color: #6c757d !important;
  margin-bottom: 1rem;
}

/* Metadata Styling */
.tutorial-metadata {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #6c757d;
}

.tutorial-metadata span {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}

.tutorial-metadata i {
  margin-right: 0.4rem;
  color: #202B56;
}

/*Video Container Styling*/
.tutorial-video-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #000;
}

.tutorial-video-container video,
.tutorial-video-container iframe {
  border-radius: 6px !important;
  width: 100% !important;
  height: 100% !important;
}


/*Dismiss Reason dialog*/
#dismiss-reason-dialog .reason-option {
  transition: all 0.2s ease;
  border-left: 3px solid transparent !important;
}

#dismiss-reason-dialog .reason-option:hover {
  transform: translateX(3px);
  background-color: #f8f9fa;
  border-left: 3px solid #202B56 !important;
}

#dismiss-reason-dialog .custom-control-input:checked ~ .custom-control-label .reason-icon {
  background-color: #e8f0fe !important;
}

#dismiss-reason-dialog .custom-control-input:checked ~ .custom-control-label {
  font-weight: 500;
}

#dismiss-reason-dialog .custom-control-input:checked + .custom-control-label::before {
  border-color: #202B56;
  background-color: #202B56;
}

#dismiss-reason-dialog .reason-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

#dismiss-reason-dialog .custom-control-label::before {
  top: 0.5rem;
}

#dismiss-reason-dialog .custom-control-label::after {
  top: 0.5rem;
}


/* Enhanced Target Type Selection Styles */
.target-type-card {
  border-left: 3px solid #202B56;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.target-type-header {
  background-color: rgba(32, 43, 86, 0.1);
  padding: 10px 15px;
  border-bottom: 1px solid rgba(32, 43, 86, 0.2);
}

.target-type-header h5 {
  margin-bottom: 0;
  color: #202B56;
  font-weight: 600;
}

.target-type-body {
  padding: 15px;
}

.target-type-option {
  padding: 10px;
  border-radius: 5px;
  transition: all 0.2s ease;
  background-color: rgba(32, 43, 86, 0.03);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  min-height: 100px;
}

.never-ends-option {
  padding: 10px;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.target-type-option:hover,
.never-ends-option:hover {
  background-color: rgba(32, 43, 86, 0.06);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.target-type-option .custom-control-label {
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.target-type-option .custom-control-label i {
  margin-right: 8px;
  color: #202B56;
  font-size: 16px;
}

.target-type-option .custom-control-input:checked ~ .custom-control-label::before {
  background: #202B56;
  border-color: #202B56;
}

.target-type-option .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(32, 43, 86, 0.25);
}


/* Plate Scan Details Styles */
.plate-details-card {
  margin-bottom: 1.5rem !important;
  border-radius: 0.375rem;
  border: 1px solid #e5e5e5;
}

.plate-details-card .card-header {
  background: #F7F9FB;
  color: #202B56;
  padding: 0.75rem 1rem;
  font-weight: 500;
  border-bottom: 0;
}

.plate-details-card .card-body {
  padding: 1.25rem;
}

.plate-details-label {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.plate-details-value {
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}

.plate-details-img-container {
  border: 1px solid #e5e5e5;
  border-radius: 0.375rem;
  padding: 0.75rem;
}

.plate-details-img-container img {
  width: 100%;
  object-fit: contain;
}

.plate-details-badge {
  font-size: 0.875rem;
  padding: 0.35rem 0.65rem;
  margin-right: 0.5rem;
}

.plate-details-badge.active {
  background-color: #28a745;
}

.plate-details-badge.inactive {
  background-color: #6c757d;
}

.plate-details-badge.plate {
  background-color: #202B56;
}

.plate-details-img-title {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.35rem;
  font-weight: 500;
  text-align: center;
}

.plate-details-empty-img {
  background: #f8f9fa;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  border-radius: 0.375rem;
}



/* ========================================
   Internal Alert View Page - Clean Design
   ======================================== */

/* Header Section */
#internal-alert-details .internal-alert-header {
  background: linear-gradient(135deg, #202B56 0%, #4a5a8f 100%);
  padding: 1rem;
}

#internal-alert-details .header-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
}

#internal-alert-details .header-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* Alert Badges Section */
#internal-alert-details .alert-badges-section {
  padding: 1.25rem 1.5rem;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

#internal-alert-details .alert-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
  color: #ffffff;
}

#internal-alert-details .badge-address {
  background: #17a2b8;
}

#internal-alert-details .badge-team {
  background: #17a2b8;
}

#internal-alert-details .badge-role {
  background: #28a745;
}

#internal-alert-details .badge-incident {
  background: #ffc107;
  color: #212529;
}

#internal-alert-details .badge-plate {
  background: #dc3545;
}

#internal-alert-details .badge-ends {
  background: #6c757d;
}

#internal-alert-details .section-header {
  background: #f8f9fa;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-size: 0.8125rem;
  color: #495057;
  border-bottom: 1px solid #e9ecef;
}

#internal-alert-details .section-body {
  padding: 1rem;
}

#internal-alert-details .card-body {
  border: 1px solid #D9E1E7;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Info Items */
#internal-alert-details .info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
}

#internal-alert-details .info-item:last-child {
  margin-bottom: 0;
}

#internal-alert-details .info-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 1rem;
}

#internal-alert-details .info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

#internal-alert-details .info-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
}

#internal-alert-details .info-value {
  font-size: 0.9375rem;
  color: #212529;
  font-weight: 400;
}

/* Team Members Grid */
#internal-alert-details .team-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

#internal-alert-details .member-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#internal-alert-details .member-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

#internal-alert-details .member-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e9ecef;
}

#internal-alert-details .member-photo-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2rem;
}

#internal-alert-details .member-info {
  flex: 1;
}

#internal-alert-details .member-name {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.25rem;
}

#internal-alert-details .member-email {
  font-size: 0.8125rem;
  color: #6c757d;
  margin-bottom: 0.125rem;
}

#internal-alert-details .member-phone {
  font-size: 0.8125rem;
  color: #6c757d;
  margin-bottom: 0;
}

/* Vehicle Info */
#internal-alert-details .vehicle-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Alert Note Content */
#internal-alert-details .alert-note-content {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #495057;
}

#internal-alert-details .alert-note-content p {
  margin-bottom: 0.75rem;
}

#internal-alert-details .alert-note-content strong {
  font-weight: 600;
  color: #212529;
}

#internal-alert-details .alert-note-content ol,
#internal-alert-details .alert-note-content ul {
  margin-left: 1.5rem;
  margin-bottom: 0.75rem;
}


/* ========================================
   QR Code Creation Form Styles
   ======================================== */

/* QR Type Section - Enhanced */
#qrcodepage .qr-type-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 1.5rem;
  border-radius: 8px;
  border: 2px dashed #202B56;
  position: relative;
}

#qrcodepage .qr-type-section::before {
  content: "REQUIRED";
  position: absolute;
  top: -12px;
  right: 20px;
  background: #dc3545;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
  z-index: 1;
}

#qrcodepage .qr-section-title {
  color: #202B56;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#qrcodepage .qr-section-title i {
  color: #202B56;
  font-size: 1.5rem;
  vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

#qrcodepage .qr-instruction-text {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 400;
  color: #6c757d;
  margin-bottom: 1.5rem;
  font-style: italic;
}

/* QR Type Cards */
#qrcodepage .qr-type-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

#qrcodepage .qr-type-card {
  position: relative;
  transition: all 0.3s ease;
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

#qrcodepage .qr-type-card:nth-child(1) {
  animation-delay: 0.1s;
}

#qrcodepage .qr-type-card:nth-child(2) {
  animation-delay: 0.2s;
}

#qrcodepage .qr-type-card:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#qrcodepage .qr-type-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#qrcodepage .qr-type-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
}

#qrcodepage .qr-type-label::before {
  content: "Click to select";
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(32, 43, 86, 0.1);
  color: #202B56;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#qrcodepage .qr-type-label:hover {
  border-color: #202B56;
  box-shadow: 0 4px 12px rgba(32, 43, 86, 0.1);
  transform: translateY(-2px);
}

#qrcodepage .qr-type-label:hover::before {
  opacity: 1;
}

#qrcodepage .qr-type-radio:checked + .qr-type-label {
  border-color: #202B56;
  background: linear-gradient(135deg, #202B56 0%, #2d3a6e 100%);
  color: white;
  box-shadow: 0 6px 16px rgba(32, 43, 86, 0.2);
}

#qrcodepage .qr-type-radio:checked + .qr-type-label::before {
  content: "✓ Selected";
  background: #28a745;
  color: white;
  opacity: 1;
}

#qrcodepage .qr-type-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f8;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#qrcodepage .qr-type-icon i {
  font-size: 1.5rem;
  color: #202B56;
}

#qrcodepage .qr-type-radio:checked + .qr-type-label .qr-type-icon {
  background: rgba(255, 255, 255, 0.2);
}

#qrcodepage .qr-type-radio:checked + .qr-type-label .qr-type-icon i {
  color: white;
}

#qrcodepage .qr-type-content {
  flex: 1;
}

#qrcodepage .qr-type-name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: inherit;
}

#qrcodepage .qr-type-desc {
  font-size: 0.875rem;
  margin: 0;
}

#qrcodepage .qr-type-radio:checked + .qr-type-label .qr-type-desc {
  color: rgba(255, 255, 255, 0.9);
}

/* Glow effect when no selection */
#qrcodepage .qr-type-cards:not(:has(.qr-type-radio:checked)) .qr-type-label {
  animation: gentleGlow 2s ease-in-out infinite;
}

@keyframes gentleGlow {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 4px 20px rgba(32, 43, 86, 0.3), 0 0 30px rgba(32, 43, 86, 0.1);
  }
}

/* Stop glow when selected */
#qrcodepage .qr-type-cards:has(.qr-type-radio:checked) .qr-type-label {
  animation: none;
}

/* Dim unselected cards */
#qrcodepage .qr-type-cards:has(.qr-type-radio:checked) .qr-type-card:not(:has(.qr-type-radio:checked)) {
  opacity: 0.5;
}

#qrcodepage .qr-type-cards:has(.qr-type-radio:checked) .qr-type-card:not(:has(.qr-type-radio:checked)):hover {
  opacity: 0.8;
}

/* Form Fields Container */
#qrcodepage .qr-form-fields {
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Info Section */
#qrcodepage .qr-info-section,
#qrcodepage .qr-validity-section,
#qrcodepage .qr-additional-section {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

/* Form Labels */
#qrcodepage .qr-form-fields .form-label {
  font-weight: 500;
  color: #333;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

#qrcodepage .qr-form-fields .form-label i {
  color: #202B56;
  font-size: 0.9rem;
}

/* Form Controls */
#qrcodepage .qr-form-fields .form-control,
#qrcodepage .qr-form-fields .form-select {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.770rem 0.875rem;
  transition: all 0.3s ease;
}

#qrcodepage .qr-form-fields .form-control:focus,
#qrcodepage .qr-form-fields .form-select:focus {
  border-color: #202B56;
  box-shadow: 0 0 0 0.2rem rgba(32, 43, 86, 0.15);
}

/* Info Alerts */
#qrcodepage .qr-info-alert {
  border-left: 4px solid #202B56;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

#qrcodepage .qr-info-alert i {
  margin-top: 0.125rem;
  flex-shrink: 0;
}

/* Validity Options */
#qrcodepage .validity-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

#qrcodepage .validity-option-card {
  position: relative;
}

#qrcodepage .validity-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#qrcodepage .validity-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem;
  background: #f8f9fa;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 100%;
}

#qrcodepage .validity-label:hover {
  border-color: #202B56;
  background: #f0f2f8;
  transform: translateY(-2px);
}

#qrcodepage .validity-radio:checked + .validity-label {
  border-color: #202B56;
  background: #202B56;
  color: white;
  box-shadow: 0 4px 12px rgba(32, 43, 86, 0.2);
}

#qrcodepage .validity-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease;
}

#qrcodepage .validity-icon i {
  font-size: 1.75rem;
  color: #202B56;
}

#qrcodepage .validity-radio:checked + .validity-label .validity-icon {
  background: rgba(255, 255, 255, 0.2);
}

#qrcodepage .validity-radio:checked + .validity-label .validity-icon i {
  color: white;
}

#qrcodepage .validity-content h6 {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: inherit;
}

#qrcodepage .validity-content p {
  font-size: 0.875rem;
  margin: 0;
}

#qrcodepage .validity-radio:checked + .validity-label .validity-content p {
  color: rgba(255, 255, 255, 0.9);
}

/* Duration and Scheduled Fields */
#qrcodepage .duration-fields,
#qrcodepage .scheduled-fields,
#qrcodepage .temporary-fields {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}


/* ========================================
   QR Code Details Page Styles
   ======================================== */

/* Card Styling */
#qrcode_details_container .qr-detail-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

#qrcode_details_container .qr-detail-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

#qrcode_details_container .qr-card-header {
  background: linear-gradient(135deg, #202B56 0%, #2d3a6e 100%);
  color: white;
  border-radius: 12px 12px 0 0 !important;
  padding: 1rem 1.5rem;
}

#qrcode_details_container .qr-card-header h5 {
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
}

/* Label and Value Styling */
#qrcode_details_container .qr-detail-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: block;
}

#qrcode_details_container .qr-detail-value {
  font-size: 1rem;
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 0;
  word-wrap: break-word;
}

#qrcode_details_container .qr-detail-subtext {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

/* Badge Styling */
#qrcode_details_container .qr-code-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
}

/* QR Type Badges */
#qrcode_details_container .qr-type-badge {
  padding: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
}

#qrcode_details_container .qr-type-resident {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

#qrcode_details_container .qr-type-visitor {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

#qrcode_details_container .qr-type-manual {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #2c3e50;
}

/* Validity Type Badges */
#qrcode_details_container .qr-validity-badge {
  padding: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
}

#qrcode_details_container .qr-validity-temporary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

#qrcode_details_container .qr-validity-permanent {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

/* Status Badges */
#qrcode_details_container .qr-status-badge {
  padding: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
}

#qrcode_details_container .qr-status-active {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: white;
}

#qrcode_details_container .qr-status-inactive {
  background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
  color: white;
}

/* Usage Badges */
#qrcode_details_container .qr-usage-badge {
  padding: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
}

#qrcode_details_container .qr-usage-used {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

#qrcode_details_container .qr-usage-unused {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #2c3e50;
}

/* DateTime Badges */
#qrcode_details_container .qr-datetime-badge {
  background: #f8f9fa;
  color: #495057;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-block;
  border: 1px solid #e9ecef;
}

/* Visitor Type Badge */
#qrcode_details_container .qr-visitor-type-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
}

/* Profile Images */
#qrcode_details_container .qr-profile-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f8f9fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Info Sections */
#qrcode_details_container .qr-info-section {
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #202B56;
}

#qrcode_details_container .qr-client-info,
#qrcode_details_container .qr-community-info {
  text-align: center;
}

/* Compact Info Sections */
#qrcode_details_container .qr-info-section-compact {
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #202B56;
}

#qrcode_details_container .qr-profile-img-small {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e9ecef;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

#qrcode_details_container .qr-detail-value-compact {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0;
}

#qrcode_details_container .qr-detail-subtext-compact {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

#qrcode_details_container .qr-divider {
  margin: 1rem 0;
  border-top: 1px solid #e9ecef;
  opacity: 0.5;
}

/* Header Section */
#qrcode_details_container h4 {
  color: #202B56;
  font-weight: 700;
}

/* Button Styling */
#qrcode_details_container .btn-primary {
  background: linear-gradient(135deg, #202B56 0%, #2d3a6e 100%);
  border: none;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#qrcode_details_container .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(32, 43, 86, 0.3);
}

#qrcode_details_container .btn-secondary {
  background: #6c757d;
  border: none;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#qrcode_details_container .btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}


/* ========================================
   Manual QR Code Type Cards
   ======================================== */

  #qrcodepage .manual-qr-type-card {
    position: relative;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #fff;
    height: 100%;
  }
  
  #qrcodepage .manual-qr-type-card:hover {
    border-color: #202B56;
    box-shadow: 0 4px 12px rgba(32, 43, 86, 0.15);
    transform: translateY(-2px);
  }
  
  #qrcodepage .manual-qr-radio {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  #qrcodepage .manual-qr-radio:checked + .manual-qr-label .manual-qr-type-card {
    border-color: #202B56 !important;
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e9f7 100%) !important;
    box-shadow: 0 6px 20px rgba(32, 43, 86, 0.3) !important;
    border-width: 3px !important;
    transform: translateY(-3px);
  }
  
  #qrcodepage .manual-qr-label {
    cursor: pointer;
    margin: 0;
    display: block;
  }
  
  #qrcodepage .manual-qr-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #202B56 0%, #2d3a6e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: all 0.3s ease;
  }
  
  #qrcodepage .manual-qr-icon i {
    font-size: 1.8rem;
    color: white;
  }
  
  #qrcodepage .manual-qr-radio:checked + .manual-qr-label .manual-qr-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(32, 43, 86, 0.3);
  }
  
  #qrcodepage .manual-qr-content {
    text-align: center;
  }
  
  #qrcodepage .manual-qr-content h6 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #202B56;
    margin-bottom: 0.5rem;
  }
  
  #qrcodepage .manual-qr-content p {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
  }
  
  /* Manual Sub Fields */
  #qrcodepage .manual-sub-fields {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
    border-left: 4px solid #202B56;
  }
  
  /* Info Alert for Manual QR */
  #qrcodepage .manual-sub-fields .qr-info-alert {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 8px;
    padding: 1rem;
  }
  
  #qrcodepage .manual-sub-fields .qr-info-alert strong {
    color: #202B56;
    font-size: 1rem;
  }
  
  #qrcodepage .manual-sub-fields .qr-info-alert p {
    font-size: 0.875rem;
    color: #495057;
  }
  
  #qrcodepage .manual-sub-fields .form-control-custom:focus,
  #qrcodepage .manual-sub-fields .form-select:focus {
    border-color: #202B56;
    box-shadow: 0 0 0 0.2rem rgba(32, 43, 86, 0.15);
  }
  
  #qrcodepage .manual-sub-fields .form-check-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #495057;
    margin-left: 0.5rem;
    cursor: pointer;
  }

  /* ========================================
     Security Tour Checkpoint Styles
     ======================================== */
  
  #qrcodepage .checkpoint-type-selection {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
  }

  #qrcodepage .checkpoint-type-selection .form-check-inline {
    margin: 0;
  }

  #qrcodepage .checkpoint-type-selection .form-check-label {
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
  }

  #qrcodepage .checkpoint-type-selection .form-check-label:hover {
    background: #e9ecef;
    color: #202B56;
  }

  #qrcodepage .checkpoint-type-selection .checkpoint-type-radio:checked + .form-check-label {
    background: #202B56;
    color: #ffffff;
  }

  #qrcodepage .checkpoint-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #ffffff;
  }

  #qrcodepage .checkpoint-card:hover {
    border-color: #202B56;
    box-shadow: 0 2px 8px rgba(32, 43, 86, 0.1);
  }

  #qrcodepage .checkpoint-card-header {
    background: linear-gradient(135deg, #202B56 0%, #2c3e7a 100%);
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #1a2142;
  }

  #qrcodepage .checkpoint-card-header h6 {
    color: #ffffff;
    font-weight: 600;
    margin: 0;
    font-size: 0.9rem;
  }

  #qrcodepage .checkpoint-card-header .remove-checkpoint-btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    border: none;
    background: rgba(220, 53, 69, 0.9);
    color: #ffffff;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  #qrcodepage .checkpoint-card-header .remove-checkpoint-btn:hover {
    background: #dc3545;
    transform: scale(1.05);
  }

  #qrcodepage .checkpoint-card-body {
    padding: 0.75rem;
    background: #ffffff;
  }

  #qrcodepage .checkpoint-card-body .form-label {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }

  #qrcodepage .checkpoint-card-body .form-control {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  #qrcodepage .checkpoint-card-body .form-text {
    font-size: 0.75rem;
    margin-top: 0.15rem;
  }

  #qrcodepage .checkpoint-card-body .mb-3 {
    margin-bottom: 0.75rem !important;
  }

  #qrcodepage .checkpoint-order-field {
    transition: all 0.3s ease;
  }

  /* Hide extra fields when they have display:none */
  #qrcodepage .checkpoint-extra-field[style*="display: none"] {
    display: none !important;
  }

  #qrcodepage #addCheckpointBtnContainer {
    margin-top: 0.25rem;
  }

  #qrcodepage .add-checkpoint-btn {
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    background: linear-gradient(135deg, #202B56 0%, #2c3e7a 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(32, 43, 86, 0.2);
    transition: all 0.3s ease;
    white-space: nowrap;
  }

  #qrcodepage .add-checkpoint-btn:hover {
    background: linear-gradient(135deg, #2c3e7a 0%, #202B56 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(32, 43, 86, 0.3);
    color: #ffffff;
  }

  #qrcodepage .add-checkpoint-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(32, 43, 86, 0.2);
  }

  #qrcodepage .add-checkpoint-btn i {
    font-size: 0.85rem;
  }

  #qrcodepage .tour-settings-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
  }

  #qrcodepage .tour-settings-card h6 {
    color: #202B56;
    font-weight: 600;
    border-bottom: 2px solid #202B56;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }

  #qrcodepage .tour-settings-card .form-check-label {
    font-weight: 500;
    color: #495057;
  }

  #qrcodepage .tour-settings-card .form-text {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #6c757d;
  }

  /* ========================================
     Checkpoint View Card Styles (View Page)
     ======================================== */
  
  #qrcode_details_container .checkpoint-view-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #ffffff;
    height: 100%;
  }

  #qrcode_details_container .checkpoint-view-card:hover {
    border-color: #202B56;
    box-shadow: 0 2px 8px rgba(32, 43, 86, 0.1);
    transform: translateY(-2px);
  }

  #qrcode_details_container .checkpoint-view-header {
    background: linear-gradient(135deg, #202B56 0%, #2c3e7a 100%);
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
  }

  #qrcode_details_container .checkpoint-view-number {
    color: #ffffff;
  }

  #qrcode_details_container .checkpoint-view-body {
    padding: 0.75rem;
  }

  #qrcode_details_container .checkpoint-view-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #202B56;
    margin-bottom: 0.5rem;
  }

  #qrcode_details_container .checkpoint-view-code {
    margin-bottom: 0;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
  }

  #qrcode_details_container .checkpoint-code-badge {
    background: #f8f9fa;
    color: #202B56;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid #e9ecef;
  }

  #qrcode_details_container .checkpoint-view-body .download-checkpoint-qr {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #202B56 0%, #2c3e7a 100%);
    border: none;
    transition: all 0.3s ease;
  }

  #qrcode_details_container .checkpoint-view-body .download-checkpoint-qr:hover {
    background: linear-gradient(135deg, #2c3e7a 0%, #202B56 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(32, 43, 86, 0.3);
  }

  #qrcode_details_container .checkpoint-view-body .download-checkpoint-qr:active {
    transform: translateY(0);
  }

  /* ========================================
     Information QR Code Styles (View Page)
     ======================================== */
  
  #qrcode_details_container .info-role-badge {
    background: linear-gradient(135deg, #202B56 0%, #2c3e7a 100%);
    color: #ffffff;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 6px;
  }

  #qrcode_details_container .info-type-badge {
    background: #f8f9fa;
    color: #202B56;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #e9ecef;
    border-radius: 6px;
  }

  #qrcode_details_container .info-content-box {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    color: #495057;
    font-size: 0.95rem;
  }

  #qrcode_details_container .info-url-link {
    color: #202B56;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  #qrcode_details_container .info-url-link:hover {
    color: #2c3e7a;
    text-decoration: underline;
  }

  #qrcode_details_container .info-document-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #202B56 0%, #2c3e7a 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  #qrcode_details_container .info-document-link:hover {
    background: linear-gradient(135deg, #2c3e7a 0%, #202B56 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(32, 43, 86, 0.2);
  }

  /* ========================================
     Manual QR Type Badge (View Page)
     ======================================== */
  
  #qrcode_details_container .qr-validity-security-tour {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #ffffff;
  }

  #qrcode_details_container .qr-validity-information {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: #ffffff;
  }



  /* ========================================
   QR Code Attachment Display Styles (Scoped to QR Code Page Only)
   ======================================== */

/* Main Container */
#qrcodepage .uploaded-attachment-container {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-top: 10px;
}

/* Preview Wrapper */
#qrcodepage .attachment-preview-wrapper {
  margin-bottom: 15px;
}

/* Image Preview Styles */
#qrcodepage .attachment-preview-box {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dee2e6;
}

#qrcodepage .attachment-preview-image {
  width: 100%;
  max-width: 250px;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: #fff;
}

#qrcodepage .attachment-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  padding: 15px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#qrcodepage .attachment-preview-box:hover .attachment-overlay {
  opacity: 1;
}

/* Video Preview Styles */
#qrcodepage .attachment-preview-video {
  width: 100%;
  max-width: 300px;
  max-height: 200px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
  background: #000;
}

.fancybox__image.fancybox--small-image {
  width: 280px !important;
  height: 220px !important;
  max-width: none !important;
  max-height: none !important;
}

.fancybox__content:has(.fancybox--small-image) {
  width: 280px !important;
  height: 220px !important;
}


/* File Card Styles (for PDF, DOC, etc.) */
#qrcodepage .attachment-file-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#qrcodepage .attachment-file-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #202B56;
}

/* File Icon Styles */
#qrcodepage .attachment-file-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 28px;
}

#qrcodepage .attachment-file-icon.pdf-icon {
  background: #fff5f5;
  color: #dc3545;
}

#qrcodepage .attachment-file-icon.doc-icon {
  background: #f0f7ff;
  color: #2b5797;
}

#qrcodepage .attachment-file-icon.generic-icon {
  background: #f8f9fa;
  color: #6c757d;
}

/* File Info Styles */
#qrcodepage .attachment-file-info {
  flex: 1;
  min-width: 0;
}

#qrcodepage .attachment-file-name {
  font-weight: 600;
  font-size: 14px;
  color: #202B56;
  margin-bottom: 5px;
  word-break: break-word;
}

#qrcodepage .attachment-file-type {
  font-size: 12px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* File Actions */
#qrcodepage .attachment-file-actions {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Info Footer */
#qrcodepage .attachment-info-footer {
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
  margin-top: 15px;
}

#qrcodepage .attachment-info-footer small {
  display: flex;
  align-items: center;
  color: #6c757d;
}

/* Responsive Design */
@media (max-width: 768px) {
  #qrcodepage .attachment-file-card {
    flex-direction: column;
    text-align: center;
  }

  #qrcodepage .attachment-file-info {
    text-align: center;
  }

  #qrcodepage .attachment-file-actions {
    justify-content: center;
    width: 100%;
  }

  #qrcodepage .attachment-preview-image {
    max-width: 100%;
    max-height: 180px;
  }

  #qrcodepage .attachment-preview-video {
    max-width: 100%;
    max-height: 300px;
  }

  #qrcodepage .attachment-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
  }
}

@media (max-width: 576px) {
  #qrcodepage .uploaded-attachment-container {
    padding: 15px;
  }

  #qrcodepage .attachment-file-card {
    padding: 15px;
  }

  #qrcodepage .attachment-file-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }

  #qrcodepage .attachment-file-actions {
    flex-direction: column;
    width: 100%;
  }

  #qrcodepage .attachment-file-actions .btn {
    width: 100%;
  }
}


/* ========================================
   CAMERA & DOOR SETTINGS PAGE STYLES
======================================== */

/* Section Headers */
#door_camera_settings .settings-section-header {
  padding: 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-left: 5px solid #202B56;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#door_camera_settings .camera-section-header {
  border-left-color: #0d6efd;
  background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%);
}

#door_camera_settings .door-section-header {
  border-left-color: #198754;
  background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
}

#door_camera_settings .section-title {
  color: #202B56;
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0;
}

/* Section Icon Wrappers */
#door_camera_settings .section-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

#door_camera_settings .camera-icon-wrapper {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
  color: white;
}

#door_camera_settings .door-icon-wrapper {
  background: linear-gradient(135deg, #198754 0%, #146c43 100%);
  color: white;
}

#door_camera_settings .section-icon-wrapper:hover {
  transform: scale(1.05);
}

/* Section Divider */
#door_camera_settings .settings-section-divider {
  position: relative;
  text-align: center;
  margin: 3rem 0;
}

#door_camera_settings .divider-line {
  height: 3px;
  background: linear-gradient(to right, transparent, #202B56, transparent);
  position: relative;
}

#door_camera_settings .divider-line::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: white;
  border: 3px solid #202B56;
  border-radius: 50%;
  box-shadow: 0 0 0 8px white;
}

/* Camera Item Cards */
#door_camera_settings .camera-item-card {
  background: white;
  border: 2px solid #e3f2fd;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.08);
  transition: all 0.3s ease;
  position: relative;
}

#door_camera_settings .camera-item-card:hover {
  border-color: #0d6efd;
  box-shadow: 0 4px 16px rgba(13, 110, 253, 0.15);
  transform: translateY(-2px);
}

#door_camera_settings .camera-item-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e3f2fd;
}

#door_camera_settings .camera-badge {
  display: inline-block;
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2);
}

/* Door Item Cards */
#door_camera_settings .door-item-card {
  background: white;
  border: 2px solid #d1e7dd;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(25, 135, 84, 0.08);
  transition: all 0.3s ease;
  position: relative;
}

#door_camera_settings .door-item-card:hover {
  border-color: #198754;
  box-shadow: 0 4px 16px rgba(25, 135, 84, 0.15);
  transform: translateY(-2px);
}

#door_camera_settings .door-item-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #d1e7dd;
}

#door_camera_settings .door-badge {
  display: inline-block;
  background: linear-gradient(135deg, #198754 0%, #146c43 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(25, 135, 84, 0.2);
}

/* Dragging State */
#door_camera_settings .camera-item-card.ui-sortable-helper {
  opacity: 0.8;
  transform: rotate(2deg);
  box-shadow: 0 8px 24px rgba(13, 110, 253, 0.3);
}

#door_camera_settings .door-item-card.ui-sortable-helper {
  opacity: 0.8;
  transform: rotate(2deg);
  box-shadow: 0 8px 24px rgba(25, 135, 84, 0.3);
}


/* ============================================
   Security Company Invitation - Modern Design
   ============================================ */

/* Main Container */
.security-invite-container {
  background: #ffffff;
  border-radius: 0;
}

.security-invite-wrapper {
  padding: 0;
}

/* ============================================
   FORM SECTION
   ============================================ */

.security-invite-form-section {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Form Header */
.security-invite-form-header {
  background: linear-gradient(135deg, #202B56 0%, #2c3e6d 100%);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.security-invite-form-header-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.security-invite-form-header-icon i {
  font-size: 1.75rem;
  color: #ffffff;
}

.security-invite-form-header-content {
  flex: 1;
}

.security-invite-form-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.5px;
}

.security-invite-form-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

/* Form Body */
.security-invite-form-body {
  padding: 1rem;
  background: #ffffff;
}

.security-invite-form-group {
  margin-bottom: 2rem;
}

.security-invite-form-group:last-child {
  margin-bottom: 0;
}

.security-invite-input-wrapper {
  width: 100%;
}

/* Form Labels */
.security-invite-form-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #202B56;
}

.security-invite-form-label i {
  font-size: 1rem;
  color: #202B56;
  width: 20px;
  text-align: center;
}

/* Select Input */
.security-invite-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  border: 2px solid #e0e6ed;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: #ffffff;
}

.security-invite-select:focus {
  border-color: #202B56;
  box-shadow: 0 0 0 3px rgba(32, 43, 86, 0.1);
  outline: none;
}

/* Search Wrapper */
.security-invite-search-wrapper {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.security-invite-search-input {
  flex: 1;
  padding: 0.875rem 1.25rem;
  font-size: 0.95rem;
  border: 2px solid #e0e6ed;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: #ffffff;
}

.security-invite-search-input:focus {
  border-color: #202B56;
  box-shadow: 0 0 0 3px rgba(32, 43, 86, 0.1);
  outline: none;
}

.security-invite-search-input::placeholder {
  color: #a0aec0;
}

/* Submit Button */
.security-invite-submit-btn {
  background: linear-gradient(135deg, #202B56 0%, #2c3e6d 100%);
  color: #ffffff;
  border: none;
  padding: 0.875rem 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: pointer;
}

.security-invite-submit-btn:hover {
  background: linear-gradient(135deg, #1a2142 0%, #202B56 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(32, 43, 86, 0.3);
}

.security-invite-submit-btn:active {
  transform: translateY(0);
}

.security-invite-submit-btn i {
  font-size: 0.9rem;
}

/* Help Text */
.security-invite-form-help {
  display: block;
  margin-top: 0.5rem;
  color: #718096;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ============================================
   COMPANIES SECTION
   ============================================ */

.security-invite-companies-section {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Companies Header */
.security-invite-companies-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-bottom: 2px solid #e0e6ed;
}

.security-invite-companies-header-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #202B56 0%, #2c3e6d 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.security-invite-companies-header-icon i {
  font-size: 1.5rem;
  color: #ffffff;
}

.security-invite-companies-header-content {
  flex: 1;
}

.security-invite-companies-title {
  color: #202B56;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.35rem 0;
  letter-spacing: -0.5px;
}

.security-invite-companies-subtitle {
  color: #718096;
  font-size: 0.9rem;
  margin: 0;
}

/* Companies List */
.security-invite-companies-list {
  padding: 1.5rem;
  background: #ffffff;
}

/* Company Item */
.security-company-item {
  margin-bottom: 1.25rem;
}

.security-company-item:last-child {
  margin-bottom: 0;
}

.security-company-item-inner {
  background: #ffffff;
  border: 2px solid #e0e6ed;
  border-radius: 12px;
  padding: 0.5rem;
  display: flex;
  gap: 1.5rem;
  transition: all 0.3s ease;
}

.security-company-item-inner:hover {
  border-color: #202B56;
  box-shadow: 0 4px 16px rgba(32, 43, 86, 0.12);
  transform: translateY(-2px);
}

/* Company Avatar */
.security-company-avatar {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid #e0e6ed;
}

.security-company-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Company Info */
.security-company-info {
  flex: 1;
  min-width: 0;
}

.security-company-info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.security-company-name {
  color: #202B56;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

/* Remove Button */
.security-company-remove {
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 2px solid #dc3545;
  color: #dc3545;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.security-company-remove:hover {
  background: #dc3545;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.security-company-remove i {
  font-size: 1rem;
}

/* Company Info Details */
.security-company-info-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.security-company-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: #4a5568;
  font-size: 0.95rem;
  line-height: 1.5;
}

.security-company-info-item i {
  color: #202B56;
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.security-company-info-item span {
  flex: 1;
}

/* Communities Section */
.security-company-communities {
  padding-top: 1rem;
  border-top: 1px solid #e0e6ed;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.security-company-communities-label {
  color: #718096;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.security-company-communities-label i {
  font-size: 0.85rem;
}

.security-company-communities-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
}

.security-company-tag {
  background: linear-gradient(135deg, #202B56 0%, #2c3e6d 100%);
  color: #ffffff;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.security-company-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(32, 43, 86, 0.25);
}


/* ========================================
   QR Code Scan Page - Specific Styles Only
   ======================================== */

/* Page-Specific Container */
#scan_qrcode.card {
  max-width: 1200px;
  margin: 2rem auto;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Header - Modern Gradient */
#scan_qrcode .card-header {
  background: linear-gradient(135deg, #202B56 0%, #2d3a6e 100%);
  color: #fff;
  padding: 1.25rem 2rem !important;
  border-bottom: none;
}

#scan_qrcode .card-header .card-title {
  color: #fff !important;
  margin: 0;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
}

/* Body - Clean Layout */
#scan_qrcode .card-body {
  padding: 2.5rem 2rem;
  background: #f8f9fb;
}

/* Form Container */
#scan_qrcode #scanFrm {
  background: #ffffff;
  padding: 2rem;
  border-radius: 10px;
  border: 1px solid #e3e6ef;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Input Field */
#scan_qrcode #barcode {
  border: 2px solid #e3e6ef;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  background: #ffffff;
  color: #202B56;
  transition: all 0.3s ease;
}

#scan_qrcode #barcode:focus {
  border-color: #202B56;
  outline: none;
  box-shadow: 0 0 0 4px rgba(32, 43, 86, 0.1);
  background: #ffffff;
}

#scan_qrcode #barcode::placeholder {
  color: #9ca3af;
  font-size: 0.95rem;
}

/* Submit Button */
#scan_qrcode #btnSubmit {
  border-radius: 8px;
  padding: 1rem 1.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: none;
  background: linear-gradient(135deg, #202B56 0%, #2d3a6e 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(32, 43, 86, 0.25);
  transition: all 0.3s ease;
}

#scan_qrcode #btnSubmit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(32, 43, 86, 0.35);
  background: linear-gradient(135deg, #2d3a6e 0%, #202B56 100%);
}

#scan_qrcode #btnSubmit:active {
  transform: translateY(0);
}

/* Result Container */
/* #scan_qrcode #scan_result {
  margin-top: 2rem;
} */

/* Error Message */
#scan_qrcode #scan_result .p-3.rounded-3 {
  background: #ffffff !important;
  border: 1px solid #e3e6ef !important;
  border-left: 4px solid #202B56 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

#scan_qrcode #scan_result .p-3.rounded-3:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Success Result Card */
#scan_qrcode #scan_result .qr-scan-details {
  background: transparent;
}

#scan_qrcode #scan_result .qr-scan-details .card {
  margin-bottom: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Alert Message Styles */
#scan_qrcode .alert-message-container {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

#scan_qrcode .alert-message-box {
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
  /* border: 2px solid #fee; */
  border-left: 5px solid #dc3545;
  border-radius: 12px;
  padding: 2rem;
  width: 100%;
  box-shadow: 0 4px 16px rgba(220, 53, 69, 0.1);
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  transition: all 0.3s ease;
}

#scan_qrcode .alert-message-box:hover {
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.15);
  transform: translateY(-2px);
}

/* Success Alert Styles */
#scan_qrcode .alert-success-box {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  border-left: 5px solid #215a2e !important;
}

#scan_qrcode .alert-success-icon {
  background: rgba(255, 255, 255, 0.2) !important;
}

#scan_qrcode .alert-icon-wrapper {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

#scan_qrcode .alert-icon-wrapper i {
  color: #ffffff;
  font-size: 1.5rem;
}

#scan_qrcode .alert-content {
  flex: 1;
}

#scan_qrcode .alert-title {
  color: #dc3545;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  letter-spacing: 0.02em;
}

#scan_qrcode .alert-text {
  color: #6c757d;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
}


/* QR Code Attachments Wrapper */
#qrcode_details_container .qr-attachments-wrapper,
#qrcodepage .qr-attachments-wrapper {
  padding: 0.5rem 0;
}

/* QR Document Card */
#qrcode_details_container .qr-document-card,
#qrcodepage .qr-document-card {
  background: #ffffff;
  border: 2px solid #e3e6f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
}

#qrcode_details_container .qr-document-card:hover,
#qrcodepage .qr-document-card:hover {
  border-color: #202B56;
  box-shadow: 0 8px 20px rgba(32, 43, 86, 0.15);
  transform: translateY(-5px);
}

/* QR Document Preview */
#qrcode_details_container .qr-document-preview,
#qrcodepage .qr-document-preview {
  position: relative;
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Image Preview */
#qrcode_details_container .qr-image-link,
#qrcodepage .qr-image-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}

#qrcode_details_container .qr-document-img,
#qrcodepage .qr-document-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

#qrcode_details_container .qr-image-link:hover .qr-document-img,
#qrcodepage .qr-image-link:hover .qr-document-img {
  transform: scale(1.1);
}

#qrcode_details_container .qr-image-overlay,
#qrcodepage .qr-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(32, 43, 86, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #ffffff;
}

#qrcode_details_container .qr-image-link:hover .qr-image-overlay,
#qrcodepage .qr-image-link:hover .qr-image-overlay {
  opacity: 1;
}

/* Video Preview */
#qrcode_details_container .qr-video-container,
#qrcodepage .qr-video-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
}

#qrcode_details_container .qr-document-video,
#qrcodepage .qr-document-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* File Link */
#qrcode_details_container .qr-file-link,
#qrcodepage .qr-file-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #6c757d;
  transition: all 0.3s ease;
  padding: 1.5rem;
}

#qrcode_details_container .qr-file-link:hover,
#qrcodepage .qr-file-link:hover {
  color: #202B56;
  background: linear-gradient(135deg, #f0f2f5 0%, #e3e6f0 100%);
}

#qrcode_details_container .qr-file-icon-wrapper,
#qrcodepage .qr-file-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

#qrcode_details_container .qr-file-link:hover .qr-file-icon-wrapper,
#qrcodepage .qr-file-link:hover .qr-file-icon-wrapper {
  transform: scale(1.15);
}

#qrcode_details_container .qr-file-icon-wrapper i,
#qrcodepage .qr-file-icon-wrapper i {
  color: #dc3545;
  filter: drop-shadow(0 4px 6px rgba(220, 53, 69, 0.2));
}

#qrcode_details_container .qr-file-extension-badge,
#qrcodepage .qr-file-extension-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, #202B56 0%, #3d4a7a 100%);
  color: #ffffff;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 10px rgba(32, 43, 86, 0.25);
}

/* QR Document Footer */
#qrcode_details_container .qr-document-footer,
#qrcodepage .qr-document-footer {
  padding: 1rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-top: 2px solid #e3e6f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

/* QR Delete Attachment Button */
#qrcodepage .qr-delete-attachment-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.4);
  z-index: 10;
  font-size: 0.9rem;
}

#qrcodepage .qr-delete-attachment-btn:hover {
  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 6px 15px rgba(220, 53, 69, 0.6);
}

#qrcodepage .qr-delete-attachment-btn:active {
  transform: scale(0.95) rotate(10deg);
}


/* QR Code - Create Incident Type Inline Form Styles */

/* Button next to incident type dropdown */
.btn-toggle-incident-type-form {
    min-width: 45px;
    height: 38px;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.btn-toggle-incident-type-form i {
    font-size: 1rem;
}

/* Gap utility for flex container */
.gap-2 {
    gap: 0.5rem;
}

/* Flex grow utility */
.flex-grow-1 {
    flex-grow: 1;
}

/* Disabled select dropdown styling */
#incident_types:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.6;
}

#selectIncidentTypeSection.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Inline form card styles */
.incident-type-form-card {
    margin-top: 1rem;
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.incident-type-form-header {
    background-color: #202B56;
    color: white;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.incident-type-form-header h6 {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.incident-type-form-card .card-body {
    padding: 1.5rem;
}

/* Task item styles in inline form */
#inline-task-list .task-item {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

#inline-task-list .task-item:hover {
    background-color: #e9ecef;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#inline-task-list .drag-handle {
    cursor: move;
    color: #6c757d;
    font-size: 0.9rem;
}

#inline-task-list .drag-handle:hover {
    color: #495057;
}

/* Sortable placeholder */
#inline-task-list .ui-sortable-placeholder {
    background-color: #e3f2fd;
    border: 2px dashed #2196f3;
    visibility: visible !important;
    height: 60px;
    margin-bottom: 0.75rem;
    border-radius: 0.375rem;
}

/* Form check styles in inline form */
#createIncidentTypeSection .form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

#createIncidentTypeSection .form-check-label {
  margin-bottom: 0;
  font-size: 0.875rem;
  white-space: nowrap;
}

#createIncidentTypeSection .form-check-input {
  margin-top: 0;
}

/* Radio button styles */
#createIncidentTypeSection .icheck-material-blue {
  margin-right: 1rem;
}

/* Loading state for save button */
#saveInlineIncidentTypeBtn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

#saveInlineIncidentTypeBtn .fa-spinner {
  animation: spin 1s linear infinite;
}

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

/* Responsive - Tablet */
@media (max-width: 991.98px) {
  
  #scan_qrcode.card {
    margin: 1.5rem auto;
  }
  
  #scan_qrcode .card-body {
    padding: 2rem 1.5rem;
  }
  
  #scan_qrcode #scanFrm {
    padding: 1.75rem;
  }
}

/* Responsive - Mobile */
@media (max-width: 767.98px) {
  #scan_qrcode.card {
    margin: 1rem auto;
    border-radius: 8px;
  }
  
  #scan_qrcode .card-header {
    padding: 1.5rem 1.25rem !important;
  }
  
  #scan_qrcode .card-header .card-title {
    font-size: 1.125rem;
  }
  
  #scan_qrcode .card-body {
    padding: 1.5rem 1rem;
  }
  
  #scan_qrcode #scanFrm {
    padding: 1.5rem;
  }
  
  #scan_qrcode #barcode {
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
  }
  
  #scan_qrcode #btnSubmit {
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
  }

  #scan_qrcode .alert-message-box {
    padding: 1.5rem;
    gap: 1rem;
  }
  
  #scan_qrcode .alert-icon-wrapper {
    width: 45px;
    height: 45px;
  }
  
  #scan_qrcode .alert-icon-wrapper i {
    font-size: 1.25rem;
  }
  
  #scan_qrcode .alert-title {
    font-size: 1rem;
  }
  
  #scan_qrcode .alert-text {
    font-size: 0.875rem;
  }

  #inline-task-list .task-item .col-auto {
      flex-basis: 100%;
      max-width: 100%;
      margin-top: 0.5rem;
  }
  
  #inline-task-list .task-item .form-check {
      margin-bottom: 0.5rem;
  }
  
  .btn-toggle-incident-type-form {
      min-width: 40px;
      height: 38px;
      padding: 0.25rem 0.5rem;
  }

}

/* Responsive - Small Mobile */
@media (max-width: 575.98px) {
  #scan_qrcode.card {
    margin: 0.75rem auto;
  }
  
  #scan_qrcode .card-header {
    padding: 1.25rem 1rem !important;
  }
  
  #scan_qrcode .card-body {
    padding: 1.25rem 0.875rem;
  }
  
  #scan_qrcode #scanFrm {
    padding: 1.25rem;
  }
  
  #scan_qrcode #barcode {
    padding: 0.75rem 0.875rem;
  }
  
  #scan_qrcode #btnSubmit {
    padding: 0.75rem 1.25rem;
  }

  #scan_qrcode .alert-message-box {
    padding: 1.25rem;
    gap: 0.875rem;
  }
  
  #scan_qrcode .alert-icon-wrapper {
    width: 40px;
    height: 40px;
  }
  
  #scan_qrcode .alert-icon-wrapper i {
    font-size: 1.125rem;
  }

}


/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 992px) {
  .security-invite-form-header {
    padding: 1rem;
  }

  .security-invite-form-body {
    padding: 1rem;
  }

  .security-invite-companies-header {
    padding: 1rem;
  }

  .security-invite-companies-list {
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  .security-invite-form-header {
    flex-direction: column;
    text-align: center;
    padding: 1rem 1rem;
  }

  .security-invite-form-header-icon {
    width: 50px;
    height: 50px;
  }

  .security-invite-form-header-icon i {
    font-size: 1.5rem;
  }

  .security-invite-form-title {
    font-size: 1.25rem;
  }

  .security-invite-form-subtitle {
    font-size: 0.875rem;
  }

  .security-invite-form-body {
    padding: 1rem;
  }

  .security-invite-search-wrapper {
    flex-direction: column;
  }

  .security-invite-submit-btn {
    width: 100%;
    justify-content: center;
    padding: 1rem;
  }

  .security-invite-companies-header {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }

  .security-invite-companies-title {
    font-size: 1.15rem;
  }

  .security-company-item-inner {
    flex-direction: column;
    padding: 0.5rem;
  }

  .security-company-avatar {
    width: 100%;
    height: 120px;
  }

  .security-company-info-header {
    flex-direction: column;
    align-items: stretch;
  }

  .security-company-remove {
    width: 100%;
    height: 42px;
  }

  .security-company-communities {
    flex-direction: column;
    align-items: flex-start;
  }

  .security-company-communities-tags {
    width: 100%;
  }

  /* QR Code Attachments */
  #qrcode_details_container .qr-document-preview {
    height: 200px;
  }
  
  #qrcode_details_container .qr-file-icon-wrapper i {
    font-size: 4rem !important;
  }
  
  #qrcode_details_container .qr-file-extension-badge {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
  }

}

@media (max-width: 576px) {
  .security-invite-form-header {
    padding: 1.25rem 0.875rem;
  }

  .security-invite-form-body {
    padding: 1rem;
  }

  .security-invite-form-title {
    font-size: 1.15rem;
  }

  .security-invite-companies-header {
    padding: 1rem;
  }

  .security-invite-companies-list {
    padding: 0.875rem;
  }

  .security-company-item-inner {
    padding: 0.5rem;
  }

  .security-company-name {
    font-size: 1.1rem;
  }

  .security-company-info-item {
    font-size: 0.875rem;
  }

  /* QR Code Attachments */
  #qrcode_details_container .qr-document-preview {
    height: 180px;
  }
  
  #qrcode_details_container .qr-file-icon-wrapper i {
    font-size: 3.5rem !important;
  }
  
  #qrcode_details_container .qr-download-link {
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
  }

  #qrcodepage .qr-delete-attachment-btn {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
    top: 8px;
    right: 8px;
  }

}


/* ============================================
   LOADING & DISABLED STATES
   ============================================ */

.security-invite-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.security-company-item.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ============================================
   FOCUS STATES (Accessibility)
   ============================================ */

.security-invite-search-input:focus,
.security-invite-select:focus {
  outline: none;
}

.security-invite-submit-btn:focus,
.security-company-remove:focus {
  outline: 2px solid #202B56;
  outline-offset: 2px;
}



/* ========================================
   Active Tasks Page Styles - Enhanced
   ======================================== */

/* Active Tasks List Container */
#active_tasks_container_card .active-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Task Card */
#active_tasks_container_card .active-task-card {
  background: #FFFFFF;
  border: 1px solid #E5E9F0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  position: relative;
}

#active_tasks_container_card .active-task-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #202B56 0%, #4a5f9a 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#active_tasks_container_card .active-task-card:hover {
  box-shadow: 0 12px 24px rgba(32, 43, 86, 0.12), 0 6px 12px rgba(32, 43, 86, 0.08);
  border-color: #202B56;
  transform: translateY(-4px);
}

#active_tasks_container_card .active-task-card:hover::before {
  opacity: 1;
}

/* Task Card Header */
#active_tasks_container_card .task-card-header {
  background: linear-gradient(135deg, #202B56 0%, #2d3a66 50%, #3a4a7a 100%);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

#active_tasks_container_card .task-card-header::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

#active_tasks_container_card .task-title-section {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

#active_tasks_container_card .task-title {
  color: #FFFFFF;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.3px;
}

#active_tasks_container_card .task-title i {
  font-size: 22px;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

#active_tasks_container_card .task-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

#active_tasks_container_card .task-id {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Task Card Body */
#active_tasks_container_card .task-card-body {
  padding: 24px;
  background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
}

#active_tasks_container_card .task-description {
  margin-bottom: 18px;
  padding: 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-left: 5px solid #202B56;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

#active_tasks_container_card .task-description:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  transform: translateX(4px);
}

#active_tasks_container_card .task-description i {
  color: #202B56;
  margin-top: 3px;
  flex-shrink: 0;
  font-size: 18px;
  background: rgba(32, 43, 86, 0.1);
  padding: 8px;
  border-radius: 6px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#active_tasks_container_card .task-description span {
  color: #2c3e50;
  font-size: 14.5px;
}

#active_tasks_container_card .task-location {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%);
  border-radius: 10px;
  border: 1px solid #ffe082;
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.1);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

#active_tasks_container_card .task-location:hover {
  box-shadow: 0 4px 8px rgba(255, 193, 7, 0.2);
  transform: translateX(4px);
}

#active_tasks_container_card .task-location i {
  color: #f57c00;
  flex-shrink: 0;
  font-size: 18px;
  background: rgba(245, 124, 0, 0.1);
  padding: 8px;
  border-radius: 6px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#active_tasks_container_card .task-location span {
  color: #e65100;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

/* Schedule Info */
#active_tasks_container_card .task-schedule-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);
  border-radius: 10px;
  border: 1px solid #90caf9;
  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.1);
  transition: all 0.3s ease;
}

#active_tasks_container_card .task-schedule-info:hover {
  box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2);
  transform: translateX(4px);
}

#active_tasks_container_card .task-schedule-info > div {
  color: #01579b;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(33, 150, 243, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
}

#active_tasks_container_card .task-schedule-info i {
  color: #0277bd;
  font-size: 16px;
  background: rgba(2, 119, 189, 0.1);
  padding: 6px;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Location and Schedule Container - Horizontal Layout */
#active_tasks_container_card .task-location-schedule-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

#active_tasks_container_card .task-location-schedule-container .task-location,
#active_tasks_container_card .task-location-schedule-container .task-schedule-info {
  margin-bottom: 0;
}

/* Additional Info */
#active_tasks_container_card .task-additional-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  border-radius: 10px;
  border: 1px solid #e1e8ed;
}

#active_tasks_container_card .info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #34495e;
  background: #ffffff;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ecf0f1;
  transition: all 0.3s ease;
}

#active_tasks_container_card .info-item:hover {
  border-color: #202B56;
  box-shadow: 0 2px 6px rgba(32, 43, 86, 0.1);
  transform: translateY(-2px);
}

#active_tasks_container_card .info-item i {
  color: #202B56;
  width: 20px;
  text-align: center;
  font-size: 16px;
  background: rgba(32, 43, 86, 0.1);
  padding: 6px;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#active_tasks_container_card .task-attachments,
#active_tasks_container_card .task-subtasks {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #34495e;
  background: #ffffff;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ecf0f1;
  transition: all 0.3s ease;
}

#active_tasks_container_card .task-attachments:hover,
#active_tasks_container_card .task-subtasks:hover {
  border-color: #202B56;
  box-shadow: 0 2px 6px rgba(32, 43, 86, 0.1);
  transform: translateY(-2px);
}

#active_tasks_container_card .task-attachments i,
#active_tasks_container_card .task-subtasks i {
  color: #202B56;
  font-size: 16px;
  background: rgba(32, 43, 86, 0.1);
  padding: 6px;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sub-Tasks Section */
#active_tasks_container_card .task-subtasks-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

#active_tasks_container_card .subtasks-header {
  font-size: 15px;
  font-weight: 700;
  color: #202B56;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#active_tasks_container_card .subtasks-header i {
  font-size: 16px;
}

#active_tasks_container_card .subtasks-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

#active_tasks_container_card .subtask-item {
  display: flex;
  align-items: start;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  border-radius: 10px;
  border: 2px solid #e1e8ed;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#active_tasks_container_card .subtask-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #6c757d;
  transition: width 0.3s ease;
}

#active_tasks_container_card .subtask-item:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transform: translateX(4px);
}

#active_tasks_container_card .subtask-item:hover::before {
  width: 6px;
}

#active_tasks_container_card .subtask-item.priority-high::before {
  background: linear-gradient(180deg, #dc3545 0%, #c82333 100%);
}

#active_tasks_container_card .subtask-item.priority-medium::before {
  background: linear-gradient(180deg, #ffc107 0%, #e0a800 100%);
}

#active_tasks_container_card .subtask-item.priority-low::before {
  background: linear-gradient(180deg, #17a2b8 0%, #138496 100%);
}

#active_tasks_container_card .subtask-number {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #202B56 0%, #3a4a7a 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(32, 43, 86, 0.3);
}

#active_tasks_container_card .subtask-content {
  flex: 1;
}

#active_tasks_container_card .subtask-title {
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0 !important;
  line-height: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#active_tasks_container_card .subtask-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#active_tasks_container_card .priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

#active_tasks_container_card .priority-badge.priority-high {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

#active_tasks_container_card .priority-badge.priority-medium {
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
}

#active_tasks_container_card .priority-badge.priority-low {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

#active_tasks_container_card .requirement-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(32, 43, 86, 0.1);
  color: #202B56;
  border-radius: 5px;
  font-size: 12px;
  transition: all 0.3s ease;
  cursor: help;
  flex-shrink: 0;
}

#active_tasks_container_card .requirement-icon:hover {
  background: #202B56;
  color: #ffffff;
  transform: scale(1.15);
}

/* Assigned Members - Horizontal Layout */
#active_tasks_container_card .task-assigned-members {
  margin-top: 24px;
  padding-top: 0;
  border-top: none;
}

#active_tasks_container_card .assigned-members-header {
  font-size: 15px;
  font-weight: 700;
  color: #202B56;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#active_tasks_container_card .assigned-members-header i {
  font-size: 16px;
}

#active_tasks_container_card .assigned-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

#active_tasks_container_card .assigned-member {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid #e1e8ed;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

#active_tasks_container_card .assigned-member::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #6c757d;
  transition: width 0.3s ease;
}

#active_tasks_container_card .assigned-member:hover {
  background: #f8f9fa;
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

#active_tasks_container_card .assigned-member:hover::before {
  width: 8px;
}

#active_tasks_container_card .assigned-member.member-completed {
  border-color: #c3e6cb;
  background: linear-gradient(135deg, #d4edda 0%, #f1f9f3 100%);
}

#active_tasks_container_card .assigned-member.member-completed::before {
  background: linear-gradient(180deg, #28a745 0%, #20c997 100%);
}

#active_tasks_container_card .assigned-member.member-started {
  border-color: #ffeaa7;
  background: linear-gradient(135deg, #fff3cd 0%, #fffbf0 100%);
}

#active_tasks_container_card .assigned-member.member-started::before {
  background: linear-gradient(180deg, #ffc107 0%, #ffb300 100%);
}

#active_tasks_container_card .assigned-member.member-pending {
  border-color: #e1e8ed;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

#active_tasks_container_card .assigned-member.member-pending::before {
  background: linear-gradient(180deg, #6c757d 0%, #5a6268 100%);
}

#active_tasks_container_card .member-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

#active_tasks_container_card .assigned-member:hover .member-avatar {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

#active_tasks_container_card .member-info {
  flex: 1;
}

#active_tasks_container_card .member-name {
  font-weight: 700;
  color: #202B56;
  font-size: 16px;
  margin-bottom: 5px;
  letter-spacing: 0.2px;
}

#active_tasks_container_card .member-status {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}

#active_tasks_container_card .member-completed .member-status {
  color: #155724;
}

#active_tasks_container_card .member-started .member-status {
  color: #856404;
}

#active_tasks_container_card .member-pending .member-status {
  color: #6c757d;
}

#active_tasks_container_card .member-status i {
  font-size: 15px;
}

/* Task Card Footer */
#active_tasks_container_card .task-card-footer {
  padding: 14px 24px;
  background: linear-gradient(to right, #f8f9fa 0%, #f1f3f5 100%);
  border-top: 1px solid #E5E9F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

#active_tasks_container_card .task-card-footer small {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #6c757d;
  font-weight: 500;
}

#active_tasks_container_card .task-card-footer i {
  color: #202B56;
}

#active_tasks_container_card .task-action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Empty State */
#active_tasks_container_card .empty-state-active-tasks {
  padding: 60px 20px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

#active_tasks_container_card .empty-state-icon-wrapper {
  margin-bottom: 32px;
  animation: fadeInScale 0.6s ease-out;
}

#active_tasks_container_card .empty-state-circle {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 10px 40px rgba(32, 43, 86, 0.1);
  /* animation: float 3s ease-in-out infinite; */
}

#active_tasks_container_card .empty-state-circle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(32, 43, 86, 0.1) 0%, rgba(33, 150, 243, 0.1) 100%);
  animation: pulse 2s ease-in-out infinite;
}

#active_tasks_container_card .empty-state-circle i {
  font-size: 56px;
  color: #202B56;
  position: relative;
  z-index: 1;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes fadeInScale {
  0% { 
    opacity: 0; 
    transform: scale(0.8); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1); 
  }
}

#active_tasks_container_card .empty-state-title {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 28px;
  color: #202B56;
  font-weight: 700;
  letter-spacing: -0.5px;
}

#active_tasks_container_card .empty-state-description {
  font-size: 16px;
  color: #6c757d;
  margin-bottom: 32px;
  line-height: 1.6;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

#active_tasks_container_card .empty-state-features {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
}

#active_tasks_container_card .empty-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  border: 2px solid #e1e8ed;
  transition: all 0.3s ease;
}

#active_tasks_container_card .empty-feature-item:hover {
  border-color: #202B56;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(32, 43, 86, 0.1);
}

#active_tasks_container_card .empty-feature-item i {
  font-size: 20px;
  color: #28a745;
  flex-shrink: 0;
}

#active_tasks_container_card .empty-feature-item span {
  font-size: 14px;
  color: #495057;
  font-weight: 500;
}

/* Badge Styles */
#active_tasks_container_card .badge-info {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  color: #FFFFFF;
  padding: 7px 16px;
  border-radius: 24px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(23, 162, 184, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#active_tasks_container_card .badge-primary {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: #FFFFFF;
  padding: 7px 16px;
  border-radius: 24px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
}


/* Header Section */
.global-vehicle-details .vehicle-header {
    background: linear-gradient(135deg, #202B56 0%, #2a3a6b 100%);
    color: white;
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(32, 43, 86, 0.15);
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.global-vehicle-details .vehicle-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.global-vehicle-details .header-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.global-vehicle-details .plate-number {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.global-vehicle-details .plate-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    margin-top: 8px;
}

.global-vehicle-details .vehicle-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.global-vehicle-details .stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-size: 14px;
}

.global-vehicle-details .stat-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.global-vehicle-details .stat-item i {
    font-size: 18px;
}

/* Vehicle Cards */
.global-vehicle-details .vehicle-section {
    margin-bottom: 30px;
    width: 100%;
}

/* Special styling for Visitor Vehicles section */
.global-vehicle-details .vehicle-section:nth-child(even) .section-title i {
    background: linear-gradient(135deg, #7b1fa2, #9c27b0);
    box-shadow: 0 4px 10px rgba(123, 31, 162, 0.2);
}

.global-vehicle-details .vehicle-section:nth-child(even) .section-title::after {
    background: linear-gradient(90deg, #7b1fa2 0%, transparent 100%);
}

.global-vehicle-details .vehicle-section:nth-child(even) .section-title span::after {
    background: #7b1fa2;
}

.global-vehicle-details .vehicle-section:nth-child(even) .section-count {
    background: linear-gradient(135deg, #7b1fa2, #9c27b0);
    box-shadow: 0 3px 8px rgba(123, 31, 162, 0.2);
}

.global-vehicle-details .vehicle-section:nth-child(even) .section-count:hover {
    box-shadow: 0 5px 12px rgba(123, 31, 162, 0.3);
}

/* Enhanced section header */
.global-vehicle-details .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid #e8ecf1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.global-vehicle-details .section-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.global-vehicle-details .vehicle-section:nth-child(even) .section-header {
    background: linear-gradient(135deg, #f3e5f5 0%, #faf5ff 100%);
    border-color: #e1bee7;
}

.global-vehicle-details .section-title {
    font-size: 22px;
    font-weight: 600;
    color: #202B56;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.global-vehicle-details .section-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #202B56 0%, transparent 100%);
    margin-left: 20px;
    opacity: 0.2;
}

.global-vehicle-details .section-title i {
    font-size: 26px;
    color: #202B56;
    background: linear-gradient(135deg, #202B56, #3a4a7b);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(32, 43, 86, 0.2);
    position: relative;
    overflow: hidden;
}

.global-vehicle-details .section-title i::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

.global-vehicle-details .section-title:hover i::before {
    animation: shine 0.5s ease-in-out;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.global-vehicle-details .section-title span {
    position: relative;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.global-vehicle-details .section-title span::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #202B56;
    transition: width 0.3s ease;
}

.global-vehicle-details .section-title:hover span::after {
    width: 100%;
}

.global-vehicle-details .section-count {
    background: linear-gradient(135deg, #202B56, #3a4a7b);
    color: white;
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(32, 43, 86, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.global-vehicle-details .section-count::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.global-vehicle-details .section-count:hover::before {
    left: 100%;
}

.global-vehicle-details .section-count:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(32, 43, 86, 0.3);
}

.global-vehicle-details .vehicle-card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8ecf1;
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 25px;
}

.global-vehicle-details .vehicle-image-section {
    position: relative;
}

.global-vehicle-details .vehicle-images-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.global-vehicle-details .vehicle-image {
    width: 100%;
    height: 120px;
    background: #f5f7fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #e8ecf1;
    position: relative;
}

.global-vehicle-details .vehicle-image.main-image {
    height: 180px;
}

.global-vehicle-details .vehicle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.global-vehicle-details .vehicle-image:hover img {
    transform: scale(1.05);
}

.global-vehicle-details .image-label {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(32, 43, 86, 0.9);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(5px);
}

.global-vehicle-details .vehicle-image-placeholder {
    text-align: center;
    color: #8898aa;
}

.global-vehicle-details .vehicle-image-placeholder i {
    font-size: 32px;
    margin-bottom: 5px;
}

.global-vehicle-details .vehicle-image-placeholder p {
    font-size: 12px;
    margin: 0;
}

.global-vehicle-details .vehicle-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.global-vehicle-details .vehicle-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #202B56;
    border-radius: 16px 0 0 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.global-vehicle-details .vehicle-card:hover::before {
    opacity: 1;
}

.global-vehicle-details .vehicle-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.global-vehicle-details .vehicle-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.global-vehicle-details .resident-badge {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0;
}

.global-vehicle-details .visitor-badge {
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    color: #7b1fa2;
}

/* Info Grid */
.global-vehicle-details .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
    width: 100%;
}

.global-vehicle-details .info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: #f8f9fc;
    border-radius: 12px;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.global-vehicle-details .info-item:hover {
    background: #eef2f7;
    transform: translateX(5px);
}

.global-vehicle-details .info-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #202B56, #3a4a7b);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(32, 43, 86, 0.2);
}

.global-vehicle-details .info-content {
    flex: 1;
    min-width: 0;
}

.global-vehicle-details .info-label {
    font-size: 11px;
    color: #8898aa;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

.global-vehicle-details .info-value {
    font-size: 16px;
    color: #32325d;
    font-weight: 600;
    word-wrap: break-word;
}

/* Owner Section */
.global-vehicle-details .owner-section {
    background: linear-gradient(135deg, #f8f9fc, #eef2f7);
    border-radius: 15px;
    padding: 20px;
    margin-top: 0;
    border: 1px solid #e8ecf1;
    width: 100%;
    box-sizing: border-box;
}

.global-vehicle-details .owner-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.global-vehicle-details .owner-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    flex-shrink: 0;
}

.global-vehicle-details .owner-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: #4caf50;
    border: 3px solid white;
    border-radius: 50%;
}

.global-vehicle-details .owner-info {
    flex: 1;
    min-width: 0;
}

.global-vehicle-details .owner-info h4 {
    font-size: 18px;
    font-weight: 600;
    color: #202B56;
    margin-bottom: 4px;
    word-wrap: break-word;
}

.global-vehicle-details .community-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #202B56;
    color: white;
    padding: 5px 12px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 500;
}

.global-vehicle-details .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 15px;
    width: 100%;
}

.global-vehicle-details .contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: white;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.global-vehicle-details .contact-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.global-vehicle-details .contact-item i {
    color: #202B56;
    font-size: 16px;
    flex-shrink: 0;
}

.global-vehicle-details .contact-item span {
    color: #525f7f;
    font-size: 13px;
    font-weight: 500;
    word-wrap: break-word;
}

/* Host Information Section */
.global-vehicle-details .host-section {
    background: linear-gradient(135deg, #fff4e6, #ffe0b2);
    border: 1px solid #ffb74d;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
}

.global-vehicle-details .host-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.global-vehicle-details .host-header i {
    color: #f57c00;
    font-size: 20px;
}

.global-vehicle-details .host-header h5 {
    font-size: 16px;
    font-weight: 600;
    color: #e65100;
    margin: 0;
}

.global-vehicle-details .host-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.global-vehicle-details .host-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
}

.global-vehicle-details .host-info-item i {
    color: #f57c00;
    font-size: 14px;
    flex-shrink: 0;
}

.global-vehicle-details .host-info-item span {
    color: #795548;
    font-size: 13px;
    font-weight: 500;
    word-wrap: break-word;
}

/* Sidebar */
.global-vehicle-details .sidebar {
    width: 320px;
    flex-shrink: 0;
}

.global-vehicle-details .sidebar-card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8ecf1;
    width: 100%;
    box-sizing: border-box;
}

.global-vehicle-details .sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: #202B56;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.global-vehicle-details .image-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
    width: 100%;
}

.global-vehicle-details .image-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #f5f7fa;
}

.global-vehicle-details .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.global-vehicle-details .image-item:hover img {
    transform: scale(1.05);
}

.global-vehicle-details .no-images {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fc;
    border-radius: 12px;
    border: 2px dashed #e0e6ed;
    grid-column: 1 / -1;
}

.global-vehicle-details .no-images i {
    font-size: 48px;
    color: #8898aa;
    margin-bottom: 15px;
}

/* Action Buttons */
.global-vehicle-details .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.global-vehicle-details .btn-action {
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.global-vehicle-details .btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.global-vehicle-details .btn-edit {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.global-vehicle-details .btn-approve {
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
}

.global-vehicle-details .btn-reject {
    background: linear-gradient(135deg, #f44336, #da190b);
    color: white;
}

.global-vehicle-details .btn-pass {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: white;
}

.global-vehicle-details .btn-violation {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
}

/* Alerts */
.global-vehicle-details .alerts-container {
    margin-top: 25px;
    width: 100%;
}

.global-vehicle-details .alert-item {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border: 1px solid #ffc107;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: slideIn 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.global-vehicle-details .alert-icon {
    width: 45px;
    height: 45px;
    background: #ffc107;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

.global-vehicle-details .alert-content {
    flex: 1;
    min-width: 0;
}

.global-vehicle-details .alert-title {
    font-weight: 600;
    color: #856404;
    margin-bottom: 5px;
}

.global-vehicle-details .alert-message {
    color: #856404;
    font-size: 14px;
    word-wrap: break-word;
}

/* Empty State */
.global-vehicle-details .empty-state {
    text-align: center;
    padding: 80px 20px;
    width: 100%;
    background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
    border-radius: 20px;
    border: 2px dashed #e0e6ed;
    position: relative;
    overflow: hidden;
}

.global-vehicle-details .empty-state::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(32, 43, 86, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.global-vehicle-details .empty-state i {
    font-size: 80px;
    color: #8898aa;
    margin-bottom: 25px;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.global-vehicle-details .empty-state h4 {
    font-size: 28px;
    margin-bottom: 12px;
    color: #525f7f;
    font-weight: 600;
    position: relative;
}

.global-vehicle-details .empty-state p {
    font-size: 16px;
    color: #8898aa;
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

.global-vehicle-details .empty-state .plate-number {
    display: inline-block;
    background: linear-gradient(135deg, #202B56, #3a4a7b);
    color: white;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 15px;
    font-size: 18px;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(32, 43, 86, 0.2);
}

.global-vehicle-details .empty-state .action-hint {
    margin-top: 30px;
    padding: 15px;
    background: rgba(32, 43, 86, 0.05);
    border-radius: 12px;
    display: inline-block;
}

.global-vehicle-details .empty-state .action-hint span {
    color: #202B56;
    font-weight: 500;
    font-size: 14px;
}


/* Responsive Design */
@media (max-width: 768px) {

  /* css for internal alerts details page */
  #internal-alert-details .internal-alert-header {
    padding: 1rem;
  }
  
  #internal-alert-details .header-title {
    font-size: 1.125rem;
  }
  
  #internal-alert-details .alert-badges-section {
    padding: 1rem;
  }
  
  #internal-alert-details .section-header {
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
  }
  
  #internal-alert-details .section-body {
    padding: 1rem;
  }
  
  #internal-alert-details .team-members-grid {
    grid-template-columns: 1fr;
  }
  
  #internal-alert-details .member-photo,
  #internal-alert-details .member-photo-placeholder {
    width: 60px;
    height: 60px;
  }
  
  #internal-alert-details .member-photo-placeholder {
    font-size: 1.5rem;
  }

  /* QR Code Creation Form */
  #qrcodepage .qr-type-cards {
    grid-template-columns: 1fr;
  }

  #qrcodepage .validity-options {
    grid-template-columns: 1fr;
  }

  #qrcodepage .qr-form-actions {
    flex-direction: column;
  }

  #qrcodepage .qr-form-actions .btn {
    width: 100%;
  }

  #qrcode_details_container .qr-card-header h5 {
      font-size: 1rem;
  }

  #qrcode_details_container .qr-detail-value {
      font-size: 0.95rem;
  }

  #qrcode_details_container .qr-profile-img {
      width: 60px;
      height: 60px;
  }

  #qrcode_details_container .qr-datetime-badge {
      display: block;
      margin-bottom: 0.5rem;
  }

  #qrcode_details_container .qr-datetime-badge.ms-2 {
      margin-left: 0 !important;
  }

  #qrcodepage .manual-qr-type-card {
    padding: 1rem;
  }

  #qrcodepage .manual-qr-icon {
    width: 50px;
    height: 50px;
  }

  #qrcodepage .manual-qr-icon i {
    font-size: 1.5rem;
  }

  #qrcodepage .manual-qr-content h6 {
    font-size: 1rem;
  }

  #qrcodepage .manual-qr-content p {
    font-size: 0.8rem;
  }

  #qrcodepage .manual-sub-fields {
    padding: 1rem;
  }

  /* Camera Settings Page */
  #door_camera_settings .section-icon-wrapper {
    width: 50px;
    height: 50px;
  }
  
  #door_camera_settings .section-title {
    font-size: 1.25rem;
  }
  
  #door_camera_settings .camera-badge,
  #door_camera_settings .door-badge {
    font-size: 0.85rem;
    padding: 6px 12px;
  }
  
  #door_camera_settings .camera-item-card,
  #door_camera_settings .door-item-card {
    padding: 15px;
  }

  /* Active Tasks page */
  #active_tasks_container_card .task-card-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px;
  }
  
  #active_tasks_container_card .task-title {
    font-size: 17px;
  }
  
  #active_tasks_container_card .task-location-schedule-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  #active_tasks_container_card .task-schedule-info {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  #active_tasks_container_card .empty-state-circle {
    width: 100px;
    height: 100px;
  }
  
  #active_tasks_container_card .empty-state-circle i {
    font-size: 48px;
  }
  
  #active_tasks_container_card .empty-state-title {
    font-size: 24px;
  }
  
  #active_tasks_container_card .empty-state-description {
    font-size: 15px;
  }
  
  #active_tasks_container_card .empty-state-features {
    flex-direction: column;
    gap: 12px;
  }
  
  #active_tasks_container_card .empty-feature-item {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  
  #active_tasks_container_card .task-additional-info {
    grid-template-columns: 1fr;
  }
  
  #active_tasks_container_card .assigned-members-grid {
    grid-template-columns: 1fr;
  }
  
  #active_tasks_container_card .assigned-member {
    gap: 10px;
  }
  
  #active_tasks_container_card .member-avatar {
    width: 44px;
    height: 44px;
  }
  
  #active_tasks_container_card .member-name {
    font-size: 15px;
  }
  
  #active_tasks_container_card .subtasks-list {
    grid-template-columns: 1fr;
  }
  
  #active_tasks_container_card .subtask-item {
    flex-direction: column;
    gap: 10px;
  }
  
  #active_tasks_container_card .subtask-number {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }


  .global-vehicle-details {
      padding: 15px;
  }
  
  .global-vehicle-details .vehicle-header {
      padding: 20px;
  }
  
  .global-vehicle-details .header-content {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
  }
  
  .global-vehicle-details .plate-number {
      font-size: 28px;
  }
  
  .global-vehicle-details .vehicle-stats {
      flex-direction: row;
      gap: 10px;
  }
  
  .global-vehicle-details .stat-item {
      font-size: 12px;
      padding: 6px 12px;
  }
  
  .global-vehicle-details .vehicle-card {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 20px;
  }
  
  .global-vehicle-details .vehicle-image {
      height: 150px;
  }
  
  .global-vehicle-details .vehicle-image.main-image {
      height: 200px;
  }
  
  .global-vehicle-details .info-grid {
      grid-template-columns: 1fr;
  }
  
  .global-vehicle-details .contact-grid {
      grid-template-columns: 1fr;
  }
  
  .global-vehicle-details .host-info-grid {
      grid-template-columns: 1fr;
  }
  
  .global-vehicle-details .image-gallery {
      grid-template-columns: 1fr;
  }
  
  .global-vehicle-details .tabs-nav {
      flex-direction: column;
  }
  
  .global-vehicle-details .tab-btn {
      width: 100%;
  }
  
  .global-vehicle-details .section-title {
      font-size: 20px;
  }
  
  .global-vehicle-details .section-title i {
      width: 40px;
      height: 40px;
      font-size: 22px;
  }

}

/* Responsive Design */
@media (max-width: 1200px) {
    .global-vehicle-details .content-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .global-vehicle-details .sidebar {
        width: 100%;
        order: -1;
    }
    
    .global-vehicle-details .vehicle-card {
        grid-template-columns: 200px 1fr;
        gap: 20px;
    }
}

@media (max-width: 576px) {

  /* QR Code Creation Form */
  #qrcodepage .qr-type-label {
    flex-direction: column;
    text-align: center;
  }

  #qrcodepage .qr-type-icon {
    margin-bottom: 0.5rem;
  }

  /* css for internal alerts details page */
  #internal-alert-details .header-title {
    font-size: 1rem;
  }
  
  #internal-alert-details .header-subtitle {
    font-size: 0.8125rem;
  }
  
  #internal-alert-details .btn-back {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }
  
  #internal-alert-details .alert-type-badge {
    font-size: 0.6875rem;
    padding: 0.375rem 0.75rem;
  }
  
  #internal-alert-details .info-item {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  #internal-alert-details .info-icon {
    display: none;
  }

  /* Camera Settings Page */
  #door_camera_settings .settings-section-header {
    padding: 15px;
  }
  
  #door_camera_settings .section-icon-wrapper {
    width: 45px;
    height: 45px;
  }
  
  #door_camera_settings .section-icon-wrapper i {
    font-size: 1.5rem !important;
  }
  
  #door_camera_settings .section-title {
    font-size: 1.1rem;
  }

  /* Active Tasks page */
  #active_tasks_container_card .task-card-body {
    padding: 18px;
  }
  
  #active_tasks_container_card .task-card-header {
    padding: 14px 16px;
  }
  
  #active_tasks_container_card .task-title {
    font-size: 16px;
  }
  
  #active_tasks_container_card .task-title i {
    font-size: 18px;
    padding: 6px;
  }
  
  #active_tasks_container_card .active-tasks-list {
    gap: 18px;
  }

}


/* Responsive adjustments for Modern Filter Form Styles */
@media (max-width: 767px) {

  #main-search div.search-input span {
    line-height: 1.5em;
  }

  #navbar-icons {
      flex-direction: column !important; /* stack items vertically */
      align-items: flex-start; /* align to left */
      gap: 2px; /* space between items */
  }

  #navbar-icons .nav-item {
      width: 100%; /* make each li full width */
  }

  #shortcuts_settings_wrapper .shortcuts-container {
    justify-content: center;
  }

  #trespass_settings_wrapper .trespass-community-item {
    padding: 0.5rem;
  }
  
  #trespass_settings_wrapper .switch-label {
    font-size: 0.8rem;
  }

  #daily_reports_setting_wrapper .report-format-options {
    flex-direction: column;
    gap: 0.5rem;
  }

  .filter-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-actions {
    margin-top: 10px;
    width: 100%;
  }
  
  .filter-actions .btn {
    flex: 1;
  }
}
/* End Responsive adjustments for Modern Filter Form Styles */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#directory_card .refresh-btn i {
  transition: all 0.3s ease;
}

#directory_card .refresh-btn:hover i {
  animation: spin 1s linear infinite;
}

@media (max-width: 768px) {
  #directory_card .card-header {
      padding: 1rem;
  }
  #directory_card .card-body {
      padding: 1.2rem;
  }
  #directory_list .directory-table {
      display: block;
      overflow-x: auto;
  }
}

/*.live-alert-setting-swal .swal2-content {*/
/*  padding: 0 !important; !* Remove padding from the live-alert-setting-swal modal *!*/
/*}*/

@keyframes reverse-progress-anim {
  0% {
    width: 100%; /* Start fully filled */
  }
  100% {
    width: 0; /* End empty */
  }
}


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

@media only screen and (max-width: 1524px) {

  #specific-area {
    width: 204px;
    height: 152px;
    position: relative;
  }

}

/* CSS for mobile devices */
@media only screen and (max-width: 767px) {

  /*Your mobile-specific styles here */
  .navbar-brand {
    text-align: center;
  }

  #main-search {
    padding: 0;
  }

  #navbar-icons.navbar-nav .nav-link {
    padding-right: 10px;
    padding-left: 10px;
  }

  /*#profile_details .avatar img {*/
  /*  width: auto !important;*/
  /*  height: auto !important;*/
  /*}*/
  #officer-toggle-btn .classic-btn,
  #officer-toggle-btn .camera-btn {
    padding: 10px 20px;
  }

  #unread-notifications-container,
  #unread-notifications {
    min-width: auto;
  }

  #profile_details .profile-edit-btn {
    left: 122px;
    bottom: 270px;
  }

}

@media (max-width: 1199px) {

  #layout-menu {
    display: none; /*Hide default hide menu on mobile screens*/
  }

}

/* Camera Info Box Styles */
.camera-info-box {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e3e6ea;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.camera-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}

.camera-info-item:first-child {
  padding-top: 0;
}

.camera-info-item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Only add separator when there are multiple items */
.camera-info-item:first-child:not(:last-child) {
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #dee2e6;
}

.camera-info-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.camera-info-content {
  flex: 1;
}

.camera-info-title {
  font-weight: 600;
  font-size: 13px;
  color: #202B56;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.camera-info-desc {
  font-size: 12px;
  color: #6c757d;
  line-height: 1.5;
}

/* Responsive adjustments for camera info box */
@media (max-width: 767px) {
  .camera-info-box {
    padding: 10px;
  }
  
  .camera-info-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .camera-info-title {
    font-size: 12px;
  }
  
  .camera-info-desc {
    font-size: 11px;
  }
}

/* Activity Log Styles */
.activity-help-icon {
  color: #2196f3;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  vertical-align: middle;
}

.activity-help-icon:hover {
  color: #1976d2;
  transform: scale(1.1);
}

.activity-help-icon i {
  transition: transform 0.3s ease;
}

.activity-help-icon:hover i {
  animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.activity-filter-instructions h6 {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
}

.activity-instruction-item {
  font-size: 13px;
  color: #495057;
  line-height: 1.6;
}

.activity-instruction-item strong {
  color: #202B56;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.activity-instruction-item p {
  font-size: 13px;
  color: #495057;
  line-height: 1.6;
}

.activity-instruction-item ul {
  list-style: disc;
  padding-left: 20px;
  margin-top: 4px;
  margin-bottom: 0;
}

.activity-instruction-item ul li {
  font-size: 12px;
  color: #6c757d;
  padding: 3px 0;
  line-height: 1.5;
}

.activity-color-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}

.activity-color-badge.old-badge {
  background: #ffe6e6;
  color: #dc3545;
  border: 1px solid #ffcccc;
}

.activity-color-badge.new-badge {
  background: #e6ffe6;
  color: #28a745;
  border: 1px solid #ccffcc;
}

.activity-log-container {
  position: relative;
}

.activity-log-card {
  background: #ffffff;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.activity-log-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.activity-log-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 16px 20px;
  border-bottom: 1px solid #e3e6ea;
}

.activity-avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #202B56 0%, #3a4a7f 100%);
  border-radius: 50%;
  color: #ffffff;
  font-size: 28px;
  box-shadow: 0 2px 8px rgba(32, 43, 86, 0.2);
}

.activity-user-name {
  font-size: 16px;
  font-weight: 600;
  color: #202B56;
  margin: 0;
}

.activity-user-role {
  font-size: 13px;
  color: #6c757d;
  background: #f0f2f5;
  padding: 2px 10px;
  border-radius: 12px;
  display: inline-block;
}

.activity-event-badge {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.activity-timestamp {
  font-size: 12px;
  color: #6c757d;
}

.activity-timestamp i {
  font-size: 11px;
}

.activity-log-body {
  padding: 20px;
}

.activity-module-info-inline {
  font-size: 14px;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 4px;
}

.activity-module-info-inline i {
  color: #202B56;
  font-size: 15px;
}

.activity-module-info-inline strong {
  color: #202B56;
  font-weight: 600;
}

.activity-record-id {
  background: #202B56;
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
}

.activity-values-card {
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  height: 100%;
}

.activity-values-card.old-values {
  border-left: 4px solid #dc3545;
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
}

.activity-values-card.new-values {
  border-left: 4px solid #28a745;
  background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
}

.activity-values-title {
  font-size: 14px;
  font-weight: 600;
  color: #202B56;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #dee2e6;
}

.activity-values-title i {
  font-size: 14px;
}

.activity-values-card.old-values .activity-values-title {
  color: #dc3545;
}

.activity-values-card.new-values .activity-values-title {
  color: #28a745;
}

.activity-values-list {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 5px;
}

.activity-empty-state {
  text-align: center;
  padding: 30px 20px;
  color: #6c757d;
}

.activity-empty-state i {
  font-size: 32px;
  color: #adb5bd;
  display: block;
}

.activity-empty-state p {
  font-size: 13px;
  color: #6c757d;
  font-style: italic;
  line-height: 1.5;
}

/* Improved Timestamp Box */
.activity-timestamp-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  border-left: 3px solid #202B56;
}

.timestamp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: #202B56;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  flex-shrink: 0;
}

.timestamp-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.timestamp-relative {
  font-size: 11px;
  color: #6c757d;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.timestamp-exact {
  font-size: 12px;
  color: #212529;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.timestamp-time {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background-color: #202B56;
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* Actioner Label */
.activity-actioner-label {
  font-size: 10px;
  font-weight: 600;
  color: #202B56;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

.activity-actioner-label i {
  font-size: 11px;
}

/* Flatpickr Custom Buttons */
.flatpickr-button-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid #e6e6e6;
  background-color: #f8f9fa;
}

.flatpickr-apply-btn,
.flatpickr-clear-btn {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.flatpickr-apply-btn {
  background-color: #202B56;
  color: #fff;
}

.flatpickr-apply-btn:hover {
  background-color: #1a2345;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(32, 43, 86, 0.3);
}

.flatpickr-clear-btn {
  background-color: #6c757d;
  color: #fff;
}

.flatpickr-clear-btn:hover {
  background-color: #5a6268;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.activity-value-item {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-bottom: 1px solid #f0f2f5;
}

.activity-value-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.activity-attribute {
  font-size: 12px;
  font-weight: 600;
  color: #495057;
  text-transform: capitalize;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.activity-value {
  font-size: 13px;
  color: #212529;
  word-break: break-word;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f8f9fa;
  font-family: 'Courier New', monospace;
}

.activity-value.old-value {
  background: #ffe6e6;
  color: #dc3545;
  border: 1px solid #ffcccc;
}

.activity-value.new-value {
  background: #e6ffe6;
  color: #28a745;
  border: 1px solid #ccffcc;
}

.activity-meta-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid #e3e6ea;
}

.activity-meta-info small {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}

.activity-meta-info small:last-child {
  margin-bottom: 0;
}

.activity-meta-info i {
  color: #6c757d;
  width: 16px;
}

.activity-meta-info strong {
  color: #495057;
  font-weight: 600;
}

/* Scrollbar styling for activity values list */
.activity-values-list::-webkit-scrollbar {
  width: 6px;
}

.activity-values-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.activity-values-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.activity-values-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Responsive adjustments for activity log */
@media (max-width: 767px) {
  .activity-filter-instructions {
    padding: 12px 16px;
  }

  .activity-filter-instructions h6 {
    font-size: 14px;
  }

  .activity-instruction-item {
    font-size: 12px;
  }

  .activity-instruction-item p {
    font-size: 12px;
  }

  .activity-instruction-item ul li {
    font-size: 11px;
  }

  .activity-log-header {
    padding: 12px 16px;
  }

  .activity-avatar {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .activity-user-name {
    font-size: 14px;
  }

  .activity-user-role {
    font-size: 11px;
    padding: 2px 8px;
  }

  .activity-event-badge {
    font-size: 11px;
    padding: 4px 10px;
  }

  .activity-log-body {
    padding: 16px;
  }

  .activity-module-info-inline {
    font-size: 12px;
  }

  .activity-module-info-inline i {
    font-size: 13px;
  }

  .activity-values-card {
    padding: 12px;
  }

  .activity-values-title {
    font-size: 13px;
  }

  .activity-attribute {
    font-size: 11px;
  }

  .activity-value {
    font-size: 12px;
    padding: 6px 10px;
  }

  .activity-meta-info {
    padding: 10px 12px;
  }

  .activity-meta-info small {
    font-size: 11px;
  }
}

/* ===================================
   Payment Success Page Styles
   =================================== */

#payment-success {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px;
  border-radius: 12px;
}

#payment-success .card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  margin: 0;
}

.payment-success-container {
  padding: 60px 40px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

/* Success Icon Animation */
.success-icon-wrapper {
  margin-bottom: 30px;
}

.success-checkmark {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  position: relative;
}

.check-icon {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 4px solid #39DA8A;
  background-color: #f0fdf4;
  animation: scaleAnimation 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes scaleAnimation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.check-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 50px;
  border: solid #39DA8A;
  border-width: 0 5px 5px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  animation: checkAnimation 0.8s ease-in-out 0.3s forwards;
  opacity: 0;
}

@keyframes checkAnimation {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 25px;
    opacity: 1;
  }
  40% {
    height: 50px;
    width: 25px;
    opacity: 1;
  }
  100% {
    height: 50px;
    width: 25px;
    opacity: 1;
  }
}

.icon-line {
  display: none;
}

.icon-circle {
  display: none;
}

.icon-fix {
  display: none;
}

/* Success Content */
.success-content {
  margin-bottom: 40px;
}

.success-title {
  font-size: 36px;
  font-weight: 700;
  color: #202B56;
  margin-bottom: 15px;
  animation: fadeInUp 0.6s ease-in-out 0.4s backwards;
}

.success-message {
  font-size: 18px;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0;
  animation: fadeInUp 0.6s ease-in-out 0.5s backwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Payment Details Card */
.payment-details-card {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
  text-align: left;
  border: 2px solid #e9ecef;
  animation: fadeInUp 0.6s ease-in-out 0.6s backwards;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #dee2e6;
}

.detail-header i {
  font-size: 24px;
  color: #202B56;
}

.detail-header h3 {
  font-size: 22px;
  font-weight: 600;
  color: #202B56;
  margin: 0;
}

.detail-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #ffffff;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.detail-row:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.detail-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #495057;
}

.detail-label i {
  font-size: 18px;
  color: #202B56;
  width: 20px;
  text-align: center;
}

.detail-value {
  font-size: 15px;
  font-weight: 600;
  color: #202B56;
}

.status-success .status-badge {
  background: #39DA8A;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
}

/* Action Buttons */
.success-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
  animation: fadeInUp 0.6s ease-in-out 0.7s backwards;
}

.success-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.success-actions .btn-primary {
  background: #202B56;
  border-color: #202B56;
}

.success-actions .btn-primary:hover {
  background: #1a2345;
  border-color: #1a2345;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(32, 43, 86, 0.3);
}

.success-actions .btn-outline-secondary {
  border: 2px solid #6c757d;
  color: #6c757d;
}

.success-actions .btn-outline-secondary:hover {
  background: #6c757d;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(108, 117, 125, 0.3);
}

.success-actions .btn i {
  font-size: 18px;
}

/* Success Footer */
.success-footer {
  animation: fadeInUp 0.6s ease-in-out 0.8s backwards;
}

.footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: #6c757d;
  margin: 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 10px;
  border-left: 4px solid #202B56;
}

.footer-note i {
  font-size: 18px;
  color: #202B56;
}

/* Responsive Design */
@media (max-width: 768px) {
  .payment-success-container {
    padding: 40px 20px;
  }

  .success-title {
    font-size: 28px;
  }

  .success-message {
    font-size: 16px;
  }

  .success-checkmark {
    width: 100px;
    height: 100px;
  }

  .check-icon {
    width: 100px;
    height: 100px;
  }

  .check-icon::after {
    width: 20px;
    height: 40px;
    border-width: 0 4px 4px 0;
  }

  .payment-details-card {
    padding: 20px;
  }

  .detail-header h3 {
    font-size: 18px;
  }

  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }

  .detail-label,
  .detail-value {
    font-size: 14px;
  }

  .success-actions {
    flex-direction: column;
  }

  .success-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .footer-note {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .success-title {
    font-size: 24px;
  }

  .success-message {
    font-size: 14px;
  }

  .success-checkmark {
    width: 80px;
    height: 80px;
  }

  .check-icon {
    width: 80px;
    height: 80px;
  }

  .check-icon::after {
    width: 18px;
    height: 35px;
    border-width: 0 3px 3px 0;
  }

  .detail-header i {
    font-size: 20px;
  }

  .detail-header h3 {
    font-size: 16px;
  }

  .success-actions .btn {
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* Print Styles */
@media print {
  #payment-success {
    background: #ffffff;
    min-height: auto;
  }

  .success-actions {
    display: none;
  }

  .success-footer {
    display: none;
  }

  .payment-details-card {
    border: 2px solid #000000;
  }
}

/* ===================================
   Payment Failed Page Styles
   =================================== */

#payment-failed {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%);
  padding: 30px;
  border-radius: 12px;
}

#payment-failed .card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  margin: 0;
}

.payment-failed-container {
  padding: 60px 40px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

/* Failed Icon Animation */
.failed-icon-wrapper {
  margin-bottom: 30px;
}

.failed-cross {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  position: relative;
}

.cross-icon {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 4px solid #FF5B5C;
  background-color: #fff5f5;
  animation: scaleAnimation 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cross-line {
  position: absolute;
  height: 5px;
  width: 50px;
  background-color: #FF5B5C;
  border-radius: 3px;
  animation: crossLineAnimation 0.8s ease-in-out 0.3s forwards;
  opacity: 0;
}

.cross-line-left {
  transform: rotate(45deg);
}

.cross-line-right {
  transform: rotate(-45deg);
}

@keyframes crossLineAnimation {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: 50px;
    opacity: 1;
  }
}

.cross-circle {
  display: none;
}

/* Failed Content */
.failed-content {
  margin-bottom: 40px;
}

.failed-title {
  font-size: 36px;
  font-weight: 700;
  color: #c92a2a;
  margin-bottom: 15px;
  animation: fadeInUp 0.6s ease-in-out 0.4s backwards;
}

.failed-message {
  font-size: 18px;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0;
  animation: fadeInUp 0.6s ease-in-out 0.5s backwards;
}

/* Failed Reasons Card */
.failed-reasons-card {
  background: #fff5f5;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
  text-align: left;
  border: 2px solid #ffe0e0;
  animation: fadeInUp 0.6s ease-in-out 0.6s backwards;
}

.reasons-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #ffc9c9;
}

.reasons-header i {
  font-size: 24px;
  color: #c92a2a;
}

.reasons-header h3 {
  font-size: 22px;
  font-weight: 600;
  color: #c92a2a;
  margin: 0;
}

.reasons-body {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.reason-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #ffffff;
  border-radius: 10px;
  border-left: 4px solid #FF5B5C;
  transition: all 0.3s ease;
}

.reason-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(255, 91, 92, 0.15);
}

.reason-item i {
  font-size: 20px;
  color: #FF5B5C;
  min-width: 24px;
  text-align: center;
}

.reason-item span {
  font-size: 15px;
  color: #495057;
  font-weight: 500;
}

/* Action Buttons */
.failed-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
  animation: fadeInUp 0.6s ease-in-out 0.7s backwards;
}

.failed-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.failed-actions .btn-primary {
  background: #202B56;
  border-color: #202B56;
}

.failed-actions .btn-primary:hover {
  background: #1a2345;
  border-color: #1a2345;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(32, 43, 86, 0.3);
}

.failed-actions .btn-outline-danger {
  border: 2px solid #FF5B5C;
  color: #FF5B5C;
  background: transparent;
}

.failed-actions .btn-outline-danger:hover {
  background: #FF5B5C;
  color: #ffffff;
  border-color: #FF5B5C;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 91, 92, 0.3);
}

.failed-actions .btn i {
  font-size: 18px;
}

/* Failed Footer */
.failed-footer {
  animation: fadeInUp 0.6s ease-in-out 0.8s backwards;
}

.failed-footer .footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: #6c757d;
  margin: 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 10px;
  border-left: 4px solid #FF5B5C;
}

.failed-footer .footer-note i {
  font-size: 18px;
  color: #FF5B5C;
}

/* Responsive Design for Failed Page */
@media (max-width: 768px) {
  .payment-failed-container {
    padding: 40px 20px;
  }

  .failed-title {
    font-size: 28px;
  }

  .failed-message {
    font-size: 16px;
  }

  .failed-cross {
    width: 100px;
    height: 100px;
  }

  .cross-icon {
    width: 100px;
    height: 100px;
  }

  .cross-line {
    width: 40px;
  }

  @keyframes crossLineAnimation {
    0% {
      width: 0;
      opacity: 1;
    }
    100% {
      width: 40px;
      opacity: 1;
    }
  }

  .failed-reasons-card {
    padding: 20px;
  }

  .reasons-header h3 {
    font-size: 18px;
  }

  .reason-item {
    padding: 12px;
  }

  .reason-item span {
    font-size: 14px;
  }

  .failed-actions {
    flex-direction: column;
  }

  .failed-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .failed-footer .footer-note {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .failed-title {
    font-size: 24px;
  }

  .failed-message {
    font-size: 14px;
  }

  .failed-cross {
    width: 80px;
    height: 80px;
  }

  .cross-icon {
    width: 80px;
    height: 80px;
  }

  .cross-line {
    height: 4px;
    width: 35px;
  }

  @keyframes crossLineAnimation {
    0% {
      width: 0;
      opacity: 1;
    }
    100% {
      width: 35px;
      opacity: 1;
    }
  }

  .reasons-header i {
    font-size: 20px;
  }

  .reasons-header h3 {
    font-size: 16px;
  }

  .reason-item i {
    font-size: 18px;
  }

  .failed-actions .btn {
    padding: 12px 24px;
    font-size: 14px;
  }
}

.residence-create-page .residence-create-page__section-card {
  box-shadow: 0 4px 18px rgba(14, 18, 45, 0.06) !important;
}

.residence-create-page .residence-create-page__section-header {
  background: rgba(32, 43, 86, 0.06);
  border-bottom: 1px solid rgba(32, 43, 86, 0.08);
  border-left: 4px solid #202B56;
}

.residence-create-page .residence-create-page__section-header h4 {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.residence-create-page .residence-create-page__option {
  padding: 0.65rem 0.75rem;
  border: 1px solid #E9EEF5;
  border-radius: 0.5rem;
  background: #ffffff;
}

.residence-create-page .residence-create-page__option:hover {
  border-color: rgba(32, 43, 86, 0.35);
}

.residence-create-page .form-control-custom:focus,
.residence-create-page .form-select-custom:focus {
  border-color: rgba(32, 43, 86, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(32, 43, 86, 0.12);
}

.residence-create-page .residence-create-page__section-hint {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: rgba(33, 37, 41, 0.65);
}

.residence-create-page .residence-create-page__amenities-grid {
  padding: 0.75rem;
}

.residence-create-page .residence-create-page__amenity-check {
  position: relative;
  margin: 0;
  padding: 0;
}

.residence-create-page .residence-create-page__amenity-check .form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.residence-create-page .residence-create-page__amenity-tile {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid #E9EEF5;
  border-radius: 0.6rem;
  background: #ffffff;
  font-weight: 600;
  color: #2b2b2b;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.residence-create-page .residence-create-page__amenity-tile::after {
  content: "\2713";
  position: absolute;
  right: 10px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  background: #202B56;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(14, 18, 45, 0.15);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.residence-create-page .residence-create-page__amenity-tile:hover {
  border-color: rgba(32, 43, 86, 0.45);
  box-shadow: 0 6px 16px rgba(14, 18, 45, 0.08);
}

.residence-create-page .residence-create-page__amenity-check .form-check-input:focus + .residence-create-page__amenity-tile {
  box-shadow: 0 0 0 0.2rem rgba(32, 43, 86, 0.12);
  border-color: rgba(32, 43, 86, 0.6);
}

.residence-create-page .residence-create-page__amenity-check .form-check-input:checked + .residence-create-page__amenity-tile {
  border-color: #202B56;
  background: rgba(32, 43, 86, 0.12);
  box-shadow: 0 0 0 1px rgba(32, 43, 86, 0.25), 0 10px 22px rgba(14, 18, 45, 0.10);
  transform: translateY(-1px);
}

.residence-create-page .residence-create-page__amenity-check .form-check-input:checked + .residence-create-page__amenity-tile::after {
  opacity: 1;
  transform: scale(1);
}

 @media (max-width: 768px) {
  .residence-create-page .residence-create-page__section-header {
    border-left-width: 3px;
  }
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__card {
  border: 1px solid #E9EEF5;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(14, 18, 45, 0.06);
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__card-header {
  background: #ffffff;
  border-bottom: 1px solid #E9EEF5;
  padding: 0.9rem 1rem;
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(32, 43, 86, 0.10);
  color: #202B56;
  flex: 0 0 auto;
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__title {
  font-weight: 700;
  color: #202B56;
  line-height: 1.1;
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__subtitle {
  font-size: 0.85rem;
  color: #6B7280;
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__badge {
  font-size: 0.72rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid #E9EEF5;
  color: #202B56;
  background: #F8FAFC;
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__card-body {
  padding: 1rem;
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__field {
  padding: 0.55rem 0.65rem;
  border-radius: 0.6rem;
  background: #F8FAFC;
  border: 1px solid #EEF2F7;
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #6B7280;
  line-height: 1.1;
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__value {
  margin-top: 0.15rem;
  font-weight: 700;
  color: #111827;
  word-break: break-word;
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__card-footer {
  background: #ffffff;
  border-top: 1px solid #E9EEF5;
  padding: 0.75rem 1rem;
 }

 .visitor-vehicle-details-page .visitor-vehicle-details-page__action {
  margin-left: 0.5rem;
  margin-top: 0.25rem;
 }

 @media (max-width: 576px) {
  .visitor-vehicle-details-page .visitor-vehicle-details-page__card-header {
   padding: 0.85rem 0.85rem;
  }

  .visitor-vehicle-details-page .visitor-vehicle-details-page__card-body {
   padding: 0.85rem;
  }

  .visitor-vehicle-details-page .visitor-vehicle-details-page__card-footer {
   padding: 0.75rem 0.85rem;
  }
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__item {
  background: transparent;
  border-radius: 18px;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__vehicle {
  position: relative;
  background: #ffffff;
  border: 1px solid #E9EEF5;
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(14, 18, 45, 0.06);
  transition: box-shadow 0.15s ease, transform 0.08s ease;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__vehicle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #202B56;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__vehicle:hover {
  box-shadow: 0 14px 30px rgba(14, 18, 45, 0.10);
  transform: translateY(-1px);
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem 0.75rem 1rem;
  padding-left: calc(1rem + 6px);
  border-bottom: 1px solid #E9EEF5;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__plate-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #6B7280;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__plate-value {
  font-weight: 800;
  font-size: 1.05rem;
  color: #202B56;
  line-height: 1.1;
  word-break: break-word;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__top-right {
  text-align: right;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(32, 43, 86, 0.08);
  border: 1px solid rgba(32, 43, 86, 0.14);
  color: #202B56;
  font-size: 0.75rem;
  font-weight: 700;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__details {
  padding: 0.75rem 1rem;
  padding-left: calc(1rem + 6px);
 }

 .visitor-profile-vehicle-section .text-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #6B7280;
 }

 .visitor-profile-vehicle-section .text-value {
  font-weight: 800;
  color: #111827;
  word-break: break-word;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__actions {
  padding: 0.75rem 1rem 0.9rem 1rem;
  padding-left: calc(1rem + 6px);
  border-top: 1px solid #E9EEF5;
  background: #ffffff;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__action {
  margin-left: 0.5rem;
  margin-top: 0.25rem;
 }

 @media (max-width: 768px) {
  .visitor-profile-vehicle-section .visitor-profile-vehicle-section__top {
   flex-direction: column;
   align-items: flex-start;
  }

  .visitor-profile-vehicle-section .visitor-profile-vehicle-section__top-right {
   text-align: left;
   width: 100%;
  }

  .visitor-profile-vehicle-section .visitor-profile-vehicle-section__meta {
   justify-content: flex-start;
  }
 }

 @media (max-width: 576px) {
  .visitor-profile-vehicle-section .visitor-profile-vehicle-section__action {
   width: 100%;
   margin-left: 0;
  }
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__empty {
  background: transparent;
  border: 0;
  padding: 0;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
  padding: 1.25rem 1rem;
  border-radius: 0.9rem;
  background: #F8FAFC;
  border: 1px dashed rgba(32, 43, 86, 0.25);
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(32, 43, 86, 0.10);
  color: #202B56;
  font-size: 1.1rem;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__empty-title {
  font-weight: 800;
  color: #202B56;
 }

 .visitor-profile-vehicle-section .visitor-profile-vehicle-section__empty-subtitle {
  max-width: 520px;
 }

/* Parking Permit Settings Styles */
.parking-permit-settings-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  transition: box-shadow 0.3s ease;
}

.parking-permit-settings-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.parking-permit-settings-header {
  background: linear-gradient(135deg, #202B56 0%, #2d3a6e 100%);
  color: #fff;
  padding: 1rem 1.5rem;
  border-bottom: none;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.parking-permit-settings-header i {
  font-size: 1.25rem;
  color: #fff;
}

.parking-permit-info-note {
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);
  border-left: 4px solid #2196F3;
  padding: 0.875rem 1rem;
  border-radius: 6px;
  color: #1565C0;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
}

.parking-permit-info-note i {
  font-size: 1.125rem;
  color: #2196F3;
}

.note-box {
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);
  border-left: 4px solid #2196F3;
  padding: 0.875rem 1rem;
  border-radius: 6px;
  color: #1565C0;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
}

.note-box i {
  font-size: 1.125rem;
  color: #2196F3;
}

.parking-permit-control-group {
  background: #f8f9fa;
  padding: 1.25rem;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  height: 100%;
  transition: all 0.3s ease;
}

.parking-permit-control-group:hover {
  background: #fff;
  border-color: #202B56;
  box-shadow: 0 2px 8px rgba(32, 43, 86, 0.1);
}

.parking-permit-icon {
  color: #202B56;
  font-size: 1.125rem;
}

.parking-permit-input-group {
  border-radius: 6px;
  overflow: hidden;
}

.parking-permit-input-group .form-control {
  border-right: none;
  font-size: 1rem;
  padding: 0.625rem 0.875rem;
}

.parking-permit-input-group .input-group-text {
  background: #202B56;
  color: #fff;
  border: 1px solid #202B56;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.625rem 1rem;
}

.parking-permit-switch-wrapper {
  background: #fff;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.parking-permit-switch-wrapper .form-check-input {
  width: 3rem;
  height: 1.5rem;
  cursor: pointer;
}

.parking-permit-switch-wrapper .form-check-input:checked {
  background-color: #202B56;
  border-color: #202B56;
}

.parking-permit-switch-wrapper .form-check-label {
  cursor: pointer;
  margin-left: 1.2rem;
  color: #495057;
}

.parking-permit-note {
  background: #fff9e6;
  border-left: 3px solid #ffc107;
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.parking-permit-note i.fa-exclamation-circle {
  color: #ff9800;
}

.parking-permit-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5rem;
}

.parking-permit-list li {
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: #6c757d;
  display: flex;
  align-items: center;
}

.parking-permit-list li i.fa-check-circle {
  color: #28a745;
  font-size: 0.875rem;
}

.parking-permit-list li i.fa-times-circle {
  color: #dc3545;
  font-size: 0.875rem;
}

.parking-permit-switch-wrapper .form-check-input {
  margin-top: 0 !important;
}

@media (max-width: 991px) {
  .parking-permit-control-group {
    margin-bottom: 1rem;
  }
}

.parking-permit-master-switch {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  transition: all 0.3s ease;
}

.parking-permit-master-switch:hover {
  border-color: #202B56;
  box-shadow: 0 2px 8px rgba(32, 43, 86, 0.08);
}

.parking-permit-master-toggle {
  width: 3.5rem;
  height: 1.75rem;
  cursor: pointer;
}

.parking-permit-master-toggle:checked {
  background-color: #28a745;
  border-color: #28a745;
}

.parking-permit-master-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

/* .parking-permit-save-section {
  border-top: 1px solid #e9ecef !important;
} */

.parking-permit-save-btn {
  background: linear-gradient(135deg, #202B56 0%, #2d3a6e 100%);
  border: none;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(32, 43, 86, 0.2);
}

.parking-permit-save-btn:hover {
  background: linear-gradient(135deg, #2d3a6e 0%, #202B56 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(32, 43, 86, 0.3);
}

.parking-permit-save-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(32, 43, 86, 0.2);
}

.parking-permit-save-btn i {
  font-size: 0.875rem;
}

@media (max-width: 767px) {
  .parking-permit-settings-header {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
  }
  
  .parking-permit-settings-card .card-body {
    padding: 1.25rem !important;
  }
  
  .parking-permit-control-group {
    padding: 1rem;
  }

  .parking-permit-master-switch {
    padding: 1rem;
  }

  .parking-permit-master-switch .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .parking-permit-master-switch .form-check {
    margin-top: 1rem;
    margin-left: 0 !important;
  }
}

/* Parking Pass Settings - Resident Section */
.parking-pass-resident-section {
  /* background: linear-gradient(135deg, #fff5f5 0%, #ffffff 50%); */
  /* border-left: 4px solid #dc3545; */
  /* margin-bottom: 1rem; */
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* .parking-pass-resident-section .note-box {
  background: #fff;
  border-left: 3px solid #dc3545;
}

.parking-pass-resident-section .note-box i {
  color: #dc3545;
} */

/* Parking Pass Settings - Officer Section */
.parking-pass-officer-section {
  /* background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 50%); */
  /* border-left: 4px solid #0d6efd; */
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0 0 8px 8px;
}

/* .parking-pass-officer-section .note-box {
  background: #fff;
  border-left: 3px solid #0d6efd;
}

.parking-pass-officer-section .note-box i {
  color: #0d6efd;
} */

/* Additional Pass Purchase Settings */
.additional-pass-purchase-section {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.additional-pass-purchase-header {
  background: linear-gradient(135deg, #202B56 0%, #2d3a6e 100%);
  color: #fff;
  padding: 1rem 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  border-radius: 6px 6px 0 0;
}

.additional-pass-purchase-header i {
  font-size: 1.2rem;
  margin-right: 0.75rem;
}

.additional-pass-purchase-header span {
  font-size: 1rem;
  text-transform: uppercase;
}

.additional-pass-purchase-body {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-top: none;
  padding: 1.5rem;
  border-radius: 0 0 6px 6px;
}

/* .additional-pass-purchase-section .note-box {
  background: #f8f9fa;
  border-left: 3px solid #202B56;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.additional-pass-purchase-section .note-box i {
  color: #202B56;
} */

/* Community Purchase Accordion Styling */
.community-purchase-accordion .accordion-item {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.community-purchase-accordion .accordion-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.community-purchase-accordion .accordion-button {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  font-weight: 600;
  padding: 1rem 1.25rem;
  border: none;
}

.community-purchase-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, #202B56 0%, #2d3a6e 100%);
  color: #fff;
  box-shadow: none;
}

.community-purchase-accordion .accordion-button:not(.collapsed) i {
  color: #fff;
}

.community-purchase-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.community-purchase-accordion .accordion-body {
  padding: 1.5rem;
  background: #fafafa;
}

.community-purchase-accordion .parking-permit-master-switch {
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid #e9ecef;
  background: #ffffff;
}

.community-purchase-accordion .parking-permit-master-switch:hover {
  border-bottom: 2px solid #202B56;
  box-shadow: none;
}

.community-purchase-toggle-section {
  background: #fff;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.community-purchase-settings {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 1.5rem;
  margin-top: 1rem;
}

.community-purchase-settings .form-group {
  position: relative;
}

.community-purchase-settings .form-label {
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.community-purchase-settings .form-label i {
  color: #ff9800;
}