/*================================================================================
	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;
}

.toast-info {
  background-color: #00CFDD !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 6px 10px;
}

#filterFrm .btn-toggle-sidebar {
  padding: 10px 10px 6px 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 50px;
}

.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 {
  margin: 5px;
  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;
}

.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-blue:hover,
.btn-blue: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;
}

#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;
}

#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;
  opacity: 0.5;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-left: 5px;
}

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

#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: 180px;
}

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

/*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: 30px !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: 5px !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;
}

.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;
}

#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: 10px;
  top: 18px;
}

.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 {
  height: 380px;
  overflow: auto;
}

#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);*/
  background-size: auto;
  background-position: center;
  width: 30px;
  height: 30px;
  position: relative;
  top: 0;
}

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

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

#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: 14px;
  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;
}

.kiosk-type-label-visitor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  text-transform: uppercase;
  background: #202b56;
  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: 12px;
  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: 5px !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;
}

.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;
}

#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: 165px;
}

/*#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 {
  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 {
  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 {
  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: 70px !important;
}

#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: 16px;
  width: 16px;
}

#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: 2px !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 */
  display: inline-block; /* Ensure it remains inline */
}

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

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

#swal2-content .select2-container--default .select2-selection--single .select2-selection__arrow {
  min-height: 50px !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;
}

.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: 60px;
  top: 24px;
}

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

#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;
}

#visitor_instruction .form-check,
#directory_options_form .form-check,
#amenities_options_form .form-check {
  padding-left: 2em;
  margin-bottom: 15px;
}

#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"] {
  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;
}

#timestamp_on_photos .switch {
  margin-bottom: 4px;
}

#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);
}

#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;
}

/* Remove padding in SweetAlert2 content */
.swal2-content.no-padding-content {
  padding: 0 !important;
}

@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*/
  }

}