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

	/*Couleurs du thèmes à déterminer au préalable*/
	 /* Primary: Lothern Blue */
    --primary-100: #F2F6FF;
    --primary-200: #D5E2FE;
    --primary-300: #B4CEF9;
    --primary-400: #8FB7E9;
    --primary-500: #6699CC;
    --primary-600: #3E76A3;
    --primary-700: #275A79;
    --primary-800: #183E50;
    --primary-900: #0B1F26;

    /* Accent: Vivaldi Red */
    --accent-100: #FFF5F2;
    --accent-200: #FFCFC5;
    --accent-300: #FCA296;
    --accent-400: #F66F67;
    --accent-500: #EB3838;
    --accent-600: #BA1717;
    --accent-700: #880909;
    --accent-800: #570404;
    --accent-900: #260202;

    /* Neutral */
    --neutral-100: #FAFBFC;
    --neutral-200: #E7E9ED;
    --neutral-300: #D5D8DD;
    --neutral-400: #C3C7CD;
    --neutral-500: #B1B7BD;
    --neutral-600: #8D9297;
    --neutral-700: #686E71;
    --neutral-800: #454A4C;
    --neutral-900: #222526;

    /* Danger */
    --danger-pulse: #FFF5F500;
    --danger-100: #FFF5F5;
    --danger-200: #FFE3E3;
    --danger-300: #FFC9C9;
    --danger-400: #FFA8A8;
    --danger-500: #FF8787;
    --danger-600: #FF6B6B;
    --danger-700: #FF4F4F;
    --danger-800: #E74C3C;
    --danger-900: #C0392B;

    /* Warning */
    --warning-pulse: #FFFBEB00;
    --warning-100: #FFFBEB;
    --warning-200: #FEF3C7;
    --warning-300: #FDE68A;
    --warning-400: #FCD34D;
    --warning-500: #FBBF24;
    --warning-600: #D99F00;
    --warning-700: #B7791F;
    --warning-800: #92541E;
    --warning-900: #74421F;

    /* Caution */
    --caution-pulse:#FFFDE700;
    --caution-100: #FFFDE7;
    --caution-200: #FFF9C4;
    --caution-300: #FFF59D;
    --caution-400: #FFF176;
    --caution-500: #FFEE58;
    --caution-600: #FDD835;
    --caution-700: #E6C100;
    --caution-800: #CCA700;
    --caution-900: #B38E00;

    /* Success */
    --success-100: #F0FFF4;
    --success-200: #C6F6D5;
    --success-300: #9AE6B4;
    --success-400: #68D391;
    --success-500: #48BB78;
    --success-600: #38A169;
    --success-700: #2F855A;
    --success-800: #276749;
    --success-900: #22543D;


    --curve-1:var(--primary);
    --curve-2:#ad66cc;
    --curve-3:#cc6670;
    --curve-4:#c2cc66;
    --curve-5:#66cc85;









    /*Variables du thèmes*/

    --white: #ffffff;
    --black: var(--neutral-900);
    --background: var(--neutral-100);

    /* Theme généré sur ionicframework */
    --primary: var(--primary-500); /* Bleu Ardoise */
    --primary-shade: var(--primary-400); /* Version plus sombre */
    --primary-tint: var(--primary-600); /* Version plus claire */

    --secondary: var(--neutral-500);
    --secondary-shade: var(--neutral-400);
    --secondary-tint: var(--neutral-600);

    --tertiary: var(--accent-500);
    --tertiary-shade: var(--accent-400);
    --tertiary-tint: var(--accent-600);

    --success: var(--success-500);

    /* Niveau 4/4 - Danger */
    --danger: var(--danger-800); /* Rouge foncé pour une meilleure distinction */

    /* Niveau 3/4 - Warning */
    --warning: var(--warning-500); /* Orange plus distinct */

    /* Niveau 2/4 - Caution */
    --caution: var(--caution-500); /* Jaune vif pour une meilleure distinction */

    /* Niveau 1/4 - Info */
    --noAlert: var(--neutral-300);

    --light: var(--neutral-100);
    --light-shade: var(--neutral-300);

    /* Functional */
    --error: var(--danger);
    --info: var(--primary);
    --infoSecondary: var(--secondary);
    --warningSecondary: var(--warning-secondary);
    --tooltip: #000000;

    --cancel: var(--neutral-400);
    --delete: var(--danger-500);
    --confirm: var(--primary);
    --update: var(--primary-400);
    --create: var(--success-500);
    --exit: var(--danger-400);

    --alarm-active: var(--danger-500);
    --alarm-inactive: var(--neutral-300);
    --alarm-light: var(--danger-100);

    --containerRoot: var(--light); /* the root container, depth 0 */
    --container: var(--light); /* standard container, depth 1 */
    --containerNested: var(--light); /* nested container, depth 2 */
    
    --input: var(--white);
    --input--disabled: var(--cancel);

    --icon: var(--white);
    --icon--hover: var(--neutral-400);
    --icon--disabled: var(--neutral-500);
    --icon--selected: var(--neutral-600);

    --label: var(--black);
    --label--disabled: var(--cancel);

    /* Borders */
    --border: var(--neutral-400);
    --border--disabled: var(--neutral-300);
    --containerBorder: 1px solid var(--border);

    /* Box Shadow */
    --boxShadow1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --boxShadow2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --boxShadow3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --boxShadow4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    --boxShadow5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
    --boxShadow--inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4);
    --headerShadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);

    /* Card Shadow */
    --cardShadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

    /* Icon Shadow */
    --iconShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0, 0, 0, 0.12);

    /* Call to action. */
    --callToAction: var(--primary); /* primary-60 */
    --callToActionHighlight: var(--primary); /* primary-10 */
    --callToAction--hover: var(--neutral-200); /* primary-50 */
    --callToAction--active: var(--primary); /* primary-70 */
    --callToAction--disabled: var(--light-shade);

   

    /* Border Radius */
    --borderRadius: 4px;
    --borderRadiusInput: 2px;
    
    /* Opacity */
    --opacity-25: rgba(0, 0, 0, 0.25); /* black, 50% opacity */
    --opacity-50: rgba(0, 0, 0, 0.50); /* black, 50% opacity */
    --opacity-85: rgba(0, 0, 0, 0.85); /* black, 85% opacity */

    /* Typography */
    --font-NotoSans:  "Roboto",'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    
    /* Components */
    /* LED Display */
    --indicator: var(--success-500); /* green-40 */
    --indicatorOff: var(--success-200); /* green-100 */

    /* Checkbox */
    --checkbox--checked: var(--callToAction);
    --checkbox--unchecked: var(--border);
    --checkbox--indeterminate: var(--callToAction);
    --checkbox--disabled: var(--input--disabled);

    /* Progress Bar */
    --progressLinearTrack--determinate: var(--primary-100);
    --progressLinearTrack--indeterminate: var(--neutral-100);
    --progressLinearBar--determinate: var(--infoSecondary);
    --progressLinearBar--indeterminate: var(--border);

    /* Toggle Switch */
    --toggleSwitch--selected: var(--callToAction);
    --toggleSwitch--unselected: var(--neutral-200);

    /* Radio */
    --radio--selected: var(--callToAction);
    --radio--unselected: var(--border);
    --radio--disabled: var(--input--disabled);

    /* Piping */
    --pipePrimaryFill: var(--neutral-900);
    --pipeSecondaryFill: #cccccc;
    --pipeStroke: var(--neutral-400);
    --pipeSelectStroke: var(--callToAction);

    /* Symbols */
    --symbolFill--default: var(--neutral-600);
    --symbolFillAnimation--default: var(--neutral-500);
    --symbolStroke--default: var(--neutral-300);
    --symbolFill--running: var(--white);
    --symbolFillAnimation--running: var(--neutral-500);
    --symbolStroke--running: var(--neutral-300);
    --symbolFill--stopped: var(--neutral-600);
    --symbolStroke--stopped: var(--neutral-300);
    --symbolFill--faulted: #FAB6B6;
    --symbolStroke--faulted: #B80D0D;
}

.psc-background {
	background-color: var(--background);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%2319304C' stroke-width='66' stroke-opacity='0.03' %3E%3Ccircle fill='%23E8E8E8' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23e9e9e9' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23ebebeb' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23ececec' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23ededed' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23efefef' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23f0f0f0' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23f1f1f1' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23f3f3f3' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23f4f4f4' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23f5f5f5' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23f7f7f7' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%23f8f8f8' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23fafafa' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23fbfbfb' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%23fcfcfc' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%23fefefe' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23FFFFFF' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
	background-attachment: fixed;
	background-size: cover;

}



.psc-docked-view {
    box-shadow: var(--boxShadow2);
}



.psc-banner {
	/*background-color: var(--primary);*/
	font-size: 36px;
	font-weight: 900;
	text-align:left;
	vertical-align:center;
	text-transform: uppercase;
	padding:20px;
	background: linear-gradient(to bottom, var(--primary), var(--primary-400));
	color:var(--white);
}

/*========================================================================================================================*/
/* -----> OBJET de TYPE CARD*/
/*========================================================================================================================*/

.psc-card {
    margin: 10px;
/*    border-radius: 10px;*/
    background-color:var(--white)  ;
    box-shadow: var(--boxShadow1);
    border-radius: 0.75rem;
/*    padding: 4px;*/ 
}

.psc-card-header {
/*    pointer-events:none;*/
	background-color:var(--primary-400);
	color:var(--black) ;
	padding:5px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom:solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--light-shade);  
}

.psc-card-header-title {
    color:var(--white) ;
    font-weight: 600;
    font-size: 15px;
    padding:5px;   
}

.psc-card-button {
  border: none;
  /*background-color: var(--primary-100);*/
  color:var(--neutral-500);
  display: flex;
  align-items: center;
  justify-content: center;
  padding : 5;
  cursor: pointer;
}

.psc-card-button:hover {
  filter: brightness(0.95);
  /*background-color:var(--primary-10);*/
}

.psc-card-body {
    margin:5px;  
}

.psc-card-body-element {
	color:var(--neutral-500) ;
	font-weight: 300;
	font-size: 12px;   
}

.psc-card-header-subtitle {
    color:var(---neutral-500) ;
    font-weight: 500;
    font-size: 14px;   
}


/*========================================================================================================================*/
/* -----> OBJET de TYPE WINDOW*/
/*========================================================================================================================*/


/*Pour les containers dans les view*/
.psc-window {
    margin: 10px;
    background-color:var(--white);
}

.psc-window-body {
    padding: 10px;
    margin:2px;  
}

.psc-window-body-title {
    
    color:var(--secondary);
    font-weight:500;
    font-size:18px;
    text-align:center;    
}

.psc-window-header {
    padding:5px;
    background-color:var(--primary) ;
    color:var(--white);
    font-weight:500;
    font-size:18px;   
}

.psc-window-header-title {
	/*Premier niveau de sectorisation    */
}


/*========================================================================================================================*/
/* -----> OBJET de TYPE OBJECT*/
/*========================================================================================================================*/


/*Des cards contient des objets*/
.psc-object {
    margin: 5px;
    background-color:var(--background-tint) ;
    border-radius: 2px;
    border:solid;
    border-width: 1px;
    border-color: var(--light-shade);  
}

.psc-object-header {
    padding:5px;
}

.psc-object-header-title {
    font-weight:bolder;
    font-size: 16px;
}

.psc-object-header-subtitle {
    font-size: 12px;
}

.psc-object-header-id {
    color:var(--white) ;
    font-weight:bolder;
    font-size: 11px;
}

.psc-object-body {
    color:var(--black) ;
    font-size: 10px;
    padding:5px;
}

.psc-object-body-element {
    border-bottom-color: var(--light-shade);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding:2px;
}




/*========================================================================================================================*/
/* -----> OBJET de TYPE FORMULAIRES*/
/*========================================================================================================================*/

.psc-form {
    margin: 5px;
    background-color:var(--white) ;
/*    border-radius: 10px;*/
    border-style:solid;
    border-width: 1px;
    border-color: var(--light-shade);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.psc-form-header {
  font-size: 20px;
  color: var(--confirm);
  font-weight: 600;
  letter-spacing: -1px;
  align-items: center;
  height:60px;
  border-bottom:1px solid var(--light-shade);
}

.psc-form-header-create {
  font-size: 20px;
  color: var(--create);
  font-weight: 600;
  letter-spacing: -1px;
  align-items: center;
  height:60px;
  border-bottom:1px solid var(--light-shade);
}

.psc-form-header-delete {
  font-size: 20px;
  color: var(--delete);
  font-weight: 600;
  letter-spacing: -1px;
  align-items: center;
  height:60px;
  border-bottom:1px solid var(--light-shade);
}

.psc-form-header-update {
  font-size: 20px;
  color: var(--update);
  font-weight: 600;
  letter-spacing: -1px;
  align-items: center;
  height:60px;
  border-bottom:1px solid var(--light-shade);
}

.psc-form-header-id {
    color:var(--white) ;
    font-weight:bolder;
    font-size: 11px;
    pointer-events:none;
}

.psc-form-body {
    color:var(--black) ;
    font-size: 11px;
    padding:5px;
}

.psc-form-body-element {
    
}

.psc-form-footer {
  border-top:1px solid var(--light-shade);
}




/*========================================================================================================================*/
/* -----> BOUTTONS <-----*/
/*========================================================================================================================*/

/* Boutton standard avec couleur PRIMARY */ 
.psc-bigButton {
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color:var(--confirm);
    background-color: var(--white);
    padding: 5;
    cursor: pointer;
    /*  font-size: 18px;*/
    /*  border-radius: 0.5em;*/
    /*  background: #e8e8e8;*/
      border: 1px solid var(--confirm);
    /*  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;*/
}

.psc-bigButton:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
/*  background-color: rgba(0, 0, 0, 0.05);*/
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.psc-bigButton:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: var(--confirm);
  color:var(--white);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.psc-bigButton:hover {
  color:var(--white);
/*  border: 1px solid #009087;*/
}

.psc-bigButton:hover:before {
  top: -35%;
  background-color: var(--confirm);
  color:var(--white);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.psc-bigButton:hover:after {
  top: -45%;
  background-color: var(--confirm);
  color:var(--white);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.psc-bigButton:active {
  scale: 0.95;
}


/* Boutton création avec couleur CREATE */ 
.psc-bigButton-create {
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color:var(--create);
    background-color: var(--white);
    padding: 5px;
    cursor: pointer;
    /*  font-size: 18px;*/
    /*  border-radius: 0.5em;*/
    /*  background: #e8e8e8;*/
      border: 1px solid var(--create);
    /*  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;*/
}

.psc-bigButton-create:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
/*  background-color: rgba(0, 0, 0, 0.05);*/
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.psc-bigButton-create:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: var(--create);
  color:var(--white);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.psc-bigButton-create:hover {
  color:var(--white);
/*  border: 1px solid #009087;*/
}

.psc-bigButton-create:hover:before {
  top: -35%;
  background-color: var(--create);
  color:var(--white);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.psc-bigButton-create:hover:after {
  top: -45%;
  background-color: var(--create);
  color:var(--white);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.psc-bigButton-create:active {
  scale: 0.95;
}


/* Boutton suppression avec couleur DELETE */ 
.psc-bigButton-delete {
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color:var(--delete);
    background-color: var(--white);
    padding: 5px;
    cursor: pointer;
    /*  font-size: 18px;*/
    /*  border-radius: 0.5em;*/
    /*  background: #e8e8e8;*/
      border: 1px solid var(--delete);
    /*  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;*/
}

.psc-bigButton-delete:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
/*  background-color: rgba(0, 0, 0, 0.05);*/
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.psc-bigButton-delete:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: var(--delete);
  color:var(--white);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.psc-bigButton-delete:hover {
  color:var(--white);
/*  border: 1px solid #009087;*/
}

.psc-bigButton-delete:hover:before {
  top: -35%;
  background-color: var(--delete);
  color:var(--white);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.psc-bigButton-delete:hover:after {
  top: -45%;
  background-color: var(--delete);
  color:var(--white);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.psc-bigButton-delete:active {
  scale: 0.95;
}


/* Boutton modification avec couleur UPDATE */ 
.psc-bigButton-update {
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color:var(--update);
    background-color: var(--white);
    padding: 5px;
    cursor: pointer;
    /*  font-size: 18px;*/
    /*  border-radius: 0.5em;*/
    /*  background: #e8e8e8;*/
      border: 1px solid var(--update);
    /*  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;*/
}

.psc-bigButton-update:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
/*  background-color: rgba(0, 0, 0, 0.05);*/
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.psc-bigButton-update:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: var(--update);
  color:var(--white);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.psc-bigButton-update:hover {
  color:var(--white);
/*  border: 1px solid #009087;*/
}

.psc-bigButton-update:hover:before {
  top: -35%;
  background-color: var(--update);
  color:var(--white);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.psc-bigButton-update:hover:after {
  top: -45%;
  background-color: var(--update);
  color:var(--white);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.psc-bigButton-update:active {
  scale: 0.95;
}


/* Boutton annulation avec couleur CANCEL */ 
.psc-bigButton-cancel {
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color:var(--cancel);
    background-color: var(--white);
    padding: 5;
    cursor: pointer;
    /*  font-size: 18px;*/
    /*  border-radius: 0.5em;*/
    /*  background: #e8e8e8;*/
      border: 1px solid var(--cancel);
    /*  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;*/
}

.psc-bigButton-cancel:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
/*  background-color: rgba(0, 0, 0, 0.05);*/
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.psc-bigButton-cancel:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: var(--cancel);
  color:var(--white);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.psc-bigButton-cancel:hover {
  color:var(--white);
/*  border: 1px solid #009087;*/
}

.psc-bigButton-cancel:hover:before {
  top: -35%;
  background-color: var(--cancel);
  color:var(--white);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.psc-bigButton-cancel:hover:after {
  top: -45%;
  background-color: var(--cancel);
  color:var(--white);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.psc-bigButton:active {
  scale: 0.95;
}


.psc-button-cancel {
    background-color:var(--white);
    border: 1px solid var(--cancel);
    color:var(--cancel);
}



.psc-microButton {
	transform: translateY(-2px);
  	box-shadow: var(--boxShadow1);
}


/*========================================================================================================================*/
/* -----> ICONS <-----*/
/*========================================================================================================================*/


.psc-icon{
    border-radius: 10px;
    cursor: pointer;
    margin: 7px;
    padding: 7px;
    transition: all 0.3s ease;
    color:var(--black);

}

.psc-icon:hover{
    background-color: var(--neutral-20);
    color:var(--black);
    transition: all 0.3s ease;
    box-shadow: var(--iconShadow)
    transform:scale(1.2);
}

.psc-icon:active{
    color:var(--light);
    background-color: var(--medium);
}


.psc-icon-selected{
    border-radius: 10px;
    cursor: pointer;
    margin: 7px;
    padding: 7px;
    transition: all 0.3s ease;
    color:var(--black);
    background-color: var(--neutral-40);

}

.psc-icon-selected:hover{
    background-color: var(--neutral-20);
    color:var(--primary-100);
    transition: all 0.3s ease;
    box-shadow: var(--iconShadow)
    transform:scale(1.2);
}

.psc-icon-selected:active{
    color:var(--light);
    background-color: var(--medium);
}

.psc-icon-notified{
    border-radius: 10px;
    cursor: pointer;
    margin: 7px;
    padding: 7px;
    transition: all 0.3s ease;
    color:var(--white);
    background-color: var(--danger);
    animation: 1.5s notified infinite ease-in-out;
}


@keyframes notified {
	0% {
	box-shadow: 0 0 0 0 var(--danger);
	}
	
	
	100% {
	box-shadow: 0 0 0 14px var(--danger-pulse);
	}
}

.psc-microIcon{
    color:var(--primary);
    cursor:pointer;
    background-color:#00000000;
    margin-left:3px;
    margin-right:3px;
    border:None;
}


/*========================================================================================================================*/
/* -----> DIVERS <-----*/
/*========================================================================================================================*/

.psc-confirmMessage{
	transform: translateX(100%);
	transition: transform 0.2s ease-in;
}

.psc-tooltip {
    transition: all 0.2s;
    position: top;
/*    location:top;*/
    font-size: 10px;
    width: fit-content;
    color: var(--white);
    background-color: var(--tooltip);
/*    border-radius: 0.5rem;*/
    height: fit-content;
    box-shadow: var(--boxShadow1);
 
}

.psc-parallel {
  transform: skewX(-20deg); /* Inclinaison horizontale */
  transform-origin: bottom right; /* Point d'origine de la transformation */
}

.psc-parallel-content {
  transform: skewX(20deg); /* Inclinaison horizontale */
  transform-origin: bottom right; /* Point d'origine de la transformation */
}

.triangle-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid blue;
  z-index: 0; /* Assure que le triangle est en arrière-plan */
}


/*========================================================================================================================*/
/* -----> Bouton des capteurs à placer sur les photos <-----*/
/*========================================================================================================================*/

.psc-circle {

	border:1px solid var(--black);
	background-color: var(--noAlert); /* Couleur du rond */
	border-radius: 50%; /* Pour rendre l'élément rond */
	transition: 0.2s ease-in-out; /* Smooth animation */
	cursor:pointer;
}

.psc-circle-static {

	border:1px solid var(--black);
	background-color: var(--noAlert); /* Couleur du rond */
	border-radius: 50%; /* Pour rendre l'élément rond */
	
}

.psc-circle:hover {

	transform: scale(1.1); /* Agrandit le rond */
	box-shadow: var(--boxShadow3);
}

.psc-circle:active {
	transform: scale(0.95); /* Button shrinks slightly */
	box-shadow: none; /* Shadow disappears when clicked */
}


.psc-circle-danger {
  
	border-radius: 50%;
	border:1px solid var(--black);
	background-color: var(--danger); /* Couleur du rond */
	animation: 1.5s pulseDanger infinite ease-in-out;
	transition: 0.2s ease-in-out; /* Smooth animation */
	cursor:pointer;
}

.psc-circle-danger-static {
  
	border-radius: 50%;
	border:1px solid var(--black);
	background-color: var(--danger); /* Couleur du rond */
	
}

.psc-circle-danger:hover {

	transform: scale(1.1); /* Agrandit le rond */
	box-shadow: var(--boxShadow3);
}

.psc-circle-danger:active {
	transform: scale(0.95); /* Button shrinks slightly */
	box-shadow: none; /* Shadow disappears when clicked */
}

@keyframes pulseDanger {
  0% {
    box-shadow: 0 0 0 0 var(--danger);
  }
  50% {
  	transform: scale(1.2);
  }

  100% {
    box-shadow: 0 0 0 14px var(--danger-pulse);
  }
}


.psc-circle-warning {
  
	border-radius: 50%;
	border:1px solid var(--black);
	background-color: var(--warning); /* Couleur du rond */
	animation: 1.5s pulseWarning infinite ease-in-out;
	transition: 0.2s ease-in-out; /* Smooth animation */
	cursor:pointer;
}

.psc-circle-warning-static {
  
	border-radius: 50%;
	border:1px solid var(--black);
	background-color: var(--warning); /* Couleur du rond */
	
}

.psc-circle-warning:hover {

	transform: scale(1.1); /* Agrandit le rond */
	box-shadow: var(--boxShadow3);
}

.psc-circle-warning:active {
	transform: scale(0.95); /* Button shrinks slightly */
	box-shadow: none; /* Shadow disappears when clicked */
}

@keyframes pulseWarning {
  0% {
    box-shadow: 0 0 0 0 var(--warning);
  }
  50% {
  	transform: scale(1.2);
  }

  100% {
    box-shadow: 0 0 0 14px var(--warning-pulse);
  }}


.psc-circle-caution {
  
	border-radius: 50%;
	border:1px solid var(--black);
	background-color: var(--caution); /* Couleur du rond */
	animation: 1.5s pulseCaution infinite ease-in-out;
	transition: 0.2s ease-in-out; /* Smooth animation */
	cursor:pointer;
}

.psc-circle-caution-static {
  
	border-radius: 50%;
	border:1px solid var(--black);
	background-color: var(--caution); /* Couleur du rond */
	
}

.psc-circle-caution:hover {

	transform: scale(1.1); /* Agrandit le rond */
	box-shadow: var(--boxShadow3);
}

.psc-circle-caution:active {
	transform: scale(0.95); /* Button shrinks slightly */
	box-shadow: none; /* Shadow disappears when clicked */
}

@keyframes pulseCaution {
  0% {
    box-shadow: 0 0 0 0 var(--caution);
    
  }
  50% {
  	transform: scale(1.2);
  }

  100% {
    box-shadow: 0 0 0 14px var(--caution-pulse);
    
  }
  
}


.psc-volet {
    position: absolute;
    top: -100%; /* Initial position outside the container */
    left: 0;
    transition: top 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Cubic-bezier for bounce effect */
}

.psc-open {
    top: 0; /* Final position inside the container */
}


/* Définir l'animation d'apparition */
@keyframes apparition {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Appliquer l'animation au div */
.psc-apparition {
  animation: apparition 0.5s ease-out forwards;
}
/* BEGIN STYLE CLASSES */
.psc-Accordeon\/Header\/Title {
  color: #000000;
  font-size: 24px;
  font-weight: bold;
}

.psc-Accordeon\/Header\/subtitle {
  color: #000000;
  font-size: 16px;
}

.psc-AlarmJournal\/Ack {
  background-color: #FFFF8A;
  border-color: #CCCCCC;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #2E2E2E;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
}

.psc-AlarmJournal\/Active_Ack {
  background-color: #FF4747;
  border-color: #CCCCCC;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
}

.psc-AlarmJournal\/Clear_Ack {
  background-color: #CCFFCC;
  border-color: #CCCCCC;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #2E2E2E;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
}

.psc-AlarmJournal\/None {
  background-color: #FFFFFF;
  border-color: #CCCCCC;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #2E2E2E;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
}

.psc-Buttons\/Alarm_bgActive {
  background-color: #FF1744;
  border-style: none;
  outline-style: none;
}

.psc-Buttons\/Cancel {
  background-color: #9e9e9e;
  border-style: none;
  color: #ffffff;
  outline-style: none;
}

.psc-Buttons\/ControlButton {
  font-size: 25px;
  text-transform: uppercase;
}

.psc-Buttons\/Delete {
  background-color: #FF1744;
  border-style: none;
  color: #ffffff;
  outline-style: none;
}

.psc-Buttons\/Disabled {
  background-color: #FFFFFF;
  border-color: #9e9e9e;
  border-style: solid;
  border-width: 1px;
  color: #9e9e9e;
  cursor: not-allowed;
  outline-style: none;
}

.psc-Buttons\/Root {
  cursor: pointer;
  font-weight: bolder;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  padding: 2px;
  text-transform: uppercase;
}

.psc-Buttons\/ShowDetails {
  background-color: #FFFFFF;
  border-color: #03a8f4;
  border-style: double;
  border-width: 1px;
  color: #03a8f4;
  cursor: pointer;
  margin-bottom: 2px;
  outline-style: none;
}

.psc-Buttons\/Standard {
  background-color: #03a8f4;
  border-style: none;
  color: #ffffff;
  cursor: pointer;
  outline-style: none;
}

.psc-Buttons\/Update {
  background-color: #ffab00;
  border-style: none;
  color: #ffffff;
  outline-style: none;
}

.psc-Buttons\/Validation {
  background-color: #4caf50;
  border-style: none;
  color: #ffffff;
  outline-style: none;
}

.psc-CustomStyles\/Field\/FixMode {
  border-style: none;
}

.psc-CustomStyles\/Field\/UpdateMode {
  border-color: #FFAC47;
  border-style: solid;
  border-width: 2px;
}

.psc-CustomStyles\/Selector\/selected {
  background-color: #5869F0;
}

.psc-CustomStyles\/Selector\/unselected {
  background-color: #C1C1C1;
}

.psc-Framework\/Card\/Bold_Text {
  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 {
  color: #8E8E8E;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  margin-right: 10px;
  text-transform: uppercase;
}

.psc-Framework\/Card\/Row {
  margin-bottom: 2px;
}

.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-bottom: 5px;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 5px;
  text-transform: uppercase;
  fill: #2E2E2E;
}

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

.psc-Framework\/Popup\/Button {
  background-image: linear-gradient(180deg, #59B1E8 0%, #47A9E6 100%);
  border-color: #47A9E6;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  text-transform: uppercase;
  fill: #FFFFFF;
}

.psc-Framework\/Popup\/Error {
  color: #e83a56;
  font-size: 24px;
  fill: #e83a56;
}

.psc-Framework\/Popup\/Text {
  color: #2E2E2E;
  font-size: 16px;
  fill: #6C6C6C;
}

.psc-Framework\/TableCardLayout\/Label {
  color: #2B2B2B;
  font-size: 14px;
  font-weight: 300;
  line-height: 16px;
}

.psc-Header\/DropDown {
  background-color: var(--neutral-20);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: var(--neutral-100);
  margin-bottom: 10px;
  margin-top: 10px;
}

.psc-Header\/Header {
  background-color: #003E69;
  color: #E7F5FF;
  font-size: 14px;
  line-height: 17px;
  fill: #FFFFFF;
}

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

.psc-Labels\/Buttons {
  color: #FFFFFF;
  font-size: 14px;
}

.psc-Labels\/Labels {
  color: #000000;
  font-family: Arial;
  font-size: 14px;
  text-align: center;
}

.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 {
  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: var(--neutral-20);
}

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

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

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

.psc-Page\/Text {
  font-size: 14px;
  line-height: 20px;
}

.psc-ScheduleManagement\/Headers {
  background-color: #2B2B2B;
  color: #FFFFFF;
  font-family: Arial;
  font-size: 20px;
  font-weight: lighter;
  text-align: start;
  text-indent: 6px;
}

.psc-ScheduleManagement\/InputFont {
  font-family: Arial;
  font-size: 14px;
}

.psc-ScheduleManagement\/LeftVerticalHeaderBar {
  border-left-color: #4A4A4A63;
  border-left-style: solid;
  border-left-width: 1px;
}

.psc-ScheduleManagement\/SectionHeaders {
  font-family: Arial;
  font-size: 15px;
  margin-bottom: 2px;
}

.psc-ScheduleManagement\/TableIcons {
  cursor: pointer;
  margin-bottom: 1px;
  margin-top: 5px;
}

.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-UserManagement\/Headers {
  background-color: #2B2B2B;
  color: #FFFFFF;
  font-family: Arial;
  font-size: 20px;
  font-weight: lighter;
  text-align: start;
  text-indent: 6px;
}

.psc-UserManagement\/InputFont {
  font-family: Arial;
  font-size: 14px;
}

.psc-UserManagement\/LeftVerticalHeaderBar {
  border-left-color: #4A4A4A63;
  border-left-style: solid;
  border-left-width: 1px;
}

.psc-UserManagement\/SectionHeaders {
  font-family: Arial;
  font-size: 15px;
  margin-bottom: 9px;
}

.psc-UserManagement\/TableEditorIcons {
  cursor: pointer;
  margin-bottom: 1px;
  margin-top: 5px;
}

.psc-Widgets\/subWidgets {
  background-color: #C3C3C3;
  border-color: #000000;
  border-style: solid;
  border-width: 5px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #000000;
  font-family: Helvetica;
  font-size: 15px;
  font-weight: normal;
  margin: 5px;
  text-align: center;
  stroke: #000000;
  stroke-width: 5;
  fill: #000000;
}

.psc-colorState\/Radio_button {
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  overflow: visible;
  overflow-x: auto;
  overflow-y: auto;
}
.psc-colorState\/Radio_button:first-child {
  font-family: inherit;
}

.psc-colorState\/active {
  border-color: #4CAF50;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #4CAF50;
  font-weight: bolder;
}
.psc-colorState\/active:first-child {
  font-family: inherit;
}

.psc-colorState\/outdated {
  border-color: #FFAB00;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #FFAB00;
  font-weight: bolder;
}
.psc-colorState\/outdated:first-child {
  font-family: inherit;
}

.psc-colorState\/refused {
  border-color: #FF1744;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #FF1744;
  font-weight: bolder;
}
.psc-colorState\/refused:first-child {
  font-family: inherit;
}

.psc-colorState\/revoked {
  border-color: #FF5722;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #FF5722;
  font-weight: bolder;
}
.psc-colorState\/revoked:first-child {
  font-family: inherit;
}

.psc-colorState\/to_activate {
  border-color: #304FFE;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #304FFE;
  font-weight: bolder;
}
.psc-colorState\/to_activate:first-child {
  font-family: inherit;
}

.psc-colorState\/to_check {
  border-color: #0091EA;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #0091EA;
  font-weight: bolder;
}
.psc-colorState\/to_check:first-child {
  font-family: inherit;
}

.psc-mouseover {
  cursor: grab;
}

@keyframes psc-AlarmJournal\/Active_Unack-anim {
  0% {
    background-color: #FF4747;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
  100% {
    background-color: #FF4747;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    color: #D5D5D5;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
}
.psc-AlarmJournal\/Active_Unack {
  animation-name: psc-AlarmJournal\/Active_Unack-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes psc-AlarmJournal\/Clear_Unack-anim {
  0% {
    background-color: #CCFFCC;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    color: #2E2E2E;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
  100% {
    background-color: #CCFFCC;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    color: #808080;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
}
.psc-AlarmJournal\/Clear_Unack {
  animation-name: psc-AlarmJournal\/Clear_Unack-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes psc-Animation\/Alarm_Active-anim {
  0% {
    box-shadow: 0 0 0 7px var(--alarm-active);
  }
  100% {
  }
}
.psc-Animation\/Alarm_Active {
  animation-name: psc-Animation\/Alarm_Active-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

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

@keyframes psc-Animation\/Overview_ON-anim {
  0% {
    color: --success-tint;
  }
  100% {
    color: --success-shade;
  }
}
.psc-Animation\/Overview_ON {
  animation-name: psc-Animation\/Overview_ON-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes psc-Animation\/spinner-anim {
  0% {
  }
  100% {
  }
}
.psc-Animation\/spinner {
  animation-name: psc-Animation\/spinner-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes psc-Buttons\/Alarm_Active-anim {
  0% {
    border-style: none;
    color: #FFFFFF;
    font-weight: bolder;
    outline-style: none;
    fill: #E7F5FF;
  }
  100% {
    color: #000000;
    font-weight: bolder;
    fill: #FF2E2E;
  }
}
.psc-Buttons\/Alarm_Active {
  animation-name: psc-Buttons\/Alarm_Active-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes psc-Header\/Alarm_Active-anim {
  0% {
    color: #E7F5FF;
    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-colorState\/blink_once-anim {
  0% {
    border-color: #F31212;
    border-style: solid;
    border-width: 2px;
  }
  100% {
  }
}
.psc-colorState\/blink_once {
  animation-name: psc-colorState\/blink_once-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}