@charset "UTF-8";
/* CSS Document */


/* START CSS Reset */

/*
  via Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

input, button, textarea, select {
  font: inherit;
}

/* END CSS Reset */



:root {
	
	/*******************************************************************/
	/**************** COLOR VARIABLES - CLINICAL SCREEN ****************/
	/*******************************************************************/
	
	
	--color-background: #121212;
	
	--color-quad-instrument-inactive-text: #767676;
	--color-quad-instrument-inactive: #1E1E1E;
	
	--color-quad-instrument-active-text: #C5C5C5;
	--color-quad-instrument-active: #2E2E2E;
	
	--color-favorites-palette: #1E1E1E;
	
	--color-blue-interactive: #5F8BFF;
	
	--color-text: #E6E6E6;
	--color-text-disabled: #868686;
	
	
	/**************** ENERGY MODE COLORS ****************/
	
	--color-monopolar-cut: #FEAF39;
	--color-monopolar-coag: #5DB1FF;
	--color-bipolar: #02A3BA;
	--color-ligasure: #BA75FF;
	
	
	/**************** ENERGY MODE DROP DOWNS ****************/
	
	--color-modality-text: #161616;
	--color-mode-selector-text: #D1D1D1;
	--color-mode-selector-border-top: #555555;
	--color-mode-selector-background: #414141;
	
	
	/**************** BASIC DROP DOWNS ****************/
	
	--color-dropbtn-border: #898989;
	--color-dropdown-text: #D1D1D1;
	--color-dropdown-border-top: #555555;
	--color-dropdown-background: #414141;
	
	
	
	/**************** ENERGY MODE INACTIVE QUADRANTS ****************/
	
	--color-modality-text-inactive: #888888;
	
	--color-mode-inactive: #1E1E1E;
	--color-mode-borders-inactive: #383838;
	
	--color-mode-selector-text-inactive: #888888;
	--color-mode-selector-background-inactive: #2C2B2B;
	
	
	
	--color-dropdown-text: #B3B3B3;
	--color-dropdown-hover: #363636;
	--color-dropdown-text-selected: #E6E6E6;
	--color-dropdown-selected: #2E2E2E;
	
	
	/**************** ENERGY SETTINGS POWER LEVEL ****************/
	
	--color-power-text: #FDFDFD;
	--color-power-text-energy-applied: #363636;
	--color-power-text-inactive: #818181;
	
	--color-power-button-text: #C2C2C2;
	--color-power-button-text-inactive: #7A7A7A;
	
	--color-power-button: #343434;
	--color-power-button-selected: #272727;
	--color-power-button-inactive: #1E1E1E;
	
	
	/**************** TOGGLES ****************/
	
	--color-toggle-slider: #FDFDFD;
	--color-toggle-border-off: #A3A3A3;
	--color-toggle-slider-disabled: #737373;
	--color-power-button-inactive: #1E1E1E;
	
	
	/**************** DIVIDER ****************/
	
	--color-divider: #727272;
	
	
	/**************** ALARMS ****************/
	
	--color-high: #B00000;
	--color-medium-low: #FFF7CF;
	--color-info: #1E1E1E;
	
	--color-text-high: #FDFDFD;
	--color-text-medium-low: #161616;
	--color-text-info: #FDFDFD;
	
	--color-alarm-button: #FDFDFD;
	--color-alarm-button-text: #161616;
	--color-alarm-button-border: #D1D1D1;
	--color-alarm-button-selected: #3F3F3F;
	--color-alarm-button-selected-text: #FDFDFD;
	
	/**************** MODALS ****************/
	
	--color-modal-border: #A0A0A0;
	--color-modal-background: #414141;
	
}



/**************** BASIC SET UP ****************/


.demo-mode {
	width: 24px;
	height: 768px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: var(--color-high);
}

body {
	margin: 0px;
	padding: 0px;
	font-family: "Noto Sans Display", sans-serif;
	font-weight: 400;
}

.clinical-screen {
	width: 1024px;
	height: 768px;
	margin: 0px;
	padding-top: 24px;
	padding-bottom: 0px;
	padding-right: 24px;
	padding-left: 24px;
	background-color: var(--color-background);
}

.quadrant-container {
	display: inline-flex;
	align-content: flex-start;
	flex-wrap: wrap;
}

.quadrant {
	position: relative;
	width: 478px;
	height: 316px;
	margin: 0px;
	padding-top: 14px;
	padding-bottom: 14px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 18px;
	line-height: 14px;
	border-radius: 8px;
	background-color: var(--color-quad-instrument-inactive);
}

.quadrant-active {
	background-color: var(--color-quad-instrument-active);
}

.quadrant-title {
	color: var(--color-quad-instrument-inactive-text);
}

.quadrant-active-title {
	font-weight: 600;
	color: var(--color-quad-instrument-active-text);
}

.quadrant-1 { /* Defines spacing between quadrants */
	margin-right: 20px;
	margin-bottom: 20px;
}

.quadrant-2 { /* Defines spacing between quadrants */
	margin-bottom: 20px;
}

.quadrant-3 { /* Defines spacing between quadrants */
	margin-right: 20px;
}

.footer {
	width: 976px;
	height: 64px;
	margin-top: 24px;
	display: inline-flex;
}

.settings-volume-controls {
	width: 164px;
	height: 64px;
	padding-left: 16px;
	padding-right: 16px;
}

.icon-settings {
	width: 60px;
	height: 60px;
	padding-right: 6px;
	padding-bottom: 4px;
}

.icon-gear {
	width: 60px;
	height: 60px;
	padding-left: 6px;
	padding-bottom: 4px;
}

.favorites-palette {
	width: 648px;
	height: 64px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	background-color: var(--color-favorites-palette);
	color:  var(--color-text);
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.recents {
	width: 164px;
	height: 64px;
	padding-left: 16px;
	padding-right: 16px;
}


/**************** MONOPOLAR TWO COLUMN SET UP ****************/


.mode-wrapper {
	width: 456px;
	margin-top: 10px;
}

.mode-wrapper-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
}

.left-column {
	width: 222px;
	height: 100%;
	margin-right: 12px;
}

.right-column {
	width: 222px;
	margin-bottom: 10px;
}



/**************** MODE SELECTORS ****************/


.mode-selectors {
	height: 56px;
	width: 222px;
	border-radius: 6px;
	border: 2px solid var(--color-blue-interactive);
}

/* NOTE: There is a hex color defined here for the arrow which has to be written out rather than be a variable. */
.mode-monopolar {
	width: 112px;
	height: 52px; /* -4px to accommodate borders */
	font-size: 27px;
	font-weight: 400;
	line-height: 52px;
	color: var(--color-mode-selector-text);
	padding-left: 12px;
	border-radius: 4px;
	float: right;
	background-color: var(--color-mode-selector-background);
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0L8 10L0 0H16Z' fill='%236790FF' fill-rule='nonzero'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 88px 22px;
}

.mode-bipolar {
	width: 178px;
	height: 52px; /* -4px to accommodate borders */
	background-color: var(--color-mode-selector-background);
	font-size: 27px;
	font-weight: 400;
	line-height: 52px;
	color: var(--color-mode-selector-text);
	padding-left: 12px;
	border-radius: 4px;
	float: right;
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0L8 10L0 0H16Z' fill='%236790FF' fill-rule='nonzero'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 154px 22px;
}

/* NOTE: There is a hex color defined here for the arrow which has to be written out rather than be a variable. */
.mode-inactive {
	background-color: var(--color-mode-selector-background-inactive);
	color: var(--color-mode-selector-text-inactive);
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0L8 10L0 0H16Z' fill='%236790FF' opacity='0.7' fill-rule='nonzero'/%3E%3C/svg%3E");
}

.modality-monopolar {
	height: 52px; /* -4px to accommodate borders */
	width: 106px;
	font-size: 27px;
	font-weight: 600;
	line-height: 52px;
	padding-left: 12px;
	color: var(--color-modality-text);
	float: left;
}

.modality-bipolar {
	height: 52px; /* -4px to accommodate borders */
	width: 40px;
	font-size: 27px;
	font-weight: 600;
	line-height: 52px;
	padding-left: 12px;
	color: var(--color-modality-text);
	float: left;
}

.modality-ligasure {
	height: 52px; /* -4px to accommodate borders */
	width: 40px;
	font-size: 27px;
	font-weight: 600;
	line-height: 52px;
	padding-left: 12px;
	color: var(--color-modality-text);
	float: left;
}

/* Inactive quadrant text color */
.modality-inactive {
	color: var(--color-modality-text-inactive);
}

/* Inactive quadrant background color */
.mono-1-cut-inactive, .mono-1-coag-inactive, .mono-2-cut-inactive, .mono-2-coag-inactive {
	background-color: var(--color-mode-inactive);
}

/* Active Monopolar CUT mode selector background color */
.mono-1-cut, .mono-2-cut {
	background-color: var(--color-monopolar-cut);
}

/* Active Monopolar COAG mode selector background color */
.mono-1-coag, .mono-2-coag, .shared-coag {
	background-color: var(--color-monopolar-coag);
}

/* Active Monopolar CUT mode selector borders */
.mono-1-cut-borders, .mono-2-cut-borders {
	border: 2px solid var(--color-monopolar-cut);
}

/* Active Monopolar COAG mode selector borders */
.mono-1-coag-borders, .mono-2-coag-borders, .shared-coag-borders {
	border: 2px solid var(--color-monopolar-coag);
}

/* Inactive Monopolar CUT mode selector borders */
.mono-1-cut-borders-inactive, .mono-1-coag-borders-inactive, .mono-2-cut-borders-inactive, .mono-2-coag-borders-inactive {
	border-color: var(--color-mode-borders-inactive);
}

/* Active Bipolar mode selector background color */
.bipolar-1 {
	background-color: var(--color-bipolar);
}

/* Active Bipolar mode selector borders */
.bipolar-1-borders {
	border: 2px solid var(--color-bipolar);
}

/* Active LigaSure mode selector background color */
.ligasure {
	background-color: var(--color-ligasure);
}

/* Active LigaSure mode selector borders */
.ligasure-borders {
	border: 2px solid var(--color-ligasure);
}





/* Bipolar resection specific styles */

/* Active bipolar resection CUT mode selector background color */
.bipolar-resection-cut {
	background-color: var(--color-monopolar-cut);
}

/* Active bipolar resection COAG mode selector background color */
.bipolar-resection-coag {
	background-color: var(--color-monopolar-coag);
}

/* Active bipolar resection CUT mode selector borders */
.bipolar-resection-cut-borders {
	border: 2px solid var(--color-monopolar-cut);
}

/* Active bipolar resection COAG mode selector borders */
.bipolar-resection-coag-borders {
	border: 2px solid var(--color-monopolar-coag);
}

/* Inactive bipolar resection CUT mode selector background color */
.bipolar-resection-cut-inactive {
	background-color: var(--color-mode-inactive);
}

/* Inactive bipolar resection COAG mode selector background color */
.bipolar-resection-coag-inactive {
	background-color: var(--color-mode-inactive);
}

/* Inactive bipolar resection CUT mode selector borders */
.bipolar-resection-cut-borders-inactive {
	border: 2px solid var(--color-mode-borders-inactive);
}

/* Inactive bipolar resection COAG mode selector borders */
.bipolar-resection-coag-borders-inactive {
	border: 2px solid var(--color-mode-borders-inactive);
}


/**************** MONOPOLAR AND BIPOLAR DROP DOWNS ****************/


.dropdown-mono-1-cut, .dropdown-mono-1-coag, .dropdown-mono-2-cut, .dropdown-mono-2-coag, .dropdown-bipolar-1, .dropdown-shared-coag {
	position: relative;
	display: inline-block;
}

.dropbtn {
	width: 218px; /* -4px to accommodate borders */
	height: 52px; /* -4px to accommodate borders */
	font-size: 27px;
	line-height: 52px;
	border: none;
	border-radius: 4px;
	text-align: left;
	cursor: pointer;
	margin: 0px;
	padding: 0px;
}

.dropdown-content {
	width: 222px;
	display: none;
	padding-bottom: 3px;
	position: absolute;
	top: 49px;
	left: -2px; /* To adjust for 2px offset on left */
	border-top: 1px solid var(--color-mode-selector-border-top);
	border-right: 2px solid var(--color-blue-interactive);
	border-left: 2px solid var(--color-blue-interactive);
	border-bottom: 2px solid var(--color-blue-interactive);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	background-color: var(--color-mode-selector-background);
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	height: 66px;
	font-size: 24px;
	font-weight: 400;
	line-height: 66px;
	color: var(--color-dropdown-text);
	padding-left: 40px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	color: var(--color-dropdown-text-selected);
	background-color: var(--color-dropdown-hover);
}

.selected {
	color: var(--color-dropdown-text-selected) !important;
	font-weight: 500 !important;
	background-repeat: no-repeat;
	background-position: 18px 26px;
	background-color: var(--color-dropdown-selected);
	background-image: url(images/check.svg);
}

/* Displays the drop down menu */
.dropdown-mono-1-cut:hover .dropdown-content, .dropdown-mono-2-cut:hover .dropdown-content, .dropdown-mono-1-coag:hover .dropdown-content, .dropdown-mono-2-coag:hover .dropdown-content, .dropdown-bipolar-1:hover .dropdown-content, .dropdown-shared-coag:hover .dropdown-content {
	display: block;
}

/* When .mono-1-cut is hovered over, make .mono-1-cut-borders highlight */
	body:has(.mono-1-cut:hover, .dropdown-mono-1-cut:hover) .mono-1-cut-borders {
  		border: 2px solid var(--color-blue-interactive);
}

/* When .mono-1-coag is hovered over, make .mono-1-coag-borders highlight */
	body:has(.mono-1-coag:hover, .dropdown-mono-1-coag:hover) .mono-1-coag-borders {
  		border: 2px solid var(--color-blue-interactive);
}

/* When .mono-2-cut is hovered over, make .mono-2-cut-borders highlight */
	body:has(.mono-2-cut:hover, .dropdown-mono-2-cut:hover) .mono-2-cut-borders {
  		border: 2px solid var(--color-blue-interactive);
}

/* When .mono-2-coag is hovered over, make .mono-2-coag-borders highlight */
	body:has(.mono-2-coag:hover, .dropdown-mono-2-coag:hover) .mono-2-coag-borders {
  		border: 2px solid var(--color-blue-interactive);
}

/* When .bipolar-1 is hovered over, make .bipolar-1-borders highlight */
	body:has(.bipolar-1:hover, .dropdown-bipolar-1:hover) .bipolar-1-borders {
  		border: 2px solid var(--color-blue-interactive);
}

/* When .bipolar-1 is hovered over, make .bipolar-1-borders highlight */
	body:has(.shared-coag:hover, .dropdown-shared-coag:hover) .shared-coag-borders {
  		border: 2px solid var(--color-blue-interactive);
}

/* Flips the blue arrow when Monopolar drop menu opens */
/* NOTE: There is a hex color defined here for the arrow which has to be written out rather than be a variable. */
.dropdown-mono-1-cut:hover .dropbtn .mode-monopolar, .dropdown-mono-1-coag:hover .dropbtn .mode-monopolar, .dropdown-mono-2-cut:hover .dropbtn .mode-monopolar, .dropdown-mono-2-coag:hover .dropbtn .mode-monopolar, .dropdown-shared-coag:hover .dropbtn .mode-monopolar {
	background-color: var(--color-mode-selector-background);
	color: var(--color-mode-selector-text);
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10L8 6.99382e-07L16 10L0 10Z' fill='%236790FF' fill-rule='nonzero'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 88px 20px;
}

/* Flips the blue arrow when Bipolar drop menu opens */
/* NOTE: There is a hex color defined here for the arrow which has to be written out rather than be a variable. */
.dropdown-bipolar-1:hover .dropbtn .mode-bipolar {
	background-color: var(--color-mode-selector-background);
	color: var(--color-mode-selector-text);
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10L8 6.99382e-07L16 10L0 10Z' fill='%236790FF' fill-rule='nonzero'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 154px 20px;
}

.mode-monopolar:hover, .mode-bipolar:hover {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}



/**************** POWER SETTINGS ****************/

.power-level-wrapper {
	width: 222px;
	height: 205px;
	margin-top: 8px;
	border-radius: 4px;
}

.power-level {
	width: 222px;
	height: 120px;
	line-height: 110px;
	font-size: 120px;
	font-weight: 400;
	color: var(--color-power-text-inactive);
	text-align: center;
}

.power-level-active {
	font-weight: 500;
	color: var(--color-power-text);
}

.power-level-empty {
	font-weight: 200;
}


/**************** POWER BUTTONS ****************/

/* Lays out buttons side by side and spaces them out. */
.power-button-wrapper {
	width: 222px;
	margin-top: 16px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 20px 20px;
}

/* Styles the buttons */
.plus, .minus {
	width: 70px;
	height: 70px;
	border: 2px solid var(--color-power-button-text);
	border-radius: 40px;
	display: flex;
    align-items: center;
	justify-content: center;
	background-color: var(--color-power-button);
}

/* Styles the plus and minus icons */
.plus-minus-icon {
	width: 30px;
	height: 30px;
	stroke-width: 4;
	stroke-linecap: square;
	stroke: var(--color-power-button-text);
}

.plus-minus-icon-inactive {
	stroke: var(--color-power-text-inactive);
}

.plus-inactive, .minus-inactive {
	border: 2px solid var(--color-power-button-text-inactive);
	background-color: var(--color-power-button-inactive);
}


.power-button-disabled {
	opacity: .15;
}


a:active .plus, a:active .minus { /* Pressed state */
	background-color: var(--color-power-button-selected);
}


/**************** ENERGY APPLIED ****************/

/* Colors the power number */
.power-level-energy-applied {
	color: var(--color-power-text-energy-applied);
}

/* These styles color the boxes */
.mono-cut-energy-applied { 
	background-color: var(--color-monopolar-cut);
}

.mono-coag-energy-applied {
	background-color: var(--color-monopolar-coag);
}

.bipolar-energy-applied {
	background-color: var(--color-bipolar);
}

.ligasure-energy-applied {
	background-color: var(--color-ligasure);
}

.ligasure-circle {
	width: 166px;
	height: 166px;
	padding-right: 28px;
	padding-left: 28px;
	padding-top: 16px;
	padding-bottom: 23px;
}

/* Animates the LigaSure cycle */
.ligasure-cycle {
	animation: spinLigaSure 2s steps(24) infinite;
}

@keyframes spinLigaSure {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}


/**************** RIGHT-HAND MODE CONTROLS ****************/

/* The container for the toggles and drop downs on Bipolar 1, LigaSure, and future instruments */
.controls-right {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-direction: column;
}


/**************** Toggles ****************/

.switch {
	width: 72px;
	height: 40px;
	position: relative;
	display: inline-block;
}

.switch input { 
	width: 0px;
	height: 0px;
	opacity: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	border: 2px solid var(--color-toggle-border-off);
	background-color: var(--color-dropdown-selected);
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 30px;
	width: 30px;
	left: 3px;
	bottom: 3px;
	background-color: var(--color-toggle-slider);
	-webkit-transition: .2s;
	transition: .2s;
}

input:checked + .slider {
	background-color: var(--color-blue-interactive);
	border: 2px solid var(--color-blue-interactive);
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--color-blue-interactive);
}

input:checked + .slider:before {
	background-image: url("images/check.svg");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-transform: translateX(33px);
	-ms-transform: translateX(33px);
	transform: translateX(33px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 100%;
	background-image: url("images/dash-toggle.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.toggle-label {
	width: 126px;
	height: 36px; 
	color: var(--color-text);
	font-size: 20px;
	font-weight: 400; 
	line-height: 36px;
	float: left; 
}


/* Modifies .toggle-label so shared coag toggle can fit in the drop menu */
.label-shared-coag {
	width: 80px;
}

/* Adds some padding and a rule to separate the shared coag toggle from modes */
.dropdown-content-shared-coag-toggle {
	padding-left: 40px;
	padding-top: 20px;
	padding-bottom: 16px;
	border-top: .5px solid #727272;
}


/**************** DISABLED TOGGLE ****************/


.switch-disabled {
	position: relative;
	display: inline-block;
	width: 72px;
	height: 40px;
}

.switch-disabled input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.slider-disabled {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 2px solid var(--color-toggle-slider-disabled);
}

.slider-disabled:before {
	position: absolute;
	content: "";
	height: 30px;
	width: 30px;
	left: 3px;
	bottom: 3px;
	background-color: none;
	border: 2px solid var(--color-toggle-slider-disabled);
}

/* Rounded sliders */
.slider-disabled.round {
	border-radius: 34px;
}

.slider-disabled.round:before {
	border-radius: 100%;
	background-image: url("images/dash-toggle.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.toggle-label-disabled {
	color: var(--color-text-disabled);
}



/**************** BASIC DROP DOWN ****************/


/* Style the dropdown selector */
.dropbtn-standard {
	position: relative;
	width: 128px;
	height: 50px;
	font-size: 20px;
	font-weight: 400;
	text-align: left;
	border-radius: 6px;
	border: 2px solid var(--color-dropbtn-border);
	cursor: pointer;
	color: var(--color-text);
	padding-left: 16px;
	background-color: var(--color-dropdown-background);
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0L8 10L0 0H16Z' fill='%236790FF' fill-rule='nonzero'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 100px 18px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown-standard {
	position: relative;
	display: inline-block;
}

/* Dropdown content (Hidden by default) */
.dropdown-content-standard {
	position: absolute;
	right: 0px;
	bottom: 45px; /* NOTE - Added this line to make menu drop up */
	width: 128px;
	display: none;
	background-color: var(--color-dropdown-background);
	box-shadow: 8px 0px -8px 0px rgba(0,0,0,0.2);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-top: 2px solid var(--color-blue-interactive);
	border-left: 2px solid var(--color-blue-interactive);
	border-right: 2px solid var(--color-blue-interactive);
	border-bottom: 1px solid var(--color-dropdown-border-top);
	padding-top: 3px;
	z-index: 1;
}

/* Menu items inside the dropdown */
.dropdown-content-standard a {
	height: 55px;
	font-size: 20px;
	padding-left: 40px;
	color: var(--color-dropdown-text);
	line-height: 55px;
	text-decoration: none;
	display: block;
}

/* Change color of menu items on hover */
.dropdown-content-standard a:hover {
	color: var(--color-dropdown-text-selected);
	background-color: var(--color-dropdown-hover);
}

/* Show the dropdown menu on hover */
.dropdown-standard:hover .dropdown-content-standard {
	display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown and flip the arrow */
.dropdown-standard:hover .dropbtn-standard {
	border: 2px solid var(--color-blue-interactive);
	background-color: var(--color-dropdown-background);
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10L8 6.99382e-07L16 10L0 10Z' fill='%236790FF' fill-rule='nonzero'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 100px 17px;
}

/* The selected menu item with a checkmark beside it */
.selected-standard {
	font-weight: 500 !important;
	color: var(--color-dropdown-text-selected) !important;
	background-color: var(--color-dropdown-selected);
	background-image: url(images/check.svg);
	background-repeat: no-repeat;
	background-position: 18px 19px;
}

/* Label to left of a drop menu */
.dropdown-label {
	width: 70px;
	float: left;
	font-size: 20px;
	font-weight: 400;
	height: 48px;
	line-height: 48px;
}

/**************** FORM DIVIDER (USED ON BIPOLAR SETTINGS) ****************/

.divider-options {
	width: 222px;
	height: .5px;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: var(--color-divider);
}




/**************** SHARED COAG ****************/



/* Container for all the elements of shared coag */
.shared-coag-wrapper {
	width: 976px;
	display: inline-flex;
	align-content: flex-start;
	flex-wrap: wrap;
}

/* Centers the title in the new wider space */
.title-shared-coag {
	text-align: center;
	display: block;
}

/* Decreases the default width of the two CUT quadrants for shared coag */
.quadrant-shared-coag-cut {
	width: 242px;
}


/* Expands the default width of the COAG quadrant for shared coag. */
.quadrant-shared-coag {
	width: 430px;
}


/* The small gray bars that connect CUT and COAG when shared coag is selected. */
.shared-coag-connector {
	width: 31px;
	height: 82px;
	margin-top: 119px;
	background-color: #505050;
}


/* Adds space between the title and the other shared coag elements. */
.mode-wrapper-shared-coag {
	margin-top: 10px;
}



.dropdown-shared-coag {
}


/* Expands the default width of the drop menu for shared coag. */
.dropdown-content-shared-coag {
	width: 408px;
}


/* Expands the default width of the coag selector to fit the shared coag space. */
.dropbtn-shared-coag {
	width: 404px; /* -4px to accommodate borders */
}


/* Expands the default width of the coag selector to fit the shared coag space. */
.mode-selectors-shared-coag {
	width: 408px;
}


/* Defines the color of the borders when drop menu opens */
.shared-coag-borders {
	border: 2px solid var(--color-monopolar-coag);
}


/* Expands the default container width around the power number and the buttons during shared coag. */
.power-level-wrapper-shared-coag {
	width: 408px;
	display: inline-flex;
	align-content: flex-start;
	flex-wrap: wrap;
}

/* Expands the default width of the container around the power number during shared coag. */
.power-level-shared-coag {
	width: 296px;
}

/* Expands the default width of the container around the power buttons during shared coag. */
.power-button-wrapper-shared-coag {
	width: 296px;
}

/* The arrow that appears with a devices applies coag energy during shared coag. */
.shared-coag-arrow-left {
	width: 40px;
	margin-top: 18px;
	margin-left: 16px;
}

/* The arrow that appears with a devices applies coag energy during shared coag. */
.shared-coag-arrow-right {
	width: 40px;
	margin-top: 18px;
	margin-right: 16px;
}

/* Styles the shared coag arrows pointing left and right */
.shared-coag-arrow-left-icon, .shared-coag-arrow-right-icon {
	width: 40px;
	height: 82px;
	fill: var(--color-power-text-energy-applied);
}



/**************** ALARMS ****************/

.alarm {
    position: absolute;
	top: 38px;
    left: 0px;
    width: 478px;
    height: 278px;
	padding-top: 25px;
	padding-bottom: 20px;
	padding-right: 35px;
	padding-left: 35px;
	font-weight: 400;
	line-height: 1.3em;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
	z-index: 1000;
	
}

/* Container for the warning icon and the title. */
.alarm-title-container {
	display: flex;
	flex-direction: row;
	height: 66px;
}

/* Title set to vertically center in the 72px block. */
.alarm-title {
	width: 400px;
	heignt: 66px;
	font-size: 1.1em;
	font-weight: 500;
	margin-top: auto;
	margin-bottom: auto;
}

/* Sets the text and background color for a high severity alarm. */
.alarm-high {
	color:  var(--color-text-high);
	background-color: var(--color-high);
}

/* The light warning icon that works with dark colored quadrants. */
.alarm-high .icon-warning, .alarm-info .icon-warning {
	display: block;
	width: 60px;
	heignt: 66px;
	background-image: url("data:image/svg+xml,%3Csvg width='44' height='42' viewBox='0 0 44 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42.8,38.5L23.6,1.8c-.7-1.3-2.5-1.3-3.2,0L1.2,38.5c-.6,1.2.2,2.7,1.6,2.7h38.4c1.4,0,2.2-1.4,1.6-2.7ZM20.3,12.7h3.4v15h-3.4v-15ZM22,36.7c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2,2.2,1,2.2,2.2-1,2.2-2.2,2.2Z' fill='%23FFFFFF' opacity='0.87' fill-rule='nonzero'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0px 12px;
}

/* Sets the text and background color for a medium or low severity alarm. */
.alarm-medium-low {
	color:  var(--color-text-medium-low);
	background-color: var(--color-medium-low);
}

/* The dark warning icon that works with dark colored quadrants. */
.alarm-medium-low .icon-warning {
	display: block;
	width: 60px;
	heignt: 72px;
	background-image: url("data:image/svg+xml,%3Csvg width='44' height='42' viewBox='0 0 44 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42.8,38.5L23.6,1.8c-.7-1.3-2.5-1.3-3.2,0L1.2,38.5c-.6,1.2.2,2.7,1.6,2.7h38.4c1.4,0,2.2-1.4,1.6-2.7ZM20.3,12.7h3.4v15h-3.4v-15ZM22,36.7c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2,2.2,1,2.2,2.2-1,2.2-2.2,2.2Z' fill='%23161616' opacity='0.87' fill-rule='nonzero'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0px 12px;
}

/* Sets the text and background color for an info level alarm. */
.alarm-info {
	color: var(--color-text-info);
	background-color: var(--color-info);
}


/* Add this as a compound style to the icon to hide it. */
.icon-warning-hide {
	display: none !important;
}


.alarm-content {
	width: 400px;
	height: auto;
	overflow: hidden;
}

.alarm-content img {
	float: right;
	width: 100px;  /* Determines icon size. */
	height: auto;
	margin-left: 15px;
	margin-bottom: 15px;
}

.alarm-content ul {
	margin-top: 5px;
	padding-inline-start: 35px;
}

.alarm-content ul li {
	padding-bottom: 6px;
}

/* Small E code and message that appears in lower right. */
.alarm-error-code {
	position: absolute;
	bottom: 12px;
	right: 20px;
	width: 350px;
	font-size: 16px;
	font-weight: 400;
	text-align: right;
}

/* Optional button to dismiss an error. */
.alarm-button a:link, .alarm-button a:visited {
	display: inline-block;
	min-height: 40px;
	width: 140px;
	margin-top: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	color: var(--color-alarm-button-text);
	text-align: center;
	text-decoration: none;
	font-weight: 500;
	background-color: var(--color-alarm-button);
	border-radius: 100px;
	border: 2px solid var(--color-alarm-button-border);
}

.alarm-button a:hover, .alarm-button a:active {
	color: var(--color-alarm-button-selected-text);
	background-color: var(--color-alarm-button-selected);
}

/* Darkens the screen for the central panel to appear. Probably a better way to implement in React? */
.blackout {
    position: 0px 0px;
	width: 1024px;
	height: 768px;
    position: absolute;
    padding: 0px;
    margin: 0px;
    background-color: rgba(0,0,0,0.60);
    z-index: 5000;
}

.alarm-centered {
	position: absolute;
    width: 482px;
    height: 282px;
    margin-top: 210px; /* Positioning the box vertically on screen. */
    margin-left: 271px; /* Positioning the box horizontally on screen. */
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 18px;
    line-height: 14px;
	border-radius: 8px;
    border: 2px solid var(--color-modal-border);
	background-color: var(--color-modal-background);
    -webkit-box-shadow: 20px 20px 20px 20px rgba(0,0,0,0.20);
    box-shadow: 8px 8px 8px 5px rgba(0,0,0,0.20);
	z-index: 5500;
}

.rem-pad {
	margin-top: 46px; /* Positioning the box vertically on screen. */
}

.rem-pad-minimized {
	position: absolute;
    width: 110px;
    height: 90px;
    margin-top: 140px; /* Positioning the box vertically on screen. */
    margin-left: 452px; /* Positioning the box horizontally on screen. */
    padding-top: 8px;
    padding-bottom: 0px;
    padding-left: 17px;
    padding-right: 0px;
	border-radius: 8px;
    border: 2px solid var(--color-modal-border);
	background-color: var(--color-high);
    -webkit-box-shadow: 20px 20px 20px 20px rgba(0,0,0,0.20);
    box-shadow: 8px 8px 8px 5px rgba(0,0,0,0.20);
	z-index: 1;
}

.rem-pad-minimized-content {
	width: 110px;
	height: auto;
}

.rem-pad-minimized-content img {
	float: left;
	width: 72px;  /* Determines icon size. */
	height: auto;
	margin-left: 0px;
	margin-bottom: 0px;
}

/* Modifies the quadrant alarm styles to be slightly shorter (there's no quadrant title) and rounds the corners at the top. */
.alarm-centered .alarm {
	top: 0px;
	border-radius: 8px;
}