/* BEGIN STYLESHEET */
:root {
  /* Text  */
  --text-black: #000000; /* Non Changing black */
  --text-main-black: var(--neutral-100); /*Was #000000*/
  --text-black2: var(--neutral-80); /*Black was #2B2B2B*/
  --text-gray: var(--neutral-70); /* Gray was #555555*/
  --text-light-gray: var(--neutral-50); /* Was #808080 */
  --text-white: var(--neutral-10);
  --text-white2: var(--neutral-20); /* was #FAFAFB*/
  --text-static-white: #FAFAFB;
  --text-entry-field-background: var(--neutral-20);
  
/* Alarm Colors */
--alarm-A1-Border: #DF2020;     /* Red */
--alarm-A1-Fill: #DF2020;     /* Red */
--alarm-A2-Border: #FA980F;     /* Orange */
--alarm-A2-Fill: #FA980F;     /* Orange */
--alarm-A3-Border: #F7F426;    /* Yellow */
--alarm-A3-Fill: #EEEB34;        /* Yellow */
--alarm-A4-Border: #AB68ED;    /* Purple */
--alarm-A4-Fill: #AB68ED;     /* Purple */
--alarm-A5-Border: #84ABFF; /*#28E6E6;    /* Light-Blue */
--alarm-A5-Fill: #84ABFF; /*#28E6E6;        /* Light-Blue */

--alarm-Status-A1-Ack: #982525; /* Red */
--alarm-Status-A1-Unack: #BF4040; /* Red */
--alarm-Status-A2-Ack: #B17025; /* Orange */
--alarm-Status-A2-Unack: #B17025; /* Orange */
--alarm-Status-A3-Ack: #9E9511; /* Yellow */
--alarm-Status-A3-Unack: #BDBB28; /* Yellow */
--alarm-Status-A3-Ack: #5A476B; /* Purple */
--alarm-Status-A3-Unack: #AB7DD8; /* Purple */

/* APCO Alarm Analysis Colors */
--alarm-analysis-border-color: #2B2B2B;
--alarm-analysis-text-section-border-color: #2B2B2B;
--alarm-analysis-text-value-notify-alert: #FF000080; /* Bright Red , background color*/
--alarm-analysis-text-value-notify-ok: #00000000; /* White , background color*/

/* Buttons */    
--button-text: #2B2B2B; /* Near Black */
--button-text-selected: var(--neutral-10);
--button-border: var(--neutral-50); /* Light Gray was #555555*/
--button-background: #D5D5D5; /* Dark Gray */
--button-background-selected: var(--neutral-70); /* Dark Gray */
--removal-button-background: #FF0000; /* Red */



/* Display */    
--display-alarm-flash: #000000; /* Black */
--display-object-outline: #000000; /* Black */
--display-object-outline-dynamic: var(--neutral-100);
--display-popup-line: #808080; /* Gray */
--display-popup-background: var(--neutral-50); /* Light Gray */
--display-process-line-H-main: #757575; /* Gray */
--display-process-line-V-main: #757575; /* Gray */
--display-static-device: var(--display-main-view-background); /* Gray */
--display-main-view-background: var(--neutral-30); 
--display-nav-sidebar-background: var(--neutral-60); /* Light gray was #E8EAEA */

/* Fill */
--fill-active-text: #000000;             /* Black */
--fill-active-shape:#FFFFFF;         /* Mint Green */
--fill-background-active-text: #000000; /* Black */
--fill-background-active-shape: #FFFFFF; /* White */
--fill-discrete-table-box-background: #D7D7D7; /* Light */
--fill-discrete-table-box-border: #555555; /* Gray */
--fill-background-inactive-text: #FAFAFB; /* Off-white */
--fill-background-inactive-background: #555555; /* Dark Gray */
/*	--fill-dashboard-background: #D9D9D9; /* Light Gray */
--fill-dashboard-background: var(--neutral-40);
--fill-dashboard-border: #666666; /* Dark Gray */
--fill-fault-text: #FFFFFF; /* White */
--fill-fault-shape: #DF2020; /* Red */
--fill-inactive-text: #FAFAFB; /* Off-white */
--fill-inactive-shape: #555555; /* Dark Gray */
--fill-light-background-shape: #D5D5D5; /* Gray */
--fill-nav-header-text: #2B2B2B; /* Near Black */
--fill-nav-header-border: #555555; /* Light Gray */
--fill-nav-header-background: #8C8C8C; /* Gray */
--fill-special-text: #000000; /* Black */
--fill-special-shape: #4FC3F7; /* Bright Blue */


/* Management (Roster, Schedule, and User) */
--header-text: #FFFFFF; /* white*/
--header-background: #2B2B2B; /* Black */
--left-vertical-header-border: #4A4A4A63; /* Gray */
--button-enabled: var(--neutral-60);
--button-disabled: var(--neutral-30);

/* Status Box  */
--status-active-text: var(--text-black);
--status-active-background: var(--fill-active-shape); /* White */
--status-border:  #000000;/*var(--neutral-70);  Black  Was #000000*/
--status-fault-background: #704100; /* brown */
--status-fault-text: #FAFAFB; /* white (contrasts brown) */
--status-inactive-background: var(--fill-inactive-shape); /* gray */
--status-inactive-text: var(--text-static-white); /* white (contrasts gray) */
--status-special-background: #4FC3F7; /* Bright Blue */
--status-static-background: #999999; /* Gray */

--triangle-base-size: max(min(100%, 20px), 10px); /* Dynamically scale base size */
}



/* High Performance Alarm Indication from BIJC
* Created by Lewis Storey & Yahia Aboueleish*/

/*
#
#
# Priority 1 Alarm indicated by a red border, a red square priority symbol and the number 1
#
#
*/


.psc-hph-alarm-border-1 {
position: relative;
box-shadow: 0px 0px 0px 3px var(--alarm-A1-Border, red);
}

.psc-hph-alarm-top-left-border-1 {
position: relative;
box-shadow: -1px -1px 0px 5px var(--alarm-A1-Border, red);
}

.psc-hph-alarm-icon-1 {
position: relative;
}

/* .psc-hph-alarm-inner-icon-1 {
position: relative;
}

.psc-hph-alarm-inner-icon-1::before,
.psc-hph-alarm-border-1::before,
.psc-hph-alarm-top-left-border-1::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
background-color: var(--alarm-A1-Fill, red);
transform: rotate(45deg);   
}

.psc-hph-alarm-inner-icon-1::after,
.psc-hph-alarm-border-1::after,
.psc-hph-alarm-top-left-border-1::after {
counter-reset: alarm-content var(--alarm-priority-number, 1);
content: counter(alarm-content);
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
} */

.psc-hph-alarm-icon-1::before,
.psc-hph-alarm-border-1::before,
.psc-hph-alarm-top-left-border-1::before {
content: "";
position: absolute;
top: -11px;
left: -11px;
aspect-ratio: 1/1;
height: max(min(100%,20px),15px);
background-color: var(--alarm-A1-Fill, red);
transform: rotate(45deg); 
}

.psc-hph-alarm-icon-1::after,
.psc-hph-alarm-border-1::after,
.psc-hph-alarm-top-left-border-1::after {
counter-reset: alarm-content var(--alarm-priority-number, 1);
content: counter(alarm-content);
position: absolute;
top: -11px;
left: -11px;
aspect-ratio: 1/1;
height: max(min(100%,20px),15px);
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
}






/*
#
#
# Priority 2 Alarm indicated by a yellow border, a yellow triangle priority symbol and the number 2
#
#
*/

.psc-hph-alarm-border-2 {
position: relative;
box-shadow: 0px 0px 0px 3px var(--alarm-A2-Border, orange);
}

.psc-hph-alarm-top-left-border-2 {
position: relative;
box-shadow: -1px -1px 0px 5px var(--alarm-A2-Border, orange);
}

.psc-hph-alarm-icon-2 {
position: relative;
}

/* .psc-hph-alarm-inner-icon-2 {
position: relative;
}

.psc-hph-alarm-inner-icon-2::before,
.psc-hph-alarm-border-2::before,
.psc-hph-alarm-top-left-border-2::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 25px solid var(--alarm-A2-Fill, orange);
}

.psc-hph-alarm-inner-icon-2::after,
.psc-hph-alarm-border-2::after,
.psc-hph-alarm-top-left-border-2::after {
counter-reset: alarm-content var(--alarm-priority-number, 2);
content: counter(alarm-content);
position: absolute;
top: 3px;
left: 4px;
width: 20px;
height: 20px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
} */

.psc-hph-alarm-icon-2::before,
.psc-hph-alarm-border-2::before,
.psc-hph-alarm-top-left-border-2::before {
content: "";
position: absolute;
top: -15px;
left: -15px;
width: 0;
height: 0;
aspect-ratio: 1/1;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 25px solid var(--alarm-A2-Fill, orange);
}

.psc-hph-alarm-icon-2::after,
.psc-hph-alarm-border-2::after,
.psc-hph-alarm-top-left-border-2::after {
counter-reset: alarm-content var(--alarm-priority-number, 2);
content: counter(alarm-content);
position: absolute;
top: -10px;
left: -10px;
aspect-ratio: 1/1;
height: max(min(100%,20px),10px);
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
}



/*
#
#
# Priority 3 Alarm indicated by an orange border, an orange upside down triangle priority symbol and the number 3
#
#
*/

.psc-hph-alarm-border-3 {
position: relative;
box-shadow: 0px 0px 0px 3px var(--alarm-A3-Border, yellow);
}

.psc-hph-alarm-top-left-border-3 {
position: relative;
box-shadow: -1px -1px 0px 5px var(--alarm-A3-Border, yellow);
}

.psc-hph-alarm-icon-3 {
position: relative;
}

/* .psc-hph-alarm-inner-icon-3 {
position: relative;
}

.psc-hph-alarm-inner-icon-3::before,
.psc-hph-alarm-border-3::before,
.psc-hph-alarm-top-left-border-3::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 20px;
background-color: var(--alarm-A3-Fill, yellow);  
}

.psc-hph-alarm-inner-icon-3::after,
.psc-hph-alarm-border-3::after,
.psc-hph-alarm-top-left-border-3::after {
counter-reset: alarm-content var(--alarm-priority-number, 3);
content: counter(alarm-content);
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 20px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
} */

.psc-hph-alarm-icon-3::before,
.psc-hph-alarm-border-3::before,
.psc-hph-alarm-top-left-border-3::before {
content: "";
position: absolute;
top: -14px;
left: -14px;
aspect-ratio: 1/1;
height: max(min(100%,25px),15px);
background-color: var(--alarm-A3-Fill, yellow); 
}

.psc-hph-alarm-icon-3::after,
.psc-hph-alarm-border-3::after,
.psc-hph-alarm-top-left-border-3::after {
counter-reset: alarm-content var(--alarm-priority-number, 3);
content: counter(alarm-content);
position: absolute;
top: -12px;
left: -14px;
aspect-ratio: 1/1;
height: max(min(100%,25px),15px);
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
}




/*
#
#
# Priority 4 (low) Alarm indicated by a magenta border, magenta diamond priority symbol and the number 4
#
#
*/

.psc-hph-alarm-border-4 {
position: relative;
box-shadow: 0px 0px 0px 3px var(--alarm-A4-Border, magenta);
}

.psc-hph-alarm-top-left-border-4 {
position: relative;
box-shadow: -1px -1px 0px 5px var(--alarm-A4-Border, magenta);
}

.psc-hph-alarm-icon-4 {
position: relative;
}

/* .psc-hph-alarm-inner-icon-4 {
position: relative;
}

.psc-hph-alarm-inner-icon-4::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
border-radius: 50%; /* Make it a circle 
background-color: var(--alarm-A4-Fill, magenta); 
}

.psc-hph-alarm-inner-icon-4::after {
counter-reset: alarm-content var(--alarm-priority-number, 4);
content: counter(alarm-content);
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
} */

.psc-hph-alarm-icon-4::before,
.psc-hph-alarm-border-4::before,
.psc-hph-alarm-top-left-border-4::before {
content: "";
position: absolute;
top: -11px;
left: -11px;
aspect-ratio: 1/1;
height: max(min(100%,23px),15px);
border-radius: 50%; /* Make it a circle */
background-color: var(--alarm-A4-Fill, magenta); 
}

.psc-hph-alarm-icon-4::after,
.psc-hph-alarm-border-4::after,
.psc-hph-alarm-top-left-border-4::after {
counter-reset: alarm-content var(--alarm-priority-number, 4);
content: counter(alarm-content);
position: absolute;
top: -10px;
left: -12px;
aspect-ratio: 1/1;
height: max(min(100%,23px),15px);
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
}

/*
#
#
# Priority diagnostic Alarm indicated by a magenta border, magenta diamond priority symbol and the number 4
#
#
*/

.psc-hph-alarm-border-5 {
position: relative;
box-shadow: 0px 0px 0px 3px var(--alarm-A5-Border, blue);
}

.psc-hph-alarm-top-left-border-5 {
position: relative;
box-shadow: -1px -1px 0px 5px var(--alarm-A5-Border, blue);
}

.psc-hph-alarm-icon-5 {
position: relative;
}

/* .psc-hph-alarm-inner-icon-5 {
position: relative;
}

.psc-hph-alarm-inner-icon-5::before {
content: "B";
position: absolute;
top: 4px;
left: 4px;
content: counter(alarm-content);
position: absolute;
top: -11px;
width: 20px;
height: 20px;
border-radius: 50%; /* Make it a circle 
background-color: var(--alarm-A5-Fill, blue); 
}

.psc-hph-alarm-inner-icon-5::after {
counter-reset: alarm-content var(--alarm-priority-number, B);
/*content: counter(alarm-content);
content:"B";
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
} */

.psc-hph-alarm-icon-5::before,
.psc-hph-alarm-border-5::before,
.psc-hph-alarm-top-left-border-5::before {
content: "";
position: absolute;
top: -11px;
left: -11px;
aspect-ratio: 1/1;
height: max(min(100%,23px),15px);
border-radius: 50%; /* Make it a circle */
background-color: var(--alarm-A5-Fill, blue); 
}

.psc-hph-alarm-icon-5::after,
.psc-hph-alarm-border-5::after,
.psc-hph-alarm-top-left-border-5::after {
counter-reset: alarm-content var(--alarm-priority-number, 5);
/*content: counter(alarm-content);*/
content:"B";
position: absolute;
top: -11px;
left: -11px;
aspect-ratio: 1/1;
height: max(min(100%,23px),15px);
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
}


/* 
#
#
#
#
# The following classes are alarm icons that appear to the left of the object which the class is applied to
#
#
#
#
*/

.psc-hph-alarm-icon-outer-left-4 {
position: relative;

}

.psc-hph-alarm-icon-outer-left-4::before{
content: "";
position: absolute;
top: 40%;
right: 10px;
width: 20px;
height: 20px;
background-color: var(--alarm-A4-Fill, magenta);
transform: rotate(45deg);
}

.psc-hph-alarm-icon-outer-left-4::after{
counter-reset: alarm-content var(--alarm-priority-number, 4);
content: counter(alarm-content);
position: absolute;
top: 40%;
right: 10px;
width: 20px;
height: 20px;
color: #000000;
font-size: 12px;
text-align: center;
line-height: 20px;
}




.psc-hph-outer-left-icon-1 {
position: relative;
padding-left: 30px; /* Adjust as needed */
margin-left: 30px; /* Provides space for icon on left  */
}

.psc-hph-outer-left-icon-1::before {
content: "";
position: absolute;
top: -5px;
left: -25px; /* Adjust this value to move the icon horizontally */
width: 20px;
height: 20px;
background-color: var(--alarm-A1-Fill, red);
transform: rotate(45deg);   
}

.psc-hph-outer-left-icon-1::after {
counter-reset: alarm-content var(--alarm-priority-number, 1);
content: counter(alarm-content);
position: absolute;
top: -5px;
left: -25px; /* Adjust this value to move the icon horizontally */
width: 20px;
height: 20px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
}

.psc-hph-outer-left-icon-2 {
position: relative;
padding-left: 30px; /* Adjust as needed */
margin-left: 30px; /* Provides space for icon on left  */
}

.psc-hph-outer-left-icon-2::before {
content: "";
position: absolute;
top: -10px;
left: -30px; /* Adjust this value to move the icon horizontally */
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 25px solid var(--alarm-A2-Fill, orange);   
}

.psc-hph-outer-left-icon-2::after {
counter-reset: alarm-content var(--alarm-priority-number, 2);
content: counter(alarm-content);
position: absolute;
top: -5px;
left: -25px; /* Adjust this value to move the icon horizontally */
width: 20px;
height: 20px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
}

.psc-hph-outer-left-icon-3 {
position: relative;
padding-left: 30px; /* Adjust as needed */
margin-left: 30px; /* Provides space for icon on left  */
}

.psc-hph-outer-left-icon-3::before {
content: "";
position: absolute;
top: 50%;
left: -30px; /* Adjust to move the square further left */
transform: translateY(-50%);
width: 25px;
height: 25px;
background-color: var(--alarm-A3-Fill, yellow); 
}

.psc-hph-outer-left-icon-3::after {
counter-reset: alarm-content var(--alarm-priority-number, 3);
content: counter(alarm-content);
position: absolute;
top: 50%;
left: -30px; /* Adjust to move the number further left */
transform: translateY(-50%);
width: 25px;
height: 25px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 25px;
}

.psc-hph-outer-left-icon-4 {
position: relative;
padding-left: 30px; /* Adjust as needed */
margin-left: 30px; /* Provides space for icon on left  */
}

.psc-hph-outer-left-icon-4::before {
content: "";
position: absolute;
top: 50%;
left: -30px; /* Adjust to move the circle further left */
transform: translateY(-50%);
width: 25px;
height: 25px;
border-radius: 50%; /* Make it a circle */
background-color: var(--alarm-A4-Fill, magenta); 
}

.psc-hph-outer-left-icon-4::after {
counter-reset: alarm-content var(--alarm-priority-number, 4);
content: counter(alarm-content);
position: absolute;
top: 50%;
left: -30px; /* Adjust to move the number further left */
transform: translateY(-50%);
width: 25px;
height: 25px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 25px;
}

/* 
#
#
#
#
# The following classes are alarm icons that appear to the right of the object which the class is applied to
#
#
#
#
*/
.psc-hph-outer-right-icon-1 {
position: relative;
padding-right: 30px; /* Adjust as needed */
margin-right: 30px; /* Provides space for icon on right */
}

.psc-hph-outer-right-icon-1::before {
content: "";
position: absolute;
top: -5px;
left: auto;
right: -25px; /* Adjust this value to move the icon horizontally */
width: 20px;
height: 20px;
background-color: var(--alarm-A1-Fill, red);
transform: rotate(45deg);   
}

.psc-hph-outer-right-icon-1::after {
counter-reset: alarm-content var(--alarm-priority-number, 1);
content: counter(alarm-content);
position: absolute;
top: -5px;
left: auto;
right: -25px; /* Adjust this value to move the icon horizontally */
width: 20px;
height: 20px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
}

.psc-hph-outer-right-icon-2 {
position: relative;
padding-right: 30px; /* Adjust as needed */
margin-right: 30px; /* Provides space for icon on right */
}

.psc-hph-outer-right-icon-2::before {
content: "";
position: absolute;
top: -10px;
left: auto;
right: -30px; /* Adjust this value to move the icon horizontally */
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 25px solid var(--alarm-A2-Fill, orange);   
}

.psc-hph-outer-right-icon-2::after {
counter-reset: alarm-content var(--alarm-priority-number, 2);
content: counter(alarm-content);
position: absolute;
top: -5px;
left:auto;
right: -25px; /* Adjust this value to move the icon horizontally */
width: 20px;
height: 20px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 20px;
}

.psc-hph-outer-right-icon-3 {
position: relative;
padding-right: 30px; /* Adjust as needed */
margin-right: 30px; /* Provides space for icon on right */
}

.psc-hph-outer-right-icon-3::before {
content: "";
position: absolute;
top: 50%;
left: auto;
right: -30px; /* Adjust to move the square further right */
transform: translateY(-50%);
width: 25px;
height: 25px;
background-color: var(--alarm-A3-Fill, yellow); 
}

.psc-hph-outer-right-icon-3::after {
counter-reset: alarm-content var(--alarm-priority-number, 3);
content: counter(alarm-content);
position: absolute;
top: 50%;
left: auto;
right: -30px; /* Adjust to move the number further right */
transform: translateY(-50%);
width: 25px;
height: 25px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 25px;
}

.psc-hph-outer-right-icon-4 {
position: relative;
padding-right: 30px; /* Adjust as needed */
margin-right: 30px; /* Provides space for icon on right */
}

.psc-hph-outer-right-icon-4::before {
content: "";
position: absolute;
top: 50%;
left: auto;
right: -30px; /* Adjust to move the circle further right */
transform: translateY(-50%);
width: 25px;
height: 25px;
border-radius: 50%; /* Make it a circle */
background-color: var(--alarm-A4-Fill, magenta); 
}

.psc-hph-outer-right-icon-4::after {
counter-reset: alarm-content var(--alarm-priority-number, 4);
content: counter(alarm-content);
position: absolute;
top: 50%;
left: auto;
right: -30px; /* Adjust to move the number further right */
transform: translateY(-50%);
width: 25px;
height: 25px;
color: #000000; 
font-size: 12px;
text-align: center;
line-height: 25px;
}


/* 
#
#
#
#
# The following classes are for styling various tranisitions, styles, etc that do not apply to alarm icons
#
#
#
#
*/



/* This class is to be toggled on objects that should be collapsable in a vertical fashion*/
.psc-collapsed {
max-height: 0 !important;
}

/* This class is always present on collapsable (vertical)*/
.psc-collapsable {
transition: max-height 0.5s ease !important;
-moz-transition: max-height .5s ease;
-ms-transition: max-height .5s ease;
-o-transition: max-height .5s ease;
-webkit-transition: max-height .5s ease;
transition: max-height .5s ease;
max-height: 100px;
}

/* This class is to be toggled on objects that should be collapsable in a horizontal fashion*/
.psc-collapsed-horizontal {
max-width: 0 !important;
}

/* This class is always present on collapsable (horizontal)*/
.psc-collapsable-horizontal {
transition: max-width 0.5s ease !important;
-moz-transition: max-width .5s ease;
-ms-transition: max-width .5s ease;
-o-transition: max-width .5s ease;
-webkit-transition: max-width .5s ease;
transition: max-width .5s ease;
max-width: 550px;
}

/* To change the Nav Link background color when hovered */
.psc-nav-link {
transition: background-color 0.3s ease !important;
}

.psc-nav-link:hover {
background-color: var(--neutral-50) !important;
}



::-webkit-scrollbar-track {
background: transparent !important; 
}

::-webkit-scrollbar {
width: 8px; /* Width of the scrollbar */
}

/* Style scrollbar thumb */
::-webkit-scrollbar-thumb {
background-color: #888; /* Color of the scrollbar thumb */
border-radius: 4px; /* Radius of the scrollbar thumb */
}

/* Optionally, you can also style scrollbar hover */
::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Hover color of the scrollbar thumb */
}

/* Classes for testing out adaptive views with CSS grid*/
.psc-product-form-grid {
	display: grid;
	overflow: auto;
	gap: 20px;
	grid-templates-rows: 60px repeat(6, minmax(62px,auto)) 1fr 40px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas: 
		"header header header header"
		"productName productName . ."
		"productDescription productDescription productDescription productDescription"
		"category category uploadPicture uploadPicture"
		"supplier supplier uploadPicture uploadPicture"
		"price stockQty picture picture"
		"status status picture picture"
		". . picture picture"
		"cancel . . save";
	max-width: 800px
}

@media (max-width: 550px) {
	.psc-product-form-grid {
	display: grid;
	overflow: auto;
	gap: 20px;
	grid-templates-rows: 60px repeat(8, minmax(62px,auto)) 40px;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
		"header header"
		"productName productName"
		"productDescription productDescription"
		"category category"
		"supplier supplier"
		"price stockQty"
		"status status"
		"uploadPicture uploadPicture"
		"picture picture"
		"cancel save";
	max-width: 800px
	}
}

.psc-analogs-screen-adaptive {
	display: grid;
	overflow: visible;
	gap: 20px;
	grid-template-areas: 
		"Header Header Header"
		"Flow Turbidity Pressure"
		"Flow Level Cl2"
		"pH TankLevel FilterTable";
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 40px 220px 220px 100px
}

@media (max-width: 800px) {
	.psc-analogs-screen-adaptive {
	display: grid;
	overflow: visible;
	gap: 20px;
	grid-template-areas: 
		"Header Header"
		"Flow TankLevel"
		"Flow Turbidity"
		"Level Pressure"
		"pH Cl2"
		"FilterTable .";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 40px 220px 220px 220px 220px 100px 
	}
}

@media (max-width: 500px) {
	.psc-analogs-screen-adaptive {
	display: grid;
	overflow: visible;
	gap: 20px;
	grid-template-areas: 
		"Header"
		"Flow"
		"pH"
		"Turbidity"
		"Level"
		"TankLevel"
		"FilterTable"
		"Pressure"
		"Cl2";
	grid-template-columns: 1fr;
	grid-template-rows: 40px 450px 220px 170px 220px 300px 210px 220px 200px 
	}
}

/* Change the map component popup window background color*/
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
	background: var(--neutral-30) !important;
}


/* Remove the Marker shadow from the map component*/
.map-marker-shadow {
	display: none;
}
/* Remove the Map component tool tip border and make the background transparent*/
.leaflet-tooltip {
    background-color: #ffffff00 !important;
    box-shadow: none !important;
    border: none !important;
}
/* BEGIN STYLE CLASSES */
.psc-Button\/Caption {
  color: var(--neutral-80);
  font-family: Noto Sans;
  font-size: 10pt;
  font-weight: bold;
}

.psc-Button\/Shape {
  background-color: #FFFFFF00;
}

.psc-DashboardAlarm\/Widget {
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
}

.psc-DashboardAlarm\/bar-done {
  background-color: #FF000080;
}

.psc-DashboardAlarm\/bar-timing {
  background-color: #FF910080;
}

.psc-DashboardAlarm\/textInAlarm {
  color: var(--error);
  font-family: Noto Sans;
  font-size: 10pt;
  font-weight: bold;
}

.psc-DashboardAlarm\/textOK {
  color: var(--qual-7);
  font-family: Noto Sans;
  font-size: 10pt;
  font-weight: bold;
}

.psc-DashboardAlarm\/track {
  background-color: #FFFFFF00;
  border-style: none;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.psc-Framework\/Card\/Bold_Text {
  color: #000000;
  font-weight: bold;
}

.psc-Framework\/Card\/Card {
  background-color: #FAFAFA;
  border-color: #D5D5D5;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: 0px 2px 4px rgba(0, 0, 40, 0.15);
  margin: 5px;
}

.psc-Framework\/Card\/Embedded {
  margin: 5px;
}

.psc-Framework\/Card\/Item {
  padding-bottom: 4px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 4px;
}

.psc-Framework\/Card\/Item_Border {
  border-bottom-color: #D5D5D5;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.psc-Framework\/Card\/Label {
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  margin-right: 10px;
  text-transform: uppercase;
}

.psc-Framework\/Card\/Row {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 2px;
  margin-left: 4px;
  margin-right: 4px;
}

.psc-Framework\/Card\/StandardText {
  font-size: 14px;
}

.psc-Framework\/Card\/Title {
  background-color: #E6EAEEAD;
  border-bottom-color: #D5D5D5;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  color: #2E2E2E;
  font-size: 12px;
  font-weight: bold;
  padding-left: 6px;
  padding-right: 6px;
  text-transform: uppercase;
  fill: #2E2E2E;
}

.psc-Framework\/Card\/Value {
  color: #000080;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
}

.psc-Framework\/PieChart\/legend {
  font-size: 12px;
  font-weight: 500;
}

.psc-Indicators\/dkGreen {
  background-color: #00AC00;
  border-color: #00AC00;
  border-style: solid;
  border-width: 1.5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: #FFFFFF;
  font-size: 8pt;
  font-weight: bold;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  text-align: center;
}

.psc-Indicators\/dkRed {
  background-color: #AC0000;
  border-color: #AC0000;
  border-style: solid;
  border-width: 1.5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: #FFFFFF;
  font-size: 8pt;
  font-weight: bold;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  text-align: center;
}

.psc-Indicators\/dkText {
  color: --neutral-80;
}

.psc-Indicators\/grey {
  background-color: #808080;
  border-style: solid;
  border-width: 1.5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: --neutral-20;
  font-size: 8pt;
  font-weight: bold;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  text-align: center;
}

.psc-Indicators\/ltGreen {
  background-color: #8AFF8A;
  border-color: #8AFF8A;
  border-style: solid;
  border-width: 1.5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: --neutral-80;
  font-size: 8pt;
  font-weight: bold;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  text-align: center;
}

.psc-Indicators\/ltRed {
  background-color: #FF8A8A;
  border-color: #FF8A8A;
  border-style: solid;
  border-width: 1.5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: --neutral-80;
  font-size: 8pt;
  font-weight: bold;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  text-align: center;
}

.psc-Indicators\/red {
  background-color: #FF0000;
  border-color: #FF0000;
  border-style: solid;
  border-width: 1.5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: --neutral-20;
  font-size: 8pt;
  font-weight: bold;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  text-align: center;
}

.psc-Indicators\/whtText {
  color: #FFFFFF;
}

.psc-Indicators\/widgetBkgrnd {
  background-color: --neutral-30;
  border-color: --neutral-80;
  border-style: solid;
  border-width: 1.5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: --neutral-80;
  font-size: 8pt;
  font-weight: bold;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  text-align: center;
}

.psc-NavButton\/caption {
  color: var(--neutral-80);
}

.psc-NavButton\/shape {
  background-color: transparent;
  border-style: none;
}

.psc-Text\/BoldCentered {
  color: var(--neutral-80);
  font-family: Noto Sans;
  font-size: 10pt;
  font-weight: bold;
  text-align: center;
}

.psc-Text\/BoldLeft {
  color: var(--neutral-80);
  font-family: Noto Sans;
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
}

.psc-Text\/BoldRight {
  color: var(--neutral-80);
  font-family: Noto Sans;
  font-size: 10pt;
  font-weight: bold;
  text-align: right;
}

.psc-Text\/Gauge\/UnitText {
  font-size: 10pt;
  font-weight: normal;
  text-align: center;
}

.psc-Text\/Gauge\/ValueText {
  font-size: 16pt;
  font-weight: bold;
  text-align: center;
}

.psc-Text\/Header1 {
  color: var(--neutral-80);
  font-size: 12pt;
  font-weight: bold;
}

.psc-Text\/Header2 {
  color: var(--neutral-80);
  font-size: 10pt;
  font-weight: bold;
}

.psc-Text\/LabelValue {
  color: var(--qual-8);
  font-family: Noto Sans;
  font-size: 10pt;
  font-weight: bold;
}

.psc-Text\/Nav_Link {
  color: var(--neutral-70);
  font-size: 10pt;
}

.psc-Text\/Nav_SubLink {
  color: var(--neutral-70);
  font-size: 12pt;
}

.psc-Text\/NormalCentered {
  color: var(--neutral-80);
  font-family: Noto Sans;
  font-size: 10pt;
  text-align: center;
}

.psc-Text\/NormalLeft {
  color: var(--neutral-80);
  font-family: Noto Sans;
  font-size: 10pt;
  text-align: left;
}

.psc-Text\/NormalRight {
  color: var(--neutral-80);
  font-family: Noto Sans;
  font-size: 10pt;
  text-align: right;
}

.psc-Text\/Subtitle {
  color: --neutral-80;
  font-family: Noto Sans;
  font-size: 24pt;
  text-align: center;
}

.psc-Text\/Title {
  color: --neutral-80;
  font-family: Noto Sans;
  font-size: 32pt;
  font-weight: bold;
  text-align: center;
}

.psc-Text\/WidgetTitle {
  color: --neutral-80;
  font-size: 10pt;
  font-weight: bold;
}

.psc-Widgets\/main {
  background-color: var(--neutral-20);
  border-color: var(--neutral-30);
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  opacity: 1;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
}

.psc-Widgets\/smallDigitalInd {
  border-style: solid;
  border-width: 1.5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
}

.psc-form {
  border-style: ridge;
  padding: 8px;
}

@keyframes psc-DashboardAlarm\/textTriggered-anim {
  0% {
    color: var(--neutral-80);
    font-size: 8pt;
    font-weight: bold;
  }
  100% {
    color: var(--qual-10);
    font-size: 8pt;
    font-weight: bold;
  }
}
.psc-DashboardAlarm\/textTriggered {
  animation-name: psc-DashboardAlarm\/textTriggered-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes psc-InAlarm-anim {
  0% {
    background-color: var(--qual-60);
    color: var(--error);
  }
  100% {
  }
}
.psc-InAlarm {
  animation-name: psc-InAlarm-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes psc-fade_2sec-anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.psc-fade_2sec {
  animation-name: psc-fade_2sec-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}