/* BEGIN STYLESHEET */
:root {
	/*Standard Colours based form IIOTHub (Bootstrap)*/
	--da-white: #fff;
	--da-gray: #6c757d;
	--da-gray-dark: #343a40;
	--da-primary: #0c7bb3; /*#007bff;*/
	--da-primary-hover: #296076;
	--da-secondary: #6c757d;
	--da-success: #3daf57;
	--da-success-hover: #1c7530;
	--da-info: #17a2b8;
	--da-info-hover: #107181;
	--da-warning: #ffc107;
	--da-warning-hover: #b78a00;
	--da-danger: #dc3545;
	--da-danger-hover: #a31c29;
	--da-light: #f8f9fa;
	--da-dark: #343a40;
	--da-blue: #007bff;
	--da-indigo: #6610f2;
	--da-purple: #6f42c1;
	--da-pink: #e83e8c;
	--da-red: #dc3545;
	--da-orange: #fd7e14;
	--da-yellow: #ffc107;
	--da-green: #3daf57;
	--da-teal: #20c997;
	--da-cyan: #17a2b8;
	--da-grey-light: #f8f9fa;
	--da-bad:	#f28787; 	/* use for bad */
	--da-good: #3daf57;  /* use for good */
	

	/*Text Colours*/
	--da-black-text: #212529;
	--da-white-text: #fff;
	
	/* Neutral (Grey) */
	--da-neutral-90: #323232;
	--da-neutral-80: #515151;
	--da-neutral-70: #5E5E5E;
	--da-neutral-60: #767676;
	--da-neutral-50: #A1A1A1;
	--da-neutral-40: #BDBDBD;
	--da-neutral-30: #D8D8D8;
	--da-neutral-20: #F4F4F4;
	--da-neutral-10: #FAFAFA;

	/* Red */
	--da-red-90: #c02333;
	--da-red-80: #cf2e3e;
	--da-red-70: #dc3546;
	--da-red-60: #ef3e4d;
	--da-red-50: #fd464e;
	--da-red-40: #f75965;
	--da-red-30: #e97984;
	--da-red-20: #f19ea6;
	--da-red-10: #ffd0d9;

	/* Green */
	--da-green-90: #004612;
	--da-green-80: #0a842f;
	--da-green-70: #1a953a;
	--da-green-60: #28a746;
	--da-green-50: #32b64f;
	--da-green-40: #56c26a;
	--da-green-30: #76cd85;
	--da-green-20: #9fdaa8;
	--da-green-10: #c5e9ca;

	/*Yellow - Orange */
	--da-yellowOrange-90: #ff6f00;
	--da-yellowOrange-80: #ff8f00;
	--da-yellowOrange-70: #ffa000;
	--da-yellowOrange-60: #ffb300;
	--da-yellowOrange-50: #ffc107;
	--da-yellowOrange-40: #ffca28;
	--da-yellowOrange-30: #ffd54f;
	--da-yellowOrange-20: #ffe082;
	--da-yellowOrange-10: #ffecb3;

	/* Blue*/
	--da-blue-90: #1f47cd;
	--da-blue-80: #1269ec;
	--da-blue-70: #007bff;
	--da-blue-60: #008fff;
	--da-blue-50: #009eff;
	--da-blue-40: #1dadff;
	--da-blue-30: #56bdff;
	--da-blue-20: #8dd0ff;
	--da-blue-10: #bbe2ff;

	/* Text Header Colours */ 
	--da-header1-primary: var(--da-neutral-10: #FAFAFA);
	--da-header2-primary: var(--da-neutral-20: #F4F4F4);
	--da-header3-primary: var(--da-neutral-30: #D8D8D8);
	--da-header4-primary: var(--da-neutral-40: #BDBDBD);
	--da-header5-primary: var(--da-neutral-60: #767676);
	
	--da-header1-secondary: var(--da-neutral-90: #323232);
	--da-header2-secondary: var(--da-neutral-80: #515151);
	--da-header3-secondary: var(--da-neutral-70: #5E5E5E);
	--da-header4-secondary: var(--da-neutral-60: #767676);
	--da-header5-secondary: var(--da-neutral-50: #A1A1A1);


	
	/* Indication Status Colours */
	--da-simulation: var(--da-orange);
	
	--da-indicationOkFill: var(--da-green);
	--da-indicationOkFillAlt: var(--da-green-90);

	--da-indicationWarningFill: var(--da-yellow);
	--da-indicatoinWarningFillAlt: var(--da-yellowOrange-90);

	--da-indicationFaultFill: var(--da-red);
	--da-indicatoinFaultFillAlt: var(--da-red-90);

	/*P&ID Symbol defaults*/
	--da-symbolFill--default: var(--neutral-20);
	--da-symbolStroke--default: var(--neutral-70);
	
	--da-symbolFill--running: var(--da-green-20);
	--da-symbolStroke--running: var(--da-green-70);

	--da-symbolFill--stopped: var(--neutral-40);
	--da-symbolStroke--stopped: var(--neutral-70);

	--da-symbolFill--faulted: #fab6b6;
	--da-symbolStroke--faulted: #b80d0d;

	--da-symbolFill--opened: var(--da-green-20);
	--da-symbolSroke--opened: var(--neutral-70);

	--da-symbolFill-closed: var(--neutral-40);
	--da-symbolSroke--closed: var(--neutral-70);

	--da-liquidColor: var(--da-blue-70);

}


/* 
 *  Style classes - note Perspective uses the prefix .psc- for Style Classes before they are injected onto the page, 
 *  so if you are trying to target a Style Class, you’ll need to add this prefix to the name of your style declaration
 *  Then add the Style Class name (without the prefix) to your Property Editor style field.
 */ 


 /*
  * Process Related Styling
  */

/* Process Page Overall Styles*/
.psc-da_ProcessBackground {
	background: var(--da-neutral-30);
  
}
  
.psc-da_ProcessForeground {
	border: 1px solid rgba(0,0,0,.125);
	border-radius: 0.25rem;
	background: var(--containerRoot);
}

.psc-da_SymbolComponent {
	fill: var(--da-symbolFill--default);
	stroke: var(--da-symbolStroke--default);
}

/*Alarm Letter Indicator (H,HH,L,LL etc)*/
.psc-da_AlarmLetterIndicator {
	color: #b80d0d;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}

.psc-da_UnitsIndicator {
	font-size: 12px;
	text-align: center;
}

.psc-da_UnitsIndicator--alarm {
	color: #b80d0d;
	font-size: 12px;
	text-align: center;
}

.psc-da_PVIndicator {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

.psc-da_PVIndicator--alarm {
	color: #b80d0d;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

.psc-da_PVIndicator--running {
	color: var(--da-symbolStroke--running);
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

/*Flow Switch*/
.psc-da_FlowSwitch--faulted {
	fill: var(--da-symbolFill--default);
	stroke: var(--da-symbolStroke--faulted);
	animation: da_SymbolComponent__animate--faulted linear infinite;
}

.psc-da_FlowSwitch--running {
	fill: var(--da-symbolFill--running);
	stroke: var(--da-symbolStroke--running);
}

/* Analogue Sensor Square Box */
.psc-da_Sensor--faulted {
	background-color: var(--da-symbolFill--default);
	color: var(--da-symbolStroke--faulted);
	animation: da_InputComponent__animate--faulted linear infinite;
}

.psc-da_Sensor--running {
	background-color: var(--da-symbolFill--running);
	color: var(--da-symbolStroke--running);
}

/* Valve States */
.psc-da_Valve--opened {
	fill: var(--da-symbolFill--opened);
	stroke: var(--da-symbolSroke--opened);
}

.psc-da_Valve--closed {
	fill: var(--da-symbolFill-closed);
	stroke: var(--da-symbolSroke--closed);
}

.psc-da_Valve--faulted {
	fill: var(--da-symbolFill--default);
	stroke: var(--da-symbolStroke--faulted);
	animation: da_SymbolComponent__animate--faulted linear infinite;
}


/* DOL and VSD States */
.psc-da_DOL--faulted, .psc-da_VSD--faulted {
	fill: var(--da-symbolFill--faulted);
	stroke: var(--da-symbolStroke--faulted);
	animation: da_SymbolComponent__animate--faulted linear infinite;
}

.psc-da_DOL--running, .psc-da_VSD--running {
    fill: var(--da-symbolFill--running);
    stroke: var(--da-symbolStroke--running);
}

.psc-da_DOL__animate--rotate--running, .psc-da_VSD__animate--rotate--running {
    animation: da_symbolComponent__animate--rotate linear infinite;
    animation-duration: 3s;
}

/* Process Animations*/
@keyframes da_SymbolComponent__animate--faulted {
	0% {
		fill: var(--da-symbolFill--default);
	}
	50% {
		fill: var(--symbolFill--faulted);
	}
	100% {
		fill: var(--da-symbolFill--default);
	}
}

@keyframes da_InputComponent__animate--faulted {
	0% {
		background-color: var(--da-symbolFill--default);
	}
	50% {
		background-color: var(--symbolFill--faulted);
	}
	100% {
		background-color: var(--da-symbolFill--default);
	}
}

@keyframes da_symbolComponent__animate--rotate {
    0% {
        transform:  scale(6.4, 6.4) translate(38px,30px) rotate(0deg);
    }
    100% {
        transform:  scale(6.4, 6.4) translate(38px,30px) rotate(360deg);
    }
}
/*
 * Text Header Styles
 */

.psc-da_header1-primary { 
	font-weight: bold;
	color:  var(--da-header1-primary);
	font-size: 24px;
	text-align: left;
}

.psc-da_header2-primary { 
	font-weight: bold;
	color:  var(--da-header2-primary);
	font-size: 22px;
	text-align: left;
}

.psc-da_header3-primary { 
	font-weight: bold;
	color:  var(--da-header3-primary);
	font-size: 20px;
	text-align: left;
}

.psc-da_header4-primary { 
	font-weight: bold;
	color:  var(--da-header4-primary);
	font-size: 18px;
	text-align: left;
}

.psc-da_header5-primary { 
	font-weight: bold;
	color:  var(--da-header5-primary);
	font-size: 16px;
	text-align: left;
}


.psc-da_header1-secondary { 
	font-weight: bold;
	color:  var(--da-header1-secondary);
	font-size: 24px;
	text-align: left;
}

.psc-da_header2-secondary { 
	font-weight: bold;
	color:  var(--da-header2-secondary);
	font-size: 22px;
	text-align: left;
}

.psc-da_header3-secondary { 
	font-weight: bold;
	color:  var(--da-header3-secondary);
	font-size: 20px;
	text-align: left;
}

.psc-da_header4-secondary { 
	font-weight: bold;
	font-color:  var(--da-header4-secondary);
	font-size: 18px;
	text-align: left;
}

.psc-da_header5-secondary { 
	font-weight: bold;
	color:  var(--da-header5-secondary);
	font-size: 16px;
	text-align: left;
}


 /*
  * Navigation Styles
  */
/*Primary Nav Bar buttons*/
.psc-da_btn_navbar {
	color: var(--da-white);
}

.psc-da_btn_navbar:hover {
	color: var(--da-white);
	background-color: var(--da-gray);
}

.psc-da_navbar_almBtn > div > svg {
	fill: var(--da-symbolFill--faulted);
	stroke: var(--da-symbolStroke--faulted);
	animation: da_SymbolComponent__animate--faulted linear infinite;
	animation-duration: 2s;
}

/* Secondary Nav Bar */
.psc-da_navbar_secondary {
	border: 1px solid rgba(0,0,0,.125);
}
/* Tertiary Nav Bar */
.psc-da_navbar_tertiary {
	border-top: 1px solid rgba(0,0,0,.125);
	border-bottom: 1px solid rgba(0,0,0,.125);
	padding: 4px;
}

/*Top Logo */
.psc-da_logo {
	width: 64px;
	height: 64px;
	display: flex;
	justify-content: center;
	align-items: center;	
}

.psc-da_logo img {
	width: 48px;
	height: 48px;
}

/*.client-login .login-section .login-panel-wrapper .login-panel .icon-wrapper .panel-icon.project-icon {
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 13px;
    background-image: url("/system/images/Builtin/icons/32/arrow_down_green.png") !important;
}*/

/*Left Naigation*/
.docked-view-left {
	width: auto !important;
}

.psc-da_nav {
	width: 48px;
	transition: width 0.2s ease-in-out;
}

.psc-da_nav-section {
	max-height: 48px;
	color: #323232 /*var(--neutral-70);*/
	transition: max-height 0.2s ease-in, color 0.2s ease-in-out;
}

.psc-da_nav-section-header {
	min-height: 48px;
}

.psc-da_nav-section-arrow,
.psc-da_nav-link {
	opacity: 0;
	
	color: #323232/*var(--neutral-70);*/
	transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* hover events for left navigation */

.psc-da_nav:hover {
	width: 250px;
}

.psc-da_nav:hover .psc-da_nav-section-arrow,
.psc-da_nav:hover .psc-da_nav-link {
	opacity: 1;
}

.psc-da_nav-section:hover {
	max-height: 1000px;
	color: var(--callToAction);
	transition: max-height 0.6s ease-in-out, color 0.2s ease-in-out;
}

.psc-da_nav-section:hover .psc-da_nav-section-header .psc-da_nav-link,
.psc-da_nav-link:hover {
	color: var(--callToAction);
}

.psc-da_nav-section:hover .psc-da_nav-section-arrow {
	transform: rotate(90deg);
}

 /*
  * Buttons
  */
.psc-da_btn {
	text-align: center;
	vertical-align: middle;
	background-color: transparent;
	border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
	/*margin: 1px 1px 1px 1px;
	/*padding: 0.375rem 0.75rem;*/
	border: 1px solid transparent;
	/*transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;*/
}

.psc-da_btn:hover {
	color: var(--da-dark);
	text-decoration: none;
}

.psc-da_btn:disabled {
  opacity: 0.65;
}

.psc-da_btn:not(:disabled) {
  cursor: pointer;
}

.psc-da_btn-primary {
	color: var(--da-white-text);
	background-color: var(--da-primary);
	border-color: var(--da-primary);
	
}

.psc-da_btn-primary-selected, 
.psc-da_btn-primary:active,
.psc-da_btn-primary:hover {
	color: var(--da-white-text);
	background-color: var(--da-primary-hover);
	border-color: var(--da-primary-hover);
	
}

.psc-da_btn-secondary {
	color: var(--da-white-text);
	background-color: var(--da-gray);
	border-color: var(--da-gray);
}

.psc-da_btn-light {
	color: var(--da-black-text);
	background-color: var(--da-grey-light);
	border-color: var(--da-grey-light);
}

.psc-da_btn-dark {
	color: var(--da-white-text);
	background-color: var(--da-gray-dark);
	border-color: var(--da-gray-dark);
}


.psc-da_btn-success {
	color: var(--da-white-text);
	background-color: var(--da-success);
	border-color: var(--da-success);
	
}

.psc-da_btn-success:hover {
	color: var(--da-white-text);
	background-color: var(--da-success-hover);
	border-color: var(--da-success-hover);
	
}

.psc-da_btn-danger {
	color: var(--da-white-text);
	background-color: var(--da-danger);
	border-color: var(--da-danger);
	
}

.psc-da_btn-danger:hover {
	color: var(--da-white-text);
	background-color: var(--da-danger-hover);
	border-color: var(--da-danger-hover);
	
}

.psc-da_btn-warning {
	color: var(--da-white-text);
	background-color: var(--da-warning);
	border-color: var(--da-warning);
	
}

.psc-da_btn-warning:hover {
	color: var(--da-white-text);
	background-color: var(--da-warning-hover);
	border-color: var(--da-warning-hover);
	
}

/*Outline Buttons*/
.psc-da_btn-outline-primary {
	color: var(--da-primary);
	border-color: var(--da-primary);
	
}

.psc-da_btn-outline-primary:hover {
	color: var(--da-white-text);
	background-color: var(--da-primary);
	border-color: var(--da-primary);
}

.psc-da_btn-outline-secondary {
	color: var(--da-gray);
	border-color: var(--da-gray);
}

.psc-da_btn-outline-secondary:hover {
	color: var(--da-white-text);
	background-color: var(--da-gray);
	border-color: var(--da-gray);
}


.psc-da_btn-outline-dark {
	color: var(--da-gray-dark);
	border-color: var(--da-gray-dark);
}

.psc-da_btn-outline-dark:hover {
	color: var(--da-white-text);
	background-color: var(--da-gray-dark);
	border-color: var(--da-gray-dark);
}


/*Button Grouping*/
.psc-da_btn-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.psc-da_btn-group-nest {
	/*dummy class to go over the divs created from multiple buttons see below*/
}

.psc-da_btn-group > .psc-da_btn:first-child,
.psc-da_btn-group > .psc-da_btn-group-nest:first-child > .psc-da_btn,
.psc-da_btn-group > .psc-da_btn-group-nest:first-child > div > .psc-da_btn {
  margin-left: 0;
}

.psc-da_btn-group > .psc-da_btn:not(:last-child),
.psc-da_btn-group > .psc-da_btn-group-nest:not(:last-child) > .psc-da_btn,
.psc-da_btn-group > .psc-da_btn-group-nest:not(:last-child) > div > .psc-da_btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.psc-da_btn-group  > .psc-da_btn:not(:first-child),
.psc-da_btn-group > .psc-da_btn-group-nest:not(:first-child) > .psc-da_btn,
.psc-da_btn-group > .psc-da_btn-group-nest:not(:first-child) > div > .psc-da_btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}


/*
 * Input Group
 */

.psc-da_input-group {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
	margin-right: 0.25rem;
	margin-left: 0.25rem;
}

.psc-da_input-group-table {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;
	margin-right: 0.1rem;
	margin-left: 0.1rem;
}

.psc-da_input-group-item {
	text-align: center;
	font-size: 0.85rem;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
}


.psc-da_input-group-table > .psc-da_input-group-item {
	border-radius: 0rem;

}

/*.psc-da_input-group-table-item {
	text-align: center;
	font-size: 0.85rem;
	border: 1px solid #ced4da;
}*/

.psc-da_input-group-item-text {
	color: #495057;
	background-color: #e9ecef;
	white-space: nowrap;
	padding: .375rem .75rem;
}

.psc-da_input-group-item-input {
	border: 0px;
}
	
.psc-da_input-group  > .psc-da_input-group-item:not(:first-child),
.psc-da_input-group  > div > .psc-da_input-group-item:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.psc-da_input-group > .psc-da_input-group-item:not(:last-child),
.psc-da_input-group > div > .psc-da_input-group-item:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}


/* 
 * Generic Grouping
 */

.psc-da_card {
	border: 1px solid rgba(0,0,0,.125);
	border-radius: 0.25rem;
	background: var(--containerRoot);
	margin: 4px;
	padding: 4px;
}

.psc-da_card-header {
	padding: .75rem 1.25rem;
	margin-bottom: 4px;
	margin-top: -4px;
	margin-left: -4px;
	margin-right: -4px;
	background-color: rgba(0,0,0,.03);
	border-bottom: 1px solid rgba(0,0,0,.125);
}

.psc-da_card-footer {
	padding: .75rem 1.25rem;
	margin-bottom: -4px;
	margin-top: 4px;
	margin-left: -4px;
	margin-right: -4px;
	background-color: rgba(0,0,0,.03);
	border-top: 1px solid rgba(0,0,0,.125);
}

/* 
 * Dashboard Styling
 */
.psc-da_dashboard {
	background: -webkit-linear-gradient(
		left,
		#1e5799 0%,
		#2989d8 30%,
		#207cca 63%,
		#7db9e8 100%
	);
	background: linear-gradient(
		to right,
		#1e5799 0%,
		#2989d8 30%,
		#207cca 63%,
		#7db9e8 100%
	);
	
}
 
.psc-da_dashboard-widget {
	border: 2px solid rgba(0,0,0,.25);
	border-radius: 4px;
}

.psc-da_dashboard-widget-body {
	background-color: var(--da-white);
	border-radius: 4px;
}

/* Style the modal header (top bar) */
.popup .ia_popup .popup-modal  {
	height: 0rem;
	border-radius: 5rem;
	border: var(--containerBorder);

}

.ia_popup__header {
    font-size: 18px;
    font-weight: bold;
    color:  var(--da-header2-secondary);
   text-align: left;
   vertical-align: top; 
}

.client-root .popup .popup-header {
    height: 2rem;
    padding: .25rem;
}

/*
.client-root .popup {
    height: 0rem;
    font-size: 20px;
    font-weight: bold;
    color:  var(--da-header2-secondary);
}
*/

.iaDropdownCommon .iaDropdownCommon_value {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: pre-line;
    padding: 2px 4px;
}

.ia_dashboardComponent__cell, .psc-da_dashboard-cell {
	border: 2px solid #42b983;
	background-color: rgba(66,185,131,.14);
	
}

/* Dashboard Gauge Style */
/* Inner Pin Radius*/
.psc-da_Gauge {
	overflow: hidden !important;
}

/*
 * Totaliser
 */
.psc-da_ShowDrillDownTotaliser {
	max-height: 100%;
	overflow:hidden;	
}

.psc-da_HideDrillDownTotaliser {
	max-height:0;
	overflow:hidden;
}

/*
 * Chat Messaging
 */
.psc-da_chat-message-text {
    background: var(--da-neutral-20);
    border-radius: .6rem;
    padding: 1rem 1.25rem;
    color: #343a40
}

.psc-da_chat-message-text-me {
    background: var(--da-info);
    border-radius: .6rem;
    color: #fff;
    text-align: right;
}

/*
 * Notificatoins
 */
.psc-da_notificationRepeater {
	overflow: auto;
	position: fixed;
	top: 65px;
	right: 0px;
	max-width: 100%;
	width: 360px;
}

.psc-da_notification {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.psc-da_notification-success {
	color: var(--da-success);
	background-color: var(--da-green-20);
	border-color: var(--da-green-40);
}

.psc-da_notification-danger {
	color: var(--da-danger);
	background-color: var(--da-red-20);
	border-color: var(--da-red-40);
}

.psc-da_notification-warning {
	color: var(--da-warning);
	background-color: var(--da-yellowOrange-20);
	border-color: var(--da-yellowOrange-40);
}

.psc-da_notification-info {
	color: var(--da-info);
	background-color: var(--da-blue-20);
	border-color: var(--da-bluee-40);
}

@keyframes da_notification-slide-in-right-enter {
	from {transform: translateX(125%);}
	to {transform: translateX(0%);}
}

@keyframes da_notification-slide-in-right-exit {
	from {transform: translateX(0%);}
	to {transform: translateX(125%);}
}

@keyframes da_notification-slide-in-left-enter {
	from {transform: translateX(-125%);}
	to {transform: translateX(0%);}
}

@keyframes da_notification-slide-in-left-exit {
	from {transform: translateX(0%);}
	to {transform: translateX(-125%);}
}

@keyframes da_notification-slide-in-top-enter {
	from {transform: translateY(-125%);}
	to {transform: translateY(0%);}
}

@keyframes da_notification-slide-in-top-exit {
	from {transform: translateY(0%);}
	to {transform: translateY(-125%);}
}

@keyframes da_notification-slide-in-bottom-enter {
	from {transform: translateY(125%);}
	to {transform: translateY(0%);}
}

@keyframes da_notification-slide-in-bottom-exit {
	from {transform: translateY(0%);}
	to {transform: translateY(125%);}
}

@keyframes da_notification-fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes da_notification-fade-out {
	from {opacity: 1;}
	to {opacity: 0;}
}



/*
 * CSS Grids 
 * https://www.youtube.com/watch?v=8ahd-HET2_o
 * https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
 * https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
 * https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
*/

.psc-da_dashboard-css-grid {
	display: grid;
	aspect-ratio: 4 / 3; 
	grid-template-columns : repeat(4, 1fr);
	grid-template-areas:
		"so1 so2 so3 . "
		"so4 . . .  "
		". . . . ";
	gap: 5px;
}

@media (max-width: 576px) {
	.psc-da_dashboard-css-grid {
		display: grid;
		aspect-ratio: 2 / 3;
		grid-template-columns : repeat(2, 1fr);
		grid-template-areas:
			"so1 so2"
			"so3 so4"
			". . ";
		gap: 5px;
	}
}



/* BEGIN STYLE CLASSES */