/*google fonts*/
@font-face{
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url("lib/google-fonts-rounded.woff2") format('woff2');
}

.material-symbols-outlined{
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  /* font-variation-settings:'FILL' 1,'wght' 100,'GRAD' 0,'opsz' 24*/
}

.symbol-filled{
	font-variation-settings:'FILL' 1;
}

/*general*/
.left{
	text-align:left;
}

.right{
	text-align:right;
}

.nopadding{
	padding:0px;
}

.clickable{
	cursor:pointer
}

.capitalize{
	text-transform: capitalize;
}

.hidden{
	display:none !important;
}

a:link, a:visited, .anchor-link{
	color:#e3e3e3;
	cursor:pointer;
}

a:hover,.anchor-link:hover{
	text-decoration:underline;
}

body{
	background:#000;
	color:#e3e3e3;
}

input[type='checkbox']{
	cursor:pointer;
}

select{
	-webkit-appearance: auto !important;
	-moz-appearance: auto !important;
	appearance: auto !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

input[type=number]{
  -moz-appearance: textfield;
}

.box1{
	background:#141414;
	border-radius:25px;
	padding: 20px 10px;
}

.icon-spin{
	animation: spin 1s infinite linear;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/*login*/
#nav-container{
	margin:80px auto;
}

#page-logo{
	max-width:150px;
}

#menu-toggler{
	background:transparent;
	border:0px;
}

#menu-toggler span{
	font-size:34px !important;
}

#box-description{
	width: calc(100% - 60px);
}

#box-description-text{
	font-size: 22px;
}

#box-description-icons span{
	font-size: 44px;
	margin:18px;
	font-variation-settings:'FILL' 1
}

#box-eagle{
	border-radius:15px;
	background:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
	margin-right:60px;
	width:660px;
	border-radius:0px 0px 35px 35px; 
	padding-top:60px;
}

#box-eagle img{
	max-width:750px;
	position: relative;
	left: 40px;
}

#logos-box .row .col{
	padding:0px;
}

#logos-box .row .col:nth-child(2){
	padding-left: 24px;
}

#logos-box img{
	max-width:160px;
	width:100%;
}

#logos-box .box1{
	padding:76px 0px;
	max-height:178px;
}


#box-login label{
	font-size:12px;
	margin-bottom:9px;
	margin-top:10px;
	margin-left:10px;
}

#box-login a{
	font-size:17px;
	letter-spacing:0.5px;
}

#box-login-inner{
	max-width:490px;
	margin:30px auto;
}

.btn{
	padding:6px 25px 6px;
	border-radius: 20px;
	border: 0px;
}

.btn-success{
	background:#b4b4b4;
	color:#000;
}

.btn-success:hover,.btn-success:active,.btn-success:focus{
	background:#b4b4b4 !important;
	color:#000 !important;
}

.btn-cancel{
	background:#2C2C2C;
	color:#fff;
}

.btn-cancel:hover,.btn-cancel:active,.btn-cancel:focus{
	background:#2C2C2C !important;
	color:#fff !important;
}

.form-control{
	border-radius:17px;
	border-style:none;
	font-size:20px;
	background:#fff;
	color:#000;
}

.form-control:focus{
	box-shadow:none;
}

@media (min-width:1475px){
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
    max-width: 1450px;
  }
}

@media (max-width:1200px){
#box-eagle{
	margin-right:30px;
	width:500px;
}

#box-eagle img{
	max-width:580px;
	left: 20px;
}
}

@media (max-width: 990px){
#box-eagle{
	margin-right:0px;
	width:auto;
}

#box-eagle img{
	left: 0px;
}

#login-container .g-5{
	--bs-gutter-x: 1.5rem;
}

#box-description{
	width: 100%;
}
}

@media (max-width: 767px){
#box-eagle{
	padding-top:0px;
}

#box-eagle img{
	max-width:400px;
}
}

@media (max-width: 470px){
#box-description-text{
	font-size: 18px;
}

#box-description-icons span{
	font-size: 25px;
}
#box-eagle img{
	max-width:300px;
}

#page-logo{
  max-width: 100px;
  padding-top: 13px;
}

#nav-container{
  margin: 40px auto;
  padding: 0px;
}
}

@media (max-width: 380px){
#box-eagle img{
	max-width:220px;
}
}

.dropdown-menu{
	background:#313131;
	border:0px;
	color:#c8c8c8;
}

.dropdown-menu li:hover{
	background:transparent !important;
}

.dropdown-menu.show{
	margin-top:5px !important;
	border-radius: 14px;
	padding: 10px 4px;
	font-size: 14px;
	min-width: 200px;
}

#login-error-text{
	background: #a00;
	width: 60%;
	margin:15px auto 0px;
	padding: 5px;
	border-radius:8px;
}

#login-success{
	color: #fff;
}

#login-success span{
	background: #0a0;
	border-radius: 50%;
}


/*live view*/
#main-container{
	display: grid;
	gap: 0px 20px;
	grid-template-columns: 220px auto;
	grid-template-rows: 100px auto;
	padding: 10px;
	height:100vh;
}

#page-logo-container,#page-logo-container-collapsed{
	padding:10px;
	text-align:center;
	justify-items: center;
	grid-row-gap: 0px;
	align-items: start;
	grid-template-rows: 1fr min-content 1fr;
	grid-template-columns: 1fr;
}

#page-logo-container hr{
	margin: 8px 0px 0px 0px;
	width: 100%;
}

#page-logo-sub{
	max-width:125px;
}

#main-header-container{
	font-size:18px;
	padding:20px 30px;
	display: grid;
	gap: 0px;
	grid-template-columns: auto auto;
	height:82.5px;
}

#main-header-container .material-symbols-outlined{
	font-variation-settings:'FILL' 1;
}

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

#main-header-text{
	padding-left:10px;
}

#main-header-subtext{
	padding-left:10px;
	font-size: small;
	color: #888;
	margin-top: 3px;
	text-transform: capitalize;
}

#main-header-right-container .form-switch, #main-header-right-container .dropdown-center{
	display:inline-block
}

#main-header-right-container .dropdown-item span{
	font-size:unset;
}

.context-menu{
	background:transparent;
	border:0px;
}

#rotation-toggle-container,.rightside-container{
	background: #2c2c2c;
    padding: 7px 10px 3px 18px;
    border-radius: 20px;
    display: inline-block;
    margin-left: 26px;
}

.main-header-right-item{
	padding: 9px 25px 3px 24px !important;
}

.menu-item{
	display:flex;
	align-items:center;
	padding:15px 0px;
	cursor:pointer;
}

.menu-item a{
	text-decoration: none;
	display: flex;
}

.menu-item span{
	font-variation-settings:'FILL' 1;
}

#accordionMenu .material-symbols-outlined{
	margin-right:12px;
}

#accordionMenu .box1{
	background:#2c2c2c;
}

#accordionMenu .submenu, .cams-menu-container .submenu{
	/*font-size:smaller;*/
	font-size:14px;
	padding-left:0px;
	list-style:none;
	margin-bottom: 0px;
	line-height: 170%;
}

#accordionMenu .submenu li, .cams-menu-container .submenu li{
	padding-left: 6px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#accordionMenu .submenu .material-symbols-outlined, .cams-menu-container .submenu .material-symbols-outlined{
	font-size:smaller;
	margin-right:8px;
}

#accordionMenu .submenu ul a,.cams-menu-container .submenu ul a,.search-results-item a{
	text-decoration:none;
}

#accordionMenu .submenu ul a:hover,.cams-menu-container .submenu ul a:hover{
	/*text-decoration:underline;*/
}

/*bg highlight instead of underline*/
#accordionMenu li.leaf:has(a:hover),.cams-menu-container li.leaf:has(a:hover),
.cam-item-container:has(.cam-item:hover),
.search-results-item:has(a:hover)
{
	background:#666;
	color:#fff;
}

#accordionMenu .submenu-level2 li,.cams-menu-container .submenu-level2 li,.cam-item-container{
	border-radius:6px;
	transition: ease 0.3s all;
}

#accordionMenu .submenu .selected{
	background: #444;
	border-radius: 6px;
}

.accordion-body{
	border-radius: 20px;
	padding: 17px 10px;
}

.accordion-body-inner{
	max-height: 40vh;
	overflow: hidden;
	transition: ease 0.3s all;
}

.accordion-body-inner:hover{
	overflow: auto;
}

.submenu ul{
	padding-left: 5px !important; 
}

.submenu ul li{
	padding-left: 10px !important; 
}

.accordion-body-inner,.main-section-container,.map-container-inner,#accordionMenu{
	scrollbar-width: thin;
	scroll-behavior: smooth;
	scrollbar-color: #444 #222;
}

.main-section-container{
	height: calc(100vh - 130px);
	padding:20px;
	overflow:auto;
}

#cams-container{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: flex-start;
}

.cam-img{
	width:320px;
	/*height:240px;*/
	margin:5px;
	border-radius:7px;
	aspect-ratio:16/9;
	border:3px solid transparent;
	overflow:hidden;
	transition: 0.15s ease all;
	position:relative;
}

.cam-img img{
  width:100%;
  max-width:640px;
  max-height:480px;
}

#bottom-menu{
/* position:fixed; */
/* width:220px; */
	background:#000;
	border-top: 1px solid #666;
	padding: 12px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
/* bottom:0px; */
}

#bottom-menu span{
	font-size:15px;
}

#bottom-menu-totalcams{
	display: flex;
	background: #ccc;
	border-radius: 16px;
	color: #000;
	padding: 5px 15px;
	font-size: 12px;
	justify-content: center;
	align-items: center;
}

#bottom-menu-totalcams span{
	margin-right:4px;
}

.bottom-menu-toggle{
	display: flex;
	background: #161616;
	border-radius: 16px;
	padding: 5px;
	justify-content: center;
	align-items: center;
	cursor:pointer;
}

.bottom-menu-toggle span{
	margin:0px !important;
}

/*this is to avoid collisions with the main menu*/
#accordionMenu{
/* height: calc(81vh - 20px);
	overflow: hidden;*/
	overflow-x: hidden;
}

/*
@media (max-height: 400px){
#bottom-menu{
	position:static;
}
}*/

.custom-tooltip{
	background:#000;
	color:#ececec;
	border-radius:20px;
	font-size:12px;
	padding:2px 15px;
}

.custom-tooltip2{
	background:#ccc;
	color:#000;
	border-radius:20px;
	font-size:12px;
	padding:2px 15px;
	z-index: 999;
}

.custom-tooltip2 .tooltip-inner{
	background:#ccc;
	color:#000;
	font-size:12px;
}

.custom-tooltip2 .tooltip-arrow::before{
	border-right-color: #ccc !important;
}

.cam-rtsp{
	display:inline-block;
	width:100%;
	background:#000;
}

.cam-rtsp video,.cam-rtsp canvas{
	width:100%;
	height:100%;
	aspect-ratio:16/9;
}

/*map view*/
#map-container{
	height: calc(100vh - 130px);
	padding:20px;
	overflow:auto;
	display: flex;
	position: relative;
}

#map-container-inner{
	margin:0px auto;
	overflow:auto;
	display:flex;
	position:relative;
	flex:auto;
}

.map-img{
	width:1100px;
	position:absolute;
	border-radius:25px;
}

.map-cam-container{
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  position:absolute
}

.cam-direction{
  transform:rotate(180deg);
  background:url(img/coverage-area.png);
  height: 90px;
  width: 90px;
  position:absolute;
}

.cam-button{
	width: 24px;
	height: 24px;
	background: #326FD1;
	border-radius: 50%;
	z-index: 1;
	border: 3px solid #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 0px 1px rgba(0,0,0,0.7);
	cursor:pointer;
}

.cam-button span{
	font-size: 12px;
}

.map-cam-thumb{
	margin: 5px auto;
	height:130px;
	max-width:100%;
}

.map-cam-thumb-tooltip{
	opacity:1 !important;
	overflow:hidden;
	width:190px;
}

/*grid edit*/
.cam-zone{
    flex: 0 0 320px;
    height: 180px;
	position:relative;
	justify-content:center;
	align-items:flex-start;
	display:flex;
	margin:5px;
	transition: all ease 0.25s;
	overflow:hidden;
}

.cam-zone .cam-img{
	opacity:0.2;
	background:#000;
	position: absolute;
	margin:0px;
}

.cam-zone .drag-icon{
  font-size: 100px !important;
  position: absolute;
  cursor:grab;
  font-variation-settings:'wght' 200;
  margin-top:40px;
}

.cam-remove{
  position: absolute;
  margin-top: 22px;
  margin-left: 272px;
  cursor: pointer;
  z-index: 2;
  width: 25px;
  height: 25px;
  padding: 0px;
  text-align: center;
}

#cam-add{
    background-color: #000;
	order:99999;
}

#cam-add span{
	cursor:pointer;
	font-size: 85px;
	margin-top:46px;
}

.zone-drag{
  background-color: #ccc;
}

.zone-empty{
	border:1px solid #ccc;
}

.zone-empty .drag-icon,.zone-empty .cam-remove{
	display:none;
}

/*recordings*/
#recordings-container{
	display: flex;
	/*justify-content: center;*/
	align-items: center;
	flex-direction: column;
}

#recordings-add-camera-container{
	background:#2C2C2C;
	border-radius:20px;
	width:80%;
	height:80%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin:auto;
}

#recordings-add-camera-container span{
	font-size:150px;
	font-weight: lighter;
}

#recordings-cam-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#videoplayer-container{
	text-align:center;
	height:288px;
}

.video-elem{
	max-height:288px;
	border-radius:10px;
	display:none
}

.video-placeholder{
	background:#2C2C2C;
	display:flex;
	align-items:center;
	justify-content:center;
	width:512px;
	height:288px;
	border-radius:20px;
}

.video-placeholder span{
	font-size:100px;
	font-variation-settings:'FILL' 1;
	color:#666;
}

#recording-actions-container{
	background:#4D4C4C;
	border-radius:24px;
	padding: 2px 25px;
	margin-top:30px
}

#recording-actions-left{
	background:#2C2C2C;
	border-radius:20px;
	padding: 4px 25px;
}

#recording-actions-right{
	padding: 3px;
}

#recording-actions-left, #recording-actions-right{
	display:inline-flex;
}

.recording-action{
	background:#fff;
	color:#2C2C2C;
	border-radius:20px;
	padding: 2px 0px;
	margin: 0px 3px;
	cursor:pointer;
	width: 32px;
	height: 32px;
	text-align: center;
	transition:0.3s ease all
}

.recording-action a{
	color:#2C2C2C !important;
}

.recording-action .material-symbols-outlined{
	line-height:unset;
	font-variation-settings:'FILL' 1;
	font-size: 18px;
}

.recording-action-disabled{
	background:#888;
	cursor:default;
}


#recordings-list-container{
	margin-top: 30px;
}

.form-datepicker{
	background: #fff;
	color: #2c2c2c;
	border-radius: 15px;
	border: 0px;
	padding: 8px 16px;
	font-size: smaller;
}

.form-datepicker-label{
	margin-left: 15px;
	margin-bottom: 5px;
}

#recordings-results-container{
	margin-top: 20px;
	display: grid;
	gap: 0px;
	grid-template-columns: auto auto;
	padding: 10px;
	font-size:smaller;
}

.results-side{
	display: table;
	padding: 5px;
	height: fit-content;
}

.row-body div,.row-header div{
	display:table-cell;
	vertical-align: middle;
}

.row-header{
	display:table-row;
}

.row-header div{
	padding-bottom: 15px;
	padding-left: 10px;
}

.row-body{
	display:table-row;
	cursor:pointer;
	transition:0.3s ease all
}

.row-body div{
	padding: 2px 10px;
}

.row-body div:first-child{
	border-radius:20px 0px 0px 20px;
}

.row-body div:last-child{
	border-radius:0px 20px 20px 0px;
}

.row-body:hover div, .row-active div{
	background:#fff;
	color:#2c2c2c;
	transition:0.3s ease all;
}

.row-body span{
	display: block;
}

#recordings-results-right{
	border-left: 1px solid #c2c2c2
}

#recordings-form-container .btn-success{
	margin-top: 29px;
	padding: 11px 115px !important;
	font-size:smaller;
	min-width:270px;
}

#recordings-form-container .btn-success span{
	font-size:14px !important;
}

@media (max-width: 1250px){
#recordings-form-container .col{
	text-align:center;
}
}

/*cam select modal*/
.modal-content{
	background:#111;
	box-shadow:0px 0px 20px #000000a2;
}

.cams-menu-container{
	background:#2C2C2C;
	font-size:smaller;
	padding:8px;
	border-radius:10px;
}

.modal-header{
	border:0px;
}

.modal-body{
	padding:5px 20px;
}

.modal-footer{
	border:0px;
	justify-content:center;
}

.modal-footer .btn{
	width:45%;
	font-size:smaller;
}

.modal-title{
	display: flex;
}

.modal-title span{
	margin-right: 5px;
}

/*cam view*/
.cam-img-big-preview{
	height:calc(100vh - 270px);
	max-width:1200px;
	justify-content:center;
	align-items:center;
	display:flex;
	margin:0px auto;
	transition: all ease 0.25s;
	color:#ccc;
	overflow:hidden;
}

.cam-img-big-preview:hover{
	color:#fff;
}

.cam-img-big-thumb{
	max-width: 100%;
	opacity:0.2;
	background:#000;
	margin:0px;
	cursor: pointer;
}

.play-overlay{
  font-size: 380px !important;
  position: absolute;
  cursor: pointer;
  font-variation-settings:'FILL' 1,'wght' 200
}

.cam-img-big-container{
	height:calc(100vh - 270px);
	max-width:1200px;
	justify-content:center;
	align-items:center;
	display:flex;
	margin:0px auto;
	overflow:hidden;
}

.cam-img-big-container .cam-rtsp{
	background:transparent;
}

.cam-img-big-container img{
	max-width: 100%;
}

#view-cam-container{
	text-align:center;
}

#view-cam-controls{
	border-radius:40px;
	background:#2C2C2C;
	padding: 6px 0px 12px 0px;
	margin-top: 20px;
}

.view-cam-controls-title{
	font-size:smaller;
	padding-bottom:5px;
}

.view-cam-controls-container{
	display:inline-flex;
}

.view-cam-controls-box{
	display:inline-block;
	padding:0px 15px;
}

.main-header-btn{
	margin-left:30px
}

/*parlantes*/
#audio-container-grid{
  display: grid;
  gap: 0px 30px;
  grid-template-columns: 300px 300px;
  grid-template-rows: auto;
  padding: 10px;
  height:100%;
}

.box-round{
	background:#2c2c2c;
	border-radius:20px;
	padding:10px 30px 15px;
	margin-bottom:20px;
}

.box-title{
	font-size: smaller;
	padding-left:20px;
	padding-bottom:12px;
	text-align:left;
}

.audio-title {
	margin-bottom: 6px;
}

.audio-title span{
	font-size:16px;
	vertical-align: middle;
	margin:0px 5px;
}

.box-round .box-title{
	padding-left:0px;
}

.box-content{
	text-align:left;
}

#audio-leftside{
	height: 90%;
	border-radius:20px;
}

#audio-leftside li{
	padding:6px 12px;
	border-radius:20px;
	color:#fff;
	cursor:pointer;
	transition: 0.3s all ease;
}

#audio-leftside li:hover{
	background:#666;
}

#audio-leftside ul{
	padding: 0px;
}

#audio-rightside{
	text-align:center;
	transition:0.3s ease all;
	opacity:0;
}

.dot{
	border-radius:50%;
	width:15px;
	height:15px;
	display:inline-block;
	margin:0px 10px
}

.dot-green{
	background:#0a0;
}

.dot-red{
	background:#a00;
}

.form-select-small{
	font-size:smaller;
	cursor:pointer;
}

.btn-success-green{
  border-radius: 20px;
  background: #080;
  border: 0px;
  font-size: smaller;
  color: #fff;
  padding: 5px 20px;
  vertical-align: middle;
}

.btn-success-green span{
	vertical-align:middle;
	margin-right:10px;
}

.subtext{
	font-size: small;
	text-align: left;
	padding-left: 12px;
	padding-bottom: 5px;
}

/*archivo alarmas*/
#archive-filters-container a{
	margin:0px 20px;
	text-decoration:none;
	color:#fff;
    font-size: small; 
    text-transform: uppercase;
}

#archive-actions-right{
	display:inline-flex;
	padding:3px;
}

#archive-actions-right .recording-action{
	width:32px;
	height:32px;
	border:0px;
}

#archive-actions-right .recording-action span{
	font-size:smaller
}


#archive-search-container, .filter-container{
	margin: 20px 20px 10px;
}

.actions-cell .recording-action{
	display:inline-block;
}

.input-mini{
	font-size: smaller;
	display:inline-block;
	width:300px;
	background:rgb(33, 37, 41);
	color:#fff;
}

.table-query{
	table-collapse:collapse;
	border:0px;
	border-bottom:1px solid #666;
	width:100%;
}

.table-query .row-header{
	border-bottom:2px outset #aaa;
    text-transform: uppercase; 
    font-size: small; 
}

.table-query th,.table-query td{
	border:1px solid #666;
	padding: 7px 10px 6px 10px;
	text-align:left;
	vertical-align:middle;
	font-size:smaller;
	white-space: nowrap;
}

.table-query tr td:first-child,.table-query tr th:first-child{
	border-left:0px;
	text-align:left;
}

.table-query tr td:last-child,.table-query tr th:last-child{
	border-right:0px;
}

.table-query th{
	border-top:0px;
}

.table-query .column-fill{
	width:100%;
}

.table-query .row-img{
	width:50px;
}

.center{
	text-align:center !important;
}

.paging-container{
	text-align:center;
	margin:10px;
}

.paging-container a{
	margin:5px;
	color:#fff;
	font-size:smaller;
	text-decoration:none;
}

.paging-container .disabled{
	color:#333;
	cursor:default;
}

.paging-container .active{
	cursor:default;
	color:#aaa;
}

.paging-container a:not(.disabled,.active):hover{
	text-decoration:underline;
}

/*audio*/
.error-box{
	text-align:center;
	color:#a00;
	font-weight:bold;
}

/*liveview audio button*/
.button-listen{
	position:absolute;
	margin-top:26px;
	margin-left:7px;
	opacity:0.5;
	color:#fff;
	transition:0.3s ease all;
	cursor:pointer;
	z-index:1;
}

.button-listen:hover{
	opacity:1;
}

.button-listen-active{
	color:#0a0;
	opacity:1;
}

.cam-live-audio{
	position:relative;
}

/*access door overlay*/
.cam-access-overlay{
	position:absolute;
	cursor:pointer;
	border:1px solid;
	border-radius:50%;
	display:inline-block;
	text-align:center;
	padding:4px;
	transition:0.3s ease all;
	border-color:#bf1c24;
}

.padlock-icon{
	border-radius:50%;
	text-align:center;
	padding:8px;
	transition:0.3s ease all;
	background:#bf1c24;
}

.cam-access-overlay-opened{
	border-color:#008c3c;
	cursor:wait;
}

.cam-access-overlay-opened .padlock-icon{
	background:#008c3c;
}

/*config grids*/
#config-grids-container-grid{
	display: grid;
	gap: 0px 15px;
	grid-template-columns: 310px 326px 326px;
	grid-template-rows: auto;
	padding: 10px;
	height:100%;
}

#config-grids-container-grid .cams-menu-container{
	height: 95%;
	border-radius:20px;
	padding-bottom:20px;
}

#config-grids-container-grid .cams-menu-container li,.extra-list li{
	padding:6px 12px;
	border-radius:20px;
	color:#fff;
	cursor:grab;
	transition: 0.3s all ease;
}

#config-grids-container-grid .cams-menu-container li:hover,.extra-list li:hover{
	background:#666;
}

#config-grids-container-grid .cams-menu-container ul,.extra-list{
	padding: 0px;
}

.item-remove, .item-edit{
	float:right;
	margin-top:6px;
	cursor:pointer;
}

.item-create{
	padding: 0px 35px 3px 35px !important;
	border: 1px solid grey;
	margin-top: 4px;
	cursor:pointer !important;
}

.extra-list{
	list-style: none;
	margin-bottom: 0px;
	line-height: 170%;
}

.extra-list span{
	font-size: smaller;
	margin-right: 8px;
}

.config-grids-modal .btn{
	width:auto !important;
}

#rotations-list .item-name:hover,#views-list .item-name:hover,.cam-item:hover,#blocks-list .item-name:hover,#levels-list .item-name:hover,#areas-list .item-name:hover{
	cursor:pointer;
}

.title-edit{
	float:right;
	margin-top:6px;
	cursor:pointer;
}

.config-grids-title{
	padding:8px 0px;
}

.config-grids-title .material-symbols-outlined{
	font-size:13px;
	margin-right: 13px;
}

.config-grids-title .title-edit{
	font-size:15px;
}

.grid-border{
	padding-left: 15px;
	border-left:1px solid #2c2c2c;
}

#config-grids-midside, #config-grids-rightside{
	height: calc(97% - 8px);
}

#config-grids-cams-container,#config-grids-views-container,#config-zones-levels-container,#config-zones-areas-container,#config-zones-cams-area-container{
	display:none;
}

.item-active{
	background:#666;
}

/*cam selector preview img*/
.cam-preview{
	cursor:pointer;
}

#cam-preview-container{
	display:none;
	width:120px;
	height:100px;
	position:absolute;
	z-index:9999999;
}

#cam-preview-img{
	width:100%;
}

/*cam selector filter*/
#cam-filter-container .input-group-text{
	border: 0px;
	border-radius: 17px 0px 0px 17px;
}

.search-hl{
	font-weight:bold;
	border-radius:8px;
	background:#444;
}

#current-cams-count{
	font-variation-settings:'FILL' 1;
}

/*live view fullscreen*/
.cams-container-fullscreen{
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100vh;
	justify-content: center !important;
	align-content: center !important;
	z-index: 9999;
}

.cam-img-fullscreen{
	margin:2px;
	text-align: center;
}

.cam-img-fullscreen img, .cam-img-fullscreen video{
	max-width:none;
	max-height:none;
}

/*for video 4/3 adjustment*/
.cam-img-fullscreen .cam-rtsp{
	display:block;
}

.cam-img-fullscreen4{
  width: 24% !important;
  max-height: 24% !important;
}

.cam-img-fullscreen3{
  width: 32% !important;
  max-height: 32% !important;
}

.cam-img-fullscreen2{
  width: 49% !important;
  max-height: 49% !important;
}

.cam-img-fullscreen1{
  width: 99% !important;
  max-height: 99% !important;
}

#btn-fullscreen-close{
	position:absolute;
	top:10px;
/*	left:calc(50% - 80px);*/
	opacity:0.1;
	z-index:99999;
	transition:0.3s ease all;
	display:none;
	align-items:center;
	font-size:large;
	right:10px;
	padding:7px;
}

#btn-fullscreen-close:hover{
	opacity:1;
}

.cam-img-fullscreen .button-listen{
	top: 26px;
	left: 7px;
	margin-top: unset;
	margin-left: unset;
}

/*live alerts*/
#btn-live-alerts-container{
	transition:0.3s ease all;
}

#btn-live-alerts-container.active{
	background:#198754;
}

#popup-motion-body .cam-img, #popup-motion-modal .modal-content{
  width: auto !important;
  margin:0px auto;
}

/*config nav abm*/
#config-nav-container .nav-item{
	padding-right: 40px;
	letter-spacing: 0.5px;
}

.abm-cams .table-query td{
	font-size:smaller; /*smaller text size if cams*/
}

.abm-cams .table-query-container{
	overflow-x:auto;
}

#abm-table-container select.form-control, .midtable select.form-control{
	width: auto;
	padding: 8px 15px;
	cursor: pointer;
}

#abm-table-container{
	display:grid;
}

#abm-table-filter-container{
	text-align:center;
	background:#2c2c2c;
	padding:8px;
	border:1px solid #555;
	margin-top:40px;
}

#abm-container .recordings_results_table{
	width:100%;
}

#abm-container .recordings_results_table td, .midtable td{
	padding:5px;
	border:1px solid #555;
}

#abm-container .recordings_results_table .header{
	background:#2c2c2c;
	text-align:center;
}

.midtable{
	margin: 50px auto;
	width:auto;
}

/*firmware update*/
#abm-container .alert{
	margin-top:20px;
}

#iframeModal-frame{
	width:100%;
	height:500px;
}

#iframeModal .audio-title .material-symbols-outlined{
	font-size:24px !important;
}

.fw_logbox{
	max-height:290px;
	overflow:auto;
	width:100%;
	text-align:center;
}

#update_firmware_info_button{
	background:#b4b4b4;
	color:#000;
}

/*config zones*/
.config-zones-container-grid{
	grid-template-columns: 220px 250px 250px 270px !important;
}

#config-zones-container-grid .submenu li,#config-grids-container-grid .submenu li{
	white-space:unset;
	display:flex;
}

#config-zones-container-grid .item-remove,#config-grids-container-grid .item-remove,#config-zones-container-grid .item-edit, #config-grids-container-grid .item-edit{
	float:none;
	margin-right:0px;
}

.flex-auto{
	flex:auto;
}

.ellipsis{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.cams-area-item .ellipsis,.cams-level-item .ellipsis{
	flex: 30;
}

#dropZone{
	height: 240px;
	background: #222;
	color: #fff;
	display: grid;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	margin-top:15px;
	transition:0.3s ease all;
	overflow: hidden;
}

/*door open alerts*/
.alert-dooropened{
  position: absolute;
  bottom: 15px;
  right: 30px;
  border-radius:20px;
  z-index:9999;
}

.btn-link{
	color:#000 !important;
	text-decoration:none !important;
}

.btn-link:hover{
	text-decoration:none !important;
}

/*add cam*/
.steps-container {
display: flex;
align-items: center;
justify-content: center;
}

.steps-circle {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
background-color: #555;
color: #ddd;
}

.steps-circle-white {
background-color: #ddd;
color: #1e1e1e;
}

.steps-line {
height: 1px;
background-color: #555;
width: 80px;
}

.step-container{
	margin-top:20px;
	display: grid;
}

.step-container .form-control{
	font-size: 16px;
	padding: 2px 14px;
}

#addcam-container-grid1,#addcam-container-grid3 {
	display: inline-grid;
	grid-template-columns: 300px 300px 300px;
	grid-template-rows: auto;
	padding: 10px;
	margin:0px auto;
}

#addcam-container-grid3 {
	grid-template-columns: 300px 300px;
}

.addcam-buttons-container{
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
	padding: 10px;
	position: absolute;
	width: 100%;
	bottom: 20px;
}

.step-container .box-round{
	background:transparent;
	margin-bottom: 0px;
}

.step-container .box-round .box-title {
	padding-left: 15px;
}

#addcam-step2, #addcam-step3{
	display:none
}

#addcam-container-grid2 {
	display: inline-grid;
	grid-template-columns: 265px 1150px;
	grid-template-rows: auto;
	padding: 10px;
	margin:0px auto;
}

#addcam-container-grid2 #map-container{
	height:calc(100vh - 156px);
}

#addcam-container-grid2 .cam-button{
	cursor:unset;
	user-select: none;
}

#addcam-container-grid2 .map-cam-container{
	cursor:grab
}

#addcam-step3-right{
	display:none
}

#addcam-step3-mid, #addcam-step3-right{
	border-left:1px solid #ccc;
}

#addcam-step3-left .map-cam-thumb{
	border-radius: 14px;
	border: 8px solid #000;
}

#iframeModal-frame-cams{
	width: 95%;
	height: calc(100vh - 138px);
}

.modal-fullscreen-cams{
	max-width:1600px;
	margin:0px auto;
}

.midscreen{
	display:flex;
	align-items:center;
	justify-content:center;
	height:100vh;
}

.text-big{
	font-size:5em !important;
}

.inner-bg{
	background:#111;
}

.cam-access-overlay-mini .padlock-icon{
	border-radius:0%;
	padding:0px;
	background:transparent;
}

/*extensions*/
.bigselect-container{
	height:300px;
	background:rgb(33, 37, 41);
	padding:8px;
	border-radius: 20px;
	display:inline-block;
}

.bigselect-container select{
	background:transparent;
	color:#fff;
	font-size:smaller;
	height:100%;
	scrollbar-width:thin;
	scroll-behavior:smooth;
	scrollbar-color:#444 #222;
}

.extension-body .table-dark{
	border:1px solid #4d5154;
}

.fontsmaller {
	font-size:smaller;
}

#dms-form-inner-table td{
	padding:10px;
	border:1px solid #555;
}

#dms_fixed_times{
	width:100% !important;
}

#dms_fixed_times_container{
	height:150px;
	margin:10px;
	width:150px !important;
}

/*search box*/
#search-container-inner{
	background:#141414;
	border-radius:16px;
	cursor:text;
	text-align:left;
	padding:4px 0px 2px 11px;
	color:#fff;
	display: inline-flex;
	width: 100%;
	vertical-align: middle;
}

#search-container-inner .material-symbols-outlined{
	font-size:16px !important;
}

#search-text{
	margin-left:10px;
	color:#444;
	font-size:smaller !important;
}

#bigsearch-input{
	background:#202020;
	border-radius:25px;
	color:#fff;
	padding: 0px 15px;
}

#bigsearch-input::placeholder{
	color:#aaa;
}

#searchModal .modal-dialog{
	max-width: 800px;
}

#searchModal .modal-content{
	border: 0px;
	border-radius: 40px;
	padding: 30px;
}

#bigsearch-form{
	display: grid;
	grid-gap: 10px;
	grid-auto-flow: column;
	grid-template-columns: 1fr 45px;
}

#bigsearch-form .btn-submit{
	background: #fff;
	color: #000;
	width: 40px;
	height: 40px;
	padding: 7px 9px;
}

#search-results-container{
	text-align:left;
	width:700px;
	margin: 10px auto;
	max-height: 65vh;
	overflow: auto;
}

.search-results-title{
	font-size: larger;
	border-bottom: 1px solid #fff;
	margin: 30px 0px 10px;
}

.search-results-group{
	color: #fff;
	display: inline-block;
	padding-right: 10px;
}

.search-results-item span{
	font-size:12px;
	margin-right:8px;
}

.search-results-item{
	margin: 20px 15px;
	padding: 6px 16px;
	border-radius: 16px;
	display: block;
	width: fit-content;
	transition: 0.3s ease all;
}

/* collapsed / expanded left menu */
#left-menu-expanded{
	grid-template-rows: 35px auto 53px;
	height: calc(100vh - 110px);
}

.expanded .show-collapsed,.collapsed .show-expanded{
	display:none !important;
}

.expanded .show-expanded, .collapsed .show-collapsed{
	display:grid;
}

.expanded #left-menu-expanded{
	display:grid;
}

#page-logo-container.show-expanded hr{
	margin: 8px 0px 5px 0px;
}

.expanded,.collapsed{
	transition: 0.3s ease-in-out all;
}

.collapsed{
	grid-template-columns: 30px auto !important;
}

#page-logo-container-collapsed{
	padding:10px 0px;
}

#page-logo-container-collapsed img{
	max-width: 100%;
}

#page-logo-container-collapsed hr{
	margin:5px;
	width: 100%;
}

#search-container-inner-collapsed{
	background:#141414;
	border-radius:16px;
	text-align:center;
	padding:4px 4px 2px 4px;
	color:#fff;
	vertical-align: middle;
}

#search-container-inner-collapsed span{
	font-size:inherit;
}

.menu-item-collapsed{
	text-align: center;
	margin-top: 20px;
}

.collapsed-filler{
	background:#333;
	border-radius:16px;
	height: max(0px,calc(100vh - 560px));
}

/*highlight camera on map*/
@keyframes hlAnim{
	0% {
		border: 33px solid #080;
	}

	100% {
		border: 3px solid #fff;
	}
}