/* BEGIN STYLESHEET */
/* Direct stylesheet authoring is an advanced feature. Knowledge of CSS required.*/

body {
	font-family: 'Arial', sans-serif;
	font-size: 14px;
	font-weight: 400;   /* Optional */
	color: #333333;      /* Optional */
}

.psc-flashing-red {
  animation: flashRed 2s infinite;
}

@keyframes flashRed {
  0%   { color: #FF0000; }
  50%  { color: #FF6666; }
  100% { color: #FF0000; }
}

.leaflet-popup-content {
	margin: 0 !important;
}

.psc-map_filter {
	flex: none !important;
}

.psc-live-toggle {
	content: '\21D1'; /* Unicode for upward arrow */
	font-size: 18px;
	margin-right: 8px; /* Space between text and arrow */
	color: #3a3a3a; /* Customize the color */
}

.psc-alarm-tabs {
	.tab-menu-item:nth-of-type(1) span::before {
	  content: '\2699'; /* Unicode for upward arrow */
	  font-size: 18px;
	  margin-right: 8px; /* Space between text and arrow */
	  color: #3a3a3a; /* Customize the color */
	}

	.tab-menu-item:nth-of-type(2) span::before {
	  content: '\21D1'; /* Unicode for upward arrow */
	  font-size: 18px;
	  margin-right: 8px; /* Space between text and arrow */
	  color: #3a3a3a; /* Customize the color */
	}
}

.psc-unitdetail-tap {
	.tab-menu-item:nth-of-type(1) span::before {
	  content: '\21D1'; /* Unicode for upward arrow */
	  font-size: 18px;
	  margin-right: 8px; /* Space between text and arrow */
	  color: #3a3a3a; /* Customize the color */
	}

	.tab-menu-item:nth-of-type(2) span::before {
	  content: '\2197'; /* Unicode for upward arrow */
	  font-size: 18px;
	  margin-right: 8px; /* Space between text and arrow */
	  color: #3a3a3a; /* Customize the color */
	}

	.tab-menu-item:nth-of-type(3) span::before {
	  content: '\2699'; /* Unicode for upward arrow */
	  font-size: 18px;
	  margin-right: 8px; /* Space between text and arrow */
	  color: #3a3a3a; /* Customize the color */
	}
	.tab-menu-item:nth-of-type(4) span::before {
	  content: '\2197'; /* Unicode for upward arrow */
	  font-size: 18px;
	  margin-right: 8px; /* Space between text and arrow */
	  color: #3a3a3a; /* Customize the color */
	}
	.tab-menu-item:nth-of-type(5) span::before {
	  content: '\2692'; /* Unicode for upward arrow */
	  font-size: 18px;
	  margin-right: 8px; /* Space between text and arrow */
	  color: #3a3a3a; /* Customize the color */
	}
	.tab-menu-item:nth-of-type(6) span::before {
	  content: '\26A0'; /* Unicode for upward arrow */
	  font-size: 18px;
	  margin-right: 8px; /* Space between text and arrow */
	  color: #3a3a3a; /* Customize the color */
	}
	.tab-menu-item:nth-of-type(7) span::before {
	  content: '\2606'; /* Unicode for upward arrow */
	  font-size: 18px;
	  margin-right: 8px; /* Space between text and arrow */
	  color: #3a3a3a; /* Customize the color */
	}

	.tab-menu-item:nth-of-type(8) span::before {
	  content: '\1F4C8'; /* Unicode for upward arrow */
	  font-size: 18px;
	  margin-right: 8px; /* Space between text and arrow */
	  color: #3a3a3a; /* Customize the color */
	}
}

.psc-unittrend-filter {
	width: 500px !important;
}

.psc-unitcontrol button {
    background: transparent;
    border: unset !important;
    box-sizing: unset !important;
    outline: unset !important;
}

.psc-unitcontrol-item {
	height: 45px;
}

.psc-multiunits-container {
	height: fit-content;
}

.psc-unitcontrol-items {
	height: 100vh;
}

.psc-Menu\/Menu {
	background-color: #7C499F !important;
}

.psc-Menu\/Item {
	background-color: #7C499F !important;
	color: #FFFFFF !important;
}

.psc-Menu\/All_Header {
	background-color: #7C499F !important;
}

.psc-Menu\/All_Header:hover {
	background-color: #DACAe2 !important;
}

.psc-Menu\/Item svg {
	fill: #FFFFFF !important;
}

.psc-Menu\/Item:hover {
	background-color: #DACAe2 !important;
}

.psc-MultiUnitPopup-Container {
	
}

.iaFilterIcon {
	color: #FFF !important;
}

.psc-Multiunits-Wrap {
	width: 100% !important; 
    height: 100% !important;
    flex: 1 !important;
    flex-wrap: wrap !important;
}

@media (max-width: 530px) {
	.psc-unitdetail-container {
		margin: 0 5px !important;	
	}

	.psc-unitdetail-header svg {
	    flex-basis: 16px !important;
	}
	
	.psc-unitdetail-name span { 
		font-size: 16px !important;
	}

	.psc-unitdetail-temp span { 
		font-size: 32px !important;
	}

	.psc-unitdetail-temp-des { 
		font-size: 10px !important;
	}

	.psc-unitdetail-customer span { 
		font-size: 10px !important;
	}

	.psc-unitdetail-location span { 
		font-size: 10px !important;
	}

	.psc-unitdetail-filter {
		height: 50px;
	}
	
	.psc-unitdetail-filter svg {
		flex-basis: 20px !important;
		margin: auto !important;
	}

	.psc-unitdetail-filter .ia_labelComponent {
		display: none !important;
	}

	.psc-unittrend-filter {
		flex-direction: column !important;
		margin: 5px !important;
	    	flex-basis: 150px !important;
	}

	.psc-unittrend-daterange {
		flex-basis: 200px !important;
	}
	
	.psc-unittrend-temp {
		font-size: 10px !important;
	}
	
	.psc-unittrend-temp-value {
		font-size: 30px !important;
	}
}
/* BEGIN STYLE CLASSES */
.psc-Header\/DropDown {
  background-color: #DACAe2 ;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #4B4760;
  margin-bottom: 10px;
  margin-top: 10px;
}

.psc-Header\/Header {
  background-color: #DACAe2;
  color: #4B4760;
  font-size: 14px;
  line-height: 17px;
  fill: #FFFFFF;
}

.psc-Header\/Icon {
  color: --neutral-80;
  cursor: pointer;
  fill: #FFFFFF;
}

.psc-Menu\/All_Header {
  background-color: var(--neutral-80);
  color: var(--neutral-10);
  font-size: 14px;
  font-weight: bold;
  line-height: 17px;
  text-transform: none;
}

.psc-Menu\/Item {
  background-color: var(--neutral-20);
  border-bottom-style: none;
  border-top-color: var(--neutral-60);
  border-top-style: solid;
  border-top-width: 1px;
  color: var(--neutral-80);
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
}
.psc-Menu\/Item:last-child {
  border-bottom-color: var(--neutral-60);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.psc-Menu\/Item:hover {
  background-color: var(--callToActionHighlight);
}

.psc-Menu\/Menu {
  background-color: var(--neutral-30);
}

.psc-Page\/Alarm\/Alarm {
  background-color: #FFF;
  border-bottom-style: none;
  border-left-color: var(--neutral-40);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: var(--neutral-40);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-style: none;
}

.psc-Page\/Alarm\/Page {
  background-color: #FFF;
}

.psc-Page\/Bold {
  font-weight: bold;
}

.psc-Page\/Margins {
  margin-left: 12px;
  margin-right: 12px;
}

.psc-Page\/Page {
  background-color: #DACAe2;
  border-left-color: var(--neutral-60);
  border-left-style: solid;
  border-left-width: 1px;
  font-size: 14px;
  line-height: 20px;
}

.psc-Page\/Text {
  color: var(--neutral-90);
  font-size: 14px;
  line-height: 20px;
}

.psc-Title\/Icon {
  fill: var(--neutral-90);
}

.psc-Title\/Text {
  color: var(--neutral-90);
  font-size: 16px;
  font-weight: bold;
  line-height: 19px;
  margin-left: 6px;
  fill: var(--neutral-90);
}

.psc-Title\/Title {
  background-color: var(--neutral-30);
  border-bottom-color: var(--neutral-60);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-color: var(--neutral-60);
  border-top-style: solid;
  border-top-width: 1px;
}

.psc-Unit_Status_Bar\/Offline {
  background-color: #808080;
}

.psc-Unit_Status_Bar\/Online {
  background-color: #00AC00;
}

.psc-Unit_Status_Bar\/Online_with_Alarms {
  background-color: #FF0000;
}

@keyframes psc-Header\/Alarm_Active-anim {
  0% {
    color: #4B4760;
    fill: #E7F5FF;
  }
  100% {
    color: #FF2E2E;
    fill: #FF2E2E;
  }
}
.psc-Header\/Alarm_Active {
  animation-name: psc-Header\/Alarm_Active-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes psc-Header\/Alarm_Active_Bar-anim {
  0% {
    color: white;
  }
  100% {
    background-color: #FF3535;
    color: #FF3535;
  }
}
.psc-Header\/Alarm_Active_Bar {
  animation-name: psc-Header\/Alarm_Active_Bar-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes psc-Header\/Alarm_Active_Dark-anim {
  0% {
  }
  100% {
    color: #FF3535;
  }
}
.psc-Header\/Alarm_Active_Dark {
  animation-name: psc-Header\/Alarm_Active_Dark-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes psc-Header\/Marker_Flashing-anim {
  0% {
    color: #FAFAFA;
    fill: #FF0000;
  }
  100% {
    color: #4190F7;
    fill: #4190F7;
  }
}
.psc-Header\/Marker_Flashing {
  animation-name: psc-Header\/Marker_Flashing-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes psc-Header\/Offline_Bar-anim {
  0% {
    color: #4B4760;
    fill: #E7F5FF;
  }
  100% {
    color: #FF0000;
    fill: #FF0000;
  }
}
.psc-Header\/Offline_Bar {
  animation-name: psc-Header\/Offline_Bar-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}