@import url(../icons/font-awesome/css/font-awesome.min.css);
@import url(../icons/simple-line-icons/css/simple-line-icons.css);
@import url(../icons/weather-icons/css/weather-icons.min.css);
@import url(../icons/linea-icons/linea.css);
@import url(../icons/themify-icons/themify-icons.css);
@import url(../icons/flag-icon-css/flag-icon.min.css);
@import url(../icons/material-design-iconic-font/css/materialdesignicons.min.css);
@import url(../../vendor/tabulator-master/dist/css/tabulator_bootstrap5.min.css);
@import url(spinners.css);
@import url(animate.css);
body, html{
  min-height: 100%;

  height: 100%;
  height: 100vh;
  height: 10dvh;

}
:root{
  --a-sidebar-width: 60px;
  --a-sidebar-expanded-width: 160px;
}
main {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
/* TOPBAR */
#topbar {
	top:0;
	height: 60px;
	width: 100%;
	left: 0;
	/*padding-left: var(--a-sidebar-width);*/
}
#topbar .form-control{
  border-radius: 0
}

/* SIDEBAR */
#sidebar-left{
  z-index: 10;
  display: flex;
  flex-direction: column;
  position:fixed;
  width: var(--a-sidebar-width);
  transition: width 0.3s, height 0.3s;

}

#sidebar-left.expanded{
  width: var(--a-sidebar-expanded-width);
}
#sidebar-left .sidebar-wrapper{
  display: flex;
  flex-direction: column;
}
#sidebar-left ul{
  flex-direction: column;
}
#sidebar-left.expanded ul{
  display: flex;
  flex-direction: column;
}

#sidebar-left .nav-item a{
  display: flex;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

#page-sidebar-expand-button .nav-item div{
  display: flex;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
#sidebar-left.expanded ul{
  text-align: left;
}
#sidebar-left .sidebar-item-ico{
  flex: 0 0 auto;
  text-align: center;
  width: 100%;
}
#sidebar-left.expanded .sidebar-item-ico{
  width: 20%;
  margin-right: 5%;
}
#sidebar-left .sidebar-item-title{
  flex: 0 0 auto;
  display: none;
  width: 0%;
}
#sidebar-left.expanded .sidebar-item-title{
  display: inline-block;
  width: 75%;
}

#sidebar-left .nav-link{
	color: rgba(0, 0, 0, .65);
    background-color: transparent;
}
#sidebar-left #page-logo-text{
  display: none;
  flex: 1;
}
#sidebar-left.expanded #page-logo-text{
  display: flex;
}
#page-logo{
	height: 60px;
  display: flex;
  width: 100%;
  justify-content: space-between
}
#page-logo img{
	height: 100%;
}
#page-topbar-expand-button{
  display: none;
}
.b-example-divider {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.dropdown-toggle { outline: 0; }

.nav-flush .nav-link {
  border-radius: 0;
}

.btn-toggle {
  display: inline-flex;
  align-items: center;
  padding: .25rem .5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, .65);
  background-color: transparent;
  border: 0;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(0, 0, 0, .85);
  background-color: #d2f4ea;
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(0, 0, 0, .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  display: inline-flex;
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
  text-decoration: none;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: #d2f4ea;
}

.scrollarea {
  overflow-y: auto;
}

.fw-semibold { font-weight: 600; }
.lh-tight { line-height: 1.25; }
main{
  height: 100%;
}
#main-page-wrapper{
	padding-left: var(--a-sidebar-expanded-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#main-page-wrapper.expanded{
	padding-left: var(--a-sidebar-width);
}


#main-content{
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 0.5em 1.5em rgb(0 0 0 / 10%), inset 0 0.125em 0.5em rgb(0 0 0 / 15%);
}
#login-content{
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  width:100%;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 0.5em 1.5em rgb(0 0 0 / 10%), inset 0 0.125em 0.5em rgb(0 0 0 / 15%);
}
footer{
	height: 40px;
	line-height: 40px;
	font-size: 12px;
}
#main-content .card{
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  border-radius: 0;
}
/* MARKER */
.card-marker .card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-marker .card-body {
  padding: 0.5rem 0.5rem;
}

.map-marker{
  transition: width 0.2s, height 0.2s;
  opacity: 0.9;
}
.map-marker:hover{
  cursor: pointer;
  opacity: 1;
}
.map-marker .card-subtitle{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.725rem;
}
.map-marker .card-footer{
  padding: 0.1rem 0.5rem; 
  font-size: 0.725rem;
}
.map-marker-expanded{
  border-top: 2px #ccc dashed;
  border-bottom: 2px #ccc dashed;
}
#view-device-status-bar{
  padding: 0.1rem 0.5rem; 
  font-size: 0.725rem;
}

#map-devices{
  flex: 0 0 auto;

}

/* MISC */
.hide{
	display: none !important;
}
.dropdown-menu{
  border-radius: 0;
}

#page-devices, #page-messages, #page-help, #page-manager{
	height: 100%;
  position: relative;
}
#page-alert{
  position: fixed;
  top: 60px;
  width: 60%;
  z-index: 1000;
  margin: 0 20%;
}
#page-devices-alert{
  position: absolute;
  top: 0;
  z-index: 100;
}
/* HELP */
#page-help{
	height: 100%;
  position: relative;
}

.page-help-panel{
  flex: 1;
  min-height: 0;
}
.page-help-panel>div{
  height: 100%;
}
#help-menu{
  height: 100%;
  overflow-y: auto;
}
#help-content-wrapper{
  height: 100%;
  overflow-y: auto;
}
.page-help-panels{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* CARD FLIP */
.card-flip, .card-flip-container {
  transform-style: preserve-3d;
  transition: all 0.7s ease;
}
.card-flip-container  {
  display: grid; grid-template: 1fr / 1fr;
  grid-template-areas: "frontAndBack";
  transform-style: preserve-3d;
  transition: all 0.7s ease;
  perspective: 700px;
  min-height: 70px;
}
.card-title{
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-flip-container>div {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.card-flip.flip .card-flip-container {
  transform: rotateY(180deg);
}
  
.front, .back{
  grid-area: frontAndBack;
}
.back {
  transform: rotateY(-180deg);
}
.btn span .bi{
  vertical-align: 0;
}
.btn-expand-card-content.expanded{
  transform: rotateX(180deg);
}

/* LOGIN */
#login-content .card-login{
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;

}
#login-content img{
  opacity: 0.3;
  transition: opacity 0.6s ease-in-out;
}
#login-content img:hover{
  opacity: 0.8;
}
#login-content *{
  border-radius: 0
}
#page-manager .btn{
	border-radius: 0;
}
/* MESSAGES */
#page-messages-panels{
  display: flex;
  flex-direction: column;
  height: 100%;
}
#page-messages .page-messages-category{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.messages-box-view{
  width: 100%;
  height: 40%;
}
.messages-box-table{
  width: 100%;
  height: 60%;
}

@media screen and (min-width: 992px) {
  #page-messages .page-messages-category{
    flex-direction: row;
  }
  .messages-box-view{
    width: 40%;
    height: 100%;
  }
  .messages-box-table{
    width: 60%;
    height: 100%;
  }
  
}



#messages-panel{
  flex: 1;
}
#messages-panel .tab-pane{
  height: 100%;
}
#messages-inbox-view{
  flex: 1;
}
.messages-filter{
  display: flex;
}
/*MANAGER*/
#page-manager-panels{
  display: flex;
  flex-direction: column;
  height: 100%;
}
#page-manager .page-manager-category{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
#manager-panel{
  flex: 1;
}
#manager-panel .tab-pane{
  height: 100%;
}
@media screen and (min-width: 992px) {
  #page-manager .page-manager-category{
    flex-direction: row;
  }
  .manager-box-view{
    width: 40%;
    height: 100%;
  }
  .manager-box-table{
    width: 60%;
    height: 100%;
  }
  
}
/* DEVICES */
#overview-devices{
  position: relative;
  overflow-y: auto;
  height: 100%;
  width: 75%;
  display: flex;
  flex-direction: column;

}
#overview-devices > div{
  width: 100%;
}
#overview-devices-grid{
  flex: 1;
  align-content: flex-start;
}
#grid-devices .alert{
	display: none;
}
#grid-devices:empty .alert{
	display: block;
}
#quick-filter-devices{
  flex-wrap: nowrap;
}
#quick-filter-devices-buttons{
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}
#quick-filter-devices.scrollable #quick-filter-devices-buttons {
  padding: 0 1rem;
}
#quick-filter-devices .scroll-button {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 9;
  display: none; /* Initially hide the buttons */
}
#quick-filter-devices.scrollable .scroll-button {
  display: block; /* Initially hide the buttons */
}


#quick-filter-devices .scroll-button-right{
  right: 0;
}
#quick-filter-devices .scroll-button-left{
  left: 0;
}

#pagination-filter-device-settings {
  display: none;
}
#pagination-filter-device-settings.expanded {
  display: flex;
}

#form-device-filter *{
  border-radius: 0;

}
#page-manager form *{
  border-radius: 0;
}

#page-devices *, #page-help *, #page-messages *, #modal-device *{
  border-radius: 0;
}

.form-switch .form-check-input{
	background-image: url(../images/form/switch.svg);
}
.form-switch .form-check-input:checked{
	background-image: url(../images/form/switch-checked.svg);
}
.form-switch .form-check-input:focus{
	background-image: url(../images/form/switch-focus.svg);
}

.modal-content, .modal-content form *{
  border-radius: 0;
}
.progress{
  border-radius: 0;
}

#search-result{
  position: absolute;
  top: 60px;
  height: 0px;
  transition: height 0.3s;
  min-width: 30vw;
  z-index: 100;
}
.search-result-active .col-search-result{
	transition: opacity 0.3s;
}
#search-result .col-search-result{
  opacity:0;

}
#search-result.search-result-active .col-search-result{
  opacity:1;
}
#search-result.search-result-active .container-fluid, #search-result.search-result-active .row{
  height:100%;
  
}
#search-result.search-result-active{
  height: auto;
}
#search-result-header{
  display: none;
}
.search-result-active #search-result-header{
  display: flex;
}
#search-result-content{
	max-height: 60vh;
	overflow-x: auto;
}
#search-result.search-result-active .col-search-result{
  background-color: #fff;
  border-radius: 0;
  height: 100%;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.no-radius, .no-radius *{
  border-radius: 0;
}

/* POINT GROUP*/
.pg-sortable{
	min-height: 54px;
}
.pg-item{
	border: 2px #fff solid;
	background: #eee;	
}
.pg-item, .pg-placeholder{
	width: 20%;
	min-height: 50px;

}
.pg-item-content{
	height: 100%
}
.pg-placeholder{
	
	border: 2px #ccc dashed;
	background: #eee;
}
/*DEVICE COMMUNICATION*/
.mt-n2{
  margin-top: -1rem;
}
.d-c-messages{
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column-reverse;
}
.d-c-container{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.d-c-message-form *{
  border-radius: 0;
}
.d-c-date{
	font-size: 0.6rem; 
}
.d-c-row{
	font-family: var(--bs-font-monospace);
	border-bottom: 1px dashed;
}
.card-flip-footer{
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.rotate180{
  transform: rotate(-180deg);
}
.card-status::before{
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
 /* vertical-align: -0.125em; */
  -webkit-font-smoothing: antialiased;
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 2rem;
  color:rgba(0, 0, 0, .65);
  right: 5px;
  bottom: 5px;

}

.status-DK-true::before, .status-EDK-true::before{
  content: "\F308";
}
.status-DK-false::before, .status-EDK-false::before{
  content: "\F306";
}


/*CHECK*/
.status-eu1l-false::before,
.status-eu2l-false::before,
.status-eu3l-false::before,
.status-eu1h-false::before,
.status-eu2h-false::before,
.status-eu3h-false::before,
.status-ei1l-false::before,
.status-ei2l-false::before,
.status-ei3l-false::before,
.status-ei1h-false::before,
.status-ei2h-false::before,
.status-ei3h-false::before,
.status-ep1l-false::before,
.status-ep2l-false::before,
.status-ep3l-false::before,
.status-ep1h-false::before,
.status-ep2h-false::before,
.status-ep3h-false::before,
.status-epf1-false::before,
.status-epf2-false::before,
.status-epf3-false::before,
.status-ex02err-false::before,
.status-sc-false::before,
.status-arvosc-false::before,
.status-outsc-false::before{
  content: "\F26E";
}
.status-eu1l-true::before,
.status-eu2l-true::before,
.status-eu3l-true::before,
.status-eu1h-true::before,
.status-eu2h-true::before,
.status-eu3h-true::before,
.status-ei1l-true::before,
.status-ei2l-true::before,
.status-ei3l-true::before,
.status-ei1h-true::before,
.status-ei2h-true::before,
.status-ei3h-true::before,
.status-ep1l-true::before,
.status-ep2l-true::before,
.status-ep3l-true::before,
.status-ep1h-true::before,
.status-ep2h-true::before,
.status-ep3h-true::before,
.status-epf1-true::before,
.status-epf2-true::before,
.status-epf3-true::before,
.status-ex02err-true::before,
.status-sc-true::before,
.status-arvosc-true::before,
.status-outsc-true::before{
  content: "\F63C";
}
.status-msm-true::before,
.status-csm1-true::before,
.status-csm2-false::before{
  content: "\F4FF";
}
.status-msm-false::before,
.status-csm1-false::before,
.status-csm2-true::before{
  content: "\F46F";
}

.status-up-true::before{
  content: "\F187";
}
.status-up-false::before{
  content: "\F4F7";
}
.status-bt>.card-status::before{
  content: "\F5CD";
}
.status-gprsrssi>.card-status::before{
  content: "\F513";
}
.status-error-false, .status-nerror-false{
  background-color: var(--bs-success-bg-subtle);
}
.status-error-true, .status-nerror-true{
  background-color: var(--bs-danger-bg-subtle);
}
.status-nerror-true,
.status-error-true{
  color:var(--bs-light);
  background-color: rgba(var(--bs-danger-rgb), 1);
}
.status-nerror-true::before,
.status-error-true::before{
  color:var(--bs-light);
}
.roll-container{
  max-height: 300px;
  overflow-y: scroll;
}
.roll-item{
  display: flex;
  justify-content: space-between;
  padding: .25rem .5rem;
}
.roll-item:nth-child(odd) {
  background: var(--bs-light);
}
.roll-item:hover{
	background: var(--bs-dark);
  color: var(--bs-light);
}
#preloader{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color:#fff;
  z-index: 100;
  box-shadow: inset 0.2rem 0.2rem 1rem rgba(0,0,0,.15);
}
.preloader{
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 100;
  box-shadow: inset 0.2rem 0.2rem 1rem rgba(0,0,0,.15);
}
.preloader-cover{
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
  z-index: 100;
}
.preloader-cover .spinner-border{
  border-radius: 50% !important;
}

.btn.waiting{
	position: relative;
}
.btn.waiting .spinner{
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50% !important;
	color: var(--bs-info);
}
#map-devices{
	flex: 1 1 0;
}
.page-devices-hidden-map #page-devices-map.page-devices-map-device-view{
  display: none;
}
.page-devices-hidden-map #view-device{
  height: 100%;
  width: 100%;
}
#page-devices-map{
	padding: 0;
	display: flex;
	position: relative;
	z-index: 10;
	background:rgba(0, 0, 0, .65);
}

#map-handler{
	background: rgba(0,0,0,.3);
	color: #fff;
	position: absolute;
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.page-devices-map-overview,
.page-devices-map-device-view{
	transition: all 0.3s;
}
#view-device-content{
  flex: 1 1 0;
  width: 70%;
  align-self: flex-start;
}
#view-device-navbar{
	position: sticky;
	top: 0;
	z-index: 9;
}
#view-device-sidebar{
	width: 25%;
	height: 100%;
	display: flex;
}
#view-device-sidebar .card-body{
	height: 100%;
}
.view-device-view{
	order: 2;
	overflow-y: auto;
}
#page-devices-map.page-devices-map-device-view.map-expanded{
	position: absolute;
}
.pin-marker{
  width: 36px;
  height: 36px;
}
.pin-d{
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 50% 0 !important;
  background: var(--bs-secondary);
  transform: rotate(-45deg);
  color: white;
  display:flex;
  justify-content: center;
  align-items: center;
  text-shadow:  1px 0px 0px black;
  word-break: break-all;
  position: relative;
  border: 2px solid var(--bs-border-color-translucent);
  box-shadow: -4px 4px 3px -3px rgba(0, 0, 0, .50);

}
.pin-d::before{
  content: "";
  width: 82%;
  height: 82%;
  left:10%;
  right: 10%;
  transform: rotate(45deg);
  border-radius: 50%;
  border: 1% solid var(--bs-border-color-translucent);
  position: absolute;
}
.pin-d-mode-0::before{
  background: var(--bs-success);
}
.pin-d-mode-1::before{
  background: var(--bs-warning);
}
.pin-d-bg{
  transform: rotate(45deg);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 82%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.pin-d-switchboard{
  background-image: url(../icons/aieoua/map.v2/switchboard.svg);

}
.pin-d-lamp{
  background-image: url(../icons/aieoua/map.v2/lamp.svg);

}
.pin-d-mode-0{
  background: var(--bs-success);
}
.pin-d-mode-1{
  background: var(--bs-warning);
}

.pin-d div{
  transform: rotate(45deg);
}
.pin-d-alarm-1{
  background: var(--bs-danger);
}
.pin-d-warning-1{
  background: var(--bs-danger);
}
.pin-d-error-1{
  background: var(--bs-dark);
}
.pin-d-active-1{
  background: var(--bs-info);
}

/*.gm-style-iw-chr>button{display: none !important;}*/
@media only screen and (max-width: 768px) {
  footer{ display: none;}
	main {
		height: 100%;
		height: 100vh;
		height: 10dvh;
	}
	#main-wrapper{
		height: 100%;
		flex-direction: column;
	}

	#main-page-wrapper{
		padding-left: 0px;
		height: calc(100% - 60px);
		flex: 1;
		width: 100vw;
	}

	#main-page-wrapper.expanded{
		padding-left: 0;
	}
	#sidebar-left {
		flex-direction: row;
		position: relative;
		justify-content: space-between;
		width: 100%;
	}
	#sidebar-left.expanded {
		width: 100%;
	}
	#sidebar-left .sidebar-wrapper{
		flex-direction: row;
	}
	#sidebar-left #page-logo-text{
		display: flex;
	}
	#sidebar-left ul{
		display: none;
		top: 60px;
		left: 0;
		width: 100%;
		height: 0px;
		background-color: rgba(255, 255, 255, 0.98);
		flex-direction: row;
		position: absolute
	}

	#sidebar-left.expanded ul{
		flex-direction: column;
		height: auto;
	}

	#sidebar-left .nav-item{
		width: 100%;
		border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
	}
	
	#sidebar-left .nav-item a{
		display: flex;
		border-bottom: 0;
	}
	#page-sidebar-expand-button{
		border-bottom: 0;
	}
	#page-topbar-expand-button{
		align-self: end;
	}
	#topbar {
		display: none;
	}
	#topbar.expanded {
		display: flex;
	}
	.page-devices-map-overview,
	.page-devices-map-device-view{
		height: 30px;
	}
	.page-devices-map-overview #map-devices,
	.page-devices-map-device-view #map-devices{
		display: none;
	}
	.page-devices-map-overview.map-expanded #map-devices,
	.page-devices-map-device-view.map-expanded #map-devices{
		display: flex;
	}
	#page-topbar-expand-button{
		display: flex;
	}
	#view-device-sidebar{
		width: 66%;
		position: absolute;
		height: 100%;
		right: 0;
	}
	#view-device-content{
	  flex: 1 1 0;
	  width: 100%;
	  align-self: flex-start;
	}
	.view-device-view{
		height: 100%;
	}
  
  
}
@media only screen and (min-width: 769px) {
	#map-devices{
		display: flex;
	}
	.page-devices-map-overview,
	.page-devices-map-device-view{
		height: 20%;
	}  
	.view-device-view{
		width: 100%;
		height: 80%;
	}
	.view-device-view.device-collapsed {
		height: 100%;
	}

  
}
@media only screen and (max-width: 1499px) {

	main {
		max-height: 100vh;
	}
	#page-devices{
		flex-direction: column;
		flex-wrap: nowrap;
		overflow: hidden;
	}
	.page-devices-map-overview #map-handler,
	.page-devices-map-device-view #map-handler{
		bottom: 0;
		width: 10%;
		left: 45%;
		height: 30px;
		order: 2;
	}
	#map-handler div{
		transform: rotate(-90deg);
	}
	.map-expanded #map-handler div{
		transform: rotate(90deg);
	}
	.page-devices-map-overview,
	.page-devices-map-device-view{
		width: 100%;
		order: 1;
	}
	.page-devices-map-overview.map-expanded,
	.page-devices-map-device-view.map-expanded{
		height: 75%;
	}
  
	#overview-devices{
		width: 100%;
		flex: 1 1 100%;
		order: 2
	}
	.view-device-overview{
		width: 100%;
		min-height: 80%;
		order: 2;
	}
}
@media only screen and (min-width: 1500px) {
	.page-devices-map-device-view #map-handler,
	.page-devices-map-overview #map-handler{
		width: 30px;
		top: 45%;
		height: 10%;
	}
	.map-expanded #map-handler div{
		transform: rotate(180deg);
	}

	#page-devices-map.page-devices-map-device-view.map-expanded{
		position: absolute;
		z-index: 1030;
		right: 0;
		box-shadow: -0.5rem 1rem 3rem rgba(var(--bs-body-color-rgb),.175);
	}
	.page-devices-map-overview{
		height: 100%;
		width: 25%;
		order: 2;
	}
	.page-devices-map-device-view{
		width: 10%;
		height: 100%;
		order: 2;
	}
	.page-devices-map-overview.map-expanded,
	.page-devices-map-device-view.map-expanded{
		width: 80%;
	}
 
  #overview-devices.overview-collapsed{
    width: 20%;

  }
  .view-device-view{
    width: 90%;
    height: 100%;
    overflow-y: auto;
    order: 1;
  }
  .overview-collapsed #quick-filter-devices{
    width: 100%;
  }
  .overview-collapsed #quick-filter-devices,
  .overview-collapsed #pagination-filter-devices,
  .overview-collapsed .map-marker{
    width: 100%;
  }
  /*
  .device-collapsed #view-device-grid [class*="col-"]{
    width: 100%;
  }
  */
  
}
@media only screen and (min-width: 1800px) {
  #overview-devices{
    width: 60%;
  }
  .page-devices-map-overview{
    width: 40%;
    height: 100%;
  }
  .page-devices-map-device-view{
    width: 10%;
  }
  .view-device-view{
    width: 90%;
  }

}
.marker-bounce {
  z-index: 1000;
  animation: bounce 2s infinite;
}